/* Statera — MCDA Comparative Evaluation. Redesigned UI (Claude Design handoff).
   Presentation layer only; all computation lives in the engine package, untouched. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Primary teal (#2489A6). --blue is used for large text/UI fills (≥18px, ~3.9:1 on white);
     small text/links MUST use --blue-d (#1C7187, ~5.3:1) to clear WCAG AA. */
  --blue:#2489A6; --blue-d:#1C7187; --blue-dd:#155567;
  --blue-100:#e2f0f4; --blue-50:#f0f8fa; --blue-200:#b3dae5;
  --green:#157347; --green-d:#0f5836; --green-100:#e2f0e9;
  --red:#B00020; --red-d:#8a0019; --red-100:#fbe6ea;
  --amber:#C77700; --amber-d:#8a5200; --amber-100:#fbeed8;
  --ink:#16202b; --ink2:#46535f; --ink3:#76828d;
  --line:#e3e8ed; --line2:#eef1f4;
  --surface:#ffffff; --panel:#f4f6f9; --bg:#eceff3;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;font-size:14px;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cbd3db;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* keyboard focus: a single visible teal ring on every interactive element (mouse clicks stay clean
   thanks to :focus-visible). Never remove an outline without a replacement. */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px;}

/* honor reduced-motion: neutralize decorative animation/transition for users who ask for it */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ---------------------------------------------------------------- layout shell */
.app-root{display:flex;height:100vh;width:100vw;overflow:hidden;background:var(--bg);}

#sidebar{flex:none;height:100vh;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;}
#sidebar.expanded{width:300px;}
#sidebar.collapsed{width:58px;}
#sidebar.expanded .sidebar-rail{display:none;}
#sidebar.collapsed .sidebar-expanded{display:none;}
.sidebar-expanded{height:100vh;overflow-y:auto;display:flex;flex-direction:column;}
.sidebar-rail{height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:16px 0;gap:18px;}

.main-panel{flex:1;display:flex;flex-direction:column;min-width:0;}

.topbar{height:50px;flex:none;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;}
.topbar-title{font-size:14px;color:var(--ink);}
.topbar-title b{color:var(--blue-d);}
.topbar-title .sep{color:var(--ink3);}
.topbar-meta{display:flex;align-items:center;gap:8px;}
.topbar-meta .lbl{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);}
.chip-view{font-size:11.5px;font-weight:500;color:var(--ink2);background:var(--line2);
  padding:3px 9px;border-radius:5px;}

/* --------------------------------------------------------------- signed in as (account notice)
   One element for the whole app: fixed to the bottom-right corner of the viewport, rendered once
   at the root of the layout (see _account_corner). Every placement inside the chrome cost the
   chrome something — a slot among the buttons, a line of its own, the header's own padding — and
   had to be solved again for each of the eleven bars that differ. Out here it costs nothing: no
   bar gives up any width or height for it, and it reads at the same place on every page.
   Styled as background information: caption-sized muted text, no border and no shadow, on a wash
   that vanishes over a white surface and masks whatever busier thing it lands on. The email
   carries the truncation budget; the standing is tinted only when it is more than "User", so
   extra reach is the one thing that catches the eye. */
.acct-corner{position:fixed;right:16px;bottom:12px;z-index:40;
  /* Passive status, never a target: the corner of a page is somewhere the user may well want to
     click, and a line that only reports something must not be what they hit. */
  pointer-events:none;
  max-width:min(360px,60vw);display:flex;justify-content:flex-end;}
.acct-chip{display:flex;align-items:baseline;gap:6px;min-width:0;color:var(--ink3);
  line-height:1.15;padding:5px 11px;border-radius:999px;
  /* Near-opaque on purpose: floating over a page means it can land on a line of a table or a
     card, and a wash you can read through would put text on text. It masks its own small corner
     instead — and over a white surface the mask is invisible, so all that shows is the words. */
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.acct-chip > *{line-height:1.15;}
.acct-label{flex:none;font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);}
.acct-email{font-size:11.5px;font-weight:600;color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-dot{flex:none;font-size:11px;opacity:.6;}
.acct-standing{flex:none;font-size:9.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink3);}
.acct-chip.elevated .acct-standing{color:var(--blue-d);}

/* The wizard is the one page whose own controls reach the bottom-right corner (.gv-footer's
   Back/Next sit there), so on it the notice steps up over that bar rather than across it. The
   views are shown and hidden by inline `display`, and the notice is their last sibling, so the
   page currently on screen can say where it goes. */
#guided-view:not([style*="none"]) ~ .acct-corner{bottom:76px;}

/* Methodology bar — scoped to the Overall Rankings tab only (see _rankings_method_bar) */
.rankings-method-bar{align-items:center;gap:16px;padding:12px 24px;background:var(--panel);
  border-bottom:1px solid var(--line);flex-wrap:wrap;}
.rmb-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink2);flex:none;}
.rmb-list.opt-list{display:flex;flex-direction:row;gap:4px;flex:none;}
.rmb-list.opt-list label{padding:4px 10px;border-radius:6px;}
.rmb-list.opt-list label:has(input:checked){background:var(--blue-100);}
.rmb-note{font-size:11px;color:var(--ink3);}

/* Overall Rankings: the tab renders BOTH an all-methods grid (.rankings-all) and the single
   selected chart (.rankings-single); CSS picks one by available width. Narrow (default): show the
   single chart + the Methodology selector. Wide enough for four sections (>=1080px): lay all four
   methodologies out as their own sections in a 2x2 grid, and hide both the single view and the
   now-redundant selector (the !important overrides the inline display the toggle_method_bar
   callback sets). Cells are top-aligned so the taller PROMETHEE section (chart + Φ table) doesn't
   stretch its neighbour; each cell stacks its chart card and any detail table sized to the column. */
.rankings-all{display:none;}
.rankings-single{max-width:920px;}   /* keep the fallback chart at its prior width (grid uses w1440) */
.rankings-grid{display:grid;gap:18px;align-items:start;}
/* Each cell is the bordered "section" so all four read as distinct, and PROMETHEE's chart + its Φ
   table sit inside one frame (not two boxes). The inner chart card drops its own frame to avoid a
   double border. */
.rankings-cell{min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:20px 24px;}
.rankings-cell .chart-card{border:none;border-radius:0;padding:0;background:none;}
@media (min-width:1080px){
  .rankings-tab .rankings-all{display:block;}
  .rankings-tab .rankings-single{display:none;}
  .rankings-grid{grid-template-columns:1fr 1fr;}
  .rankings-method-bar{display:none!important;}
}

/* ---------------------------------------------------------------- sidebar bits */
.brand{padding:17px 20px 14px;border-bottom:1px solid var(--line2);position:sticky;top:0;
  background:var(--surface);z-index:2;display:flex;align-items:center;justify-content:space-between;}
.brand-id{display:flex;align-items:center;gap:10px;}
.brand-logo{width:30px;height:30px;object-fit:contain;flex:none;}
.brand-name{font-size:19px;font-weight:700;color:var(--blue);line-height:1;}
.brand-name span{font-size:11.5px;font-weight:400;color:var(--ink3);}
.brand-sub{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin-top:3px;}
.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:6px;width:26px;height:26px;
  cursor:pointer;color:var(--ink2);font-size:14px;line-height:1;flex:none;}
.sidebar-body{padding:18px 20px 24px;display:flex;flex-direction:column;gap:20px;}

/* sidebar section header (currently just "Display Options") */
.side-sec{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);display:flex;align-items:center;gap:9px;margin-bottom:-6px;}
.side-sec::after{content:'';flex:1;height:1px;background:var(--line);}
.side-sec:not(:first-child){margin-top:8px;}

.step-label{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:9px;display:flex;align-items:center;gap:7px;}
.step-num{width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;flex:none;}

.dropzone{border:1.5px dashed var(--blue-200);background:var(--blue-50);border-radius:9px;
  padding:16px 12px;text-align:center;cursor:pointer;}
.dropzone .dz-ic{width:30px;height:30px;margin:0 auto 8px;border-radius:50%;background:#fff;
  border:1px solid var(--blue-200);display:flex;align-items:center;justify-content:center;}
.dropzone .dz-txt{font-size:12.5px;color:var(--ink2);font-weight:500;line-height:1.4;}
.dropzone .dz-txt .mono{font-family:var(--mono);}

.status{margin-top:9px;font-size:12px;display:flex;align-items:center;gap:6px;min-height:16px;}
.status.loaded{color:var(--green);font-weight:600;}
.status.loaded .dot{width:7px;height:7px;border-radius:50%;background:var(--green);}
.status.none{color:var(--ink3);}
.status.err{color:var(--red-d);font-weight:600;}
.status .fname{font-family:var(--mono);font-weight:500;}

.btn-run{width:100%;padding:12px;border:none;border-radius:8px;background:var(--blue);color:#fff;
  font-size:13.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:8px;box-shadow:0 1px 2px rgba(36,137,166,.3);font-family:var(--sans);}
