@import url('/static/fonts/almarai.css');

/* ═══════════════════════════════════════════════════════════ طَيف · TAYF
   Two surfaces on purpose.

   The landing is paper: warm white, ink, hairlines, one accent per lab.
   The labs are a workbench: charcoal, where the only light in the room
   comes from the work itself - a waveform, a render, a colour field.

   Deliberately absent, because they are the signature of a generated
   template: the blue-to-cyan gradient, glass panels over a decorative
   background, a mascot, and the same corner radius on every surface.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* paper side */
  --paper:#F7F4EF;
  --paper-2:#FFFDFA;
  --paper-3:#EFEAE1;
  --ink:#16140F;
  --ink-2:#3A362E;
  --ink-3:#6B655A;
  --ink-4:#9A9287;
  --rule:rgba(22,20,15,.10);
  --rule-2:rgba(22,20,15,.18);

  /* workbench side */
  --bench:#141516;
  --bench-2:#1B1D1F;
  --bench-3:#232628;
  --bench-line:rgba(255,255,255,.07);
  --bench-line-2:rgba(255,255,255,.14);
  --on-bench:#ECEAE5;
  --on-bench-2:#A9A69F;
  --on-bench-3:#726F69;

  /* the one accent, replaced per lab */
  --accent:#C06A2E;
  --accent-soft:rgba(192,106,46,.16);

  /* state, muted on purpose: colour is information, not decoration */
  --ok:#4E7D52;  --ok-soft:rgba(78,125,82,.16);
  --warn:#9A742B; --warn-soft:rgba(154,116,43,.16);
  --bad:#A4453C;  --bad-soft:rgba(164,69,60,.16);

  /* radii vary by element size; one value everywhere reads as a kit */
  --r-chip:5px; --r-field:8px; --r-card:14px; --r-sheet:20px;

  --f-ar:'Almarai',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
/* any rule that sets display beats the hidden attribute; the attribute must win */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--f-ar);color:var(--ink);background:var(--paper);
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

/* Grain. Three percent of noise is the cheapest, strongest antidote to the
   plastic cleanliness that gives a generated page away. */
.grain::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── type ─────────────────────────────────────────────────────────── */
.display{
  font-weight:800;line-height:1.08;letter-spacing:-.025em;
  font-size:clamp(34px,6.2vw,76px);margin:0;
}
.display em{font-style:normal;color:var(--accent)}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.015em;line-height:1.25}
h2{font-size:clamp(24px,3.2vw,38px)}
h3{font-size:19px}
.lead{font-size:17px;line-height:1.85;color:var(--ink-2);max-width:54ch;margin:0}
.muted{color:var(--ink-3)} .faint{color:var(--ink-4)}
.small{font-size:13px} .tiny{font-size:11.5px;letter-spacing:.06em}
.latin{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── the mark ─────────────────────────────────────────────────────── */
.mark{display:inline-flex;align-items:center;gap:10px}
.mark-glyph{
  width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;
  border-radius:9px;background:var(--ink);color:var(--paper);
  font-weight:800;font-size:19px;line-height:1;padding-bottom:2px;
}
.mark-name{font-weight:800;font-size:19px;letter-spacing:-.02em}
.mark-sub{display:block;margin-top:-3px}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:11px 19px;
  border-radius:var(--r-field);border:1px solid var(--rule-2);
  background:transparent;cursor:pointer;font-weight:700;font-size:14px;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             transform .18s var(--ease);
}
.btn:hover{background:rgba(22,20,15,.05);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.btn-primary:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-lg{padding:14px 26px;font-size:15px}
.btn-sm{padding:7px 13px;font-size:12.5px}

/* ── small parts ──────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:4px 10px;
  border-radius:var(--r-chip);border:1px solid var(--rule-2);
  font-size:12px;font-weight:700;line-height:1.6;
}
.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.chip.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}
.chip.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.chip.bad{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ═══════════════════════════════════════════════ landing (paper) ═══ */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

.top{
  position:sticky;top:0;z-index:8;background:rgba(247,244,239,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);
}
.top-in{display:flex;align-items:center;gap:30px;padding:16px 0}
.top nav{display:flex;gap:26px;margin-inline-start:auto;font-size:14px;
  font-weight:700;color:var(--ink-2)}
.top nav a{padding:4px 0;border-bottom:2px solid transparent}
.top nav a:hover{border-bottom-color:var(--ink)}

.hero{padding:76px 0 60px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero-kicker{margin-bottom:22px}
.hero .lead{margin:22px 0 30px}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* The figure sits slightly off the grid and overlaps the section edge.
   Perfect centring is what makes a page look assembled rather than made. */
.hero-figure{
  position:relative;border-radius:var(--r-sheet);overflow:hidden;
  background:var(--bench);aspect-ratio:4/3;
  box-shadow:0 30px 70px -40px rgba(22,20,15,.55);
  transform:translateY(-8px) rotate(-.5deg);
}
.hero-figure img{width:100%;height:100%;object-fit:cover;display:block}

.stats{display:flex;gap:46px;flex-wrap:wrap;padding:34px 0 0;
  border-top:1px solid var(--rule);margin-top:46px}
.stat b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;
  line-height:1.1}
.stat span{font-size:12.5px;color:var(--ink-3)}

/* lab cards: each wears its own accent, and the ratio is not 1:1:1 */
.labs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:18px;margin-top:34px}
.lab-card{
  position:relative;border:1px solid var(--rule-2);border-radius:var(--r-card);
  padding:26px 24px 22px;background:var(--paper-2);overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
  display:flex;flex-direction:column;min-height:270px;
}
.lab-card:hover{transform:translateY(-3px);
  box-shadow:0 18px 40px -28px rgba(22,20,15,.5)}
.lab-card::before{content:"";position:absolute;inset-inline-start:0;top:0;
  bottom:0;width:3px;background:var(--accent)}
.lab-card h3{margin-bottom:6px}
.lab-card .latin{color:var(--ink-4);margin-bottom:14px;display:block}
.lab-card ul{margin:16px 0 0;padding:0;list-style:none;font-size:13.5px;
  color:var(--ink-2)}
