/* ---------------------------------------------------------------------------
   Two themes, one set of names.

   Every surface, line and status colour is a token here, and the light theme
   below redefines the same tokens rather than adding rules of its own. A
   component written against these names is therefore correct in both themes
   without knowing either exists, and nothing in the product hardcodes a
   colour: a literal hex anywhere else is a bug that only shows up in light.

   Dark is the product's identity and stays the default. Light is offered on
   both surfaces: in the portal, where the work is long and the room is usually
   bright, and in the app, where somebody training at their desk at noon should
   not be handed a night screen.
--------------------------------------------------------------------------- */
:root{
  --bg:#0B100D;
  --bg2:#0E1511;
  --panel:#111C16;
  --panel2:#16241C;
  --panel3:#1B2D23;
  /* A bar floating over scrolling content behind a blur. Not --bg,
     because the alpha is part of the effect and moves with it. */
  --barbg:rgba(11,16,13,.94);
  --line:rgba(201,162,39,.16);
  --line2:rgba(237,232,218,.10);
  --line3:rgba(237,232,218,.16);
  --ink:#EDE8DA;
  --ink2:#CBD5C4;
  --mut:#A9BAAE;
  --gold:#C9A227;
  --goldT:#D9B63F;
  --gold2:#E6CA6E;
  --goldSoft:rgba(201,162,39,.12);
  /* Text sitting on a gold fill. Gold keeps its value in both themes, so this
     one does not move with them. */
  --onGold:#141508;
  --moss:#3E5C4A;
  --moss2:#4E7460;
  --sage:#C6DCC0;
  --sageInk:#132019;
  --teal:#1E3A2E;
  --ok:#8CBFA0;
  --okSoft:rgba(140,191,160,.14);
  --okLine:rgba(140,191,160,.34);
  /* Amber, deliberately apart from the brand gold: gold marks the brand,
     primary actions and the current selection; amber alone means caution. */
  --warn:#DFA151;
  --warnSoft:rgba(223,161,81,.1);
  --warnLine:rgba(223,161,81,.36);
  --bad:#E08B85;
  --badSoft:rgba(224,139,133,.12);
  --badLine:rgba(224,139,133,.42);
  --bar:#8FC0A2;
  --seq1:#C6DCC0;
  --seq2:#8FC0A2;
  --seq3:#4E7460;
  --grid:rgba(237,232,218,.08);
  /* Ink laid over a surface at low opacity: row hovers, faint fills, the
     track behind a bar. Named rather than written out so the light theme can
     invert the ink without every rule being touched. */
  --hover:rgba(237,232,218,.04);
  --hover2:rgba(237,232,218,.06);
  --track:rgba(237,232,218,.07);
  /* The same idea drawn solid, for a bar or a ring whose track has to
     hold its value over whatever surface it happens to sit on. */
  --trackSolid:#22332A;
  --scrollThumb:#2A3B31;
  --switchOff:#2A3B31;
  --knob:#A9BAAE;
  --placeholder:#71837A;
  /* Floating surfaces stay dark in both themes: a tooltip or a toast is a
     layer above the page, and dark reads as above on light and on dark. */
  --float:#1D2E24;
  --floatInk:#EDE8DA;
  --floatLine:rgba(237,232,218,.16);
  --floatGold:#E6CA6E;
  --overlaybg:rgba(4,8,6,.74);
  --scrimbg:rgba(4,8,6,.62);
  --dotDraft:#93A497;
  --dotArch:#5A6A5F;
  /* The admin sidebar is dark in both themes, so it carries its own ink. */
  --sbA:#0C130F;
  --sbB:#0A0F0C;
  --sbInk:#EDE8DA;
  --sbInk2:#CBD5C4;
  --sbMut:#A9BAAE;
  --sbLine:rgba(237,232,218,.10);
  --sbHover:#111C16;
  --sbTile:#1B2D23;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-s:10px;
  --r:14px;
  --r-l:20px;
  --r-xl:28px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --shadow-s:0 8px 24px rgba(0,0,0,.35);
}