.btn-run .step-num{background:rgba(255,255,255,.2);}
.btn-run:hover{background:var(--blue-d);}
.btn-run:disabled{background:#cfd6dd;box-shadow:none;cursor:not-allowed;}
.btn-run:disabled .step-num{background:rgba(255,255,255,.25);}
.btn-run.loading{pointer-events:none;background:var(--blue-d);}
.btn-run.loading::after{content:'';width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .7s linear infinite;}

.opt-card{border:1px solid var(--line);border-radius:9px;padding:13px 14px;}
.opt-card.notes{background:var(--panel);}
.opt-title{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:6px;}
.opt-list label{display:flex;align-items:center;gap:10px;padding:5px 2px;font-size:13px;
  color:var(--ink);cursor:pointer;}
.opt-list input{accent-color:var(--blue);width:15px;height:15px;cursor:pointer;}
.opt-list label:has(input:checked){color:var(--blue-d);font-weight:600;}
.notes-text{font-size:11.5px;line-height:1.55;color:var(--ink2);}
.notes-text b{color:var(--ink);}

/* report details form (the .m 'Statera Report Config' inputdlg) — Report tab, main content width */
.rpt-fields{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px 20px;margin-top:16px;max-width:720px;}
.rpt-field{display:flex;flex-direction:column;gap:4px;}
.rpt-lbl{font-size:11px;font-weight:500;color:var(--ink3);}
.rpt-input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;
  font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--surface);}
.rpt-input:hover{border-color:#cbd3db;}
.rpt-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-100);}

.rpt-actions{margin-top:22px;max-width:280px;}
.btn-report{width:100%;padding:11px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
  border:1.5px solid var(--green);background:#fff;color:var(--green-d);}
.btn-report.ready{border:none;background:var(--green);color:#fff;box-shadow:0 1px 2px rgba(21,115,71,.3);}
.report-msg{margin-top:8px;font-size:11.5px;color:var(--ink3);min-height:16px;}
/* Report Preview page: the iframe fills the area below the topbar. */
.report-preview{padding:20px 24px;height:100%;box-sizing:border-box;}
.report-preview-frame{width:100%;height:calc(100vh - 118px);border:1px solid var(--line2);
  border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06);}

.rail-divider{width:24px;height:1px;background:var(--line2);}

/* ---------------------------------------------------------------- project initialization (own page) */
.setup-page{height:100vh;width:100vw;display:flex;flex-direction:column;background:var(--bg);}
.setup-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;padding:40px 24px 56px;}
.setup-card{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;
  gap:16px;margin-top:auto;margin-bottom:auto;}
.setup-card .empty-ic{width:64px;height:64px;}
.setup-intro{text-align:center;}
.setup-card .setup-form{width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:22px 22px 24px;text-align:left;box-shadow:0 2px 10px rgba(22,32,43,.05);}
.setup-card .setup-form .btn-run{margin-top:14px;}
.setup-notes{font-size:11px;line-height:1.6;color:var(--ink3);text-align:center;max-width:340px;}
.setup-note-line + .setup-note-line{margin-top:7px;}

/* workbook config preview / validation card, filled once a file is chosen */
.setup-preview:empty{display:none;}
.setup-preview-card{margin-top:14px;border:1px solid var(--line);border-radius:9px;padding:13px 14px;
  background:var(--panel);}
.setup-preview-card.error{border-color:var(--red);background:var(--red-100);}
.prev-title{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:10px;}
.prev-title.err{color:var(--red-d);}
.prev-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px;}
.prev-stat{display:flex;flex-direction:column;align-items:center;gap:2px;}
.prev-num{font-size:18px;font-weight:700;color:var(--blue-d);font-family:var(--mono);line-height:1;}
.prev-lbl{font-size:9.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;text-align:center;}
.prev-ok{font-size:11.5px;font-weight:600;color:var(--green-d);}
.prev-warn-head{font-size:11px;font-weight:600;color:var(--amber-d);margin-bottom:4px;}
.prev-warn-list{margin:0;padding-left:16px;font-size:11px;line-height:1.5;color:var(--ink2);}
.prev-err-msg{font-size:11.5px;line-height:1.55;color:var(--red-d);}

/* ---------------------------------------------------------------- auth intro animation (login only)
   The Statera "weigh-in" intro: the balance-scale mark assembles from four aligned clip-path layers
   (post+beam first, pans weigh in, mark rocks and settles, swoosh sweeps through), the wordmark and
   tagline rise, a progress hairline runs, then login_intro.js adds .phase-login to #auth-view to
   segue into the compact header + login card. Every rule below is scoped to #auth-view — .setup-page/
   .setup-card/.setup-form are shared with #setup-view and #guided-view and must not be touched globally.
   Clip-path percentages/timings/easings are tuned to the icon's pixel geometry — do not eyeball-change. */
#auth-view{
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --pan-green: #58B947; --pan-blue: #2277C8;
  position:relative;
}

#auth-view .setup-card{
  gap:36px;
  transform:translateY(-2vh);
  transition:gap 800ms var(--ease-standard), transform 800ms var(--ease-standard);
}
#auth-view.phase-login .setup-card{gap:12px;transform:translateY(0);}

/* symbol: the logo-stack, sized to the loading-phase mark then shrunk into the header */
#auth-view .intro-symbol{width:240px;height:185px;display:grid;place-items:center;
  transition:width 800ms var(--ease-standard), height 800ms var(--ease-standard);}
#auth-view.phase-login .intro-symbol{width:88px;height:68px;}

#auth-view .logo-stack{position:relative;width:100%;aspect-ratio:1/1;transform-origin:50% 24%;}
@media (prefers-reduced-motion:no-preference){
  #auth-view .logo-stack{animation:auth-rock 1700ms var(--ease-standard) 1000ms both;}
}
@keyframes auth-rock{
  0%{transform:rotate(-5deg);} 26%{transform:rotate(3.4deg);} 50%{transform:rotate(-2deg);}
  72%{transform:rotate(1deg);} 100%{transform:rotate(0deg);}
}

#auth-view .ly{position:absolute;inset:0;width:100%;height:100%;opacity:0;}
/* finial + beam + post + base */
#auth-view .ly-structure{clip-path:polygon(28% 14%, 72% 14%, 72% 28%, 55.5% 28%, 55.5% 54%, 62% 54%,
  62% 61%, 38% 61%, 38% 54%, 44% 54%, 44% 28%, 28% 28%);}
/* left (green) pan + struts */
#auth-view .ly-pan-l{clip-path:inset(22% 55% 51% 17%);}
/* right (blue) pan + struts */
#auth-view .ly-pan-r{clip-path:inset(22% 17% 51% 55%);}
/* green->blue swoosh, wipes left to right */
#auth-view .ly-swoosh{clip-path:inset(43% 84% 14% 12%);}

@media (prefers-reduced-motion:no-preference){
  #auth-view .ly-structure{animation:auth-layer-in 450ms var(--ease-standard) 120ms forwards;}
  #auth-view .ly-pan-l{animation:auth-layer-in 380ms var(--ease-standard) 600ms forwards;}
  #auth-view .ly-pan-r{animation:auth-layer-in 380ms var(--ease-standard) 790ms forwards;}
  #auth-view .ly-swoosh{animation:auth-swoosh-wipe 950ms var(--ease-standard) 1480ms forwards;}
}
@keyframes auth-layer-in{to{opacity:1;}}
@keyframes auth-swoosh-wipe{
  0%{clip-path:inset(43% 84% 14% 12%);opacity:0;}
  14%{opacity:1;}
  100%{clip-path:inset(43% 12% 14% 12%);opacity:1;}
}

/* wordmark + tagline */
#auth-view .intro-copy{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  transition:gap 800ms var(--ease-standard);}
#auth-view.phase-login .intro-copy{gap:4px;}

#auth-view .intro-wordmark{font-family:var(--sans);font-weight:700;font-size:clamp(52px,7vw,84px);
  line-height:1;letter-spacing:-0.02em;color:var(--blue);margin:0;opacity:0;transform:translateY(12px);
  transition:font-size 800ms var(--ease-standard);}
@media (prefers-reduced-motion:no-preference){
  #auth-view .intro-wordmark{animation:auth-copy-in 700ms var(--ease-standard) 1750ms forwards;}
}
#auth-view.phase-login .intro-wordmark{font-size:30px;}

#auth-view .intro-tagline{font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink3);margin:0;opacity:0;transform:translateY(8px);
  transition:font-size 800ms var(--ease-standard), letter-spacing 800ms var(--ease-standard);}
@media (prefers-reduced-motion:no-preference){
  #auth-view .intro-tagline{animation:auth-copy-in 600ms var(--ease-standard) 1950ms forwards;}
}
#auth-view.phase-login .intro-tagline{font-size:10px;letter-spacing:.18em;}

@keyframes auth-copy-in{to{opacity:1;transform:translateY(0);}}

/* progress hairline */
#auth-view .intro-progress{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);
  width:220px;height:2px;border-radius:2px;background:color-mix(in srgb, var(--ink) 12%, transparent);
  overflow:hidden;opacity:0;transition:opacity 400ms var(--ease-standard);}
@media (prefers-reduced-motion:no-preference){
  #auth-view .intro-progress{animation:auth-progress-in 500ms var(--ease-standard) 2200ms forwards;}
}
#auth-view.phase-login .intro-progress{opacity:0!important;}
#auth-view .intro-progress::after{content:'';display:block;height:100%;width:30%;border-radius:2px;
  background:linear-gradient(90deg, var(--pan-green), var(--pan-blue));transform:translateX(-100%);}