.lab-card li{padding:5px 0;border-top:1px solid var(--rule)}
.lab-card li:first-child{border-top:0}
.lab-card .go{margin-top:auto;padding-top:18px;font-weight:800;font-size:13.5px;
  color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.lab-card.soon{opacity:.62}
.lab-card.soon .go{color:var(--ink-4)}

/* the motif strip at the head of each card - the lab's own handwriting */
/* scoped: the bare .motif rule bled -24px out of every workbench card */
.lab-card .motif{height:54px;margin:-6px -24px 16px;opacity:.9}
.motif{display:block}

.section{padding:70px 0;border-top:1px solid var(--rule)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:10px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0;margin-top:30px;border:1px solid var(--rule-2);
  border-radius:var(--r-card);overflow:hidden}
.step{padding:24px;border-inline-start:1px solid var(--rule)}
.step:first-child{border-inline-start:0}
.step b{display:block;font-size:12px;color:var(--ink-4);letter-spacing:.1em;
  margin-bottom:10px}
.step h4{margin-bottom:6px;font-size:16px}
.step p{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.8}

.foot{padding:40px 0 56px;border-top:1px solid var(--rule);
  display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.foot .latin{color:var(--ink-4)}

/* ═══════════════════════════════════════════════ labs (workbench) ═══ */
.bench{
  min-height:100vh;background:var(--bench);color:var(--on-bench);
  display:grid;grid-template-columns:232px 1fr;
}
.bench a{color:inherit}

.rail{
  background:var(--bench-2);border-inline-end:1px solid var(--bench-line);
  padding:18px 14px;display:flex;flex-direction:column;gap:20px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.rail .mark-glyph{background:var(--on-bench);color:var(--bench)}
.rail .mark-name{color:var(--on-bench)}
.rail .mark-sub{color:var(--on-bench-3)}

.rail-group{display:flex;flex-direction:column;gap:2px}
.rail-title{font-size:10.5px;letter-spacing:.14em;color:var(--on-bench-3);
  padding:0 10px 7px;text-transform:uppercase}
.rail a.item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:var(--r-field);font-size:13.5px;color:var(--on-bench-2);
  border:1px solid transparent;transition:background .16s var(--ease);
}
.rail a.item:hover{background:rgba(255,255,255,.05);color:var(--on-bench)}
.rail a.item.on{background:var(--accent-soft);color:var(--on-bench);
  border-color:var(--accent)}
.rail a.item .swatch{width:3px;height:15px;border-radius:2px;
  background:var(--accent);flex:0 0 3px}
.rail a.item.soon{opacity:.45;pointer-events:none}

/* A flex item's automatic minimum size is its content, so one wide child
   inside the body stretched the whole shell to 1019px on a 375px screen —
   min-width:0 on the column AND on the body is what stops that. */
.bench-main{min-width:0;display:flex;flex-direction:column}
.bench-body{min-width:0}
.bench-top{
  display:flex;align-items:center;gap:16px;padding:14px 26px;
  border-bottom:1px solid var(--bench-line);background:var(--bench-2);
  position:sticky;top:0;z-index:6;
}
.bench-top .spacer{flex:1}
.bench-body{padding:26px;flex:1}

.lab-head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--bench-line);margin-bottom:24px}
.lab-head .accent-bar{width:3px;align-self:stretch;background:var(--accent);
  border-radius:2px;min-height:46px}
.lab-head p{margin:6px 0 0;color:var(--on-bench-2);max-width:62ch}

.panel{
  background:var(--bench-2);border:1px solid var(--bench-line);
  border-radius:var(--r-card);padding:20px;
}
.panel + .panel{margin-top:16px}
.panel-head{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:14px;flex-wrap:wrap}
.panel-head h3{font-size:15px}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}

.meter-row{display:flex;align-items:baseline;gap:10px;padding:9px 0;
  border-top:1px solid var(--bench-line)}
.meter-row:first-child{border-top:0}
.meter-row b{font-size:21px;font-weight:800;letter-spacing:-.02em}
.meter-row span{font-size:12.5px;color:var(--on-bench-3)}

.bench table{width:100%;border-collapse:collapse;font-size:13.5px}
.bench th,.bench td{text-align:start;padding:8px 10px;
  border-top:1px solid var(--bench-line);vertical-align:top}
.bench thead th{color:var(--on-bench-3);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;border-top:0}
.bench tbody tr:hover{background:rgba(255,255,255,.03)}

.bench .btn{border-color:var(--bench-line-2);color:var(--on-bench)}
.bench .btn:hover{background:rgba(255,255,255,.06)}
.bench .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.bench .chip{border-color:var(--bench-line-2);color:var(--on-bench-2)}

.bench input,.bench select,.bench textarea{
  width:100%;background:var(--bench-3);border:1px solid var(--bench-line-2);
  border-radius:var(--r-field);padding:10px 12px;color:var(--on-bench);
}
.bench input:focus,.bench select:focus,.bench textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bench label{display:block;font-size:12.5px;color:var(--on-bench-2);
  margin-bottom:6px;font-weight:700}
.field{margin-bottom:16px}

.empty{padding:30px;text-align:center;color:var(--on-bench-3);
  border:1px dashed var(--bench-line-2);border-radius:var(--r-card)}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-figure{transform:none}
  .bench{grid-template-columns:minmax(0,1fr)}
  /* The rail becomes rows, and each group scrolls on its own. One long
     scroller put the current lab's own pages ~700px off-screen, which on a
     phone means the links a person came for are the ones they cannot see. */
  .rail{position:static;height:auto;overflow:visible;
    flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:8px 12px;padding:10px 14px;
    border-inline-end:0;border-bottom:1px solid var(--bench-line)}
  .rail .mark{flex:0 0 auto}
  .rail .mark-sub{display:none}
  /* the first group shares the brand's line; the rest take a line each,
     otherwise flex shrinks all three back onto one row */
  .rail-group{flex:1 1 200px;min-width:0;
    flex-direction:row;align-items:center;gap:6px;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .rail-group::-webkit-scrollbar{display:none}
  .rail-group:not(:first-of-type){flex:1 1 100%}
  .rail-title{display:block;flex:0 0 auto;padding:0;margin-inline-end:2px;
    font-size:10.5px;opacity:.6}
  .rail a.item{flex:0 0 auto;white-space:nowrap;padding:6px 10px;font-size:12.5px}
  /* a one-line top bar squeezed "مسح النصّ" to 48px over a 106px label */
  .bench-top{flex-wrap:wrap;gap:8px 10px;padding:10px 16px}
  .bench-top .btn,.bench-top .chip{flex:0 0 auto;white-space:nowrap}
  .bench-top .spacer{display:none}
}
@media (max-width:620px){
  .wrap{padding:0 18px}
  .top nav{display:none}
  .stats{gap:26px}
  .bench-body{padding:16px}
  .steps{grid-template-columns:1fr}
  .step{border-inline-start:0;border-top:1px solid var(--rule)}
  .step:first-child{border-top:0}
  .lab-head{gap:12px}
  .panel{padding:16px}
  .panel-head{gap:8px}
  .bench .panel{padding:16px}
  /* on a phone the top bar repeated the lab name the rail already shows and
     pushed the logout button onto a line of its own: ~110px before any work */
  .bench-top{position:static;padding:8px 16px}
  .bench-top > .chip:first-child,.bench-top > .small.muted{display:none}
  .bench-top .spacer{display:block;flex:1}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ═══════════════════════════════════════ shared workbench components ═══
   Pills, banners, meters, toasts and the job chip. These were born in the
   bridge that re-pointed the old palette; the old palette is gone now and they
   simply belong to the workbench.
   ══════════════════════════════════════════════════════════════════════ */
.bench .kpi{background:var(--bench-2);border:1px solid var(--bench-line);
  border-radius:var(--r-card);padding:16px 18px}

.bench .page-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:20px;
  border-bottom:1px solid var(--bench-line)}
