/* ------------------------------------------------------------------
   auxi Translate — the product UI, ported from the approved prototype.

   Class names and values are the prototype's, kept verbatim so a visual
   comparison against it is a like-for-like one. The two host frames it
   demonstrated are both here: the floating window over PowerPoint, which is
   where this app is headed, and a plain browser tab. The app inside is
   identical in both; only the frame and a few sentences change.

   Deliberately single-theme: it simulates a specific light product UI inside a
   specific light Office chrome; a dark inversion would misrepresent it.

   Scoped under .tx-root. Tailwind's preflight (loaded by globals.css) sets
   line-height 1.5 on <html> and zeroes every <p> margin; the prototype was
   written against browser defaults, so both are restored inside the root at
   zero specificity - every explicit rule below still wins.
------------------------------------------------------------------ */
.tx-root {
  --surge:#16ff65; --arc:#00fede; --grove:#005734; --void:#1e2123;
  --halo:#fffafb; --mist:#f5f6f7; --fog:#d9e1e3; --veil:#e8f7f5;
  --line:#d1dadd; --line-soft:#e6eaec; --line-strong:#8a9b9f; --muted:#516467; --faint:#607578;
  --ring:#007d4c; --danger:#b32640;
  --chrome-stage:#d9dcdf; --chrome-bar:#f2f3f5; --chrome-rule:#c6cbd0;
  --chrome-ink:#555c62; --ppt-red:#bb4c2c;
  --shell:#12171a; --shell-line:#27312f; --shell-ink:#9fb2ad;
  --app: var(--font-lexend), Arial, system-ui, sans-serif;
  --ar: var(--font-cairo), 'Segoe UI', Tahoma, sans-serif;
  --office: 'Segoe UI', system-ui, sans-serif;

  min-height:100dvh;display:flex;flex-direction:column;
  background:var(--shell);color:var(--void);font-family:var(--app);font-size:14px;
  line-height:normal;-webkit-font-smoothing:antialiased;
}
.tx-root *{box-sizing:border-box}
.tx-root [hidden]{display:none!important}
.tx-root img{max-width:100%}
:where(.tx-root) button{font:inherit;color:inherit}
.tx-root :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.tx-root .shell-bar :focus-visible{outline-color:var(--surge)}
:where(.tx-root) p{margin-block:1em}
:where(.tx-root) select,:where(.tx-root) input,:where(.tx-root) textarea{font:inherit;line-height:normal}

/* The website itself: the app is the page. No frame, no switch bar. */
.tx-root.tx-bare{background:var(--mist);height:100dvh}
.tx-bare .app{flex:1;min-height:0}

/* ---------------- shell: where the app is running ------------------ */
.shell-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding-block:11px;padding-inline:18px;background:var(--shell);
  border-bottom:1px solid var(--shell-line)}