@media (prefers-reduced-motion:no-preference){
  #auth-view .intro-progress::after{
    animation:auth-progress-fill 1600ms cubic-bezier(0.4,0,0.2,1) 2200ms forwards;}
}
@keyframes auth-progress-in{to{opacity:1;transform:translateX(-50%);}}
@keyframes auth-progress-fill{
  0%{transform:translateX(-100%);} 60%{transform:translateX(170%);} 100%{transform:translateX(330%);}
}

/* card: hidden during the intro (still occupies layout, so the segue has no jump), rises in 250ms
   into the segue to phase-login */
#auth-view .setup-card .setup-form{opacity:0;visibility:hidden;transform:translateY(24px);
  pointer-events:none;
  transition:opacity 600ms var(--ease-standard), transform 600ms var(--ease-standard),
    visibility 0s linear 600ms;}
#auth-view.phase-login .setup-card .setup-form{opacity:1;visibility:visible;transform:translateY(0);
  pointer-events:auto;
  transition:opacity 600ms var(--ease-standard) 250ms, transform 600ms var(--ease-standard) 250ms,
    visibility 0s linear 0s;}

/* card-swap: once the card is up, whichever form becomes visible (toggle_auth_mode flips its inline
   display:none/block) replays a 360ms rise-in — matches the design's "swap re-triggers a rise" without
   needing to remount the form. Scoped to .phase-login so it never fires during the intro itself. */
@media (prefers-reduced-motion:no-preference){
  #auth-view.phase-login .setup-form{animation:auth-card-swap 360ms var(--ease-standard);}
}
@keyframes auth-card-swap{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:translateY(0);}}

/* reduced motion: show the fully-assembled mark/wordmark/card immediately, no progress hairline —
   the app-wide reduce rule above zeroes animation-duration but not animation-delay, which on its own
   would still stagger this timeline in fast-forward, so the intro pieces get an explicit override. */
@media (prefers-reduced-motion:reduce){
  #auth-view .ly{opacity:1;}
  #auth-view .intro-wordmark, #auth-view .intro-tagline{opacity:1;transform:none;}
  #auth-view .intro-progress{display:none;}
  #auth-view .setup-card .setup-form{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
}

/* in-project topbar "New Analysis" (return to the setup screen) */
.btn-reanalyze{margin-left:10px;padding:6px 12px;border:1px solid var(--line);border-radius:7px;
  background:var(--surface);color:var(--ink2);font-size:12px;font-weight:600;cursor:pointer;
  font-family:var(--sans);white-space:nowrap;}
.btn-reanalyze:hover{border-color:var(--blue-200);color:var(--blue-d);background:var(--blue-50);}

/* ---------------------------------------------------------------- tab bar */
.tabs-bar{flex:none;background:var(--panel);border-bottom:1px solid var(--line);}
.tabs-bar .tab{flex:none!important;border:none!important;background:none!important;
  padding:11px 15px 12px!important;cursor:pointer;min-width:92px;text-align:center;line-height:1.25;
  font-size:12px;font-weight:500;color:var(--ink2)!important;border-bottom:2.5px solid transparent!important;}
.tabs-bar .tab--sel{font-weight:600;color:var(--blue)!important;
  border-bottom:2.5px solid var(--blue)!important;background:none!important;}
/* hover affordance on dcc.Tabs (inline styles set the base, so override with specificity) */
#tabs .tab:hover{color:var(--blue-d)!important;background:var(--blue-50)!important;}
#tabs .tab--selected:hover{background:none!important;}

/* ---------------------------------------------------------------- content */
.content-wrap{flex:1;position:relative;overflow:auto;background:var(--bg);}
.tab-pad{padding:24px;animation:fadeUp .3s ease;}
.tab-pad.w1100{max-width:1100px;} .tab-pad.w980{max-width:980px;}
.tab-pad.w940{max-width:940px;} .tab-pad.w920{max-width:920px;} .tab-pad.w1080{max-width:1080px;}
.tab-pad.w1440{max-width:1440px;}

.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.section-head h2{font-size:16px;font-weight:600;margin:0;color:var(--ink);}
.section-head .meta{font-size:11.5px;color:var(--ink3);}

.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:40px;}
.empty-ic{width:70px;height:70px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(22,32,43,.05);}
.empty-state .e-title{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:5px;text-align:center;}
.empty-state .e-sub{font-size:13.5px;color:var(--ink3);text-align:center;}
.empty-state .e-sub b{color:var(--ink2);}
.placeholder-card{background:var(--surface);border:1px dashed var(--line);border-radius:10px;
  padding:40px;text-align:center;color:var(--ink3);font-size:13.5px;}
.placeholder-card.italic{font-style:italic;}

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;}

/* ---------------------------------------------------------------- hero (analytical) */
.hero{border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--blue),var(--blue-dd));
  color:#fff;display:flex;box-shadow:0 4px 18px rgba(21,85,103,.28);margin-bottom:18px;}
.hero-left{flex:1.4;padding:26px 28px;display:flex;flex-direction:column;justify-content:center;}
.hero-right{flex:1;background:rgba(255,255,255,.07);padding:26px 28px;display:flex;flex-direction:column;
  justify-content:center;border-left:1px solid rgba(255,255,255,.12);}
.hero-eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#a9c4e0;margin-bottom:10px;}
.hero-eyebrow.tight{letter-spacing:.14em;margin-bottom:6px;}
.hero-winner{font-size:42px;font-weight:700;line-height:1;letter-spacing:-.01em;}
.hero-sub{font-size:13px;color:#bdd2e8;margin-top:10px;}
.hero-sub b{color:#fff;}
.hero-score{display:flex;align-items:baseline;gap:6px;}
.hero-score .num{font-family:var(--mono);font-size:46px;font-weight:600;line-height:1;}
.hero-score .den{font-size:16px;color:#a9c4e0;}
.hero-bar{margin-top:16px;height:8px;border-radius:4px;background:rgba(255,255,255,.18);
  position:relative;overflow:hidden;}
.hero-bar > div{position:absolute;left:0;top:0;bottom:0;background:#fff;border-radius:4px;}
.hero-cmp{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;
  color:#bdd2e8;margin-top:6px;}

.insight-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.insight-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px;
  transition:box-shadow .18s ease, border-color .18s ease;}
.insight-card:hover{box-shadow:0 3px 14px rgba(21,85,103,.07);border-color:var(--blue-200);}
.insight-card.acc-blue{border-top:3px solid var(--blue);}
.insight-card.acc-green{border-top:3px solid var(--green);}
.insight-card.acc-red{border-top:3px solid var(--red);}
.insight-card.acc-amber{border-top:3px solid var(--amber);}
.insight-label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;margin-bottom:10px;}
.insight-big{font-family:var(--mono);font-size:30px;font-weight:600;color:var(--blue);}
.insight-status{display:flex;align-items:center;gap:8px;}
.insight-status .dot{width:9px;height:9px;border-radius:50%;flex:none;}
.insight-status .t{font-size:18px;font-weight:600;}
.insight-status .t.sm{font-size:16px;}
.insight-p{font-size:12.5px;color:var(--ink2);line-height:1.55;margin-top:8px;}
.insight-p b{color:var(--ink);}
.prom-line{display:flex;align-items:baseline;gap:8px;}
.prom-line .name{font-size:18px;font-weight:600;color:var(--ink);}
.prom-line .flow{font-family:var(--mono);font-size:13px;color:var(--green-d);}

/* ---------------------------------------------------------------- tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface);}
table.stbl{width:100%;border-collapse:collapse;font-size:13px;}
table.stbl thead tr{background:var(--blue);}
table.stbl th{padding:10px 14px;color:#fff;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:600;text-align:left;white-space:nowrap;position:sticky;top:0;}
table.stbl th.r{text-align:right;}
table.stbl tbody tr{transition:background .15s ease;}
table.stbl tbody tr:hover{background:var(--blue-50);}
table.stbl tbody tr.total-row:hover{background:var(--blue-100);}
table.stbl td{padding:9px 14px;border-top:1px solid var(--line2);vertical-align:top;}
table.stbl td.r{text-align:right;}
table.stbl td.mono{font-family:var(--mono);}
table.stbl td.name{color:var(--ink);font-weight:500;}
table.stbl td.dim{color:var(--ink3);font-size:12px;}
table.stbl td.dim2{color:var(--ink2);}
.cell-win{color:var(--green-d);font-weight:600;}
.cell-lose{color:var(--ink2);}
tr.total-row{background:var(--blue-50);}
tr.total-row td{font-weight:600;}
.infbar{height:3px;border-radius:2px;background:var(--line2);margin-top:4px;overflow:hidden;}
.infbar > div{height:100%;background:var(--blue);}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:20px;
  font-size:11.5px;font-weight:600;white-space:nowrap;}
.pill .dot{width:6px;height:6px;border-radius:50%;}
.status-cell{font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.status-cell .dot{width:7px;height:7px;border-radius:50%;}
.status-cell.unstable{color:var(--red-d);} .status-cell.unstable .dot{background:var(--red);}
.status-cell.stable{color:var(--green-d);} .status-cell.stable .dot{background:var(--green);}

/* ---------------------------------------------------------------- charts (CSS) */
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px 26px;}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;}
.chart-head h2{font-size:17px;font-weight:600;margin:0;color:var(--blue-d);}
.chart-head h3{font-size:15px;font-weight:600;margin:0;color:var(--blue-d);}
.chart-head .unit{font-size:11.5px;color:var(--ink3);}
.chart-plot{position:relative;margin-top:18px;}
.chart-plot.axis{border-bottom:1.5px solid var(--line);}
.chart-zero{position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--ink2);}
.chart-grid{position:absolute;left:0;right:0;height:1px;background:var(--line2);pointer-events:none;}
.bars{position:absolute;inset:0;display:flex;}
.bar-col{flex:1;position:relative;height:100%;}
.bar{position:absolute;background:var(--blue);transition:.35s ease;}
.bar-val{position:absolute;left:0;right:0;text-align:center;font-family:var(--mono);font-size:14px;
  font-weight:600;color:var(--ink);}