.bench .page-head h1{font-size:25px}
.bench .sub{color:var(--on-bench-2);margin:6px 0 0;font-size:14px;max-width:64ch}

.bench .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border-radius:var(--r-chip);border:1px solid var(--bench-line-2);
  font-size:11.5px;font-weight:700;color:var(--on-bench-2);background:none}
.bench .pill.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}
.bench .pill.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.bench .pill.bad{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
.bench .pill.neutral{color:var(--on-bench-3)}
.bench .pill.live::after{content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;animation:tayfpulse 1.6s infinite}
@keyframes tayfpulse{0%,100%{opacity:1}50%{opacity:.25}}

.bench .banner{border:1px solid var(--warn);background:var(--warn-soft);
  border-radius:var(--r-card);padding:14px 16px;font-size:13.5px;
  color:var(--on-bench);margin-bottom:16px}
.bench .meter{height:6px;border-radius:3px;background:var(--bench-3);overflow:hidden}
.bench .meter .bar{height:100%;background:var(--accent);transition:width .3s var(--ease)}
.bench code{background:var(--bench-3);border:1px solid var(--bench-line);
  border-radius:var(--r-chip);padding:1px 6px;font-size:12px}
.bench .inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bench .mt{margin-top:16px}
.bench details > summary{cursor:pointer;color:var(--on-bench-2);padding:6px 0}

/* the job chip the old app.js injects into every page */
.jobs-bar{position:fixed;inset-block-end:18px;inset-inline-start:18px;z-index:7}
.jobs-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;
  border-radius:999px;background:var(--bench-3);color:var(--on-bench);
  border:1px solid var(--bench-line-2);font-size:13px;font-weight:700}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);
  border-top-color:transparent;animation:tayfspin .8s linear infinite}
@keyframes tayfspin{to{transform:rotate(360deg)}}
.toast-wrap{position:fixed;inset-block-start:18px;inset-inline-start:50%;
  transform:translateX(50%);z-index:30;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--bench-3);color:var(--on-bench);padding:11px 18px;
  border-radius:var(--r-field);border:1px solid var(--bench-line-2);
  font-size:13.5px;box-shadow:0 18px 40px -26px rgba(0,0,0,.9)}
.toast.bad{border-color:var(--bad);color:var(--bad)}

/* ═══════════════════════════════════ the voice lab, in the new language ═══
   Step C: the working pages stop being bridged and get written properly.
   These are the components their markup actually uses - counted, not
   guessed - rendered as hairlines and ink on the workbench rather than as
   glass panels over a gradient.
   ══════════════════════════════════════════════════════════════════════ */

/* layout ------------------------------------------------------------- */
/* minmax(0,…) and min-width:0 are not decoration: a grid column defaults to
   a min-content floor, so one long unbreakable line inside the editor stretched
   this grid to 1005px on a 375px phone. The legacy sheet had this guard; the
   override above it dropped it and won on specificity. */
.bench .studio-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.85fr);
  gap:16px;align-items:start}
.bench .studio-grid>*{min-width:0}
.bench .row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.bench .row > *{flex:1;min-width:170px}
.bench .rowline{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-top:1px solid var(--bench-line)}
.bench .rowline:first-child{border-top:0}
.bench .sep{height:1px;background:var(--bench-line);margin:20px 0}
.bench .mb{margin-bottom:16px}

/* forms -------------------------------------------------------------- */
.bench .field{margin-bottom:16px}
.bench .field > label{display:block;font-size:12.5px;font-weight:700;
  color:var(--on-bench-2);margin-bottom:6px}
.bench textarea{min-height:120px;line-height:2.1;resize:vertical}
.bench select{appearance:none;padding-inline-end:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--on-bench-3) 50%),
                   linear-gradient(135deg,var(--on-bench-3) 50%,transparent 50%);
  background-position:left 14px top 52%,left 9px top 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.bench input[type=range]{-webkit-appearance:none;appearance:none;height:3px;
  padding:0;background:var(--bench-line-2);border:0;border-radius:2px}
.bench input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--accent);
  border:2px solid var(--bench);cursor:pointer}
.bench .slider-row{display:flex;align-items:center;gap:12px}
.bench .slider-row input[type=range]{flex:1}
.bench .editor-meta{display:flex;justify-content:space-between;
  font-size:12px;color:var(--on-bench-3);padding-top:8px}

/* the decorative square that held an icon beside every heading: gone.
   It carried no information and appeared on every panel in the product. */
.bench .badge{display:none}

/* tips ---------------------------------------------------------------- */
.bench .tips{display:flex;flex-direction:column;gap:0}
.bench .tip{display:flex;gap:11px;align-items:flex-start;padding:11px 0;
  border-top:1px solid var(--bench-line);font-size:13px;
  color:var(--on-bench-2);line-height:1.75}
.bench .tip:first-child{border-top:0}
.bench .t-ico{flex:0 0 3px;width:3px;align-self:stretch;min-height:18px;
  border-radius:2px;background:var(--accent);opacity:.75}
.bench .t-ico svg{display:none}

/* player -------------------------------------------------------------- */
.bench .player{display:flex;align-items:center;gap:14px;padding:14px;
  border:1px solid var(--bench-line);border-radius:var(--r-card);
  background:var(--bench-3)}
.bench .play-btn{width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:#fff;
  border:0;cursor:pointer}
.bench .wavebars{display:flex;align-items:center;gap:2px;height:30px;flex:1}
.bench .wavebars i{flex:1;background:var(--accent);opacity:.45;border-radius:1px;
  min-height:2px}
.bench .wavebars i.on{opacity:1}
.bench .player-meter{height:3px;background:var(--bench-line-2);border-radius:2px}