.shell-mark{display:flex;align-items:baseline;gap:7px;color:#fff;letter-spacing:-.02em}
.shell-mark b{font-size:19px;font-weight:600;letter-spacing:-.07em}
.shell-mark span{font-size:13px;font-weight:400;color:#cfe0da}
.shell-spacer{flex:1 1 0;min-width:0}
.switch{display:flex;gap:2px;padding:3px;background:#1c2427;border:1px solid var(--shell-line);border-radius:10px}
.switch button{border:0;background:transparent;color:var(--shell-ink);
  padding:6px 13px;border-radius:7px;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.switch button:hover{color:#e8f2ee}
.switch button[aria-pressed=true]{background:linear-gradient(100deg,var(--surge),var(--arc));color:#06231a;font-weight:600}
.shell-reset{border:1px solid var(--shell-line);background:transparent;color:var(--shell-ink);
  padding:7px 13px;border-radius:9px;font-size:12.5px;cursor:pointer}
.shell-reset:hover{color:#e8f2ee;border-color:#3c4a47}
.shell-reset:disabled{opacity:.4;cursor:default}

/* ---------------- stage ------------------------------------------- */
.stage{position:relative;min-height:640px;height:calc(100dvh - 59px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--chrome-stage);font-family:var(--office)}
.stage[data-view=web]{background:#e9ecee;align-items:stretch;padding:22px 18px}

/* PowerPoint backdrop — layout preview only, never interactive */
.backdrop{position:absolute;inset:0;display:flex;flex-direction:column;
  color:var(--chrome-ink);pointer-events:none;user-select:none;opacity:.7}
.stage[data-view=web] .backdrop{display:none}
.titlebar{height:42px;background:var(--chrome-bar);display:flex;align-items:center;gap:14px;padding:0 18px;font-size:12px}
.ppticon{background:var(--ppt-red);color:#fff;font-weight:600;padding:3px 7px;border-radius:3px}
.ribbontabs{display:flex;gap:26px;align-items:center;background:#fafafa;padding:9px 24px;font-size:12px}
.ribbontabs strong{color:#006b49}
.ribbon{height:76px;background:#f9fafb;display:flex;align-items:center;
  border-bottom:1px solid var(--chrome-rule);padding:12px 14px}
.ribbon span{width:135px;border-right:1px solid #d5d9dd;height:45px;
  display:flex;align-items:flex-end;justify-content:center;font-size:11px}
.workarea{display:flex;flex:1;min-height:0}
.thumbs{width:174px;background:#f4f4f4;padding:26px 12px;flex-shrink:0}
.thumbs>div{display:flex;gap:9px;align-items:flex-start;margin-bottom:22px;font-size:10px}
.thumbs i{display:block;aspect-ratio:16/9;background:#fff;border:1px solid #b8bec4;flex:1}
.backslide{background:#fff;width:72%;aspect-ratio:16/9;margin:auto;padding:7% 9%;box-shadow:0 2px 8px #45505a18}
.backslide div{height:15px;width:65%;background:#e8ecee;margin-bottom:20px}
.backslide div:first-child{height:28px;width:50%;margin-bottom:45px}
.statusbar{padding:6px 18px;background:#f7f7f8;font-size:11px}

/* the floating auxi window over PowerPoint */
.window{position:relative;display:flex;flex-direction:column;
  width:962px;height:733px;max-width:calc(100vw - 48px);max-height:calc(100dvh - 107px);
  background:#fff;border:1px solid #a8b0b5;border-radius:8px;
  box-shadow:0 24px 70px #15212b40;overflow:hidden}
.windowbar{height:31px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  background:#f8f9fa;border-bottom:1px solid #e2e5e7;padding:0 13px;font-size:11px;color:#46525a}
.windowbar a{color:#006b49;text-underline-offset:3px;cursor:pointer}

/* the standalone browser view */
.browser{display:flex;flex-direction:column;width:100%;max-width:1240px;margin-inline:auto;
  background:#fff;border:1px solid #c3cace;border-radius:10px;overflow:hidden;
  box-shadow:0 18px 50px #15212b26;min-height:0}
.browser-chrome{flex-shrink:0}
.tabstrip{display:flex;align-items:flex-end;gap:8px;background:#dfe3e6;padding:7px 10px 0}
.tabstrip .tab{display:flex;align-items:center;gap:7px;background:#fff;border-radius:8px 8px 0 0;
  padding:7px 15px;font-size:11.5px;color:#3c464c;max-width:230px}
.tabstrip .dot{width:11px;height:11px;border-radius:3px;background:linear-gradient(100deg,var(--surge),var(--arc));flex-shrink:0}
.omnibox{display:flex;align-items:center;gap:9px;background:#fff;border-bottom:1px solid #e2e5e7;padding:7px 12px}
.omnibox .url{flex:1;background:#f1f3f4;border-radius:999px;padding:5px 13px;font-size:11.5px;color:#4a555b}
.omnibox .url b{color:#1e2123;font-weight:500}
.omnibox .nav{color:#7c878d;font-size:13px;letter-spacing:3px}

/* the app frame — identical in both hosts */
.app{flex:1;min-height:0;display:flex;flex-direction:column;
  background:var(--mist);color:var(--void);font-family:var(--app);font-size:13px;overflow:hidden}
.app-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-shrink:0;background:#fff;border-bottom:1px solid var(--line-soft);padding:9px 20px}
.logo{display:flex;align-items:baseline;gap:8px;letter-spacing:-.02em;color:var(--void)}
.logo b{font-size:21px;font-weight:600;letter-spacing:-.08em}
.logo span{font-size:14px;font-weight:400;color:var(--muted)}
.head-tools{display:flex;align-items:center;gap:4px;position:relative}
.ghost{border:0;background:transparent;color:var(--muted);padding:6px 10px;border-radius:8px;
  font-size:12px;cursor:pointer}
.ghost:hover{background:var(--mist);color:var(--void)}
.ghost[aria-expanded=true]{background:var(--mist);color:var(--void)}
.app-body{flex:1;min-height:0;overflow:auto}

/* account popover — the prototype's "Account" button, opened */
.account-pop{position:absolute;right:0;top:calc(100% + 7px);z-index:30;width:250px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 16px 44px #15212b2a;display:grid;gap:2px}
.account-pop .who{padding:8px 10px 6px;font-size:12px}
.account-pop .who strong{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-pop .who span{color:var(--muted);font-size:11.5px}
.account-pop button,.account-pop a{border:0;background:transparent;text-align:start;border-radius:7px;
  padding:8px 10px;font-size:12px;cursor:pointer;color:var(--void);text-decoration:none;display:block}
.account-pop button:hover,.account-pop a:hover{background:var(--mist)}
.account-pop hr{border:0;border-top:1px solid var(--line-soft);margin:4px 6px}

/* ---------------- setup ------------------------------------------- */
.setup{max-width:660px;margin-inline:auto;padding:26px 22px 40px;display:flex;flex-direction:column;gap:20px}
.setup h1{font-size:25px;font-weight:600;letter-spacing:-.02em;margin:0;text-wrap:balance}
.setup .lede{margin:5px 0 0;color:var(--muted);font-size:14px}
.deckcard{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:15px 17px}
.deckcard .whence{color:var(--faint)}
.deckcard .file{width:40px;height:40px;flex-shrink:0;border-radius:9px;background:var(--veil);
  color:var(--grove);display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:-.03em}
.deckcard .meta{min-width:0;flex:1}
.deckcard .meta strong{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deckcard .meta p{margin:3px 0 0;font-size:12px;color:var(--muted)}
/* the same card before a deck is chosen: it is the drop target */
.deckcard.empty{border-style:dashed;cursor:pointer;background:#fff}
.deckcard.empty:hover,.deckcard.empty.dragging{border-color:var(--grove);background:var(--veil)}
.deckcard.empty .file{background:var(--mist)}
.deckcard .warn{color:var(--danger)}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--veil);color:var(--grove);
  border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;white-space:nowrap}
.chip.quiet{background:var(--mist);color:var(--muted)}
.langs{display:flex;align-items:flex-end;gap:10px}
.langs .field{flex:1;min-width:0}
.langs label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tx-root select,.tx-root .txt{width:100%;height:44px;border:1px solid var(--line);background:#fff;color:var(--void);
  border-radius:9px;padding:0 12px;font-family:var(--app);font-size:13.5px}
.swap{width:44px;height:44px;flex-shrink:0;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--grove);font-size:16px;cursor:pointer}
.swap:hover{background:var(--veil)}
.options{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.options>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:13px 17px;font-size:13px;font-weight:500}
.options>summary::-webkit-details-marker{display:none}
.options>summary::after{content:'▾';margin-left:auto;color:var(--muted);font-size:11px}
.options[open]>summary::after{content:'▴'}
.options .panel{border-top:1px solid var(--line-soft);padding:14px;display:grid;gap:12px;background:var(--mist)}

/* settings cards */
.scard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 15px;display:grid;gap:11px}
.shead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.shead h3{margin:0;font-size:13.5px;font-weight:600}
.shead p{margin:3px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.gtools{display:flex;flex-wrap:wrap;gap:6px}
.terms{display:grid;gap:7px}
.term{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12.5px}
.term .arrow{color:var(--muted)}
.term>span{background:var(--mist);border:1px solid var(--line-soft);border-radius:8px;padding:7px 10px;overflow-wrap:anywhere}
.term>span.arrow{background:transparent;border:0;padding:0}
.term [lang=ar],.term [dir=rtl]{font-family:var(--ar);font-size:14px}
.term input{height:34px;font-size:12.5px;padding:0 10px;border-radius:8px;min-width:0;width:100%}
.term input.incomplete{border-color:#c98a00}
.term>span[role=button]{cursor:text}
.term>span[role=button]:hover{border-color:var(--line)}
.term .term-hint{grid-column:1/-1;margin:-3px 0 0;font-size:11px;color:#7a4a00}
.hintline{margin:0;font-size:11.5px;color:var(--faint);line-height:1.5}
.hintline.notice{color:var(--grove)}
.hintline.warn{color:var(--danger)}

/* one setting: icon · label+description · control */
.srow{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding-top:11px;border-top:1px solid var(--line-soft)}
.srow.plain,.srow.stack{grid-template-columns:minmax(0,1fr) auto}
.srow.stack{align-items:flex-start}
.sicon{width:26px;height:26px;border-radius:7px;background:var(--veil);color:var(--grove);
  display:grid;place-items:center;font-size:11px;font-weight:700}
.sbody{min-width:0;display:grid;gap:2px}
.sbody strong{font-size:12.5px;font-weight:600}
.sbody>span{font-size:11.5px;color:var(--muted);line-height:1.45}
.sctl{display:flex;align-items:center;gap:7px;justify-self:end}
.sctl select{height:34px;font-size:12px;width:auto;max-width:190px}
.sctl.wide{flex-wrap:wrap;justify-content:flex-end}
.srow.stack .sctl{padding-top:8px;grid-column:1/-1;justify-self:stretch;justify-content:flex-start}
.srow.stack .sctl select{min-width:0;max-width:100%;flex:1 1 220px}
.srow.stack .sctl input{height:34px;font-size:12px;flex:1 1 180px;border-radius:9px;border:1px solid var(--line);padding:0 10px;background:#fff}
.subnote{grid-column:1/-1;margin:0;font-size:11.5px;color:var(--muted);line-height:1.5;
  background:var(--mist);border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px}
.subnote.warn{color:#7a4a00;background:#fff8e8;border-color:#f1d9a0}
.subnote label{display:flex;gap:7px;align-items:flex-start;margin-top:6px;font-weight:500;color:var(--void);cursor:pointer}
.subnote input[type=checkbox]{width:15px;height:15px;margin-top:1px;flex-shrink:0;accent-color:var(--grove)}

/* switch */
.tgl{width:40px;height:23px;flex-shrink:0;border:1px solid var(--line);background:var(--fog);
  border-radius:999px;padding:2px;cursor:pointer;position:relative;transition:background .15s}
.tgl span{display:block;width:17px;height:17px;border-radius:999px;background:#fff;
  box-shadow:0 1px 3px #15212b40;transition:transform .15s}
.tgl[aria-checked=true]{background:linear-gradient(100deg,var(--surge),var(--arc));border-color:transparent}
.tgl[aria-checked=true] span{transform:translateX(17px)}

/* segmented */
.seg{display:inline-flex;gap:2px;background:var(--mist);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg button{border:0;background:transparent;color:var(--muted);border-radius:7px;
  padding:5px 12px;font-size:12.5px;cursor:pointer}
.seg button[aria-pressed=true]{background:#fff;color:var(--void);font-weight:600;box-shadow:0 1px 3px #15212b1a}

/* mirror matrix */
.matrix{background:var(--mist);border:1px solid var(--line-soft);border-radius:10px;padding:11px 12px;display:grid;gap:9px}
.matrix table{width:100%;border-collapse:collapse;font-size:12px}
.matrix caption{caption-side:top;text-align:start;font-size:11.5px;color:var(--muted);
  line-height:1.45;padding-bottom:8px}
.matrix th{font-weight:600;text-align:start;padding:5px 6px}
.matrix thead th{font-size:11px;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.matrix thead th:not(:first-child),.matrix td{text-align:center;width:74px}
.matrix td{padding:4px 6px}
.matrix tbody th{font-weight:400}
.cbx{width:19px;height:19px;padding:1px 6px;border:1px solid var(--line-strong,#8a9b9f);background:#fff;border-radius:5px;cursor:pointer}
.cbx[aria-checked=true]{background:var(--grove);border-color:var(--grove);position:relative}
.cbx[aria-checked=true]::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.matrix .srow{border-top:1px solid var(--line-soft);padding-top:9px}
.treatment{margin:0;font-size:12px;color:var(--muted);padding:0 17px 13px}
.finish{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.finish strong{font-size:14.5px}
.finish p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.primary{border:0;border-radius:10px;padding:0 20px;height:46px;cursor:pointer;
  background:linear-gradient(100deg,var(--surge),var(--arc));color:#06231a;
  font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 0 26px -8px #16ff6588}
.primary:hover{opacity:.93}
.primary:disabled{opacity:.4;box-shadow:none;cursor:default}
.reassure{margin:0;text-align:center;font-size:12px;color:var(--muted)}
.setup .error{margin:0;font-size:12.5px;color:var(--danger);background:#fdf1f3;border:1px solid #f1c9d1;
  border-radius:9px;padding:9px 12px}

/* ---------------- processing -------------------------------------- */
.processing{max-width:520px;margin:auto;padding:44px 22px;text-align:center;
  display:flex;flex-direction:column;gap:16px;min-height:100%;justify-content:center}
.processing h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em}
.bar{height:7px;border-radius:999px;background:var(--fog);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(100deg,var(--surge),var(--arc));transition:width .28s ease}
.processing .pct{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.processing .hint{font-size:12px;color:var(--faint);margin:0}
.processing .problem{margin:0;font-size:12.5px;color:var(--danger);background:#fdf1f3;
  border:1px solid #f1c9d1;border-radius:9px;padding:10px 12px;text-align:start;line-height:1.5}
.processing .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ---------------- review studio ----------------------------------- */
.studio{display:flex;flex-direction:column;flex:1;min-height:0;background:#fff}
.studio-head{display:flex;align-items:center;gap:11px;flex-shrink:0;flex-wrap:wrap;
  border-bottom:1px solid var(--line-soft);padding:9px 16px}
.iconbtn{width:32px;height:32px;border:1px solid transparent;background:transparent;border-radius:8px;
  color:var(--muted);cursor:pointer;font-size:14px}
.iconbtn:hover:not(:disabled){background:var(--mist);color:var(--void)}
.iconbtn:disabled{opacity:.35;cursor:default}
.studio-title{min-width:0;flex:1}
.studio-title h2{margin:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-title span{font-size:11.5px;color:var(--muted)}
/* review notes */
.notes{position:relative}
.notes-link{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:12px;font-weight:500;color:var(--muted);background:transparent;
  border:0;border-radius:8px;padding:6px 9px;font-variant-numeric:tabular-nums}
.notes-link:hover{background:var(--mist);color:var(--void)}
.notes-link[aria-expanded=true]{background:var(--mist);color:var(--void)}
.notes-link .dot{width:6px;height:6px;border-radius:999px;flex-shrink:0}
.notes-link[data-tone=error] .dot{background:var(--danger)}
.notes-link[data-tone=check] .dot{background:#8b5600}
.notes-link[data-tone=clear] .dot{background:#007442}

.notes-panel{position:absolute;right:0;top:calc(100% + 7px);z-index:30;width:376px;
  max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:13px;
  box-shadow:0 18px 48px #15212b2e;overflow:hidden}
.np-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px 0}
.np-head h3{margin:0;font-size:13.5px;font-weight:600}
.np-lede{margin:4px 13px 10px;font-size:11.5px;color:var(--muted);line-height:1.5}
.np-list{list-style:none;margin:0;padding:0;max-height:320px;overflow-y:auto;border-top:1px solid var(--line-soft)}

.note{display:grid;grid-template-columns:3px minmax(0,1fr);gap:11px;align-items:start;
  padding:11px 13px 11px 0;border-bottom:1px solid var(--line-soft)}
.note .sev{grid-row:1/3;width:3px;align-self:stretch;border-radius:0 3px 3px 0;background:var(--line-strong)}
.note[data-sev=error] .sev{background:var(--danger)}
.note[data-sev=check] .sev{background:#8b5600}
.ntext{min-width:0}
.ntext strong{display:block;font-size:12.5px;font-weight:600;line-height:1.35}
.nwhere{display:inline-block;margin-top:4px;font-size:10px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);background:var(--mist);border-radius:999px;padding:2px 7px}
.ntext p{margin:5px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.nfixed{color:#00623a!important;font-weight:500}
.nacts{grid-column:2;display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.nacts .mini-btn{font-size:11px;padding:5px 9px}
.note.done{background:#fbfcfb}
.note.done .sev{background:#007442}
.note.done .ntext strong{color:var(--muted);text-decoration:line-through;text-decoration-color:#b9c4c0}
.note.done .nacts:empty{display:none}

.np-changes{border-top:1px solid var(--line-soft);background:var(--mist)}
.np-changes summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:10px 13px;font-size:11.5px;font-weight:600;color:var(--muted)}
.np-changes summary::-webkit-details-marker{display:none}
.np-changes summary::after{content:'▾';margin-left:auto;font-size:10px}
.np-changes[open] summary::after{content:'▴'}
.np-changes summary span{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:0 6px;font-size:10px;line-height:15px;font-variant-numeric:tabular-nums}
.np-changes ul{list-style:none;margin:0;padding:0 13px 11px;display:grid;gap:9px}
.np-changes strong{font-size:11.5px;font-weight:600}
.np-changes p{margin:2px 0 0;font-size:11px;color:var(--muted);line-height:1.45}
/* Split button: one primary action, its variants behind an attached caret. */
.split{position:relative;display:flex}
.dl{border:0;height:36px;cursor:pointer;white-space:nowrap;
  background:linear-gradient(100deg,var(--surge),var(--arc));color:#06231a;font-size:12.5px;font-weight:700}
.split .dl:first-child{border-radius:9px 0 0 9px;padding:0 16px}
.split .dl.caret{border-radius:0 9px 9px 0;width:34px;display:grid;place-items:center;
  border-left:1px solid #12141730;padding:0}
.dl:hover{filter:brightness(1.04)}
.dl:disabled{opacity:.5;cursor:default;filter:none}
.dl.caret svg{width:15px;height:15px;transition:transform .2s}
.dl.caret svg.flip{transform:rotate(180deg)}

.splitmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:262px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:5px;
  box-shadow:0 16px 44px #15212b2a;display:grid;gap:1px}
.splitmenu button{border:0;background:transparent;text-align:start;border-radius:7px;
  padding:8px 10px;font-size:12px;cursor:pointer;color:var(--void);display:grid;gap:2px}
.splitmenu button:hover,.splitmenu button:focus-visible{background:var(--mist)}
.splitmenu strong{font-size:12px;font-weight:600}
.splitmenu span{font-size:11px;color:var(--muted);line-height:1.4}
.splitmenu hr{border:0;border-top:1px solid var(--line-soft);margin:4px 6px}
.tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  flex-shrink:0;border-bottom:1px solid var(--line-soft);padding:8px 16px;background:var(--mist)}
.slidenav{display:flex;align-items:center;gap:6px}
.slidenav select{height:30px;width:auto;font-size:12px;padding:0 8px}
.tabs{display:flex;gap:2px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:3px}
.tabs button{border:0;background:transparent;color:var(--muted);border-radius:6px;
  padding:5px 13px;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected=true]{background:var(--grove);color:#fff;font-weight:600}
.zoom{display:flex;align-items:center;gap:4px}
.zoom button{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;font-size:13px}
.zoom .lvl{width:auto;padding:0 9px;font-size:11.5px;font-variant-numeric:tabular-nums}
.zoom button:disabled{opacity:.4;cursor:default}

/* compare slides */
.workbench{display:flex;flex:1;min-height:0}
.rail{width:104px;flex-shrink:0;border-right:1px solid var(--line-soft);background:var(--mist);
  overflow-y:auto;padding:8px 6px;display:flex;flex-direction:column;gap:6px}
.rail button{border:1px solid transparent;background:transparent;border-radius:8px;padding:4px;
  cursor:pointer;display:grid;gap:3px;justify-items:center;font-size:10px;color:var(--muted)}
.rail button[aria-current=page]{border-color:var(--grove);background:#fff;color:var(--void);font-weight:600}
.rail .mini{width:100%;aspect-ratio:16/9;background:#fff;border:1px solid var(--line);border-radius:3px;
  overflow:hidden;container-type:inline-size}
.canvases{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:1px;background:var(--line-soft)}
.side{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff}
.cap{display:flex;align-items:center;justify-content:space-between;gap:6px 8px;flex-wrap:wrap;
  flex-shrink:0;padding:7px 13px;border-bottom:1px solid var(--line-soft);font-size:11px;color:var(--muted)}
.cap b{font-weight:600;color:var(--void);font-size:11.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cap i{font-style:normal;color:var(--grove);background:var(--veil);border-radius:999px;padding:1px 7px;font-size:10px;font-weight:600}
.scroll{flex:1;min-height:0;overflow:auto;padding:16px;display:grid;place-items:start;background:var(--mist)}

/* the simulated slide */
.paper{width:100%;max-width:100%;aspect-ratio:16/9;background:#fff;border:1px solid var(--line);
  box-shadow:0 2px 10px #45505a14;container-type:inline-size;position:relative;overflow:hidden}
.paper .pad{position:absolute;inset:0;padding:7cqw 8cqw;display:flex;flex-direction:column;gap:2.4cqw}
.paper .eyebrow{font-size:2cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--grove);font-weight:600}
.paper .ttl{font-size:6cqw;font-weight:600;line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance}
.paper ul{margin:.6cqw 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1.9cqw}
.paper li{font-size:3cqw;line-height:1.45;color:#2c3538;display:flex;gap:1.6cqw;align-items:flex-start}
.paper li::before{content:'';flex-shrink:0;width:1cqw;height:1cqw;border-radius:999px;
  background:var(--grove);margin-top:1.05cqw}
.paper .rule{height:.5cqw;width:12cqw;background:linear-gradient(100deg,var(--surge),var(--arc));border-radius:999px}
.paper[dir=rtl] li{flex-direction:row-reverse;text-align:right}
.paper[dir=rtl] .pad{align-items:flex-end;text-align:right}
.paper[dir=rtl] ul{width:100%}
.paper .t{cursor:default;border-radius:.6cqw}
.paper.live .t{cursor:text}
.paper.live .t:hover{background:#e8f7f5aa;box-shadow:0 0 0 .5cqw #e8f7f5aa}
.paper .t.sel{background:#d9f5ea;box-shadow:0 0 0 .5cqw #d9f5ea,0 0 0 .8cqw var(--grove)}
.paper .t.edited::after{content:'';display:inline-block;width:.9cqw;height:.9cqw;border-radius:999px;
  background:var(--grove);margin-inline-start:.9cqw;vertical-align:middle}
.paper .more{font-size:2.4cqw;color:var(--muted);margin:0;direction:ltr;unicode-bidi:isolate}
.mini .pad{padding:8cqw;gap:3cqw}
.mini .ttl{font-size:9cqw}
.mini li{font-size:5cqw;gap:2cqw}
.mini li::before{width:1.8cqw;height:1.8cqw;margin-top:1.8cqw}
.mini .eyebrow,.mini .rule,.mini .more{display:none}

.context{flex-shrink:0;border-top:1px solid var(--line-soft);background:#fff;padding:10px 16px;
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;min-height:54px}
.context .orig{min-width:0;flex:1 1 240px}
.context .orig span{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.context .orig p{margin:0;font-size:13px;line-height:1.5}
.context .acts{display:flex;gap:6px;flex-wrap:wrap}
.mini-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 11px;
  font-size:11.5px;cursor:pointer;color:var(--void)}
.mini-btn:hover:not(:disabled){background:var(--mist)}
.mini-btn:disabled{opacity:.4;cursor:default}
.mini-btn.go{border-color:var(--grove);color:var(--grove);font-weight:600}
.idle{margin:0;font-size:12.5px;color:var(--muted)}
.inline-edit{width:100%;min-height:76px;border:1px solid var(--grove);border-radius:9px;padding:9px 11px;
  font-family:var(--app);font-size:13.5px;line-height:1.6;resize:vertical;background:#fff}
.inline-edit[dir=rtl]{font-family:var(--ar);font-size:14px;line-height:1.7}
.footnote{flex-shrink:0;padding:6px 16px;font-size:11px;color:var(--faint);border-top:1px solid var(--line-soft);background:var(--mist)}

/* review text — the deck-wide paired rows */
.deck{flex:1;min-height:0;overflow:auto;background:#fff;color:#26382d}
.deck-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:16px 20px 13px;background:#fff}
.deck-top h2{margin:0 0 4px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.deck-top p{margin:0;font-size:12px;color:#56665c}
.deck-top .txt{width:300px;max-width:100%;height:38px;font-size:12.5px}
.heads{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:10px 20px;background:#f5f7f5;
  border-block:1px solid #e0e6e2;position:sticky;top:0;z-index:3;font-size:11.5px;font-weight:600}
.group h3{display:flex;align-items:center;gap:12px;margin:0;padding:16px 20px 8px;
  font-size:11.5px;font-weight:600;color:#006b49;position:sticky;top:38px;z-index:2;background:#fff}
.group h3 span{font-weight:400;color:#56665c;font-size:11px}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;
  padding:9px 20px;border-bottom:1px solid #edf0ed;content-visibility:auto;contain-intrinsic-size:auto 62px}
.row.editing{background:#f6faf7;content-visibility:visible}
.row .src{margin:0;font-size:13.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
/* The segment's number within its slide — "Slide 12 · 4" — so a reviewer can
   say where they are. Sits inside the source paragraph so the two-column grid
   is untouched; margin follows the paragraph's own direction. */
.row .src .ref{display:inline-block;min-width:1.7em;margin-inline-end:8px;padding:0 5px;border-radius:6px;
  background:#eef3f1;color:#56665c;font-size:10.5px;font-weight:700;line-height:1.7;text-align:center;
  font-family:var(--sans,system-ui);white-space:nowrap;vertical-align:baseline;user-select:none}
.row .tgt{min-width:0}
/* Text that stays exactly as authored beside a passage (a footnote mark, a
   badge number, a figure kept verbatim): visible, dashed, never editable. */
.fixed{display:inline;padding:0 4px;border-radius:4px;border:1px dashed #c9d5cf;background:#f4f7f5;
  color:#6b7a73;font-weight:600;white-space:nowrap;font-size:.92em}
.tline{display:flex;align-items:baseline;gap:6px;min-width:0}
.tline .open{flex:1 1 auto;min-width:0}
.fixedhint{margin:4px 0 0;font-size:11px;color:#56665c}
.tgt .open{display:block;width:100%;text-align:start;border:0;background:transparent;padding:0;
  border-radius:5px;cursor:text;font-size:13.5px;line-height:1.6;overflow-wrap:anywhere;color:inherit;white-space:pre-wrap}
.tgt .open:hover{background:#edf5ef;box-shadow:0 0 0 4px #edf5ef}
.tgt [lang=ar],.tgt [dir=rtl]{font-family:var(--ar);font-size:15px;line-height:1.75}
.tgt .edited{display:block;font-size:10px;font-weight:600;color:#007450;margin-top:3px}
.tgt .over{display:block;margin-top:5px;font-size:11.5px;color:#7a4a00;line-height:1.45}
.inline-edit[aria-invalid=true]{border-color:#c98a00;box-shadow:0 0 0 3px #fff8e8}
.context .over{flex:1 1 100%;margin:0;font-size:11.5px;color:#7a4a00;line-height:1.45}
.context .undrawn{flex:1 1 100%;margin:0;font-size:11.5px;color:var(--faint);line-height:1.45}
.rowacts{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:5px;padding-top:7px}
.rowacts .mini-btn{font-size:11px;padding:5px 9px}
.empty{padding:30px 20px;color:#56665c;font-size:13px}
.deck .loading{padding:30px 20px;color:#56665c;font-size:13px;display:flex;align-items:center;gap:10px}
.suggest{margin:6px 0 0;font-size:11.5px;color:#7a4a00;background:#fff8e8;border:1px solid #f1d9a0;border-radius:8px;padding:6px 9px;line-height:1.5}
.suggest b{font-weight:600}

/* footer status */
.status{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  flex-shrink:0;border-top:1px solid var(--line-soft);background:#fff;padding:7px 16px;
  font-size:11.5px;color:var(--muted)}
.status .saved{color:var(--grove);font-weight:500}
.status .failed{color:var(--danger);font-weight:500}

/* done — scoped to the screen so a checked review note (.note.done) keeps its own look */
.app-body>.done{max-width:470px;margin:auto;padding:44px 22px;text-align:center;display:flex;
  flex-direction:column;gap:13px;align-items:center;min-height:100%;justify-content:center}
.app-body>.done .tick{width:52px;height:52px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(100deg,var(--surge),var(--arc));color:#06231a;font-size:24px;font-weight:700}
.app-body>.done h2{margin:0;font-size:20px;font-weight:600}
.app-body>.done .fname{font-size:13px;background:var(--mist);border:1px solid var(--line);
  border-radius:9px;padding:9px 13px;overflow-wrap:anywhere}
.app-body>.done p{margin:0;font-size:12.5px;color:var(--muted)}
.app-body>.done .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* a confirmation, in the app's own voice */
.tx-confirm{position:fixed;inset:0;z-index:60;background:#12171a66;display:grid;place-items:center;padding:16px;
  font-family:var(--app);font-size:13px;color:var(--void)}
.tx-confirm .box{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 17px;
  width:min(380px,100%);box-shadow:0 18px 48px #15212b2e;display:grid;gap:10px}
.tx-confirm h3{margin:0;font-size:14.5px;font-weight:600}
.tx-confirm p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.tx-confirm .acts{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}

/* a spinner in the prototype's voice: a thin ring in the brand green */
.ring{display:inline-block;width:14px;height:14px;border-radius:999px;border:2px solid var(--fog);
  border-top-color:var(--grove);animation:tx-spin .9s linear infinite;vertical-align:middle}
@keyframes tx-spin{to{transform:rotate(360deg)}}

/* ---------------- responsive -------------------------------------- */
@media (max-width:900px){
  .canvases{grid-template-columns:1fr;grid-template-rows:none;overflow:auto}
  .rail{width:78px}
}
@media (max-width:700px){
  .stage{height:auto;min-height:0;padding:14px 10px;align-items:stretch}
  .deckcard .meta{flex:1 1 100%}
  .split .splitmenu{left:0;right:auto}
  .stage[data-view=web]{padding:14px 10px}
  .window{width:100%;max-width:none;height:auto;min-height:620px;max-height:none}
  .backdrop{display:none}
  .rail{display:none}
  .row,.heads{grid-template-columns:1fr;gap:8px}
  .heads span:last-child{display:none}
  .langs{flex-wrap:wrap}
  .langs .field{flex:1 1 100%}
  .swap{margin-inline:auto;transform:rotate(90deg)}
  .deck-top .txt{width:100%}
  .group h3{top:36px}
}
@media (prefers-reduced-motion:reduce){
  .tx-root *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .ring{animation-duration:2s!important}
}