.bar-labels{display:flex;}
.bar-labels > div{flex:1;text-align:center;font-size:12.5px;color:var(--ink2);font-weight:500;}

/* monte carlo box plot */
.box-wrap{display:flex;gap:20px;}
.box-axis{width:34px;position:relative;height:340px;font-family:var(--mono);font-size:11px;color:var(--ink3);}
.box-axis > div{position:absolute;right:0;transform:translateY(-50%);}
.box-plot{flex:1;position:relative;height:340px;border-left:1px solid var(--line);}
.box-grid{position:absolute;left:0;right:0;height:1px;background:var(--line2);}
.box-cols{position:absolute;inset:0;display:flex;}
.box-col{flex:1;position:relative;height:100%;}
.box-whisk{position:absolute;left:50%;width:2px;transform:translateX(-50%);}
.box-cap{position:absolute;left:35%;width:30%;height:2px;}
.box-rect{position:absolute;left:18%;width:64%;border-radius:3px;border-width:1.5px;border-style:solid;}
.box-med{position:absolute;left:18%;width:64%;height:2px;}
.box-pt{position:absolute;left:50%;width:6px;height:6px;border-radius:50%;background:#fff;
  border:1.5px solid;transform:translate(-50%,-50%);}
.mc-log{margin-top:18px;background:var(--green-100);border:1px solid #bfe0cd;border-radius:8px;
  padding:13px 15px;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--green-d);
  white-space:pre-wrap;}
.mc-log.conflict{background:var(--red-100);border-color:#f0c4cd;color:var(--red-d);}

/* head-to-head */
.hh-metric{margin-bottom:18px;}
.hh-metric .m-name{font-size:12.5px;color:var(--ink);font-weight:500;margin-bottom:8px;}
.hh-row{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.hh-row .alt{width:64px;font-size:11px;color:var(--ink3);text-align:right;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.hh-track{flex:1;background:var(--line2);border-radius:5px;height:22px;position:relative;overflow:hidden;}
.hh-track > div{position:absolute;left:0;top:0;bottom:0;border-radius:5px;transition:.3s;}
.hh-val{width:70px;font-family:var(--mono);font-size:12.5px;color:var(--ink);}
.hh-legend{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:12px;color:var(--ink2);}
.hh-legend span{display:flex;align-items:center;gap:6px;}
.hh-legend .sw{width:11px;height:11px;border-radius:3px;}

/* ---------------------------------------------------------------- controls */
.ctrl-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 22px;
  margin-bottom:18px;}
.ctrl-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;}
.ctrl-row.center{align-items:center;}
.ctrl-lbl{font-size:11px;color:var(--ink2);font-weight:600;margin-bottom:6px;}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.stepper button{border:none;background:var(--panel);width:34px;height:36px;font-size:17px;cursor:pointer;
  color:var(--ink2);font-family:var(--sans);}
.stepper input{border:none;outline:none;text-align:center;font-family:var(--mono);font-size:14px;
  color:var(--ink);height:36px;padding:0;background:#fff;}
.stepper input.w-it{width:80px;} .stepper input.w-var{width:60px;}
.btn-sim{height:38px;padding:0 18px;border:none;border-radius:8px;background:var(--blue);color:#fff;
  font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans);}
.status-badge{display:flex;align-items:center;gap:8px;margin-left:auto;}
.status-badge .dot{width:9px;height:9px;border-radius:50%;}
.status-badge .t{font-size:13.5px;font-weight:600;}
.status-badge.dominant .dot{background:var(--green);} .status-badge.dominant .t{color:var(--green-d);}
.status-badge.conflict .dot{background:var(--red);} .status-badge.conflict .t{color:var(--red-d);}

/* segmented (tipping level) */
.seg{display:flex;gap:6px;}
.seg label{border:1px solid var(--line);background:#fff;color:var(--ink2);padding:7px 15px;
  border-radius:7px;font-size:12.5px;font-weight:500;cursor:pointer;display:inline-block;}
.seg input{display:none;}
.seg label:has(input:checked){background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;}
.btn-runsm{height:34px;padding:0 18px;border:none;border-radius:7px;background:var(--blue);color:#fff;
  font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--sans);}

.callout{display:flex;gap:14px;border-radius:10px;padding:16px 18px;margin-bottom:16px;}
.callout.vuln{background:var(--red-100);border:1px solid #f0c4cd;border-left:4px solid var(--red);}
.callout.safe{background:var(--green-100);border:1px solid #bfe0cd;border-left:4px solid var(--green);}
.callout .ic{width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;
  justify-content:center;flex:none;font-size:18px;font-weight:700;}
.callout.vuln .ic{background:var(--red);} .callout.safe .ic{background:var(--green);}
.callout .c-title{font-size:15px;font-weight:600;}
.callout.vuln .c-title{color:var(--red-d);} .callout.safe .c-title{color:var(--green-d);}
.callout .c-sub{font-size:13px;color:var(--ink2);margin-top:3px;}
.callout .c-sub b{color:var(--ink);}

/* ---------------------------------------------------------------- QA */
.qa-card{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.qa-left{flex:1;min-width:280px;}
.qa-score{display:flex;align-items:center;gap:12px;}
.qa-score .dot{width:14px;height:14px;border-radius:50%;}
.qa-score .num{font-family:var(--mono);font-size:40px;font-weight:600;color:var(--ink);line-height:1;}
.qa-score .rating{font-size:14px;font-weight:600;color:var(--ink2);}
.meter{position:relative;margin-top:18px;}
.meter-zones{display:flex;height:12px;border-radius:6px;overflow:hidden;}
.meter-marker{position:absolute;top:-4px;transform:translateX(-50%);}
.meter-marker > div{width:3px;height:20px;background:var(--ink);border-radius:2px;}
.meter-ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--ink3);
  font-family:var(--mono);margin-top:5px;}
.qa-advice-label{margin-top:22px;margin-bottom:6px;}
.qa-advice{font-size:13px;color:var(--ink2);line-height:1.55;font-style:italic;}
/* Strategic Power Audit label/value rows (Total Metrics Analyzed, Diluted, Zero Power) */
.qa-stat{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-size:12.5px;color:var(--ink2);margin-top:12px;}
.qa-stat .v{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);}
.qa-sub{font-size:12.5px;color:var(--ink2);margin:18px 0 8px;}
.qa-right{display:flex;flex-direction:column;gap:14px;min-width:300px;max-width:360px;}
.qa-right .lbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;margin-bottom:2px;}
/* Findings & Legend: dot + name + count, with the flag-class definition beneath. */
.qa-legend-head{display:flex;align-items:center;gap:8px;}
.qa-legend-head .k{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink);}
.qa-legend-head .n{margin-left:auto;font-family:var(--mono);font-size:14px;font-weight:600;
  color:var(--ink);}
.qa-legend-item .d{font-size:11.5px;color:var(--ink3);line-height:1.5;margin-top:3px;
  padding-left:17px;}
.qa-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.qa-dot.crit{background:var(--red);}
.qa-dot.verify{background:var(--amber);}
.qa-dot.ghost{background:var(--ink);}
.qa-dot.weak{background:transparent;border:1.5px solid var(--ink3);}
.flag-chip{padding:3px 9px;border-radius:5px;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  white-space:nowrap;}

/* ---------------------------------------------------------------- sandbox */
.sbx{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;}
.sbx-left{flex:1;min-width:340px;max-width:480px;display:flex;flex-direction:column;gap:14px;}
.sbx-right{flex:1.3;min-width:380px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:22px 26px;position:sticky;top:0;}
.sbx-check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);}
.sbx-check input{accent-color:var(--blue);width:18px;height:18px;cursor:pointer;}
.sbx-check .sub{color:var(--ink3);}
.btn-reset{align-self:flex-start;padding:8px 14px;border:1px solid var(--line);background:#fff;
  border-radius:7px;font-size:12.5px;color:var(--ink2);cursor:pointer;display:flex;align-items:center;
  gap:7px;font-family:var(--sans);}
.accordion{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;}
.accordion > summary{list-style:none;padding:13px 16px;background:var(--panel);cursor:pointer;
  font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:space-between;}