/* ratings -------------------------------------------------------------- */
.bench .stars{display:inline-flex;gap:3px}
.bench .star{background:none;border:0;cursor:pointer;color:var(--on-bench-3);
  padding:0 1px;font-size:15px}
.bench .star.on{color:var(--accent)}

/* A/B comparison -------------------------------------------------------- */
.bench .ab{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px}
.bench .ab-cell{border:1px solid var(--bench-line);border-radius:var(--r-card);
  padding:16px;background:var(--bench-2)}
.bench .ab-cell.blind .engine-name{filter:blur(7px);user-select:none}

/* quick picks ----------------------------------------------------------- */
.bench .quick{display:flex;gap:8px;flex-wrap:wrap}
.bench .quick button,.bench .quick a{padding:5px 11px;border-radius:var(--r-chip);
  border:1px solid var(--bench-line-2);background:none;color:var(--on-bench-2);
  font-size:12.5px;cursor:pointer}
.bench .quick button:hover{border-color:var(--accent);color:var(--on-bench)}

/* the boot screen ------------------------------------------------------- */
.boot-page{background:var(--bench);color:var(--on-bench)}
.boot-page .boot-wrap{max-width:860px;margin:0 auto;padding:46px 24px}
.boot-page .boot-card{background:var(--bench-2);border:1px solid var(--bench-line);
  border-radius:var(--r-card);padding:22px}
.boot-page .boot-step{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-top:1px solid var(--bench-line)}
.boot-page .boot-side,.boot-page .boot-art{display:none}

@media (max-width:1100px){
  .bench .studio-grid{grid-template-columns:minmax(0,1fr)}
  /* A table of eight columns does not fit a tablet, let alone a phone. The
     panel scrolls, not the page: display:block on the table itself throws
     away its column widths. */
  .bench .panel{overflow-x:auto}
}

.bench th{background:transparent;color:var(--on-bench-3)}
.bench .kbd,.bench .search,.bench .quick a,.bench .quick button{
  background:var(--bench-3);color:var(--on-bench-2);border-color:var(--bench-line-2)}
.bench input[type=range]{accent-color:var(--accent)}

/* A panel nested directly inside another panel was a glass-on-glass habit.
   One border is enough to say "this is a group". */
.bench .panel .panel{background:transparent;border:0;padding:0}
.bench .panel .panel + .panel{margin-top:18px;padding-top:18px;
  border-top:1px solid var(--bench-line)}

/* tips: a hairline list, the accent as a margin mark */
.bench .tips .tip{background:transparent;border:0;border-radius:0;
  margin-bottom:0;padding:11px 0;border-top:1px solid var(--bench-line)}
.bench .tips .tip:first-child{border-top:0}
.bench .tips .tip .t-ico{width:3px;height:auto;border-radius:2px;
  background:var(--accent);place-items:stretch;align-self:stretch;min-height:18px}
.bench .tips .tip b{color:var(--on-bench)}
.bench .tips .tip span{color:var(--on-bench-2)}

/* backdrop-filter on buttons, pills and banners: a glass effect over a
   solid workbench costs a compositor layer and buys nothing. Cleared on
   every element inside the bench rather than class by class. */
.bench *, .boot-page *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.bench .banner.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--on-bench)}
.bench .banner.ok{background:var(--ok-soft);border-color:var(--ok)}
.bench .play-btn{background:var(--accent)}
.bench .panel{background:var(--bench-2)}