/* ---- light --------------------------------------------------------------
   The same product in daylight, not a different one. The canvas is a warm
   off-white rather than pure white so the brand's green stays in the room,
   cards are white so they lift off it, and the sidebar keeps its dark ground
   so the navigation still reads as a frame around the work.

   Two colours change meaning rather than value. Gold is legible as a fill on
   white but not as text, so gold text darkens to a bronze that clears 4.5:1;
   and the pale sage that reads as the primary action on a dark ground would
   disappear on a light one, so the primary button becomes solid forest green
   with light text. Everything else is the dark palette weighted for a white
   background: status colours darken, because a tint that carries on black is
   invisible on white.                                                       */
[data-theme="light"]{
  --bg:#F4F6F2;
  --bg2:#EBEFE8;
  --panel:#FFFFFF;
  --panel2:#FAFCF8;
  --panel3:#ECF1E9;
  --barbg:rgba(244,246,242,.92);
  --line:rgba(138,107,20,.26);
  --line2:rgba(20,42,29,.11);
  --line3:rgba(20,42,29,.19);
  --ink:#15241B;
  --ink2:#3A5044;
  --mut:#536459;
  --gold:#C9A227;
  --goldT:#7F6212;
  --gold2:#7A5E0F;
  --goldSoft:rgba(201,162,39,.16);
  --onGold:#141508;
  --moss:#33513F;
  --moss2:#456A55;
  --sage:#2F5C43;
  --sageInk:#F3F8F1;
  --teal:#1E3A2E;
  --ok:#267046;
  --okSoft:rgba(38,112,70,.11);
  --okLine:rgba(38,112,70,.32);
  --warn:#8C5A0E;
  --warnSoft:rgba(140,90,14,.1);
  --warnLine:rgba(140,90,14,.32);
  --bad:#B5372C;
  --badSoft:rgba(181,55,44,.09);
  --badLine:rgba(181,55,44,.32);
  --bar:#4E9A6B;
  --seq1:#2F6B4A;
  --seq2:#63A47F;
  --seq3:#A9CBB6;
  --grid:rgba(20,42,29,.08);
  --hover:rgba(20,42,29,.045);
  --hover2:rgba(20,42,29,.07);
  --track:rgba(20,42,29,.09);
  --trackSolid:#DCE4D9;
  --scrollThumb:#C3CFC2;
  --switchOff:#C7D2C6;
  --knob:#FFFFFF;
  --placeholder:#8C9C91;
  --overlaybg:rgba(18,30,23,.44);
  --scrimbg:rgba(18,30,23,.34);
  --dotDraft:#7C8E82;
  --dotArch:#A6B2A9;
  --shadow:0 16px 44px rgba(21,36,27,.13);
  --shadow-s:0 6px 18px rgba(21,36,27,.09);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink)}
a{color:inherit;text-decoration:none}
::selection{background:rgba(201,162,39,.28)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scrollThumb);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

.ic{width:16px;height:16px;flex:none}

/* Brand PNGs cut from the client's board (assets/brand). They arrive
   pre-coloured gold, so state changes use filters, never `color`. */
img.bim{display:block;object-fit:contain;flex:none;-webkit-user-select:none;user-select:none}
img.wm{width:auto}

/* Serif is reserved for the logo, page headings and featured editorial lines.
   Controls, labels, body text and every metric use the sans stack. */
.serif{font-family:var(--serif)}
.mut{color:var(--mut)}
.gold{color:var(--goldT)}
.num{font-variant-numeric:tabular-nums}