.accordion > summary::-webkit-details-marker{display:none;}
.accordion > summary::after{content:'+';color:var(--ink3);}
.accordion[open] > summary::after{content:'\2212';}
.accordion .acc-body{padding:14px 16px;display:flex;flex-direction:column;gap:16px;}
.acc-select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:12px;
  color:var(--ink);background:#fff;font-family:var(--sans);margin-bottom:2px;}
.slider-row .s-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;gap:10px;}
.slider-row .s-name{font-size:12px;color:var(--ink2);}

/* dropdown (Dash) tweaks */
.std-select{padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;
  color:var(--ink);background:#fff;font-family:var(--sans);}

/* dcc.Slider value tooltip → blue badge look */
.rc-slider-tooltip-inner{background:var(--blue-100)!important;color:var(--blue)!important;
  font-family:var(--mono)!important;font-weight:600!important;box-shadow:none!important;border-radius:5px!important;}
.rc-slider-tooltip-arrow{border-top-color:var(--blue-100)!important;}
.rc-slider-track{background:var(--blue)!important;}
.rc-slider-handle{border-color:var(--blue)!important;background:var(--blue)!important;opacity:1!important;}
.rc-slider-rail{background:var(--blue-200)!important;}

/* dcc.Loading spinner color */
.dash-spinner *{border-top-color:var(--blue)!important;background:var(--blue)!important;}

/* skeleton loader (custom_spinner) — branded shimmer that holds the page shape while a tab renders */
@keyframes shimmer{100%{background-position:-200% 0}}
.skeleton{padding:24px;max-width:1100px;}
.skeleton .sk-line,.skeleton .sk-block,.skeleton .sk-card{
  background:linear-gradient(90deg,var(--line2) 25%,#e7ebef 37%,var(--line2) 63%);
  background-size:200% 100%;animation:shimmer 1.4s ease infinite;border-radius:8px;}
.skeleton .sk-row{display:flex;justify-content:space-between;margin-bottom:16px;}
.skeleton .sk-line{height:16px;}
.skeleton .sk-block{height:120px;border-radius:12px;margin-bottom:16px;}
.skeleton .sk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.skeleton .sk-card{height:130px;border-radius:10px;}
@media (prefers-reduced-motion:reduce){.skeleton .sk-line,.skeleton .sk-block,.skeleton .sk-card{animation:none;}}

/* ---------------------------------------------------------------- topbar: projects */
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;}
.projects-btn{border:1px solid var(--line);background:var(--surface);border-radius:7px;
  padding:5px 11px;font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;
  font-family:var(--sans);white-space:nowrap;}
.projects-btn:hover{background:var(--panel);color:var(--blue);border-color:var(--blue-200);}
.proj-name{font-size:12.5px;font-weight:600;color:var(--blue-d);background:var(--blue-100);
  padding:3px 10px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:280px;}
.auth-switch{color:var(--blue);cursor:pointer;font-weight:600;}
.auth-switch:hover{text-decoration:underline;}
.auth-switch-row{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:flex;
  flex-direction:column;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3);text-align:center;}

/* ---------------------------------------------------------------- report page (own page, not a tab) */
.report-page{height:100vh;width:100vw;display:flex;flex-direction:column;background:var(--bg);}
.btn-goto-report{margin-left:10px;padding:6px 13px;border:none;border-radius:7px;
  background:var(--green);color:#fff;font-size:12px;font-weight:600;cursor:pointer;
  font-family:var(--sans);white-space:nowrap;box-shadow:0 1px 2px rgba(21,115,71,.3);}
.btn-goto-report:hover{background:var(--green-d);}
.btn-goto-report:disabled{background:#cfd6dd;box-shadow:none;cursor:not-allowed;color:var(--ink3);}

/* ---------------------------------------------------------------- project picker */
.picker-wrap{height:100vh;width:100vw;overflow-y:auto;
  background:linear-gradient(180deg,var(--blue-50),var(--bg) 240px);
  display:flex;flex-direction:column;}
.picker-head{display:flex;align-items:center;justify-content:space-between;padding:22px 34px;
  background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;}
.new-proj-btn{display:flex;align-items:center;gap:8px;border:none;border-radius:8px;
  background:var(--blue);color:#fff;font-size:13.5px;font-weight:600;padding:11px 18px;cursor:pointer;
  font-family:var(--sans);box-shadow:0 1px 2px rgba(36,137,166,.3);}
.new-proj-btn:hover{background:var(--blue-d);}
/* In a 50px topbar (the Project Dashboard's) the picker-sized button is too tall — same button,
   tighter box, so it sits on the bar's centre line rather than crowding it. */
.topbar .new-proj-btn{padding:8px 14px;font-size:12.5px;}
.np-plus{font-size:17px;line-height:1;font-weight:400;}

/* section toolbar above the grid */
.picker-body{flex:1;display:flex;flex-direction:column;}
.picker-toolbar{display:flex;align-items:baseline;gap:12px;padding:24px 34px 4px;}
.picker-title{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.picker-count{font-size:11.5px;font-weight:600;color:var(--blue-d);background:var(--blue-100);
  padding:3px 10px;border-radius:20px;}

.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px;
  padding:18px 34px 34px;max-width:1560px;margin:0 auto;width:100%;align-content:start;}
.proj-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:24px 24px 20px;display:flex;flex-direction:column;gap:16px;overflow:hidden;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;}
.proj-card:hover{border-color:var(--blue-200);box-shadow:0 8px 24px rgba(21,85,103,.12);
  transform:translateY(-3px);}
.pc-accent{position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-dd));opacity:0;transition:opacity .18s ease;}
.proj-card:hover .pc-accent{opacity:1;}

/* Identity first: the engagement code as the badge, the project name as the card's header — both
   still edit-in-place inputs (Enter saves). The name's negative left margin pulls its text flush
   with the badge's left edge, so the two read as one stacked title.

   Dash 4.2 renders dcc.Input as a WRAPPER div (.dash-input-container — className and style land
   THERE, not on the input) holding an inner .dash-input-element that is `flex:1 1 0;min-width:0`
   with padding of its own. Three consequences, and every rule below follows from them: the box
   (size, fill, radius, border) goes on our class; the text treatment goes to the inner element,
   whose padding must be zeroed or the two boxes double up; and width has to come from the input's
   `size` attribute (_project_card sets it) because an inner element with no intrinsic width would
   collapse an auto-width wrapper to nothing but its own padding. */
.proj-card-head{display:flex;flex-direction:column;align-items:flex-start;gap:7px;}
.pc-code-wrap{display:inline-flex;max-width:100%;}
.pc-name-wrap{width:100%;min-width:0;}
/* Solid teal, white mono: smaller than the name in type size but first in the eye's order, which
   is what "the code is the badge" has to mean on a wall of cards. White on --blue-d is the same
   ~5.3:1 the token is documented for, so it clears AA at this size. */
/* container-type:normal undoes the wrapper's own `container-type:inline-size`, which makes an
   element size independently of its content — with it on, a width:auto badge collapses to nothing
   but its padding. Dash only uses that container for the number-input stepper and slider inputs,
   so a text input loses nothing. */
.pc-code-badge{flex:none;width:auto;max-width:100%;height:32px;padding:0 11px;container-type:normal;
  border:1px solid var(--blue-d);background:var(--blue-d);color:#fff;border-radius:8px;
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.06em;
  transition:background .15s,border-color .15s,color .15s;}
.pc-code-badge .dash-input-element{flex:0 0 auto;width:auto;padding:0;text-align:center;
  font-weight:inherit;letter-spacing:inherit;}