/* the boot screen, which has its own document and no bench around it */
.boot-page .boot-card{max-width:620px;margin:0 auto}
.boot-page .mark-glyph{background:var(--on-bench);color:var(--bench)}
.boot-page .mark-name{color:var(--on-bench)}
.boot-page .mark-sub{color:var(--on-bench-3)}
.boot-page .boot-lead{color:var(--on-bench-2);font-size:14px;margin:0 0 20px}
.boot-page .boot-list{display:flex;flex-direction:column;margin-bottom:18px}
.boot-page .boot-step{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-top:1px solid var(--bench-line);font-size:13.5px}
.boot-page .boot-step:first-child{border-top:0}
.boot-page .s-ico{flex:0 0 16px;color:var(--on-bench-3)}
.boot-page .s-main{flex:1;min-width:0}
.boot-page .s-main b{display:block;font-size:13.5px}
.boot-page .s-main span{display:block;font-size:11.5px;color:var(--on-bench-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boot-page .mark{flex:0 0 18px;text-align:center;font-weight:800}
.boot-page .boot-step.ok .mark{color:var(--ok)}
.boot-page .boot-step.ok .s-ico{color:var(--ok)}
.boot-page .boot-step.warn .mark,.boot-page .boot-step.warn .s-ico{color:var(--warn)}
.boot-page .boot-step.fail .mark,.boot-page .boot-step.fail .s-ico{color:var(--bad)}
.boot-page .meter{height:4px;background:var(--bench-3);border-radius:2px;
  overflow:hidden;margin-bottom:10px}
.boot-page .meter .bar{height:100%;background:var(--accent);transition:width .3s}
.boot-page .inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.boot-page .mt{margin-top:18px}
.boot-page .btn{border-color:var(--bench-line-2);color:var(--on-bench)}
.boot-page .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
/* place-items:center sizes the child by its max-content: on a phone that
   was 603px inside a 375px screen, and the page scrolled sideways. */
/* Flex, not grid: an implicit grid column is sized by its item's max-content,
   and with a nowrap detail line inside, that was 603px on a 375px screen. */
.boot-page .boot{min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:30px 20px}
.boot-page .boot-wrap{width:100%;max-width:620px;margin-inline:auto;padding:0}
.boot-page .panel{background:var(--bench-2);border:1px solid var(--bench-line);
  border-radius:var(--r-card);padding:26px}
.boot-page .chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border-radius:var(--r-chip);border:1px solid var(--bench-line-2);font-size:11.5px;
  font-weight:700}
.boot-page .chip.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}
.boot-page .chip.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.boot-page .chip.bad{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
.boot-page .small{font-size:12.5px} .boot-page .muted{color:var(--on-bench-2)}

/* ── معمل الفيديو ──────────────────────────────────────────────────────
   A shot picker, not a gallery: the only thing that matters about a tile is
   whether it is in the film and in which place, so the number is the whole
   affordance and the accent border carries it. */
.bench .shot{position:relative;display:block;padding:0;border:1px solid var(--bench-line);
  border-radius:var(--r-card);overflow:hidden;background:var(--bench-2);
  cursor:pointer;text-align:start;color:inherit;font:inherit;transition:border-color .15s}
.bench .shot:hover{border-color:var(--bench-line-2)}
.bench .shot.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.bench .shot img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.bench .shot.on img{opacity:.92}
.bench .shot .order{position:absolute;inset-inline-start:8px;inset-block-start:8px;
  min-width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:#fff;font-size:12px;font-weight:800}
.bench .shot-meta{display:block;padding:7px 10px;font-size:11.5px;
  color:var(--on-bench-3);border-top:1px solid var(--bench-line)}

.bench .film{border:1px solid var(--bench-line);border-radius:var(--r-card);
  overflow:hidden;background:var(--bench-2)}
.bench .film video{display:block;width:100%;background:#0d0e0f}
.bench .film-blank{aspect-ratio:16/9;display:grid;place-items:center;
  color:var(--on-bench-3);font-size:12.5px;background:var(--bench-3)}
.bench .film figcaption{display:grid;gap:3px;padding:11px 13px;
  border-top:1px solid var(--bench-line)}

.bench .panel-sub{border:1px solid var(--bench-line);border-radius:var(--r-field);
  padding:12px 14px;background:var(--bench-3)}
.bench .panel-sub table{margin:0}
.bench details summary{cursor:pointer;color:var(--on-bench-2)}

/* A lab's tool list is how a person moves around that lab, so each row is a
   target, not a word. 21px of text is a desktop habit that does not survive a
   thumb. */
.bench .tool-link{display:block;padding:9px 10px;margin:-9px -10px;
  border-radius:var(--r-field);font-weight:700}
.bench .tool-link:hover{background:rgba(255,255,255,.05)}
.bench .more{display:inline-flex;align-items:center;min-height:30px}
@media (max-width:620px){
  .bench .tool-link{padding:12px 10px;margin:-12px -10px}
  .bench .more{min-height:38px}
}

/* The dashboard's waveform is drawn with currentColor so it inherits the lab
   accent instead of carrying two colours of its own. */
.bench .wave{color:var(--accent);width:100%;height:42px;display:block}

/* The hero frame on a server that has produced nothing yet. Four motifs,
   drawn, in the labs' own colours - a reserved rectangle with nothing in it
   is the one thing a landing page may never show. */
.hero-figure-drawn{background:var(--paper-2,#efece6);display:grid;place-items:stretch}
.hero-motifs{display:grid;grid-template-rows:repeat(4,1fr);gap:0;height:100%}
.hero-motif{position:relative;display:grid;align-content:center;gap:4px;
  padding:14px 20px;border-top:1px solid rgba(0,0,0,.07)}
.hero-motif:first-child{border-top:0}
.hero-motif .latin{font-size:10px;letter-spacing:.18em;color:var(--accent);
  opacity:.85}
.hero-motif .motif{opacity:.55}
@media (max-width:620px){
  .hero-motif{padding:10px 14px}
  .hero-motif .motif{height:40px}
}

/* ═══════════════════════════════════ components ported from the old sheet ═══
   Twenty-seven classes the markup still uses that only style.css drew. Each
   is redrawn here in the workbench's terms - hairlines, ink, the lab accent -
   rather than copied, which is why none of them mentions a gradient.
   ══════════════════════════════════════════════════════════════════════ */

/* icons and small utilities */
.ico{width:19px;height:19px;flex:0 0 19px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nowrap{white-space:nowrap}
.btn-label{display:none}
.bench .btn-ghost{background:transparent;border-color:transparent;
  color:var(--on-bench-2)}
.bench .btn-ghost:hover{background:rgba(255,255,255,.05);color:var(--on-bench)}
.bench .btn-primary:hover{filter:brightness(1.08)}

/* stat tile */
.bench .kpi .kpi-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px}
.bench .kpi .label{font-size:12.5px;color:var(--on-bench-2);font-weight:700}
.bench .kpi .value{font-size:28px;font-weight:800;letter-spacing:-.02em;
  line-height:1.25;font-variant-numeric:tabular-nums;margin-top:6px;
  color:var(--on-bench)}
.bench .kpi .value.sm{font-size:17px;letter-spacing:0}
.bench .kpi .note{font-size:11.5px;color:var(--on-bench-3)}

/* quick actions on the overview */
.bench .qa{display:block;text-align:center;padding:14px 10px;
  border:1px solid var(--bench-line);border-radius:var(--r-card);
  background:transparent;color:var(--on-bench-2)}
.bench .qa:hover{border-color:var(--bench-line-2);color:var(--on-bench)}
.bench .qa .ico{width:22px;height:22px;flex:none;margin:0 auto 6px;display:block;
  color:var(--accent)}
.bench .qa.primary{border-color:var(--accent);background:var(--accent-soft);
  color:var(--on-bench)}
.bench .qa.primary b,.bench .qa.primary .ico{color:var(--on-bench)}

/* engine card */
.bench .engine{border:1px solid var(--bench-line);border-radius:var(--r-card);
  background:transparent}
.bench .engine .e-top{display:flex;align-items:center;gap:12px;padding:16px 16px 8px}
.bench .engine .e-body{padding:0 16px 16px}
.bench .engine .tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px}
.bench .engine .desc{font-size:12.5px;color:var(--on-bench-2);line-height:1.75;
  min-height:42px}

/* list rows with a leading mark */
.bench .rowline .r-ico{width:34px;height:34px;border-radius:var(--r-field);flex:none;
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.bench .rowline .r-main{flex:1;min-width:0}
.bench .rowline .r-main b{display:block;font-size:13.5px;font-weight:700;
  color:var(--on-bench)}
.bench .rowline .r-main span{font-size:11.5px;color:var(--on-bench-3)}

/* slider readout */
.bench .slider-row .val{flex:0 0 60px;text-align:center;font-size:12.5px;
  font-weight:800;color:var(--accent);background:var(--accent-soft);
  border-radius:var(--r-chip);padding:3px 0}

/* collapsible error detail */
.bench details.err{margin-top:10px}
.bench details.err summary{cursor:pointer;font-size:12.5px;color:var(--on-bench-2)}

/* the player's bars move while it plays */
.bench .player.playing .wavebars i{animation:tayfbar .9s ease-in-out infinite}
@keyframes tayfbar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}

/* the architectural workspace */
.bench .vis-shell{display:grid;gap:16px}
.bench .vis-drop{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:26px 18px;border:1.5px dashed var(--bench-line-2);
  border-radius:var(--r-card);background:var(--bench-3);text-align:center}
.bench .vis-drop.over{border-color:var(--accent);background:var(--accent-soft)}
.bench .vis-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px}
.bench .vis-thumb{flex:0 0 auto;width:112px;padding:0;border:1px solid var(--bench-line);
  border-radius:var(--r-field);overflow:hidden;background:var(--bench-3);cursor:pointer}
.bench .vis-thumb img{width:100%;height:76px;object-fit:cover;display:block}
.bench .vis-thumb.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.bench .vis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.bench .vis-tile{margin:0;border-radius:var(--r-card);overflow:hidden;
  background:var(--bench-3);border:1px solid var(--bench-line)}
.bench .vis-tile img{width:100%;display:block;aspect-ratio:4/3;object-fit:contain;
  background:#101112}
.bench .vis-tile figcaption{padding:8px 10px;font-size:12.5px;color:var(--on-bench-2)}
.bench .vis-compare{position:relative;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--bench-line);background:#101112}
.bench .vis-compare img{width:100%;display:block}
.bench .vis-compare img:last-of-type{position:absolute;inset:0}
.bench .vis-compare input[type=range]{position:absolute;inset-inline:10px;bottom:10px;
  width:calc(100% - 20px)}
.bench .vis-shell .panel-head{flex-wrap:wrap;gap:8px}
.bench .vis-shell .panel-head select{max-width:min(100%,22ch)}
@media (max-width:620px){
  .bench .vis-shell .panel-head select{max-width:100%;width:100%}
  .bench .vis-thumb{width:96px}
  .bench .vis-thumb img{height:64px}
  .bench .vis-grid{grid-template-columns:1fr}
  .bench .rowline .r-main{flex:1 1 100%;order:2}
  .bench .rowline .r-ico{order:1}
}

/* Five things the before/after comparison caught once style.css was gone.
   Each was a property the old sheet supplied that the workbench had never
   stated for itself. */
.bench h2{font-size:22px;letter-spacing:-.01em}       /* was 38px: the landing's display size */
.bench .btn{background:var(--bench-3)}               /* an outline alone reads as text on dark */
.bench .btn-primary{background:var(--accent)}
.bench .btn-ghost{background:transparent;border-color:var(--bench-line-2);
  color:var(--on-bench)}
.bench th{font-size:11.5px;letter-spacing:.04em}
.bench .vis-drop{background:var(--accent-soft)}

/* A lab tile on the signed-in home. The motif bleeds to the tile's edges and
   no further: the tile clips, and the motif carries no margins of its own.
   Before this, a landing rule gave every .motif -24px of side margin, the
   wrapper added -20px, and the drawings hung outside their cards. */
.bench .lab-tile{display:flex;flex-direction:column;overflow:hidden;
  position:relative;border-inline-start:3px solid var(--accent);
  transition:border-color .15s var(--ease)}
.bench .lab-tile:hover{border-color:var(--accent)}
.bench .lab-tile.soon{opacity:.55;pointer-events:none}
.bench .lab-tile-motif{margin:-20px -20px 14px;line-height:0}
.bench .lab-tile-motif .motif{margin:0;opacity:.85}
@media (max-width:620px){.bench .lab-tile-motif{margin:-16px -16px 12px}}

/* ════════════════════════════════════════════════════════ the lab template ═══
   One shape for every lab, taken from how the strongest tools in this field
   are arranged: a compact header, one composer where the work is described,
   and the outputs as the largest thing on the page. What stays ours is the
   identity - the lab colour as the only accent, Arabic type, hairlines
   instead of glass.
   ══════════════════════════════════════════════════════════════════════ */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.bench .lab-top{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:18px}
.bench .lab-top-title{display:flex;align-items:center;gap:12px}
.bench .lab-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);flex:none}
.bench .lab-top h1{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0}
.bench .lab-top p{margin:2px 0 0;font-size:13px;color:var(--on-bench-3)}
.bench .lab-top-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bench .proj-pick{display:flex;align-items:center;gap:8px;margin:0;font-weight:400;
  font-size:12.5px;color:var(--on-bench-3)}
.bench .proj-pick select{width:auto;min-width:200px;max-width:280px;
  padding-block:7px;padding-inline:10px 30px}

/* the composer */
.bench .composer{background:var(--bench-2);border:1px solid var(--bench-line-2);
  border-radius:16px;padding:14px;margin-bottom:16px;
  box-shadow:0 24px 60px -48px rgba(0,0,0,.9)}
.bench .composer-empty{text-align:center;padding:48px 20px}
.bench .composer-empty h2{margin:0 0 6px}
.bench .composer-empty p{color:var(--on-bench-2);margin:0 0 18px}
.bench .cx-main{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px}
.bench .cx-source{position:relative;border:1.5px dashed var(--bench-line-2);
  border-radius:12px;background:var(--bench-3);overflow:hidden;min-height:132px;
  display:grid}
.bench .cx-source.over{border-color:var(--accent);background:var(--accent-soft)}
.bench .cx-source img{width:100%;height:100%;object-fit:cover;display:block;
  grid-area:1/1}
.bench .cx-source-pick{grid-area:1/1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;padding:12px;text-align:center;
  background:transparent;border:0;color:var(--on-bench-2);cursor:pointer;font:inherit}
.bench .cx-source-pick b{font-size:13px;color:var(--on-bench)}
.bench .cx-source-pick small{font-size:11px;color:var(--on-bench-3);line-height:1.6}
.bench .cx-source.has-image .cx-source-pick{opacity:0;background:rgba(0,0,0,.55);
  transition:opacity .15s var(--ease)}
.bench .cx-source.has-image:hover .cx-source-pick{opacity:1}
.bench .cx-source.has-image .cx-source-pick b,
.bench .cx-source.has-image .cx-source-pick small{color:#fff}
.bench .cx-prompt{display:flex;flex-direction:column;min-width:0}
.bench .cx-prompt textarea{flex:1;min-height:132px;border:0;background:transparent;
  padding:6px 4px;font-size:15px;line-height:1.9;resize:none;box-shadow:none}
.bench .cx-prompt textarea:focus{box-shadow:none}
.bench .cx-hint{margin:4px 4px 0;font-size:12px;color:var(--on-bench-3)}

.bench .cx-bar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  padding-top:12px;margin-top:10px;border-top:1px solid var(--bench-line)}
.bench .cx-opt{display:flex;flex-direction:column;gap:4px;margin:0;font-weight:400;
  font-size:11.5px;color:var(--on-bench-3);min-width:0}
.bench .cx-opt select{width:auto;min-width:118px;font-size:13px;
  padding-block:7px;padding-inline:10px 30px}
.bench .cx-structure{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.bench .cx-structure-head{display:flex;justify-content:space-between;font-size:11.5px;
  color:var(--on-bench-3)}
.bench .cx-structure-head b{color:var(--accent);font-variant-numeric:tabular-nums}
.bench .cx-structure input{padding:0;border:0;background:transparent;box-shadow:none}
.bench .cx-structure-ends{display:flex;justify-content:space-between}
.bench .cx-structure-ends small{font-size:10.5px;color:var(--on-bench-3)}
.bench .cx-note{margin:6px 2px 0;font-size:12px;color:var(--on-bench-3)}
.bench .cx-note:empty{display:none}

.bench .cx-more{margin-top:10px;border-top:1px solid var(--bench-line);padding-top:8px}
.bench .cx-more summary{font-size:12.5px;color:var(--on-bench-2);padding:4px 0}
.bench .cx-more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px 14px;margin-top:10px}
.bench .cx-more-grid .field{margin:0;display:flex;flex-direction:column;gap:4px;
  font-weight:400}
.bench .cx-more-grid .field > span{font-size:12px;color:var(--on-bench-2);font-weight:700}
.bench .cx-more-grid small{font-size:11px;color:var(--on-bench-3)}
.bench .cx-more-grid .cx-wide{grid-column:1/-1}

.bench .cx-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--bench-line)}
.bench .cx-status{flex:1;min-width:180px;font-size:12px;color:var(--on-bench-3)}
.bench .cx-go{min-width:140px;justify-content:center;border-radius:999px}

