/* VinFast Supplier Portal demo: tokens, shell, sign-in and the review sidebar. Screen components live in screens.css.
   Revamp of 10 Oct 2026 (see CHANGES_revamp.md): a cool neutral palette, VinFast blue #1464F4 as the single accent,
   white surfaces lifted by soft layered shadows instead of heavy borders, 10 to 14 px radii, Inter with tight tracking
   on headings and tabular numerals in tables, inline SVG icons on a 1.5 px stroke, 150 ms transitions.
   Nothing under 13 px. Class names and ids used by app.js and index.html are unchanged. */

@font-face{font-family:"Inter";src:url("/fonts/Inter-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* accent and ink (VinFast) */
  --vf-ink:#121721; --vf-blue:#1464F4;
  --vf-blue-600:#0E58E0; --vf-blue-700:#0B47BA; --vf-blue-050:#EEF4FF; --vf-blue-100:#DCE7FE; --vf-blue-200:#B9CFFC;
  --grad-primary:linear-gradient(180deg,#2C78FF 0%,#1464F4 55%,#0F5AE6 100%);
  --grad-ink:linear-gradient(90deg,#0B0F17 0%,#121721 45%,#172443 100%);

  /* cool neutrals */
  --g-0:#FFFFFF; --g-25:#FBFCFD; --g-50:#F6F7F9; --g-100:#F0F2F5; --g-150:#E8EBF0; --g-200:#E1E5EB; --g-300:#CDD3DC;
  --g-400:#9AA3B2; --g-500:#667085; --g-600:#475467; --g-700:#344054; --g-800:#1D2433;

  --vf-text:var(--g-800); --vf-text-2:var(--g-600); --vf-muted:var(--g-500);
  --vf-page:var(--g-50); --vf-surface:#FFFFFF; --vf-line:var(--g-200); --vf-line-2:var(--g-100); --vf-hair:var(--g-150); --vf-ring:var(--g-300);

  /* semantic colours */
  --vf-green:#13795B; --vf-green-bg:#E7F6EF; --vf-green-line:#B4E2CC;
  --vf-amber:#93600A; --vf-amber-bg:#FFF5E0; --vf-amber-line:#F2D49A;
  --vf-red:#C0322A; --vf-red-bg:#FEEEEC; --vf-red-line:#F5C2BD;
  --vf-grey:#475467; --vf-grey-bg:#F0F2F5;

  /* the eight states: supplier (four) and registration or document (four) */
  --st-candidate:#0B47BA; --st-candidate-bg:#EEF4FF;
  --st-approved:#13795B;  --st-approved-bg:#E7F6EF;
  --st-active:#FFFFFF;    --st-active-bg:#13795B;
  --st-blocked:#C0322A;   --st-blocked-bg:#FEEEEC;
  --st-draft:#475467;     --st-draft-bg:#F0F2F5;
  --st-submitted:#0B47BA; --st-submitted-bg:#EEF4FF;
  --st-review:#93600A;    --st-review-bg:#FFF5E0;
  --st-returned:#C0322A;  --st-returned-bg:#FFFFFF;

  /* type: display 30, title 24, section 18, body 15 to 16, table 14, label 13; nothing smaller */
  --fs:15px; --fs-md:16px; --fs-sm:14px; --fs-xs:13px; --fs-lg:18px; --fs-xl:24px; --fs-2xl:30px;
  --font:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* spacing, radii, elevation, motion */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --r:10px; --r-sm:8px; --r-lg:14px; --r-pill:999px;
  --sh-xs:0 1px 2px rgba(16,24,40,.05);
  --sh-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.07);
  --sh-md:0 1px 2px rgba(16,24,40,.04),0 4px 12px -2px rgba(16,24,40,.08);
  --sh-lg:0 2px 4px rgba(16,24,40,.04),0 16px 32px -8px rgba(16,24,40,.16);
  --ring:0 0 0 4px rgba(20,100,244,.14);
  --edge:inset 0 0 0 1px rgba(16,24,40,.07);
  --t:150ms cubic-bezier(.2,.7,.3,1);
  --topbar-h:60px; --rail-w:264px; --annot-w:380px;

  /* legacy aliases so older rules keep working */
  --navy:var(--vf-ink); --navy-2:#0B0F17; --blue:var(--vf-blue); --blue-soft:var(--vf-blue-050);
  --ink:var(--vf-ink); --text:var(--vf-text); --muted:var(--vf-muted); --line:var(--vf-line); --line-2:var(--vf-line-2);
  --bg:var(--vf-page); --surface:var(--vf-surface); --surface-2:var(--vf-page);
  --cand:var(--st-candidate); --cand-bg:var(--st-candidate-bg); --appr:var(--st-approved); --appr-bg:var(--st-approved-bg);
  --actv:var(--st-active-bg); --actv-bg:var(--st-approved-bg); --blkd:var(--st-blocked); --blkd-bg:var(--st-blocked-bg);
  --draft:var(--st-draft); --draft-bg:var(--st-draft-bg); --warn:var(--vf-amber); --warn-bg:var(--vf-amber-bg);
  --ok:var(--vf-green); --ok-bg:var(--vf-green-bg); --err:var(--vf-red); --err-bg:var(--vf-red-bg);
  --sh:var(--sh-sm);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font:400 var(--fs)/1.55 var(--font);color:var(--vf-text);background:var(--vf-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
a{color:var(--vf-blue);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--vf-blue-700)}
:focus-visible{outline:none;box-shadow:var(--ring),0 0 0 1px var(--vf-blue)}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hidden{display:none!important}
.muted{color:var(--vf-muted)} .small{font-size:var(--fs-sm)} .fine{font-size:var(--fs-xs);line-height:19px;color:var(--vf-muted)} .grow{flex:1}
.error{color:var(--vf-red);font-size:var(--fs-sm);margin-top:var(--s1);padding:10px 12px;border-radius:var(--r-sm);background:var(--vf-red-bg)}

/* ---------------------------------------------------------------- buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:var(--r);background:var(--vf-surface);color:var(--g-700);box-shadow:var(--edge),var(--sh-xs);font:inherit;font-size:var(--fs-sm);font-weight:600;line-height:1;letter-spacing:-.005em;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--t),box-shadow var(--t),color var(--t),transform var(--t)}
.btn:hover{background:var(--g-25);color:var(--vf-ink);box-shadow:inset 0 0 0 1px rgba(16,24,40,.12),var(--sh-sm)}
.btn:active{transform:translateY(.5px)}
.btn.primary{background:var(--grad-primary);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px #0F58E2,0 1px 2px rgba(20,100,244,.25),0 4px 10px -2px rgba(20,100,244,.30)}
.btn.primary:hover{background:linear-gradient(180deg,#1F6EFF 0%,#0F5AE6 60%,#0B4FCF 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px #0B4FCF,0 2px 4px rgba(20,100,244,.25),0 8px 18px -4px rgba(20,100,244,.38)}
.btn.ghost{background:transparent;box-shadow:none;color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn.small{height:34px;padding:0 13px;font-size:var(--fs-xs);border-radius:var(--r-sm)}
.btn.danger{background:none;box-shadow:none;color:var(--vf-red)}
.btn.danger:hover{background:var(--vf-red-bg);color:var(--vf-red);box-shadow:none}
.link{background:none;border:0;color:var(--vf-blue);font:inherit;font-size:var(--fs-sm);font-weight:500;cursor:pointer;padding:0;transition:color var(--t)}
.link:hover{color:var(--vf-blue-700);text-decoration:underline;text-underline-offset:3px}
.link.danger{color:var(--vf-red)}
.iconbtn{background:transparent;border:0;color:inherit;font:inherit;font-size:18px;line-height:1;cursor:pointer;padding:8px;border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:6px}
.iconbtn:hover{background:rgba(255,255,255,.12)}
.count{font-size:var(--fs-xs);line-height:18px;font-weight:600;color:inherit;min-width:8px}

/* ---------------------------------------------------------------- chips (frame and review sidebar only; screen states use .st in screens.css) */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;background:var(--g-100);color:var(--g-700);white-space:nowrap;text-transform:capitalize}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.chip.tiny{height:24px;padding:0 9px;font-size:var(--fs-xs)}
.chip.note{background:var(--g-100);color:var(--g-600)}
.chip.change{background:var(--vf-amber-bg);color:var(--vf-amber)}
.chip.question{background:var(--vf-blue-050);color:var(--vf-blue-700)}
.chip.blocker{background:var(--vf-red-bg);color:var(--vf-red)}

/* ---------------------------------------------------------------- sign in: a split layout, ink to VinFast blue on the left, the tenant name as text */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--vf-surface)}
.login-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:64px 72px;color:#fff;
  background:radial-gradient(900px 700px at 105% 95%,#1E6BFF 0%,rgba(20,100,244,.9) 25%,rgba(20,100,244,0) 70%),linear-gradient(118deg,#121721 0%,#121721 38%,#16285A 62%,#1464F4 100%)}
.login-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:
  linear-gradient(135deg,transparent calc(50% - .5px),rgba(255,255,255,.10) 50%,transparent calc(50% + .5px)) 0 0/100% 100% no-repeat,
  linear-gradient(45deg,transparent calc(50% - .5px),rgba(255,255,255,.08) 50%,transparent calc(50% + .5px)) -30% 40%/90% 90% no-repeat,
  linear-gradient(135deg,transparent calc(50% - .5px),rgba(255,255,255,.07) 50%,transparent calc(50% + .5px)) 60% -20%/70% 70% no-repeat}