.pc-code-badge .dash-input-element::placeholder{color:#fff;opacity:.8;}
.pc-code-badge:hover{background:var(--blue-dd);border-color:var(--blue-dd);}
/* Editing flips it inside-out — teal ring on white — so the text being typed reads normally. */
.pc-code-badge:focus-within{background:var(--surface);color:var(--ink);}
/* Dash styles its own focus with a purple (--Dash-Fill-Interactive-Strong) border and outline at
   the same specificity as ours, from a stylesheet injected after this file — so both card inputs
   re-assert the app's teal with the class doubled up (0,3,0 beats its 0,2,0). */
.proj-card .dash-input-container:focus-within{border-color:var(--blue-d);}
.proj-card .dash-input-container:has(:focus-visible){outline-color:var(--blue);}
.pc-code-badge.legacy{background:var(--panel);color:var(--ink3);border:1px dashed var(--line);
  font-family:var(--sans);font-size:12.5px;font-style:italic;letter-spacing:0;}
.pc-code-badge.legacy .dash-input-element::placeholder{color:var(--ink3);opacity:1;}
.proj-card-name{width:calc(100% + 6px);min-width:0;margin-left:-6px;border:1px solid transparent;
  background:transparent;font-family:var(--sans);font-size:18px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;border-radius:6px;transition:border-color .15s,background .15s;}
/* A long name ellipsizes at rest instead of clipping mid-glyph (text-overflow does apply to an
   unfocused input); the whole name is on hover, and typing scrolls it as usual. */
.proj-card-name .dash-input-element{padding:2px 6px;text-overflow:ellipsis;font-weight:inherit;
  letter-spacing:inherit;}
.proj-card-name:hover{border-color:var(--line);}
.proj-card-name:focus-within{border-color:var(--blue-200);background:var(--blue-50);}
/* A project's identity is a power of rank (GOV-1.2/3.5, amended), so a member gets the same two
   boxes as plain elements: the input's own centring and padding lived on .dash-input-element, and
   hover re-asserts the resting colours so nothing on the card invites an edit it won't accept. */
.pc-code-badge.is-static{display:inline-flex;align-items:center;justify-content:center;
  min-width:5ch;}
.pc-code-badge.is-static:hover{background:var(--blue-d);border-color:var(--blue-d);}
.pc-code-badge.is-static.legacy:hover{background:var(--panel);border-color:var(--line);}
.proj-card-name.is-static{padding:2px 6px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.proj-card-name.is-static:hover{border-color:transparent;}
/* Hidden at rest for a calmer header; revealed on card hover AND keyboard focus (focus-visible
   alone would miss a mouse click that lands focus without :focus-visible in some browsers, so we
   use plain :focus — a delete button being visible while focused is never a bad state). */
.proj-del{flex:none;border:none;background:transparent;color:var(--ink3);font-size:13px;
  cursor:pointer;width:26px;height:26px;border-radius:6px;line-height:1;opacity:0;
  transition:background .15s,color .15s,opacity .15s;}
.proj-card:hover .proj-del,.proj-del:focus{opacity:1;}
.proj-del:hover{background:var(--red-100);color:var(--red-d);}

.proj-card-src{display:flex;align-items:center;gap:6px;min-width:0;}
.proj-card-src img{flex:none;opacity:.85;}
.pc-srctxt{font-family:var(--mono);font-size:11.5px;color:var(--ink3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
/* Download variant of the source line: a hyperlink-styled button (button so it can drive a
   pattern-matching callback), aligned flush-left like the plain label it replaces. */
.proj-card-src.is-dl{border:none;background:none;padding:0;margin:0;cursor:pointer;
  font-family:var(--sans);text-align:left;}
.proj-card-src.is-dl .pc-srctxt{color:var(--blue-d);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--blue-100);}
.proj-card-src.is-dl:hover .pc-srctxt{text-decoration-color:var(--blue-d);}
.pc-src-dlic{flex:none;font-size:11px;color:var(--blue-d);opacity:0;transition:opacity .15s;}
.proj-card-src.is-dl:hover .pc-src-dlic{opacity:1;}

.pc-score{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;}
.pc-k{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:600;}
.pc-winrow{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pc-winner{font-size:17px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.pc-bar{height:7px;border-radius:3.5px;background:var(--blue-100);overflow:hidden;}
.pc-bar > div{height:100%;border-radius:3.5px;background:linear-gradient(90deg,var(--blue),var(--blue-dd));}
.pc-scoreline{display:flex;align-items:baseline;gap:4px;}
.pc-num{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--blue-d);line-height:1;}
.pc-den{font-size:11px;color:var(--ink3);}
.pc-margin{font-size:11.5px;color:var(--ink3);}
.pc-unanalyzed{font-size:12.5px;color:var(--ink3);font-style:italic;}
/* The winner's categorical color (was the head badge's tint) now marks the name it belongs to. */
.pc-wdot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;margin-right:7px;
  vertical-align:1px;}
/* Who ran it — inside the result block, under a hairline: same block, second question. */
.pc-by{font-size:11.5px;color:var(--ink3);border-top:1px solid var(--line);padding-top:8px;
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pc-by b{font-weight:600;color:var(--ink2);}
.pc-bysep{color:var(--ink3);opacity:.5;padding:0 5px;}

/* Revision note on the last run (GOV-2.1): the "why it changed" that otherwise lives only on the
   version history page. Clamped to two lines; the title attribute carries the whole note. */
.pc-note{display:flex;align-items:flex-start;gap:7px;padding:8px 10px;border-radius:8px;
  background:var(--blue-50);border:1px solid var(--blue-100);}
.pc-note img{flex:none;margin-top:2px;opacity:.9;}
.pc-notetxt{font-size:12px;line-height:1.45;color:var(--ink2);font-style:italic;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* Monte Carlo status chip on the card — reuses .status-badge's dominant/conflict language+colors
   (see the AI/QA tabs' status-badge rules above) at a size that fits inside a card, plus a
   not-run variant for the pre-simulation default. */
.status-badge.card-chip{gap:5px;margin-left:0;}
.status-badge.card-chip .dot{width:7px;height:7px;}
.status-badge.card-chip .t{font-size:11px;font-weight:600;}
.status-badge.not-run .dot{background:var(--amber);}
.status-badge.not-run .t{color:var(--amber-d);}

.pc-chips{display:flex;flex-wrap:wrap;gap:8px;}
.pc-chip{font-size:11px;font-weight:600;color:var(--ink2);background:var(--panel);
  border:1px solid var(--line2);border-radius:20px;padding:4px 10px;}

.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;}
.pc-date{font-size:11px;color:var(--ink3);white-space:nowrap;}
.proj-open{display:flex;align-items:center;gap:7px;border:none;border-radius:8px;
  background:var(--blue-100);color:var(--blue-d);font-size:13px;font-weight:600;padding:8px 14px;
  cursor:pointer;font-family:var(--sans);transition:background .15s,color .15s;}
.proj-open:hover{background:var(--blue);color:#fff;}
.pc-arrow{transition:transform .18s ease;}
.proj-open:hover .pc-arrow{transform:translateX(3px);}

.proj-empty,.db-err{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:80px 34px;flex:1;}
.proj-empty-ic{width:72px;height:72px;border-radius:18px;background:var(--surface);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(21,85,103,.06);margin-bottom:6px;}
.proj-empty .new-proj-btn{margin-top:10px;}
.proj-empty-title,.db-err-title{font-size:18px;font-weight:700;color:var(--ink);}
.proj-empty-sub,.db-err-sub{font-size:13.5px;color:var(--ink3);max-width:440px;line-height:1.55;}
.db-err-cmd{font-family:var(--mono);font-size:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;color:var(--ink2);max-width:640px;white-space:pre-wrap;
  text-align:left;}
.db-err-detail{font-family:var(--mono);font-size:11px;color:var(--red-d);max-width:640px;
  word-break:break-word;}

/* ---------------------------------------------------------------- responsive */
/* Tablet / small-laptop: stack the hero + insight grid, drop the topbar chips, tighten padding.
   (Desktop is the primary target for this analytical tool; this keeps it usable down to ~tablet.) */
@media (max-width:860px){
  .topbar-meta{display:none;}
  .topbar{padding:0 14px;}
  .tab-pad{padding:16px;}
  .hero{flex-direction:column;}
  .hero-right{border-left:none;border-top:1px solid rgba(255,255,255,.12);}
  .insight-grid{grid-template-columns:1fr;}
  .sbx-right{position:static;}
  #sidebar.expanded{width:248px;}
}
@media (max-width:560px){
  .hero-winner{font-size:32px;}
  .hero-score .num{font-size:34px;}
  .proj-grid{grid-template-columns:1fr;padding:14px 18px 24px;}
  .picker-toolbar{padding:18px 18px 4px;}
  .picker-head{padding:16px 18px;}
  .acct-corner{right:10px;bottom:8px;max-width:76vw;}
  .acct-corner .acct-label{display:none;}   /* the dot stays: it is what separates the two */
}

/* ---------------------------------------------------------------- guided (no-spreadsheet) wizard */
/* Setup-screen entry into the wizard (an "or … build it here" option under the upload card). */
.gv-or{width:100%;display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;}
.gv-or::before,.gv-or::after{content:'';flex:1;height:1px;background:var(--line);}
.gv-start-card{width:100%;display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 16px;
  box-shadow:0 2px 10px rgba(22,32,43,.05);font-family:var(--sans);transition:border-color .15s,box-shadow .15s;}
.gv-start-card:hover{border-color:var(--blue-200);box-shadow:0 3px 14px rgba(36,137,166,.12);}
.gv-start-ic{width:44px;height:44px;border-radius:10px;background:var(--blue-50);
  border:1px solid var(--blue-100);display:flex;align-items:center;justify-content:center;flex:none;}
.gv-start-title{font-size:13.5px;font-weight:600;color:var(--ink);}
.gv-start-sub{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.4;}
.gv-start-arrow{margin-left:auto;font-size:20px;color:var(--blue);flex:none;}

/* Wizard shell: a centered card in the scroll area + a persistent Back/Next/Run footer. */
.gv-card{width:100%;max-width:760px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:22px 26px 26px;box-shadow:0 2px 12px rgba(22,32,43,.05);}
.gv-progress{margin-bottom:18px;}
.gv-progress-inner{display:flex;align-items:center;gap:12px;}
.gv-dots{display:flex;gap:7px;}
.gv-dot{width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .2s;}
.gv-dot.done{background:var(--blue-200);}
.gv-dot.cur{background:var(--blue);box-shadow:0 0 0 3px var(--blue-100);}
.gv-stepno{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);}

.gv-footer{flex:none;background:var(--surface);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:12px 24px;}
.gv-nav-spacer{flex:1;}
.gv-nav-back{border:1px solid var(--line);background:var(--surface);border-radius:8px;
  padding:10px 16px;font-size:13px;font-weight:500;color:var(--ink2);cursor:pointer;font-family:var(--sans);}
.gv-nav-back:hover{background:var(--panel);color:var(--blue);border-color:var(--blue-200);}
.gv-nav-next{border:none;border-radius:8px;padding:10px 20px;background:var(--blue);color:#fff;
  font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--sans);box-shadow:0 1px 2px rgba(36,137,166,.3);}
.gv-nav-next:hover{background:var(--blue-d);}
.gv-nav-run.btn-run{width:auto;padding:10px 22px;}
/* Review-step: export the assembled workbook (secondary action, sits below the review summary) */
.gv-export-row{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);}
.gv-export{align-self:flex-start;border:1px solid var(--blue-200);background:var(--blue-50);
  color:var(--blue-d);border-radius:8px;padding:9px 15px;font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:var(--sans);margin-bottom:6px;}
.gv-export:hover{background:var(--blue-100);border-color:var(--blue);}

/* Step body */
.gv-step{display:flex;flex-direction:column;gap:8px;animation:fadeUp .18s ease both;}
.gv-q{font-size:17px;font-weight:600;color:var(--ink);}
.gv-help{font-size:12.5px;line-height:1.55;color:var(--ink3);margin-bottom:8px;max-width:640px;}
.gv-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px dashed var(--line);}
.gv-lbl{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;}
.gv-rows{display:flex;flex-direction:column;gap:8px;}
.gv-row{display:flex;align-items:center;gap:8px;}
.gv-input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:7px;
  font-size:13px;font-family:var(--sans);color:var(--ink);background:var(--surface);}
.gv-input.wide{width:100%;}
.gv-input:hover{border-color:#cbd3db;}
.gv-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-100);}
.gv-wtwrap{display:flex;align-items:center;gap:3px;flex:none;}
.gv-wt{width:62px;padding:9px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px;
  font-family:var(--mono);text-align:right;color:var(--ink);background:var(--surface);}