/* sources strip */
.bench .sources{margin-bottom:18px}
.bench .sources-head,.bench .gallery-head{display:flex;align-items:baseline;gap:10px;
  margin-bottom:10px}
.bench .sources-head h3{font-size:13px;color:var(--on-bench-2);margin:0}
.bench .sources-head span,.bench .gallery-head span{font-size:12px;color:var(--on-bench-3)}

/* job strip */
.bench .job-strip{border:1px solid var(--accent);background:var(--accent-soft);
  border-radius:12px;padding:12px 14px;margin-bottom:16px}
.bench .job-strip-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:8px;font-size:13px}
.bench .job-strip-head b{color:var(--on-bench)}
.bench .job-strip-head span{color:var(--on-bench-2)}
.bench .job-strip-head .btn{margin-inline-start:auto}
.bench .job-detail summary{font-size:12px;color:var(--on-bench-3);margin-top:6px}

/* result */
.bench .result{background:var(--bench-2);border:1px solid var(--bench-line);
  border-radius:16px;padding:16px;margin-bottom:22px}
.bench .result-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:14px}
.bench .result-head h2{font-size:17px;margin:0 0 0 6px}
.bench .result-head .spacer{flex:1}
.bench .seg{display:inline-flex;border:1px solid var(--bench-line-2);border-radius:999px;
  padding:2px;background:var(--bench-3)}
