/* ============================================================
   Opsboard — app-specific components.
   Loaded after app.css. Uses the shared tokens only: no new colours,
   no gradients, no blur, no shadows beyond the shared ones.
   1 shell extras · 2 workspace switcher · 3 filters · 4 lists
   5 pipeline board · 6 aging · 7 role matrix · 8 plans · 9 responsive
   10 topbar controls · 11 notifications · 12 phone preview · 13 dark mode
   ============================================================ */

/* == 0. accent ==
   Opsboard's accent is a deep plum. The shared kit ships one yellow and
   names its slots --amber-*; the names stay — the kit and every app still point
   at the same slots — and only the values move here.

   The kit's yellow is a light fill that carries ink text. #6B3FA0 is a dark
   fill, so the pairing flips: --on-amber is white (7.38:1 on the fill; ink
   would be 2.41:1). --amber-deep is the readable shade on white (8.69:1) and
   holds 7.22:1 on --amber-soft; --amber-darker is the heavier one (12.28:1).
   --hover is the accent's own tint, so it moves with it.

   Held clear of --info (#1F5C9E), the only other cool colour on screen: the
   accent sits at 267° against the blue's 211°, so a selected row and an
   in-progress pill stay tellable apart, and it is the same 56° gap in dark.
   Also held well round from deskgrid's indigo (238°). --ok, --warn and --bad
   are green, gold and red, nowhere near it. Solid colours only, as in the kit. */
:root{
  --hover:#F7F3FC;
  --amber:#6B3FA0;       --amber-deep:#5F3593;   --amber-darker:#452566;
  --amber-fill:#6B3FA0;  --amber-fill-hi:#5A3487;
  --amber-soft:#EFE7F8;  --amber-line:#C7ACE4;   --on-amber:#FFFFFF;
}
/* the four the kit re-declares for the dark palette, re-declared again. The
   fill itself does not change between schemes — white on it is 7.38:1 either
   way — so only the tint, the hairline and the two text shades move. */
[data-theme="dark"]{
  --hover:#291F3A;
  --amber-soft:#211930;  --amber-line:#46375E;
  /* the two text shades lift for the dark ground: 7.73:1 and 10.81:1 on the
     tint, 7.98:1 and 11.17:1 on --surface. Nothing else on screen is violet,
     so unlike the previous accent they need no extra push round the wheel. */
  --amber-deep:#C4A0F0;  --amber-darker:#DCC6F8;
}
/* text selection: the kit pins ink on its yellow; on this fill it is white */
::selection{background:var(--amber-fill);color:var(--on-amber)}
/* The kit draws every focus ring in --amber, which does not move between
   schemes. On the light ground that is 7.38:1; on the dark ground it is 2.36:1
   and the ring all but vanishes. The dark scheme takes --amber-deep instead
   (7.98:1 on --surface). Written here, high in the file, so the two subtrees
   that need a white ring — the accent sidebar and the phone stage — still win
   it back further down. */
[data-theme="dark"] :focus-visible{outline-color:var(--amber-deep)}

/* == 1. shell extras == */
/* the skip link lands on top of the sidebar, which wears the accent by
   default, so it carries an ink edge and an ink focus ring instead of
   disappearing into it */
.skiplink{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:var(--amber-fill);color:var(--on-amber);
  padding:10px 16px;border:2px solid var(--ink);border-radius:0 0 var(--r) 0;font-weight:600}