.gv-wt:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-100);}
.gv-pct{font-size:12px;color:var(--ink3);width:12px;}
.gv-del{flex:none;width:30px;height:30px;border:1px solid var(--line);background:var(--surface);
  border-radius:7px;color:var(--ink3);font-size:12px;cursor:pointer;line-height:1;}
.gv-del:hover{border-color:var(--red);color:var(--red-d);background:var(--red-100);}
.gv-add{align-self:flex-start;border:1px dashed var(--blue-200);background:var(--blue-50);
  color:var(--blue-d);border-radius:7px;padding:8px 13px;font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:var(--sans);}
.gv-add:hover{background:var(--blue-100);}
.gv-rowbar{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap;}
.gv-sum{font-size:11.5px;font-weight:600;font-family:var(--mono);display:inline-flex;align-items:center;}
.gv-sum.ok{color:var(--green-d);}
.gv-sum.warn{color:var(--amber-d);}
.gv-split{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:6px 11px;
  font-size:11.5px;font-weight:500;color:var(--ink2);cursor:pointer;font-family:var(--sans);}
.gv-split:hover{border-color:var(--blue-200);color:var(--blue-d);background:var(--panel);}

/* Grouped sections (criteria per category; metrics per criterion) */
.gv-sec{border:1px solid var(--line);border-radius:11px;padding:14px 15px;margin-bottom:12px;
  background:var(--panel);}
.gv-sec-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;}
.gv-sec-name{font-size:13.5px;font-weight:600;color:var(--ink);}
.gv-sec-wt{font-size:11.5px;font-weight:600;font-family:var(--mono);color:var(--blue-d);
  background:var(--blue-100);padding:1px 7px;border-radius:5px;}
.gv-crumb{font-size:11.5px;color:var(--ink3);}
.gv-crumb-sep{font-size:11.5px;color:var(--ink3);}

/* Metric rows: name/weight line + a direction + normalization options line, with Advanced (tier)
   folded away at the end. */
.gv-met{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:11px 12px;
  margin-bottom:9px;}
.gv-met-opts{display:flex;align-items:center;gap:14px;margin-top:9px;flex-wrap:wrap;}
.gv-inline-lbl{font-size:11.5px;font-weight:600;color:var(--ink3);}
.gv-radio.inline{display:inline-flex;gap:4px;}
.gv-radio.inline label{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink2);
  padding:3px 9px;border-radius:6px;cursor:pointer;}
.gv-radio.inline label:has(input:checked){background:var(--blue-100);color:var(--blue-d);font-weight:600;}
.gv-radio.inline input{accent-color:var(--blue);}
/* Direction and normalization are two questions, not one four-way choice — the hairline between
   them says so, and both stay on the row at the same weight: normalization changes scores as much
   as a weight does, and burying it under Advanced is what made it invisible. */
.gv-opt-group{display:inline-flex;align-items:center;gap:8px;}
.gv-opt-norm{padding-left:14px;border-left:1px solid var(--line);}
.gv-adv{margin-left:auto;}
.gv-adv summary{font-size:11.5px;color:var(--ink3);cursor:pointer;list-style:none;user-select:none;}
.gv-adv summary::-webkit-details-marker{display:none;}
.gv-adv summary::before{content:'⚙ ';}
.gv-adv[open] summary{color:var(--blue-d);font-weight:600;}
.gv-adv-body{display:flex;flex-direction:column;gap:8px;margin-top:9px;padding:10px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;}
.gv-adv-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* Values grid */
.gv-vwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;}
.gv-vtable{width:100%;border-collapse:collapse;font-size:13px;}
.gv-vh{background:var(--panel);font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3);padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);}
.gv-vh.r{text-align:right;}
.gv-vtable td.r{text-align:right;}
.gv-vgroup{background:var(--blue-50);font-size:11px;font-weight:600;color:var(--blue-d);
  padding:6px 12px;border-bottom:1px solid var(--line);}
.gv-vmet{padding:8px 12px;border-bottom:1px solid var(--line2);}
.gv-vname{font-size:12.5px;color:var(--ink);font-weight:500;}
.gv-vhint{font-size:10.5px;color:var(--ink3);margin-top:1px;}
.gv-vtable tbody td{border-bottom:1px solid var(--line2);padding:6px 12px;}
.gv-vin{width:120px;padding:9px 10px;border:1px solid var(--blue-200);border-radius:6px;
  font-size:13px;font-family:var(--mono);text-align:right;color:var(--ink);background:var(--blue-50);}
.gv-vin::placeholder{color:var(--ink3);font-family:var(--sans);font-size:11px;opacity:.8;}
.gv-vin:hover{border-color:var(--blue);}
.gv-vin:focus{outline:none;border-color:var(--blue);background:var(--surface);
  box-shadow:0 0 0 2px var(--blue-100);}

.gv-err-banner{margin-bottom:14px;}
.gv-empty{margin-top:8px;}

/* Step 0: describe-it intro (only shown when the LLM layer is enabled). Generate/Skip are footer
   buttons (see _guided_page) styled to match the Back/Next/Run buttons already there. */
.gv-progress-intro{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);}
.gv-intro-textarea{width:100%;resize:vertical;min-height:88px;font-family:var(--sans);
  font-size:13px;line-height:1.5;}
.gv-intro-generate.btn-run{width:auto;padding:10px 20px;}
.gv-intro-skip{border:1px solid var(--line);background:var(--surface);border-radius:8px;
  padding:10px 16px;font-size:13px;font-weight:500;color:var(--ink2);cursor:pointer;
  font-family:var(--sans);}
.gv-intro-skip:hover{background:var(--panel);color:var(--blue);border-color:var(--blue-200);}

@media (max-width:560px){
  .gv-card{padding:18px 15px 20px;}
  .gv-met-opts{gap:8px;}
  .gv-adv{margin-left:0;}
  /* Wrapped onto its own line, the divider would read as a rule under the row above it. */
  .gv-opt-norm{padding-left:0;border-left:none;}
}

/* ------------------------------- version history (GOV-2.1) -------------------------------
   Input changes snapshot the prior analysis; this styles the history page, the optional
   revision-note field on re-run paths, and the read-only banner on a past-version view. */
.rev-note-wrap{margin:14px 0 4px;}
.rev-note-lbl{font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:5px;}
.rev-note-input{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;
  font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--surface);}
.rev-note-input:focus{border-color:var(--blue-200);}
.ver-chip-current{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:var(--blue-100);color:var(--blue-dd);font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;}
.ver-row-current td{background:var(--blue-50);}
.version-banner{display:flex;align-items:center;gap:10px;padding:9px 18px;
  background:var(--amber-100);border-bottom:1px solid var(--line);flex-wrap:wrap;}
.version-banner .ver-banner-title{font-size:13px;font-weight:700;color:var(--amber-d);}
.version-banner .ver-banner-sub{font-size:12.5px;color:var(--ink2);flex:1;min-width:200px;}
/* The one in-workspace control that persists — visually inert on a snapshot (rerun_mc is the
   real guard); everything else on the tabs is read-or-ephemeral and stays usable. */
#content-wrap.readonly-version #mc-run{opacity:.45;pointer-events:none;}