.bench .seg-btn{border:0;background:transparent;color:var(--on-bench-2);font:inherit;
  font-size:12.5px;padding:5px 12px;border-radius:999px;cursor:pointer}
.bench .seg-btn.on{background:var(--accent);color:#fff}
.bench .result-metrics{margin-top:12px}
.bench .result-metrics summary{font-size:12.5px;color:var(--on-bench-2)}

/* gallery: the outputs are the point */
.bench .gallery-head h2{font-size:17px;margin:0}
.bench .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px}
.bench .g-card{position:relative;display:block;padding:0;border:1px solid var(--bench-line);
  border-radius:12px;overflow:hidden;background:#101112;cursor:pointer;
  aspect-ratio:4/3;transition:border-color .15s var(--ease),transform .15s var(--ease)}
.bench .g-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.bench .g-card img{width:100%;height:100%;object-fit:cover;display:block}
.bench .g-meta{position:absolute;inset-inline:0;bottom:0;display:flex;align-items:center;
  gap:6px;padding:20px 10px 8px;font-size:11.5px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}
.bench .g-meta .num{margin-inline-start:auto;opacity:.85}
.bench .g-verdict{font-style:normal;background:rgba(0,0,0,.45);border-radius:999px;
  padding:2px 8px;font-size:11px}
.bench .g-star{font-style:normal;color:var(--accent)}
.bench .failed-list{margin-top:14px}
.bench .failed-list summary{font-size:12.5px;color:var(--on-bench-3)}
.bench .failed-list ul{list-style:none;margin:8px 0 0;padding:0}
.bench .failed-list li{display:flex;gap:10px;align-items:center;padding:6px 0;
  border-top:1px solid var(--bench-line)}

.bench .shot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;max-height:340px;overflow-y:auto;padding:2px}
.bench .film-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.bench .film{margin:0}
.bench .honest{margin-top:22px;border:1px solid var(--bench-line);border-radius:12px;
  padding:12px 16px}
.bench .honest summary{font-size:13px;color:var(--on-bench-2)}
.bench .cx-opt input[type=text]{padding:7px 10px;font-size:13px}
.bench .cx-more-grid .cx-check{flex-direction:row;align-items:center;gap:8px}
.bench .cx-more-grid .cx-check > span{font-weight:400}

/* voice lab: folded text tools and the clip list */
.bench .tool-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  margin-bottom:22px;align-items:start}
.bench .tool{border:1px solid var(--bench-line);border-radius:14px;background:var(--bench-2);
  padding:12px 16px}
.bench .tool[open]{grid-column:1/-1}
.bench .tool > summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  cursor:pointer;list-style:none}
.bench .tool > summary::-webkit-details-marker{display:none}
.bench .tool-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;
  color:var(--on-bench);margin-inline-end:auto}
.bench .tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px}
.bench .tool-grid .field{margin:0;display:flex;flex-direction:column;gap:4px;font-weight:400}
.bench .tool-grid .field > span{font-size:12px;color:var(--on-bench-2);font-weight:700}
.bench .spoken-box{white-space:pre-wrap;background:var(--bench-3);border:1px solid var(--bench-line);
  border-radius:var(--r-field);padding:12px;line-height:2.1;min-height:64px}
.bench .composer .editor-meta{display:flex;justify-content:space-between;gap:10px;
  font-size:12px;color:var(--on-bench-3);padding:4px 4px 0}
.bench .cx-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;align-self:center}
.bench .clip-list{display:grid;gap:8px}
.bench .clip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;
  border:1px solid var(--bench-line);border-radius:12px;background:var(--bench-2)}
.bench .clip-meta{display:flex;flex-direction:column;min-width:140px}
.bench .clip audio{flex:1;min-width:220px;height:36px}

/* a lab's front room */
.bench .lab-intro{position:relative;border:1px solid var(--bench-line);border-radius:16px;
  background:var(--bench-2);overflow:hidden;padding:0 18px 16px;margin-bottom:16px}