.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--goldT)}
.hairline{border:0;border-top:1px solid var(--line2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r-l)}
.card-flat{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r)}
.card-plain{background:var(--bg2);border-radius:var(--r);border:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14.5px;border-radius:999px;padding:12px 22px;min-height:44px;transition:filter .15s,transform .1s,background .15s,border-color .15s;white-space:nowrap;position:relative}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none;filter:none}
.btn-hero{background:linear-gradient(180deg,var(--moss2),var(--moss));color:#F4F3EA;border:1px solid rgba(198,220,192,.28);box-shadow:var(--shadow-s)}
.btn-hero:hover:not(:disabled){filter:brightness(1.12)}
.btn-primary{background:var(--sage);color:var(--sageInk);border:1px solid var(--sage)}
.btn-primary:hover:not(:disabled){filter:brightness(1.07)}
.btn-gold{background:var(--goldSoft);color:var(--gold2);border:1px solid var(--line)}
.btn-gold:hover:not(:disabled){background:rgba(201,162,39,.2)}
.btn-ghost{background:transparent;color:var(--ink2);border:1px solid var(--line3)}
.btn-ghost:hover:not(:disabled){border-color:var(--ink2);color:var(--ink);background:var(--hover)}
.btn-danger{background:transparent;color:var(--bad);border:1px solid var(--badLine)}
.btn-danger:hover:not(:disabled){background:var(--badSoft);border-color:var(--bad)}
.btn-sm{padding:9px 16px;font-size:14px;min-height:40px}
.btn-lg{padding:15px 28px;font-size:15.5px;min-height:52px}
.btn-block{width:100%}
.btn.loading{color:transparent!important;pointer-events:none}
.btn.loading:after{content:"";position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%;border:2px solid var(--ink);border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Every icon button keeps at least a 44px hit target regardless of its drawn size. */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;color:var(--ink2);border:1px solid transparent;transition:background .15s,color .15s;position:relative}
.iconbtn:hover{background:var(--panel3);color:var(--ink)}
.iconbtn svg{width:20px;height:20px}
.iconbtn:disabled{opacity:.3;cursor:not-allowed}
.iconbtn:disabled:hover{background:none;color:var(--ink2)}
.hit{position:relative}
.hit:after,.iconbtn:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}

/* Status colours carry one meaning each: green is live, neutral is draft,
   grey is archived, amber is pending or caution, red blocks. Gold is not a
   status: it marks the brand, the primary action and the current selection. */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.02em;padding:4px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.pill-pub{background:var(--okSoft);color:var(--ok);border-color:var(--okLine)}
.pill-draft{background:rgba(169,186,174,.14);color:var(--ink2);border-color:rgba(169,186,174,.3)}
.pill-arch{background:rgba(169,186,174,.08);color:var(--mut);border-color:var(--line2)}
.pill-free{background:rgba(140,191,160,.14);color:var(--ok);border-color:rgba(140,191,160,.34)}
.pill-prem{background:transparent;color:var(--gold2);border-color:rgba(201,162,39,.42)}
.pill-pending{background:var(--warnSoft);color:var(--warn);border-color:var(--warnLine)}
.pill-live{background:var(--okSoft);color:var(--ok);border-color:var(--okLine)}
.pill-sample{background:rgba(169,186,174,.1);color:var(--mut);border-color:var(--line2);font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot-pub{background:var(--ok)}
.dot-draft{background:var(--dotDraft)}
.dot-arch{background:var(--dotArch)}

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label,.flabel{font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink2)}
.input,select.input,textarea.input{background:var(--bg2);border:1px solid var(--line3);border-radius:12px;padding:11px 14px;font-size:14.5px;width:100%;min-height:44px;transition:border-color .15s,box-shadow .15s}
.input:hover{border-color:var(--ink2)}
.input:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(201,162,39,.14);outline:none}
.input:disabled{opacity:.55;cursor:not-allowed}
.input.err{border-color:var(--bad)}
.input.err:focus{box-shadow:0 0 0 3px rgba(224,139,133,.16)}
textarea.input{resize:vertical;min-height:92px;line-height:1.65}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A9BAAE' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;cursor:pointer}
.input::placeholder{color:var(--placeholder)}
.charcount{font-size:12px;color:var(--mut);text-align:right;font-variant-numeric:tabular-nums}
.hint{font-size:13px;color:var(--mut);line-height:1.55}
.hint-err{font-size:13px;color:var(--bad);display:flex;align-items:center;gap:6px;line-height:1.5}
.hint-ok{font-size:13px;color:var(--ok);display:flex;align-items:center;gap:6px;line-height:1.5}
.hint-err svg,.hint-ok svg{width:14px;height:14px;flex:none}

.switch{position:relative;width:44px;height:25px;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;inset:0;cursor:pointer}
.switch i{position:absolute;inset:0;background:var(--switchOff);border:1px solid var(--line3);border-radius:999px;transition:background .18s}
.switch i:after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--knob);transition:transform .18s,background .18s}
.switch input:checked+i{background:var(--goldSoft);border-color:rgba(201,162,39,.45)}
.switch input:checked+i:after{transform:translateX(19px);background:var(--gold)}
.switch input:focus-visible+i{outline:2px solid var(--gold2);outline-offset:2px}
/* Toggle state is never carried by colour alone. */
.switchwrap{display:inline-flex;align-items:center;gap:10px}
.switchwrap .st{font-size:13px;font-weight:600;color:var(--mut);min-width:24px;text-align:right}
.switchwrap .st.on{color:var(--gold2)}