/* ------------------------------ engagement codes (GOV-3.5) ------------------------------ */
/* The picker card's own code control is .pc-code-badge (up with the card head); this chip is the
   read-only rendering used by the Project Dashboard rows and the workspace header. */
.proj-code-chip{display:inline-block;margin-left:10px;padding:2px 9px;border-radius:999px;
  background:var(--blue-100);color:var(--blue-dd);font-family:var(--mono);font-size:11px;
  font-weight:600;vertical-align:1px;}
.proj-code-chip.legacy{background:var(--panel);color:var(--ink3);border:1px dashed var(--line);
  font-style:italic;font-family:var(--sans);}
.rpt-input:disabled{background:var(--panel);color:var(--ink2);cursor:not-allowed;}

/* --------------------------- landing page: Active / Archived (GOV-2.3) --------------------------- */
.pc-arch{border:1px solid var(--line);background:var(--surface);border-radius:7px;
  padding:5px 12px;font-size:12px;font-weight:500;color:var(--ink2);cursor:pointer;
  font-family:var(--sans);margin-left:auto;margin-right:8px;}
.pc-arch:hover{background:var(--panel);color:var(--blue-d);border-color:var(--blue-200);}
.proj-card.archived{opacity:.82;}
.proj-card.archived .pc-accent{background:var(--ink3);}
.arch-section{margin-top:26px;}
.arch-summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ink2);
  padding:8px 2px;border-top:1px solid var(--line);list-style-position:inside;}
.arch-summary:hover{color:var(--blue-d);}
.arch-section > .proj-grid{margin-top:12px;}

/* ------------------------------ operator console (GOV-4.5) ------------------------------
   The full-census management page: per-row support-action buttons, the inline force-verify
   confirmation, and the one-line action-outcome flash above the table. */
.op-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.op-btn{border:1px solid var(--line);background:var(--surface);border-radius:7px;
  padding:4px 10px;font-size:11.5px;font-weight:500;color:var(--ink2);cursor:pointer;
  font-family:var(--sans);white-space:nowrap;}
.op-btn:hover{background:var(--panel);color:var(--blue-d);border-color:var(--blue-200);}
.op-btn.warn{color:var(--amber-d);}
.op-btn.warn:hover{color:var(--amber-d);border-color:var(--amber);background:var(--amber-100);}
.op-btn.danger{color:#fff;background:var(--red);border-color:var(--red);}
.op-btn.danger:hover{background:var(--red-d);border-color:var(--red-d);color:#fff;}
.op-arm-note{font-size:11.5px;font-weight:600;color:var(--red-d);margin-right:2px;}
.console-flash-msg{margin:0 0 14px;padding:9px 14px;border-radius:8px;font-size:12.5px;
  background:var(--green-100);color:var(--green-d);border:1px solid var(--green);}
.console-flash-msg.warn{background:var(--amber-100);color:var(--amber-d);
  border-color:var(--amber);}

/* ------------------------------- deactivation (GOV-4.3) ------------------------------- */
.op-row-off td{opacity:.55;}
.op-row-off td:last-child{opacity:1;}   /* the Reactivate action stays fully legible */

/* ---------------------------- Project Dashboard: team parts (GOV-1.2) ----------------------------
   The pieces of a dashboard card the picker card has no use for: who is on the team, and the
   control that changes that. Everything else the card is made of is the picker's own (see the
   .proj-card / .pc-* block above); these live on their own so a change to one list never has to
   be made twice. */
.stf-when{margin-left:auto;font-size:11.5px;color:var(--ink3);white-space:nowrap;}
.stf-team{display:flex;gap:8px;flex-wrap:wrap;}
.stf-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;
  border-radius:999px;border:1px solid var(--line);background:var(--panel);
  font-family:var(--mono);font-size:11.5px;color:var(--ink2);}
.stf-x{border:none;background:none;cursor:pointer;color:var(--ink3);font-size:13px;
  line-height:1;padding:2px 4px;border-radius:50%;}
.stf-x:hover{color:var(--red-d);background:var(--red-100);}
.stf-empty{font-size:12px;color:var(--amber-d);font-style:italic;}
.stf-add{display:flex;gap:8px;align-items:center;}
.stf-add-input{max-width:260px;}

/* Project Dashboard: the SAME card as the picker (.proj-card and its .pc-* parts), so the two
   project lists read as one application. Only the middle panel differs, and that difference is
   the point: where the picker shows what a project concluded, this shows how far along it is —
   never a score, never a preferred option, never a download (D2). Everything here is either an
   admin-only addition (team chips, add-a-member row) or a small correction to a borrowed part. */
.adm-page-head{padding:20px 34px 0;max-width:1560px;margin:0 auto;width:100%;}
.adm-page-intro{color:var(--ink3);font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:14px;}
.adm-card .proj-card-src.is-missing .pc-srctxt{color:var(--ink3);font-style:italic;
  font-family:var(--sans);}
/* The picker's result panel says "Analyzed" / "Not analyzed yet" instead of a winner — same slot,
   same weight in the eye, so a scan down the column reads progress the way the picker reads
   outcomes. */
.adm-state{font-size:15px;font-weight:700;color:var(--ink);}
.adm-state.is-missing{font-size:12.5px;font-weight:400;color:var(--ink3);font-style:italic;}
.adm-meta{display:flex;gap:10px;align-items:center;}
.adm-meta .stf-when{margin-left:auto;}
.pc-chip.is-pending{border-color:var(--amber);background:var(--amber-100);color:var(--amber-d);}
/* Team chips and the add-a-member row: the two parts the picker card has no use for. */
.adm-card .stf-team{margin-bottom:0;}
.adm-card .stf-add{flex-wrap:wrap;}
.adm-card .stf-add-input{flex:1 1 180px;max-width:none;}
.adm-foot-acts{display:flex;gap:8px;align-items:center;}
/* A member who is on the team but hasn't joined Statera yet. */
.stf-chip.is-pending{border-style:dashed;border-color:var(--amber);background:var(--amber-100);}
.stf-chip.is-pending .stf-who{color:var(--ink2);}
.adm-pend{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--amber-d);}
.adm-inv-btn{border:none;background:none;cursor:pointer;font-family:var(--sans);font-size:11px;
  font-weight:600;color:var(--blue);padding:2px 4px;border-radius:4px;text-decoration:underline;}
.adm-inv-btn:hover{background:var(--blue-100);text-decoration:none;}
/* The rank question, asked in the flash for one named person who has no account — never a
   standing control on the card, which would read as if rank were per-project. */
.adm-ask-lbl{margin-left:10px;margin-right:6px;font-weight:600;}
.console-flash-msg .op-btn + .op-btn{margin-left:6px;}
/* The note beside Open on a project you're not on — Open works (admin rank reaches any
   engagement), the line just says whose engagement it is. */
.adm-foot-open{display:flex;gap:10px;align-items:center;}
.adm-notmine{font-size:11.5px;color:var(--ink3);font-style:italic;text-align:right;}

/* ---------------------------- project history (GOV-3.1 / 3.2) ----------------------------
   The member-readable activity trail. The standing chips are the GOV-3.2 stamp made visible —
   never colour-alone, the word itself is the mark. Operator wears the app's attention tone
   (amber); admin wears the ordinary teal, because a consultant reaching into an engagement is
   the routine case and should not read as an alarm. */
.hist-op-chip,.hist-adm-chip{display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.hist-op-chip{background:var(--amber-100);color:var(--amber-d);}
.hist-adm-chip{background:var(--blue-100);color:var(--blue-d);}
.hist-area{font-size:10px;color:var(--ink3);margin-left:7px;text-transform:uppercase;
  letter-spacing:.04em;}

/* ---------------------------- report provenance (GOV-2.2 / 3.4) ----------------------------
   The record side of a report: the provenance panel on the preview, and the Stale chip both
   there and on the saved-reports list. Stale reuses the app's amber attention tone — like the
   version banner, it says "the project moved on", not "something is wrong". */
.prov-panel{display:flex;flex-wrap:wrap;gap:8px 32px;padding:12px 18px;margin-bottom:14px;
  background:var(--panel);border:1px solid var(--line2);border-radius:10px;}
.prov-lbl{font-size:10px;font-weight:700;color:var(--ink3);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:3px;}
.prov-val{font-size:12.5px;color:var(--ink);display:flex;align-items:center;}
.rpt-stale-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:var(--amber-100);color:var(--amber-d);font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;}
/* the frame normally fills the viewport below the topbar; when the provenance panel sits above
   it, give back the panel's height so the page still fits without scrolling */
.prov-panel + .report-preview-frame{height:calc(100vh - 192px);}

/* Creation, which is now the whole of it: name + engagement code + team, then one button. A wrapper
   inside the setup form so the button, its help line and any refusal toggle as one — present only
   while creating, exactly where the upload steps used to be (and they, only when it isn't). */
.setup-create{width:100%;}
.setup-create .gv-help{margin-top:7px;margin-bottom:0;}
.setup-create .status{margin-top:7px;}
.gv-start-card:disabled{cursor:not-allowed;opacity:.6;box-shadow:none;}
.gv-start-card:disabled:hover{border-color:var(--line);box-shadow:none;}