.login-hero > *{position:relative}
.hero-copy h2{font-size:64px;line-height:68px;font-weight:700;letter-spacing:-.035em;max-width:12ch}
.hero-copy p{margin-top:22px;font-size:20px;line-height:30px;color:#C9D3E8;max-width:40ch}
.hero-list{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:34px}
.hero-list li{display:flex;align-items:center;gap:9px;font-size:var(--fs);line-height:22px;color:#E6ECF8}
.hero-list svg.i{width:19px;height:19px;color:#AFC4F0}
.hero-foot{position:absolute;left:72px;bottom:36px;font-size:var(--fs-xs);line-height:19px;color:#93A3C4}
.login-side{display:grid;place-items:center;padding:48px 32px;background:var(--vf-surface)}
.login-card{width:min(400px,100%);text-align:center}
.login-card h1{font-size:40px;line-height:46px;font-weight:700;letter-spacing:-.03em;color:var(--vf-ink)}
.login-card .brand-sub{margin-top:6px;font-size:18px;line-height:26px;color:var(--g-500)}
.login-card > p.muted{margin-top:14px;font-size:var(--fs-sm);line-height:22px}
.login-card > p.muted b{color:var(--g-700);font-weight:600}
.login-card form{display:flex;flex-direction:column;gap:14px;margin-top:30px;text-align:left}
.login-card label{display:block}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.login-card input{width:100%;height:50px;border:0;border-radius:var(--r);padding:0 16px;font:inherit;font-size:var(--fs-md);color:var(--vf-text);background:#fff;box-shadow:inset 0 0 0 1px var(--g-300);transition:box-shadow var(--t)}
.login-card input:hover{box-shadow:inset 0 0 0 1px var(--g-400)}
.login-card input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--vf-blue),var(--ring)}
.login-card input::placeholder{color:var(--g-500)}
.login-card .btn{margin-top:12px;height:50px;width:100%;font-size:var(--fs-md);background:var(--vf-blue);box-shadow:0 1px 2px rgba(20,100,244,.3)}
.login-card .btn:hover{background:var(--vf-blue-600)}
.login-card .fine{margin-top:18px;font-size:var(--fs-sm);color:var(--g-500)}
.brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand-mark{display:none} /* no logo or mark: the tenant name stays text */
.brand-name{font-weight:600;color:var(--vf-ink);font-size:var(--fs-lg);line-height:26px;letter-spacing:-.01em}
.brand-name b{font-weight:700}
.brand-sub{font-size:var(--fs-xs);line-height:18px;color:var(--vf-muted)}
.env{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;line-height:1;letter-spacing:.01em;background:rgba(255,255,255,.12);color:#DCE7FE;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
@media (max-width:960px){.login{grid-template-columns:minmax(0,1fr)}.login-hero{display:none}}

/* ---------------------------------------------------------------- shell */
.shell{height:100vh;display:flex;flex-direction:column;background:var(--vf-page)}
.topbar{position:relative;z-index:4;height:var(--topbar-h);background:var(--vf-ink);color:#fff;display:flex;align-items:center;gap:14px;padding:0 20px 0 22px;flex:none;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 1px 0 rgba(0,0,0,.2)}
.topbar .brand-name{color:#fff;font-size:var(--fs);font-weight:500;letter-spacing:-.005em}
.topbar .brand-name b{font-weight:700}
.topbar .tb-div{width:1px;height:20px;background:rgba(255,255,255,.16)}
/* top bar: wordmark, environment, the signed-in user with initials and role, Review and Sign out */
.who{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-sm);line-height:18px;color:#fff;padding:4px 12px 4px 4px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.who-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#4B8BFF,#1464F4);color:#fff;font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em}
.who-av:empty{display:none}
.who-t{display:flex;flex-direction:column}
.who-role{color:#AFBBD3;font-size:var(--fs-xs);line-height:16px}
.who-role:empty{display:none}
.toplink{display:inline-flex;align-items:center;gap:7px;height:36px;background:none;border:0;padding:0 12px;color:#E6ECF7;font:inherit;font-size:var(--fs-sm);font-weight:500;cursor:pointer;border-radius:var(--r-sm);transition:background var(--t),color var(--t)}
.toplink:hover{background:rgba(255,255,255,.1);color:#fff}
.toplink svg.i{width:17px;height:17px;opacity:.9}
.body{flex:1;display:flex;min-height:0}
.rail{width:var(--rail-w);flex:none;background:#F3F5F8;box-shadow:inset -1px 0 0 var(--g-200);overflow:auto;padding:18px 12px 28px;scrollbar-width:thin}
.rail.collapsed{display:none}
.rail-g{margin-bottom:18px}
.rail-gt{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);line-height:18px;font-weight:500;color:var(--g-500);padding:0 10px 6px;letter-spacing:.01em}
.rail-gt svg.i{width:16px;height:16px;color:var(--g-400)}
.rail-i{position:relative;display:flex;flex-direction:column-reverse;align-items:flex-start;padding:7px 10px 7px 12px;border-radius:var(--r-sm);color:var(--g-700);text-decoration:none;font-size:var(--fs-sm);line-height:20px;font-weight:500;transition:background var(--t),color var(--t)}
.rail-i::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:transparent;transition:background var(--t)}
.rail-i + .rail-i{margin-top:1px}
.rail-i:hover{background:rgba(16,24,40,.04);color:var(--vf-ink)}
.rail-i.active{background:#E3ECFE;color:var(--vf-blue-700);font-weight:600}
.rail-i.active::before{background:var(--grad-primary)}
.rail-step{display:block;margin-top:1px;font-size:var(--fs-xs);line-height:17px;font-weight:500;color:var(--g-400);font-variant-numeric:tabular-nums}
.rail-step:empty{display:none}
.rail-i.active .rail-step{color:var(--vf-blue)}
.work{flex:1;min-width:0;overflow:auto;padding:22px 36px 48px;background:var(--vf-page)}
.crumbs{max-width:1240px;margin:0 auto 18px;display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);line-height:18px;color:var(--g-500)}
.crumbs:empty{display:none}
.crumbs b{font-weight:500;color:var(--g-700)}
.crumbs svg.i{width:14px;height:14px;color:var(--g-300)}
.crumbs .home{display:inline-flex;align-items:center;color:var(--g-400)}
.crumbs .home svg.i{width:15px;height:15px;color:var(--g-400)}
.screen{max-width:1240px;margin:0 auto;position:relative;animation:fadein .22s ease-out}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.screen.picking{cursor:crosshair;outline:2px dashed var(--vf-blue);outline-offset:8px;border-radius:var(--r)}
.screen .anchored{outline:2px solid #E9A23B;outline-offset:3px;border-radius:var(--r-sm)}

/* ---------------------------------------------------------------- review sidebar: a floating panel beside the canvas (never over it) */
.annot{width:var(--annot-w);flex:none;margin:12px 12px 12px 0;background:var(--vf-surface);border-radius:var(--r-lg);box-shadow:var(--edge),var(--sh-lg);display:flex;flex-direction:column;min-height:0;overflow:hidden;animation:slidein .2s ease-out}
@keyframes slidein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.annot-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;padding:16px 18px 12px}
.annot-h b{grid-column:1;grid-row:1;font-size:var(--fs);font-weight:600;letter-spacing:-.01em;color:var(--vf-ink)}
.annot-h .link{grid-column:2;grid-row:1;display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:var(--r-sm);color:var(--g-600);font-size:var(--fs-xs);font-weight:600}
.annot-h .link:hover{background:var(--g-100);color:var(--vf-ink);text-decoration:none}
.annot-h .small{grid-column:1 / -1;grid-row:2;font-size:var(--fs-xs);line-height:18px}
.annot-tabs{display:flex;gap:2px;margin:0 18px 4px;padding:3px;border-radius:var(--r);background:var(--g-100)}
.annot-tabs .tab{flex:1;height:32px;background:none;border:0;border-radius:8px;font:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--g-500);cursor:pointer;transition:background var(--t),color var(--t),box-shadow var(--t)}
.annot-tabs .tab:hover{color:var(--vf-ink)}
.annot-tabs .tab.active{background:#fff;color:var(--vf-ink);box-shadow:var(--sh-sm)}
.annot-body{flex:1;overflow:auto;padding:14px 18px 18px}
.annot-body .row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.cform{display:flex;flex-direction:column;gap:12px;padding:14px;margin-bottom:18px;border-radius:var(--r);background:var(--g-50);box-shadow:inset 0 0 0 1px var(--g-150)}
.cform label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);font-weight:600;color:var(--g-700)}
.cform input,.cform textarea,.cform select{font:inherit;font-size:var(--fs-sm);border:0;border-radius:var(--r-sm);padding:8px 11px;color:var(--vf-text);background:#fff;box-shadow:inset 0 0 0 1px var(--g-200);resize:vertical;transition:box-shadow var(--t)}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;box-shadow:inset 0 0 0 1px var(--vf-blue),var(--ring)}
.cform .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.cform select{height:34px;padding:0 8px}
.cform .btn.primary{margin-left:auto}
.clist{list-style:none;display:flex;flex-direction:column;gap:10px}
.citem,.sitem,.aitem{position:relative;border-radius:var(--r);padding:12px 14px;background:var(--vf-surface);box-shadow:var(--edge),var(--sh-xs);transition:box-shadow var(--t)}
.citem:hover,.sitem:hover,.aitem:hover{box-shadow:inset 0 0 0 1px rgba(16,24,40,.1),var(--sh-md)}
.citem::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--g-300)}
.citem.sev-change::before{background:#E9A23B}.citem.sev-blocker::before{background:var(--vf-red)}.citem.sev-question::before{background:var(--vf-blue)}
.citem.st-done,.citem.st-dropped{opacity:.6}
.aitem{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm)}
.aitem .muted{font-size:var(--fs-xs)}
.cmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-xs);line-height:18px}
.cmeta b{font-weight:600;color:var(--vf-ink)}
.canchor{display:inline-flex;margin-top:6px;padding:2px 8px;border-radius:6px;font-size:var(--fs-xs);color:var(--vf-amber);background:var(--vf-amber-bg)}
.ctext{margin-top:6px;font-size:var(--fs-sm);line-height:21px;white-space:pre-wrap;color:var(--g-700)}
.creply{margin-top:8px;padding:8px 10px;background:var(--g-50);border-radius:var(--r-sm);font-size:var(--fs-xs);line-height:18px}
.cact{display:flex;gap:12px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--g-100)}
.cact select{font:inherit;font-size:var(--fs-xs);border:0;border-radius:6px;padding:3px 6px;background:var(--g-100);color:var(--g-700)}
.cact .link{font-size:var(--fs-xs)}
.sitem img{width:100%;border-radius:var(--r-sm);background:#fff;box-shadow:var(--edge)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:rgba(18,23,33,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:11px 18px;border-radius:12px;box-shadow:var(--sh-lg);font-size:var(--fs-sm);line-height:20px;max-width:min(640px,90vw);text-align:center;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------------------------------------------------------------- review page (printable) */
.review-page{background:#fff;padding:var(--s4);border-radius:var(--r-lg);box-shadow:var(--edge),var(--sh-sm)}
.review-page h1{font-size:var(--fs-2xl);line-height:36px;font-weight:600;letter-spacing:-.025em;color:var(--vf-ink)}
.review-page > p{font-size:var(--fs-sm);margin-top:var(--s1)}
.review-s{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--vf-line)}
.review-s h2{font-size:var(--fs-lg);line-height:26px;font-weight:600;color:var(--vf-ink);margin-bottom:10px}
.review-c{border-left:3px solid var(--vf-line);padding:6px 12px;margin:8px 0;font-size:var(--fs-sm)}
.review-c.sev-change{border-color:#E9A23B}.review-c.sev-blocker{border-color:var(--vf-red)}.review-c.sev-question{border-color:var(--vf-blue)}
.review-shot{margin:12px 0}.review-shot img{max-width:100%;border-radius:var(--r-sm);box-shadow:var(--edge)}.review-shot figcaption{font-size:var(--fs-xs);color:var(--vf-muted);margin-top:4px}

@media print{.topbar,.rail,.annot,.toast,.crumbs{display:none!important}.work{padding:0;overflow:visible;background:#fff}.shell{height:auto}.review-page{box-shadow:none;padding:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:900px){.rail{position:absolute;z-index:5;height:calc(100% - var(--topbar-h))}.annot{width:calc(100% - 24px);position:absolute;right:0;top:var(--topbar-h);height:calc(100% - var(--topbar-h) - 24px);z-index:6}.work{padding:var(--s2)}}