.chip{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;min-height:42px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink2);background:var(--panel);border:1px solid var(--line2);transition:all .15s;cursor:pointer}
.chip:hover{border-color:var(--ink2);color:var(--ink)}
.chip.on{background:var(--goldSoft);color:var(--gold2);border-color:rgba(201,162,39,.5);font-weight:600}
.chip svg{width:15px;height:15px;flex:none}
.chip .ckdot{width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;opacity:.45}
.chip.on .ckdot{opacity:1;background:var(--gold);border-color:var(--gold);color:var(--onGold)}
.chip .ckdot svg{width:10px;height:10px}

.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);background:var(--float);border:1px solid var(--floatLine);color:var(--floatInk);padding:12px 20px;border-radius:14px;font-size:14px;font-weight:500;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:200;display:flex;align-items:center;gap:10px;max-width:min(92vw,460px)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast svg{width:16px;height:16px;color:var(--floatGold);flex:none}
.toast .undo{margin-left:6px;font-weight:600;color:var(--floatGold);text-decoration:underline;white-space:nowrap;padding:4px 2px}

.overlay{position:fixed;inset:0;background:var(--overlaybg);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.on{opacity:1;pointer-events:auto}
.modal{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);width:100%;max-width:460px;max-height:92vh;overflow:auto;transform:translateY(12px) scale(.98);transition:transform .2s}
.overlay.on .modal{transform:none}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line2)}
/* Dialogs are functional UI, so their titles use the interface face; the
   serif stays for emotional and featured headings only. */
.modal-h h3{font-size:17px;font-weight:600}
.modal-b{padding:22px}
.modal-f{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--line2);flex-wrap:wrap}

.lotus{color:var(--gold)}

.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;text-align:center;color:var(--mut);font-size:14px}
.empty svg{width:30px;height:30px;opacity:.6}

/* ---- charts -------------------------------------------------------------
   One series is one colour. Gold is not a chart colour here; it means
   selected, active or warning. The ordinal ramp below cleared the palette
   validator for monotone lightness, step separation and surface contrast. */
.bar-row{display:grid;grid-template-columns:minmax(96px,1.15fr) 2fr auto;gap:14px;align-items:center;font-size:14px;padding:4px 0}
.bar-row .bl{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{display:block;height:10px;background:var(--track);border-radius:6px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--bar);border-radius:0 5px 5px 0;min-width:3px;transition:width .5s ease}
.bar-val{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);min-width:52px;text-align:right}
.bar-row:hover .bar-fill{filter:brightness(1.14)}

.stack{display:flex;gap:2px;height:16px;border-radius:8px;overflow:hidden}
.stack i{display:block;height:100%}
.stack i:first-child{border-radius:8px 0 0 8px}
.stack i:last-child{border-radius:0 8px 8px 0}
.stackleg{display:flex;flex-direction:column;gap:11px;margin-top:16px;font-size:14px}
.stackleg .sl{display:flex;align-items:center;gap:10px;color:var(--ink2)}
.stackleg .sw{width:11px;height:11px;border-radius:3px;flex:none}
.stackleg b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Definition popover used by every metric that needs a formula. */
.tipbtn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:var(--mut);flex:none;position:relative;vertical-align:middle}
.tipbtn:hover{color:var(--ink);background:var(--hover2)}
.tipbtn svg{width:14px;height:14px}
.tipbtn:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.defbox{font-size:14px;color:var(--ink2);line-height:1.65}
.defbox .dfl{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:16px 0 6px}
.defbox code{display:block;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--gold2);line-height:1.55;white-space:pre-wrap}

/* Save-state readout: Saving / Saved / Save failed / Unpublished changes. */
.savestate{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--mut);white-space:nowrap}
.savestate svg{width:14px;height:14px;flex:none}
.savestate.saving svg{animation:spin .8s linear infinite}
.savestate.saved{color:var(--ok)}
.savestate.failed{color:var(--bad)}
.savestate.pending{color:var(--warn)}