.bench .lab-intro-motif{margin:0 -18px 14px;opacity:.9}
.bench .lab-intro-motif svg{display:block;width:100%}
.bench .lab-intro > p{margin:0 0 12px;color:var(--on-bench-2);line-height:1.9;max-width:78ch}
.bench .feature-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bench .feature-chips li{font-size:12px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--bench-line-2);color:var(--on-bench-2)}
.bench .stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border:1px solid var(--bench-line);border-radius:14px;margin-bottom:22px;overflow:hidden}
.bench .stat{display:flex;flex-direction:column;gap:2px;padding:12px 16px;
  border-inline-start:1px solid var(--bench-line);margin-inline-start:-1px}
.bench .stat span{font-size:12px;color:var(--on-bench-3)}
.bench .stat b{font-size:22px;letter-spacing:-.02em;color:var(--on-bench)}
.bench .stat small{font-size:11px;color:var(--on-bench-3)}
.bench .tool-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.bench .tool-tile{position:relative;display:flex;flex-direction:column;gap:4px;
  padding-block:14px;padding-inline:16px 40px;border:1px solid var(--bench-line);border-radius:12px;
  background:var(--bench-2);color:var(--on-bench);text-decoration:none;
  transition:border-color .15s var(--ease)}
.bench .tool-tile:hover{border-color:var(--accent)}
.bench .tool-tile.primary{border-color:var(--accent);background:var(--accent-soft)}
.bench .tool-tile b{font-size:14px}
.bench .tool-tile span{font-size:12px;color:var(--on-bench-3)}
.bench .tool-tile-go{position:absolute;inset-inline-end:14px;top:50%;translate:0 -50%;
  color:var(--accent);font-style:normal;display:flex}
.bench .tool-tile-go .ico{width:16px;height:16px;flex:none}
.bench .notice-list{margin-top:22px}
.bench .notice-list h3{font-size:13px;color:var(--on-bench-2);margin:0 0 8px}
.bench .notice-list ul{list-style:none;margin:0;padding:0}
.bench .notice-list li{display:flex;gap:10px;align-items:baseline;padding:8px 0;
  border-top:1px solid var(--bench-line);font-size:13px;color:var(--on-bench-2);line-height:1.8}
.bench .notice-list li .chip{flex:none}

@media (max-width:760px){
  .bench .cx-main{grid-template-columns:1fr}
  .bench .tool-pair{grid-template-columns:1fr}
  .bench .clip{justify-content:space-between}
  .bench .clip audio{order:3;flex:1 1 100%;min-width:0;width:100%}
  .bench .clip-more{order:4}
  .bench .shot-grid{grid-template-columns:repeat(2,1fr)}
  .bench .film-grid{grid-template-columns:1fr}
  .bench .cx-source{min-height:150px}
  .bench .cx-bar .cx-opt{flex:1 1 calc(50% - 10px)}
  .bench .cx-opt select{min-width:0;width:100%}
  .bench .cx-structure{flex:1 1 100%}
  .bench .cx-go{flex:1 1 100%}
  .bench .proj-pick select{min-width:0;max-width:none;width:100%}
  .bench .proj-pick{flex:1 1 100%}
  .bench .gallery{grid-template-columns:repeat(2,1fr);gap:8px}
}

/* The select chevron, stated in full. In RTL the arrow lives on the inline end
   (the left), the text must keep clear of it, and the two gradient triangles
   must not tile - a physical "padding-right" earlier put the model name on
   top of the arrow. */
.bench select{background-repeat:no-repeat;background-size:5px 5px,5px 5px;
  padding-inline-end:30px}
.bench select:dir(rtl){background-position:14px 52%,9px 52%}
.bench select:dir(ltr){background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%}
.bench input[type=range]{height:22px;cursor:pointer}
.bench input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:var(--bench-line-2)}
.bench input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;background:var(--accent);margin-top:-6px;
  border:2px solid var(--bench-2);box-shadow:0 0 0 1px var(--accent)}
.bench input[type=range]::-moz-range-track{height:4px;border-radius:2px;
  background:var(--bench-line-2)}
.bench input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bench-2)}
.bench .cx-structure input[type=range]{-webkit-appearance:none;appearance:none}

/* ═══════════════════════════════════════════ one page header everywhere ═══
   Older pages carry three header shapes (.page-head, .lab-head with a Latin
   kicker and a bar, an h1 inside a panel). They are drawn here exactly like
   .lab-top so every page starts the same way: the lab dot, the name, one
   quiet line under it.
   ══════════════════════════════════════════════════════════════════════ */
.bench .page-head,.bench .lab-head{border-bottom:0;padding-bottom:0;margin-bottom:18px;
  align-items:center}
.bench .lab-head .accent-bar,.bench .lab-head > div > .latin{display:none}
.bench .page-head h1,.bench .lab-head h2,.bench .panel-head h1{
  font-size:22px!important;font-weight:800;letter-spacing:-.01em;margin:0!important;
  display:flex;align-items:center;gap:12px}
.bench .page-head h1::before,.bench .lab-head h2::before,.bench .panel-head h1::before{
  content:"";width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.bench .page-head .sub,.bench .lab-head p,.bench .panel-head h1 + .sub{
  font-size:13px;color:var(--on-bench-3);margin:4px 0 0;padding-inline-start:22px}
.bench .filter-bar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.bench .filter-bar input{padding:7px 10px;font-size:13px}
.bench .clip-more{flex:1 1 100%}
.bench .clip-more summary{font-size:12px;color:var(--on-bench-3)}
.bench .clip-more dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;
  margin:8px 0 0;font-size:12px}
.bench .clip-more dt{color:var(--on-bench-3)}
.bench .clip-more dd{margin:0;color:var(--on-bench-2);overflow-wrap:anywhere}

/* a checkbox or radio is never a full-width field, and its label is a row:
   `.field > label` (block) out-ranked `.inline`, so every settings checkbox
   sat alone on a line above its own words */
.bench input[type=checkbox],.bench input[type=radio]{width:auto;flex:none;margin:0;
  padding:0;accent-color:var(--accent)}
.bench label.inline,.bench .field > label.inline{display:flex;align-items:center;gap:8px;
  flex-wrap:nowrap;font-weight:400;color:var(--on-bench)}
.bench .panel > h3:first-child{margin:0 0 14px}
/* section headings that sit straight in the page body (older pages) */
.bench .bench-body > h2{font-size:16px;margin:28px 0 10px;color:var(--on-bench)}