.skiplink:focus{inset-inline-start:0}
.skiplink:focus-visible{outline-color:var(--ink)}
.viewhost{flex:1;min-width:0}
/* fields laid out by a grid space themselves; drop the stacked margin */
.grid>.field+.field{margin-top:0}
.viewhost:focus{outline:none}
.side__note{font-size:11.5px;color:var(--faint);line-height:1.45;margin-top:10px}
.pill--btn{cursor:pointer;font-family:var(--mono)}
.pill--btn:hover{border-color:var(--amber);background:var(--amber-fill);color:var(--on-amber)}
.about__block+.about__block{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.about__block h4{margin-bottom:5px}
.about__block p{font-size:13.5px}
.about__list{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.about__list li{position:relative;padding-left:15px;font-size:13.5px;line-height:1.5}
.about__list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:var(--r-xs);background:var(--amber-fill)}
.about__source{margin-top:12px}
.about__source p{font-size:13px;margin-bottom:10px}
/* the copilot's worked examples: what you type, then what it does */
.about__ex{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.about__ex li{display:flex;flex-direction:column;gap:3px;border-left:3px solid var(--amber);
  padding:2px 0 2px 11px}
.about__say{font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.about__does{font-size:13px;line-height:1.45}

/* Rail mode and the accent tone come from app.css. Below are the pieces the
   shared kit does not know about — this app's workspace switcher, the footer
   note and the footer controls — plus the corrections the accent sidebar needs
   now that it is the default. Colours are the kit's own tokens throughout. */
.shell.is-rail .wsw{padding:10px 8px}
.shell.is-rail .wsw__label,
.shell.is-rail .wsw__meta,
.shell.is-rail .wsw__chev,
.shell.is-rail .side__note{display:none}
.shell.is-rail .wsw__btn{justify-content:center;padding:8px 0}

/* ---- the accent sidebar ----
   The kit wrote this subtree for a light yellow fill: ink text, near-white
   chips, ink hairlines, and a dark-mode block that re-pins the whole palette
   back to light because the yellow stays light in both schemes. This accent is
   a dark fill, so all of that inverts — white text, chips that go darker than
   the fill rather than lighter, white hairlines — and it is the same in both
   schemes, so these rules are written once and the kit's dark-mode re-pin is
   put back to the dark palette below rather than being worked around.

   White on #6B3FA0 is 7.38:1. The 10–12px mono labels drop to #F3EFF8, which
   is 6.51:1 — comfortably over AA — so quiet text stays quiet without going
   under. */
[data-theme="dark"] .side[data-tone="amber"]{
  --ink:#F2F2F0; --ink-2:#D7D8DA; --muted:#A2A8B0; --faint:#8E959D;
  --bg:#141517; --surface:#191A1D; --surface-2:#1F2124;
  --line:#2C2E32; --line-2:#3A3D42; --hover:#291F3A;
  --amber-deep:#C4A0F0; --amber-darker:#DCC6F8;
}
/* primary text and icons on the fill */
.side[data-tone="amber"] .side__name,
.side[data-tone="amber"] .navlink,
.side[data-tone="amber"] .navlink svg,
.side[data-tone="amber"] .wsw__name{color:#FFFFFF}
/* the quiet mono labels */
.side[data-tone="amber"] .side__tag,
.side[data-tone="amber"] .navgroup__label,
.side[data-tone="amber"] .navlink__count,
.side[data-tone="amber"] .wsw__label,
.side[data-tone="amber"] .wsw__sub,
.side[data-tone="amber"] .wsw__chev,
.side[data-tone="amber"] .side__note{color:#F3EFF8}
/* the workspace popover is the one thing in here that is not painted on the
   fill — it is a panel on the page surface, so it takes the page's own text
   colours back off the tokens rather than the light-on-dark set above */
.side[data-tone="amber"] .wsw__list .wsw__name{color:var(--ink)}
.side[data-tone="amber"] .wsw__list .wsw__sub,
.side[data-tone="amber"] .wsw__list .wsw__opt:not(.is-on) .wsw__chev{color:var(--faint)}
/* and its focus ring for the same reason: the white ring the fill needs is
   invisible on this panel in light mode. --amber-deep is the shade that reads
   on a page surface in either scheme — 8.69:1 light, 7.98:1 dark. */
.side[data-tone="amber"] .wsw__list :focus-visible{outline-color:var(--amber-deep)}
/* hairlines lift off the fill instead of cutting into it */
.side[data-tone="amber"] .side__brand,
.side[data-tone="amber"] .side__foot,
.side[data-tone="amber"] .wsw,
.side[data-tone="amber"] .navgroup+.navgroup{border-color:rgba(255,255,255,.24)}
/* a hover darkens the fill; the selected screen stays the white chip the kit
   drew, with the accent's own heavy shade on it (12.28:1) */
.side[data-tone="amber"] .navlink:hover{background:rgba(23,24,26,.10)}
.side[data-tone="amber"] .navlink.is-active{background:#FFFFFF;color:#452566}
.side[data-tone="amber"] .navlink.is-active svg,
.side[data-tone="amber"] .navlink.is-active .navlink__count{color:#5F3593}
/* the focus ring: the kit's ink ring is only 2.4:1 on this fill, white is 7.4:1 */
.side[data-tone="amber"] :focus-visible{outline-color:#FFFFFF}
/* the two white marks keep their shape and swap which side is which */
.side[data-tone="amber"] .mark,
.side[data-tone="amber"] .avatar--amber{background:#FFFFFF;color:var(--amber-fill)}
/* Chips on a dark fill go darker, not lighter: white on a 18%-ink chip is
   8.84:1, where the kit's 72%-white chip would have left white on near-white. */
.side[data-tone="amber"] .btn,
.side[data-tone="amber"] .wsw__btn,
.side[data-tone="amber"] .side__brandbtns .btn{background:rgba(23,24,26,.18);border-color:rgba(255,255,255,.30);color:#FFFFFF}
.side[data-tone="amber"] .btn:hover,
.side[data-tone="amber"] .wsw__btn:hover,
.side[data-tone="amber"] .side__brandbtns .btn:hover{background:rgba(23,24,26,.30);border-color:rgba(255,255,255,.42)}

/* A ghost button sitting on the fill inherits the solid footer button style and
   loses its rank, so it is given back a quieter, outline-only treatment. */
.side[data-tone="amber"] .btn--ghost{background:transparent;border-color:rgba(255,255,255,.30)}
.side[data-tone="amber"] .btn--ghost:hover{background:rgba(23,24,26,.30);border-color:rgba(255,255,255,.42)}

/* The two brand-row controls carry no text, so their pressed state has to be
   visible and not only announced through aria-pressed. On the fill the pressed
   one becomes a solid white chip — the dark treatment is reserved for the one
   link that leaves the app. */
.side__brandbtns .btn[aria-pressed="true"]{background:var(--amber-soft);border-color:var(--amber);color:var(--ink)}
.side[data-tone="amber"] .side__brandbtns .btn[aria-pressed="true"],
.side[data-tone="amber"] .side__brandbtns .btn[aria-pressed="true"]:hover{background:#FFFFFF;border-color:#FFFFFF;color:#452566}

/* The author's site — the single dark control in the sidebar, so it reads as
   an exit whichever colour the sidebar is wearing. */
.btn--site,
.side[data-tone="amber"] .btn--site{background:var(--night);border-color:var(--night);color:#fff}
.btn--site:hover,
.side[data-tone="amber"] .btn--site:hover{background:var(--night-2);border-color:var(--night-2)}

/* == 2. workspace switcher == */
.wsw{position:relative;padding:12px;border-bottom:1px solid var(--line);flex:none}
.wsw__label{padding:0 2px 6px}
.wsw__btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);padding:8px 10px;cursor:pointer;transition:border-color .12s,background .12s}
.wsw__btn:hover{border-color:var(--amber-line);background:var(--hover)}
.wsw__meta{display:flex;flex-direction:column;min-width:0;flex:1}
.wsw__name{font-weight:600;font-size:13.5px}
.wsw__sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsw__chev{width:15px;height:15px;color:var(--faint);flex:none;transform:rotate(90deg)}
.wsw__list{display:none;position:absolute;left:12px;right:12px;top:calc(100% - 6px);z-index:30;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-2);
  padding:6px;max-height:60vh;overflow:auto}
.wsw.is-open .wsw__list{display:block}
.wsw__opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  border-radius:var(--r-sm);padding:8px;cursor:pointer}
.wsw__opt:hover{background:var(--hover)}
.wsw__opt.is-on{background:var(--amber-soft)}
.wsw__opt.is-on .wsw__chev{transform:none;color:var(--amber-deep)}

/* == 3. filters == */
.filterbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:6px}
.filterbox{display:flex;flex-direction:column;gap:6px;min-width:150px}
.filterbox .label{padding:0}
.select--sm{padding:5px 28px 5px 9px;font-size:12.5px;border-radius:var(--r-sm);background-position:right 6px center;background-size:15px;width:auto;min-width:120px}

/* == 4. lists inside cards and drawers == */
.itemlist{display:flex;flex-direction:column}
.itemlist li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.itemlist li:last-child{border-bottom:0}
.itemlist li:first-child{padding-top:0}
.notelist{display:flex;flex-direction:column;gap:10px}
.notelist li{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface-2)}
.notelist li p{font-size:13.5px}
.deflist{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:13.5px}
.deflist dt{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.deflist dd{min-width:0;overflow-wrap:anywhere}
.drawer__foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2);flex:none}
.scrim--drawer{padding:0;place-items:stretch}

/* == 5. pipeline board == */
.kboard{display:grid;grid-template-columns:repeat(5,minmax(168px,1fr));gap:12px;margin-top:16px;
  overflow-x:auto;padding-bottom:8px;align-items:start}
.kcol{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);min-width:168px}
.kcol__head{padding:12px 12px 10px;border-bottom:1px solid var(--line)}
.kcol__total{font-size:13px;color:var(--muted);margin-top:2px}
.kcol__body{padding:10px;display:flex;flex-direction:column;gap:10px}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px}
.kcard__title{font-weight:600;font-size:13.5px;line-height:1.35}
.kcard .select{width:100%}

/* == 6. receivables aging == */
.aging{display:flex;flex-direction:column;gap:12px}
.aging__row{display:grid;grid-template-columns:96px minmax(0,1fr) 110px 32px;gap:12px;align-items:center}
.aging__label{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.aging__val{text-align:right;font-size:13px}

/* == 7. role matrix == */
.matrix th{text-transform:none;letter-spacing:.08em}
.matrix td{vertical-align:middle}
.checkcell{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.checkcell input{width:17px;height:17px;accent-color:var(--amber);cursor:pointer}
.checkcell input:disabled{cursor:not-allowed}

/* == 8. plan picker == */
.planlist{display:flex;flex-direction:column;gap:8px}
.planopt{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:var(--r);
  padding:10px 12px;cursor:pointer;font-size:13.5px}
.planopt:hover{border-color:var(--amber-line);background:var(--hover)}
.planopt.is-on{border-color:var(--amber);background:var(--amber-soft)}
.planopt input{accent-color:var(--amber);width:16px;height:16px;flex:none}

/* == 9. responsive == */
@media (max-width:1080px){
  .kboard{grid-template-columns:repeat(5,minmax(190px,240px))}
}
@media (max-width:900px){
  .aging__row{grid-template-columns:88px minmax(0,1fr) 96px}
  .aging__row>:last-child{display:none}
  /* the sidebar is a drawer down here, so there is nothing to collapse */
  .side__brandbtns [data-chrome="rail"]{display:none}
}
@media (max-width:640px){
  .filterbar{gap:10px}
  .filterbox{min-width:0;flex:1}
  .search{max-width:none;width:100%}
  /* Every table in this app sits in a horizontal scroller. The kit lets card
     tables re-wrap their headers at this width, which here crushed seven
     columns into one word per line and still ran past the edge. Inside a
     scroller the honest answer is to let the table keep its natural width and
     scroll, so rows stay one line tall and nothing is half-sliced. */
  .tablewrap--scroll table.data{min-width:max-content}
  .tablewrap--scroll table.data th{white-space:nowrap}
  .tablewrap--scroll table.data td{white-space:nowrap}
  /* the checkbox matrix is the one table whose first column may wrap: its
     capability names are sentences, not labels */
  .tablewrap--scroll table.matrix td:first-child{white-space:normal;min-width:160px}
  /* a card head holding a row of controls has no room left for its title on
     the same line, so the controls take their own line underneath */
  .card__head{flex-wrap:wrap}
  .card__head>.btnrow{flex-basis:100%}
  /* bar charts: six columns of ₹ figures do not fit across a phone, and the
     value above each bar is the point of the chart. Give the columns a floor
     and let the chart scroll rather than ellipsing every number. */
  .bars{gap:4px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
  .bars__col{flex:1 0 48px;min-width:48px}
  .bars__x{font-size:9px}
  /* the head is a row of title plus actions; at this width the title has no
     room left beside two buttons, so the two parts stack instead */
  .page-head{flex-direction:column;gap:12px}
  .page-head .btnrow{width:100%}
  .page-head .btnrow>*{flex:1}
  /* and the search box takes its own line above the selects */
  .filterbar .search{flex:1 0 100%}
  .kboard{grid-template-columns:minmax(0,1fr);overflow-x:visible}
  .kcol{min-width:0}
  .deflist{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .deflist dd{margin-bottom:8px}
  .aging__row{grid-template-columns:76px minmax(0,1fr) 86px}
}

/* == 10. topbar controls ==
   Three icon-only controls sit between the page title and the demo notice:
   notifications, device preview, colour scheme. Nothing here is labelled by
   colour alone — each carries a title and an aria-label, and the pressed
   state is drawn as well as announced. */
.topbar__tools{display:flex;align-items:center;gap:4px;flex:none}
.devswitch{display:flex;gap:2px}
.topbar__tools .btn--icon[aria-pressed="true"]{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber-deep)}
.topbar__title,.topbar__sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill--btn{white-space:nowrap}
/* the icon controls are fixed-size chips, not flexible ones: without this the
   burger squeezed to 23px wide once the bar ran out of room */
.topbar .btn--icon{flex:none}

/* == 11. notifications == */
.notif{position:relative;flex:none}
.bellbtn{position:relative}
.bellbadge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--bad);color:#fff;font-size:10px;font-weight:600;
  display:grid;place-items:center;line-height:1;border:1px solid var(--surface)}
.notifpanel{position:absolute;right:0;top:calc(100% + 10px);z-index:40;
  width:min(380px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3);max-height:min(70vh,540px);overflow:auto;padding:0 6px 6px}
.notifpanel__head{display:flex;align-items:center;gap:10px;padding:12px 8px 10px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.notifpanel__head h3{font-size:14.5px}
.notifpanel__foot{padding:10px 8px 4px;border-top:1px solid var(--line);margin-top:4px}
.notifempty{padding:24px 14px;text-align:center}
.notifempty h4{margin-bottom:6px}
.notiflist{display:flex;flex-direction:column;padding:4px 0}
.notifitem{display:flex;align-items:stretch;gap:2px;border-radius:var(--r);padding:1px}
.notifitem+.notifitem{margin-top:3px}
.notifitem.is-unread{background:var(--amber-soft)}
.notifitem:hover{background:var(--hover)}
.notifitem__go{flex:1;min-width:0;text-align:left;background:none;border:0;cursor:pointer;
  padding:9px 8px;border-radius:var(--r-sm);font:inherit;color:inherit}
.notifitem__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.notifitem__title{font-weight:600;font-size:13.5px;line-height:1.4}
.notifitem__go p{margin-top:3px}
.notifitem__read{flex:none;align-self:center;padding:5px;width:28px;height:28px}
.notifitem__seen{flex:none;align-self:center;padding-right:8px;font-size:9.5px}

/* == 12. phone preview ==
   The app inside an iframe of itself at 390x844, so its own breakpoints do
   the work. Accent surround, white text on it, dark bezel around the screen. */
.stage{position:fixed;inset:0;z-index:90;background:var(--amber-fill);color:var(--on-amber);
  display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;overflow:auto}
.stage__bar{display:flex;align-items:center;gap:16px;width:min(760px,100%);justify-content:space-between;flex:none}
.stage__name{font-weight:700;font-size:17px;letter-spacing:-.02em}
.stage__size{color:var(--on-amber)}
/* the ring is white for the same reason the sidebar's is: ink is 2.4:1 here */
.stage :focus-visible{outline-color:#FFFFFF}
.phone{position:relative;flex:none;background:var(--night);border-radius:38px;padding:12px;
  transform-origin:top center}
.phone__notch{position:absolute;left:50%;margin-left:-48px;top:4px;width:96px;height:5px;
  border-radius:var(--r-pill);background:var(--night-line)}
.phone__screen{width:390px;height:844px;border:0;border-radius:26px;background:var(--bg);display:block}
body.is-staged{overflow:hidden}
body.is-staged .assist-fab,body.is-staged .assist,body.is-staged .toasts{display:none}

@media (max-width:900px){
  /* the phone preview is a desktop idea — at this width you are already there */
  .devswitch{display:none}
}
@media (max-width:640px){
  .topbar{gap:8px;padding:0 12px}
  .notifpanel{position:fixed;left:12px;right:12px;top:calc(var(--bar) + 8px);width:auto;
    max-height:calc(100vh - var(--bar) - 20px)}
}

/* == 12a. drawer scrim ==
   Under 900px the sidebar becomes a 248px slide-over pinned above the topbar,
   which buries the burger that opened it: on a phone the only way back out was
   Escape or a lucky tap on the strip of page still showing. This lays a scrim
   over everything the drawer does not cover. It hangs off .main, so a tap on it
   lands on .main and runs the close handler that is already there — no new
   markup, no new script. Kept under the drawer's own z-index so the nav stays
   live. */
@media (max-width:900px){
  .side.is-open ~ .main::before{content:"";position:fixed;inset:0;z-index:60;
    background:rgba(23,24,26,.42)}
}

/* == 12b. touch sizing ==
   Below 900px every one of these is being tapped, not clicked. The kit's
   desktop sizes (30px chips, 34px icons, 24px pills) are under the 44px
   guidance, so they grow here only — the desktop layout is untouched. */
@media (max-width:900px){
  .btn{min-height:44px}
  .btn--sm{min-height:40px}
  .navlink{min-height:44px}
  /* the tone toggle grows to 40px, so the brand row gives back the padding it
     needs to keep "OPERATIONS PLATFORM" on one line */
  .side__brand{padding:0 14px}
  .side__brandbtns .btn{width:40px;height:40px;min-height:40px}
  .topbar .btn--icon,.topbar__tools .btn--icon{width:44px;height:44px;min-height:44px}
  .pill--btn{min-height:40px;padding:8px 10px}
  .notifitem__read{width:40px;height:40px;min-height:40px}
  .notifitem__go{padding:11px 8px}
  .wsw__btn{min-height:48px}
  .wsw__opt{min-height:48px}
  .tab{padding:12px 14px}
  .planopt{min-height:48px}
  .checkcell{min-height:44px}
  .checkcell input{width:20px;height:20px}
}
/* Under 400px the workspace name under the page title is what pushes the title
   itself down to three letters. The name is already in the drawer and on the
   page heading, so the bar drops it and keeps the title readable. */
@media (max-width:400px){
  .topbar__sub{display:none}
  .topbar{gap:6px;padding:0 10px}
  .topbar__title{font-size:14.5px}
  /* the bar is four controls plus a title on a 320px screen: the icons drop
     back to the 40px floor and the demo pill loses its padding rather than the
     title losing its letters */
  .topbar .btn--icon,.topbar__tools .btn--icon{width:40px;height:40px;min-height:40px}
  .pill--btn{font-size:9px;padding:6px 7px;letter-spacing:.02em;min-height:40px}
}
@media (max-width:360px){
  /* last resort on the smallest phones: the demo pill drops "this demo" and
     keeps just "ABOUT". The text stays in the DOM, so the button still
     announces its full label; only the drawn glyphs shrink. */
  .pill--btn{font-size:0;padding:6px 9px}
  .pill--btn::after{content:"ABOUT";font-size:9.5px;font-weight:600;letter-spacing:.06em}
}

/* == 13. dark mode ==
   The palette flips in app.css. The accent sidebar needs nothing here: its
   fill is dark in both schemes, so the light-on-dark rules in section 1 are
   already right and the kit's dark-mode re-pin of that subtree is undone
   there too. What is left is the two corrections below. */
html[data-theme="dark"]{color-scheme:dark}

/* the shared select chevron is drawn with a light-mode grey */
[data-theme="dark"] .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23A2A8B0' stroke-width='1.7'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E")}

/* solid status fills carry dark text in this scheme */
[data-theme="dark"] .toast--ok,[data-theme="dark"] .toast--bad,
[data-theme="dark"] .bellbadge{color:var(--night)}
[data-theme="dark"] .bellbadge{border-color:var(--surface)}