.phone{width:min(392px,100%);aspect-ratio:392/820;background:var(--bg);border:1px solid var(--line);border-radius:38px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.phone iframe{width:100%;height:100%;border:0;background:var(--bg)}

/* Thumbnail images fill whatever frame they are given. */
.thumbimg{width:100%;height:100%;object-fit:cover;display:block}

/* ---- tooltips -----------------------------------------------------------
   Visible names for icon-only controls, on hover and on keyboard focus.
   Containers near the top or right edge flip the side with .tipdown /
   .tipleft on the control or any ancestor via the contextual rules below. */
[data-tip]{position:relative}
[data-tip]:hover:after,[data-tip]:focus-visible:after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--float);border:1px solid var(--floatLine);color:var(--floatInk);
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.01em;line-height:1.3;
  padding:6px 10px;border-radius:8px;white-space:nowrap;z-index:130;pointer-events:none;
  box-shadow:var(--shadow-s);animation:tipin .14s .38s both;text-transform:none}
@keyframes tipin{from{opacity:0}to{opacity:1}}
.apphead [data-tip]:hover:after,.apphead [data-tip]:focus-visible:after,
.sessbar [data-tip]:hover:after,.sessbar [data-tip]:focus-visible:after,
.greetrow [data-tip]:hover:after,.greetrow [data-tip]:focus-visible:after,
.panel-h [data-tip]:hover:after,.panel-h [data-tip]:focus-visible:after,
.modal-h [data-tip]:hover:after,.modal-h [data-tip]:focus-visible:after,
.ahead [data-tip]:hover:after,.ahead [data-tip]:focus-visible:after,
[data-tip].tipdown:hover:after,[data-tip].tipdown:focus-visible:after{
  bottom:auto;top:calc(100% + 8px)}
.hactions [data-tip]:hover:after,.hactions [data-tip]:focus-visible:after,
.sbx [data-tip]:hover:after,.sbx [data-tip]:focus-visible:after,
.panel-h [data-tip]:hover:after,.panel-h [data-tip]:focus-visible:after,
.modal-h [data-tip]:hover:after,.modal-h [data-tip]:focus-visible:after,
[data-tip].tipleft:hover:after,[data-tip].tipleft:focus-visible:after{
  left:auto;right:0;transform:none}
@media (prefers-reduced-motion:reduce){[data-tip]:after{animation:none!important}}

.scrim{position:fixed;inset:0;background:var(--scrimbg);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}

/* ---- light-theme corrections --------------------------------------------
   Three things a token cannot carry. A data URI cannot read a variable, so
   the select chevron is redrawn. A gradient built for a dark ground reads as
   a smudge on a white one, so the raised card surfaces flatten. And the
   focus ring needs the darkened gold to be visible at all.               */
[data-theme="light"] select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23657A6C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
[data-theme="light"] .card,[data-theme="light"] .modal{background:var(--panel)}
/* A recessed field reads as recessed on a dark page. On a light one the same
   trick reads as dirty, so fields sit white inside their border instead. */
[data-theme="light"] .input,[data-theme="light"] select.input,[data-theme="light"] textarea.input{background:var(--panel)}
[data-theme="light"] :focus-visible{outline-color:var(--goldT)}
/* The scrollbar thumb is drawn with a ring of page colour around it, which
   only works while the page is dark. */
[data-theme="light"] ::-webkit-scrollbar-thumb{border-color:var(--bg)}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- consequences, before a destructive confirmation --------------------
   A band naming what cannot be undone, and a list of what a press will take
   with it. Both surfaces confirm deletions this way: the portal deleting an
   account, and a person deleting their own.                               */
.checks{display:flex;flex-direction:column;gap:9px;margin:4px 0 4px}
.checkrow{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.checkrow svg{width:15px;height:15px;flex:none;margin-top:2px}
.checkrow.bad svg{color:var(--bad)}
.checkrow.ok svg{color:var(--ok)}
/* A note is not a blocker: it reports a release decision, not a fault. */
.checkrow.note{color:var(--mut)}
.checkrow.note svg{color:var(--mut)}
.warnband{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-radius:12px;background:var(--warnSoft);border:1px solid var(--warnLine);color:var(--ink2);font-size:13.5px;line-height:1.55;margin-bottom:16px}
.warnband svg{width:16px;height:16px;color:var(--warn);flex:none;margin-top:1px}
.warnband .wb{margin-left:auto;flex:none}
.warnband.bad{background:var(--badSoft);border-color:var(--badLine)}
.warnband.bad svg{color:var(--bad)}