/* TradeDraft — the SIGNED-IN PANEL SYSTEM.  Paired with js/settings.js (TDSettings) and
   js/account.js (TDAccount), the same way css/library.css pairs with js/library.js.  Linked by BOTH
   signed-in hosts (app.html + dashboard.html), which is what makes it the shared home for panel
   chrome: .field, .seg, .add-work-btn et al started as "the host page's job" (see the original note
   below) but every host needed them, so they live here now — one definition, both surfaces.

   ⚠️ If you are about to write style="…" in settings.js / account.js / billing.js, STOP and add a
   class here instead.  16 Jul 2026: My Account was built almost entirely from inline styles while
   Settings used this stylesheet, so the two panels could never match however carefully they were
   tuned — the same outline button was hand-written four times with its own hex values.  That's the
   root of the "visual consistency" gap the owner kept noticing, and inline styles are how it grows
   back.  The components below (.btn-2, .panel-*, .ap-*, .cpw-*) exist so nothing needs a style attr.

   ⚠️ NAMESPACE: the account PANEL uses .ap-*, NOT .acct-* — that prefix already belongs to the
   retired account CHIP (.acct-wrap/.acct-chip/.acct-av/.acct-name/.acct-menu in dashboard.html AND
   engine.css).  A first cut of this file called the panel heading .acct-name and the chip's rule won:
   12.5px/500 with max-width:200px on the portal, and in engine.css that same class is WHITE text —
   so the company name would have rendered invisible on the builder.  Don't squat in that prefix.

   Brand tokens (--navy etc.), the status set and the type scale ALL come from css/tokens.css, which
   BOTH hosts link first — so use the tokens bare: `var(--steel)`, never `var(--steel,#6b80a0)`. A
   fallback on a token that is always loaded is dead code that can only ever lie, and this codebase
   proved it: 185 of them named colours their token didn't have, mostly greys/brasses retired for
   failing WCAG AA.  (dashboard.html used to hand-copy the palette into its own :root — that is
   exactly how the portal spent months rendering the retired #6B80A0. Fixed 16 Jul 2026.)
   Historical note: these rules were lifted verbatim out of app.html's inline <style> (Phase 1). */

/* The type scale (--fs-micro/hint/sm/body/title) lives in css/tokens.css with the rest of the
   design system — it was briefly declared here, but a second :root is exactly the duplication that
   caused every other drift in this codebase. Link tokens.css first; use the tokens. */

/* ── SHARED PANEL COMPONENTS (use these instead of style="…") ─────────────────────────────────── */
/* Secondary button: full-width outline. Was inline-duplicated 4× in account.js (change email /
   password / passkey / export) and again in dashboard.html's billing extras. */
.btn-2{width:100%;margin-top:8px;padding:12px;background:var(--paper);color:var(--navy);
  border:1px solid var(--line-strong);border-radius:var(--r-md,10px);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:600;cursor:pointer;
  transition:border-color .12s,background .12s}
.btn-2:hover{border-color:var(--navy);background:rgba(0,33,71,.02)}
.btn-2:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.btn-2.is-danger{color:var(--red)}
.btn-2.is-danger:hover{border-color:var(--red);background:rgba(179,64,47,.04)}

/* An uppercase micro-label above a group of controls. */
.panel-label{display:block;font-family:var(--sans);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
/* A status / message line under an action. */
.panel-msg{font-size:var(--fs-sm);line-height:1.45;margin:10px 0 0;text-align:center}
/* A hairline-separated group at the foot of a panel. */
.panel-group{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
/* Fine print under a primary action. */
.panel-fine{font-size:var(--fs-micro);color:var(--steel);margin:8px 0 0;line-height:var(--lh-body);text-align:center}
/* Explanatory copy under a .panel-label. */
.panel-note{font-size:var(--fs-hint);color:var(--steel);line-height:1.55;margin:9px 0 11px}
/* Stripe Connect status, inside a .panel-note. Semantic, and AA — "Setup not finished" used to be
   hardcoded #a9863f in the JS: the brass that fails WCAG AA at 3.40:1. */
.cs-ok{color:var(--green)}
.cs-warn{color:var(--st-warn)}
.panel-label.is-danger{color:var(--red)}
/* A .panel-group's own top margin — the first one sits under the panel it extends. */
.panel-group+.panel-group{margin-top:20px}
.panel-note--steps{line-height:1.6;margin:0}
/* The standard-terms preview list in Settings. */
.set-terms-preview{font-size:12px;color:var(--steel);line-height:1.55;padding-left:18px;margin:8px 0 0}

/* Subscription status box contents (billing.js statusHTML) — a headline + muted sub-lines.
   `.is-live` marks a good standing (trial running / subscribed): semantic colour, not the accent. */
.sub-head{font-family:var(--sans);color:var(--navy)}
.sub-head.is-live{color:var(--green)}
.sub-line{display:block;font-size:12px;color:var(--steel);margin-top:4px}
.sub-line--gap{margin-top:6px}

/* My Account identity block + subscription status. */
.ap-name{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--navy);margin:0 0 4px}
.ap-who{margin:0 0 8px;font-family:var(--sans);font-size:var(--fs-body);color:var(--steel)}
.ap-who b{color:var(--navy);font-weight:600}
.ap-status{margin:16px 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md,10px);background:var(--paper)}
.ap-intro{font-size:var(--fs-sm);color:var(--steel);margin:0 0 16px;line-height:var(--lh-body)}
.ap-seg{margin-bottom:16px}
/* The sign-in form's message sits ABOVE the submit button, so it needs bottom margin, not top. */
.ap-msg--form{margin:0 0 12px;text-align:left}
/* Show/hide password. The input reserves room for the toggle so long passwords never run under it. */
.ap-pw{position:relative}
.ap-pw input{width:100%;padding-right:60px}
.ap-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--steel);font-size:12px;font-family:var(--sans);cursor:pointer;padding:4px}
.ap-pw-toggle:hover{color:var(--navy)}
/* Quiet text links under the form (resend / forgotten password). */
.ap-link{display:block;margin-top:14px;background:none;border:0;color:var(--navy);
  font-family:var(--sans);font-size:12px;text-decoration:underline;cursor:pointer;padding:0}
.ap-link--quiet{color:var(--steel)}
.ap-link:hover{color:var(--navy)}
/* The primary button already carries its own top margin; consecutive actions just stack. */
#acctSubscribe .add-work-btn,#acctKeep,#acctManage{margin-top:4px}

/* ── Change-password overlay (account.js) ─────────────────────────────────────────────────────
   Its rows use the shared .field, so this modal matches every other form in the product instead of
   re-implementing labels, inputs and buttons with its own hexes (which is how it ended up carrying
   #6b80a0 — the grey retired for failing WCAG AA). */
.cpw-overlay{position:fixed;inset:0;z-index:130;background:rgba(0,33,71,.6);display:flex;
  align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}
.cpw-card{background:var(--paper);width:100%;max-width:380px;border-radius:14px;
  box-shadow:0 22px 60px rgba(0,33,71,.32);padding:22px;box-sizing:border-box}
.cpw-title{margin:0 0 4px;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--navy)}
.cpw-sub{margin:0 0 16px;font-size:var(--fs-sm);color:var(--steel);line-height:1.45}
.cpw-show{display:flex;align-items:center;gap:7px;font-size:var(--fs-hint);color:var(--steel);
  margin-bottom:12px;cursor:pointer}
.cpw-msg{margin:0 0 12px;text-align:left}
.cpw-msg.is-ok{color:var(--green)}
.cpw-msg.is-err{color:var(--red)}
/* Cancel + Update sit side by side and share the width — override the two buttons' full-width default. */
.cpw-actions{display:flex;gap:10px}
.cpw-actions .btn-2,.cpw-actions .add-work-btn{flex:1;width:auto;margin-top:0;padding:11px}

/* ── Numbered section cards ───────────────────────────────────────────────────────────
   The panel groups its fields into white "setting cards" with a brass numbered badge, a
   serif title and a one-line helper — clearer hierarchy than the old flat single column.
   The cards sit on the chalk background that BOTH hosts provide (the in-app modal sheet =
   var(--chalk); the portal page body = var(--chalk)), so the same markup reads right in
   both places. (Ported from the earlier full-page Settings design.) */
.set-intro{font-size:13px;color:var(--steel);margin:0 0 18px;line-height:1.55}
.set-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg,14px);
  padding:20px 20px 22px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,33,71,.06)}
.set-card-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px}
.set-badge{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brass);
  color:var(--navy);font-family:var(--sans);font-weight:700;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.set-card-title{margin:0;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy);line-height:1.2}
.set-card-sub{margin:4px 0 0;font-size:12.5px;color:var(--steel);line-height:1.5}
/* "Read the standard terms first" disclosure — underline the text so it reads as a link */
.set-terms-link{text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:3px}
.set-acc>summary:hover .set-terms-link{color:var(--brass-deep);text-decoration-color:var(--brass-deep)}
/* the Account & device card — a lighter "utilities" footer (no number, no card border) */
.set-card--muted{background:transparent;border-color:transparent;box-shadow:none;padding:6px 0 0;margin-top:4px;border-top:2px solid var(--line)}
.set-card--muted .set-card-head{margin-bottom:6px}
.set-card--muted .set-card-title{font-size:17px}
/* Advanced-mode toggle sitting at the foot of the Default-pricing card */
.set-advanced{align-items:flex-start;min-height:44px;padding:14px 0 0;margin:16px 0 0;border-top:1px solid var(--line);gap:10px}
.set-advanced input{width:20px;height:20px;margin-top:1px;accent-color:var(--navy);flex-shrink:0}
.set-advanced strong{font-family:var(--sans);color:var(--navy)}
.set-adv-note{display:block;font-size:12px;color:var(--steel);font-weight:400;margin-top:3px;line-height:1.45}

/* The business-logo uploader tile */
.logo-field{display:flex;align-items:center;gap:14px}
.field label.logo-preview{width:120px;height:64px;border:1px dashed var(--line-strong);border-radius:var(--r-md);background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;flex-shrink:0;cursor:pointer;transition:border-color .15s,background .15s}
.logo-preview:hover{border-color:var(--navy);background:#fafbfd}
.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}
.logo-empty{font-size:10px;color:var(--steel);display:block;width:100%;text-align:center;line-height:1.35;padding:0 6px}
.logo-remove{font-size:12px;color:#b3402f;background:none;border:1px solid #e0b4ac;border-radius:8px;padding:7px 12px;cursor:pointer}

/* The overhead day-rate. It is a READ-ONLY value (the day-rate is set by the overhead calculator in
   the builder, not typed here) — but it carries a field label and sits in a row beside Markup, VAT
   and CIS, so a bare line of text read as something half-built (owner, 19 Jul 2026). It now takes
   the same box as its neighbours: same padding, border, radius and background as .field input, so
   the row lines up. Keep these metrics in step with the .field input rule below. */
.set-dayrate{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:16px;font-weight:600;
  color:var(--navy);padding:11px 12px;background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--r-md);line-height:1.25}
/* the button keeps a UA border by default, which made the box 4px taller than the input beside it.
   Scoped here, not on .pricing-edit-link itself — that class is shared with the builder. */
.set-dayrate .pricing-edit-link{border:0;line-height:1.25}
@media (min-width:768px){.set-dayrate{font-size:14px}}

/* Collapsible "Account & device" sections in Settings — tuck the less-used bits away */
.set-acc{border-top:1px solid var(--line)}
.set-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:46px;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.set-acc>summary::-webkit-details-marker{display:none}
.set-acc>summary::after{content:"⌄";font-size:18px;line-height:1;color:var(--steel);transition:transform .2s}
.set-acc[open]>summary::after{transform:rotate(180deg)}
.set-acc-body{padding:2px 0 12px}
.set-acc-note{font-weight:400;text-transform:none;letter-spacing:0;color:var(--steel)}   /* was var(--slate): a note is steel, and that fallback was the retired non-AA grey */

/* ── SELF-CONTAINED PANEL BASE (Phase 2) ─────────────────────────────────────────────
   The TDSettings panel markup uses these GENERIC form/button classes. On app.html they
   are defined in its inline <style> (used by the whole app) — and because that inline block loads
   AFTER this stylesheet with equal specificity, slate keeps using ITS values (these rules are
   harmlessly overridden there). On dashboard.html (the portal), which has none of these classes, THESE
   rules style the panel — so the module renders correctly on any page that links settings.css.
   Copied verbatim from app.html's inline <style>; brand tokens come from the host page. */
.field{margin-bottom:12px}
.field label{display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.8px;text-transform:uppercase;color:var(--slate);margin-bottom:5px}
.field .hint{font-size:11px;color:var(--steel);margin-top:4px;font-style:italic}
.field-warn{display:none;font-size:11px;color:var(--red);margin-top:4px}
.field-warn.show{display:block}
.field input[aria-invalid="true"]{border-color:var(--red)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],.field input[type=password],.field input[type=date],
.field select,.field textarea{width:100%;padding:11px 12px;background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--r-md);font-size:16px;color:var(--slate);transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,33,71,.08)}
.field textarea{min-height:80px;resize:vertical}
/* The "your own terms" editor needs room for a real set of clauses — ~11 lines, not 3 (owner 5 Jul). */
#setOwnTerms{min-height:260px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}
.check-label{display:flex;align-items:center;gap:8px;font-weight:500;text-transform:none;letter-spacing:0}
.check-label input{width:18px;height:18px;flex-shrink:0}
.inline-note{font-weight:400;text-transform:none;letter-spacing:0;font-size:11px;color:var(--steel)}
.seg{display:flex;gap:10px}
.seg-btn{flex:1;padding:11px 10px;font-family:var(--sans);font-size:13px;font-weight:600;
  color:var(--steel);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;transition:.15s;min-height:44px}
.seg-btn:hover{border-color:var(--line-strong)}
.seg-btn.is-active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 1px 3px rgba(0,33,71,.25)}
.li-mini-label{font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:7px;display:block}
/* border:0 is deliberate — with no border declared a <button> takes the UA default (2px outset), so
   every primary button in the product was carrying a 2px black ring. Invisible against navy, which is
   why it survived; it still added 4px to the box and would surface on any lighter variant. */
.add-work-btn{width:100%;padding:14px;background:var(--navy);color:#fff;font-family:var(--sans);
  font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:0;border-radius:var(--r-md);
  box-shadow:0 2px 10px rgba(0,33,71,.18);transition:.15s;min-height:48px}
.add-work-btn:hover{background:var(--navy-2);transform:translateY(-1px)}
.pricing-edit-link{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--navy);text-decoration:underline;background:none;padding:0;white-space:nowrap;cursor:pointer}
.pricing-edit-link:hover{color:var(--brass)}
.qq-legal{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11px}
.qq-legal a{color:var(--steel);text-decoration:none;letter-spacing:.02em}
.qq-legal a:hover{color:var(--brass)}
.qq-legal .qq-sep{color:var(--line-strong)}
.qq-legal .qq-legal-copy{flex-basis:100%;color:var(--steel);opacity:.75;margin-top:4px}

/* ── Drill-in hub presentation (opt-in via TDSettings host.hub) ───────────────────────
   Turns the numbered cards into a tappable menu — Company profile › / Pricing & tax › /
   Terms › (+ Account & device on the builder) — used IDENTICALLY by the in-app Settings
   sheet (app.html) and the portal Settings page (dashboard.html), so the two never drift.
   Each row carries an icon tile in the app's line-stroke family. The module toggles .s-hub
   (the menu) or .s-sec (one section open) on #tdSettingsMount; .hub-acc marks the
   account/device section open (no "Save my details" there). Moved here 30 Jun 2026 from
   dashboard.html's inline <style> so the builder gets the same look. */
/* The settings area is one calm surface: a sidebar of sections, the open section beside/under it.
   Navy is reserved for the Save button, a green tick = done, a red count = still to do.
   Scoped to hub mode (both hosts run host.hub:true).

   The panel is WHITE-SOFT (owner, 19 Jul 2026 — "lighter, same as other pages"; this replaces the
   same-day chalk tint). History of the trade-off: pure #fff panels made the white input fields read
   as faint outlines, so the panel was tinted chalk — which then read heavy next to the app's white
   cards. --white-soft is the middle: lighter than chalk, still a shade off the pure-white fields,
   whose 1px --line-strong border does the rest. If fields ever go borderless, revisit. */
#tdSettingsMount.s-hub,#tdSettingsMount.s-sec{background:var(--white-soft);border:1px solid var(--line);border-radius:14px;padding:16px}
#tdSettingsMount.s-hub .set-intro,#tdSettingsMount.s-sec .set-intro{display:none}

/* Sidebar: a flat list with hairline dividers; the active row is a soft chalk pill (no boxes). */
.set-hub{display:flex;flex-direction:column;gap:0}
.set-hub-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:12px 12px;cursor:pointer;color:inherit;position:relative;transition:background .12s}
.set-hub-row:not(:last-child)::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:var(--line)}
.set-hub-row:hover:not(.is-active){background:rgba(0,33,71,.035)}
/* the panel is white-soft now, so ACTIVE reads as a soft CHALK pill (white-on-white-soft was invisible) */
.set-hub-row.is-active{background:var(--chalk)}
.set-hub-row.is-active::after,.set-hub-row.is-active+.set-hub-row::after{background:transparent}
.set-hub-row .hub-ic{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--steel)}
.set-hub-row .hub-ic svg{width:21px;height:21px;display:block}
.set-hub-row .hub-ic[data-state=done]{color:var(--green)}
.set-hub-row .hub-ic[data-state=done] svg{stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.set-hub-row.is-active .hub-ic:not([data-state=done]){color:var(--navy)}
.set-hub-row .hub-tx{flex:1;min-width:0}
.set-hub-row .hub-tx b{display:block;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--navy)}
.set-hub-row .hub-tx span{display:none}   /* the sidebar shows just the label — the description lives in the open section */
.set-hub-row .hub-chev{flex:none;color:var(--steel);font-size:20px;line-height:1;opacity:.65}
.set-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--navy);background:none;border:0;cursor:pointer;padding:6px 0;margin-bottom:8px}
#tdSettingsMount.s-hub .set-back{display:none}
#tdSettingsMount.s-hub section.set-card{display:none}
#tdSettingsMount.s-hub #setSave{display:none}
#tdSettingsMount.s-sec .set-hub{display:none}
#tdSettingsMount.s-sec section.set-card{display:none}
#tdSettingsMount.s-sec section.set-card.set-open{display:block}
#tdSettingsMount.hub-acc #setSave{display:none}

/* The open section content sits FLAT on the white surface — no inner card box (mockup). */
#tdSettingsMount.s-hub .set-card,#tdSettingsMount.s-sec .set-card{background:none;border:0;box-shadow:none;padding:0;margin:0}

/* ── Setup progress header (top of the sidebar) — this IS the setup checklist now ─────── */
.set-hub-prog{display:block;margin:0 0 8px;padding:2px 2px 14px}
.set-hub-prog .shp-title{display:block;font-family:var(--sans);font-size:16px;font-weight:700;color:var(--navy);margin:0 0 3px}
.set-hub-prog .shp-txt{display:block;font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--steel);margin:0 0 10px;line-height:1.4}
.set-hub-prog .shp-track{display:block;height:6px;background:#fff;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.set-hub-prog .shp-bar{display:block;height:100%;width:0;background:var(--brass);border-radius:99px;transition:width .35s ease}
/* At 100% the setup scaffolding goes (owner, 18 Jul) — a permanent "All set — 4 of 4 done" with a
   full bar is a progress meter for a task that can never move again. The heading swap to "Your
   business details" is in settings.js/hubPaintStatus. The old .is-complete green recolours for
   .shp-txt / .shp-bar are gone with them: both elements are display:none in that state, so those
   rules only said "paint the hidden thing green". */
.set-hub-prog.is-complete .shp-txt,
.set-hub-prog.is-complete .shp-track{display:none}
.set-hub-prog.is-complete{padding-bottom:10px}
.is-setup-complete .set-save-hint{display:none}

/* Right-side marker: a red count while there's still something to do (a done row carries no right
   marker — the green tick on the LEFT already says it); a quiet "optional" for non-essential rows. */
.set-hub-row .hub-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:99px;font-family:var(--sans);font-size:12px;font-weight:700;line-height:1}
.set-hub-row .hub-badge:empty{display:none}
.set-hub-row .hub-badge.is-todo{background:var(--red);color:#fff;padding:0 7px}
.set-hub-row .hub-badge.is-opt{color:var(--steel);font-weight:500}

/* Save-area hint (mockup) — reassures the trade the save returns them here + clears the badge. */
.set-save-hint{margin:11px 0 0;font-size:12.5px;color:var(--steel);line-height:1.45}

/* Lighter palette: brass marks the field being edited (scoped to Settings so it doesn't touch the
   rest of either host). Higher specificity than the plain .field rule, so it wins on both pages. */
#tdSettingsMount .field input:focus,#tdSettingsMount .field select:focus,#tdSettingsMount .field textarea:focus{
  border-color:var(--brass-deep);box-shadow:0 0 0 3px rgba(169,134,63,.14)}

/* ── Desktop (≥861px): the section list becomes a PERSISTENT left sidebar shown alongside the open
   section, split by a hairline. Below this it stays the phone-first list→drill. ── */
@media(min-width:861px){
  /* Sentinel the module reads (getComputedStyle --td-sidebar === 'on') to confirm THIS stylesheet is
     loaded before it engages desktop-sidebar mode — so a fresh settings.js paired with a stale cached
     settings.css degrades to the safe mobile list→drill instead of a trapped drilled-in section. */
  #tdSettingsMount{--td-sidebar:on}
  #tdSettingsMount.s-hub,#tdSettingsMount.s-sec{display:grid;grid-template-columns:236px minmax(0,1fr);column-gap:28px;align-items:stretch;padding:22px 26px}
  #tdSettingsMount.s-hub>*,#tdSettingsMount.s-sec>*{grid-column:2;min-width:0}
  #tdSettingsMount.s-hub>.set-hub,#tdSettingsMount.s-sec>.set-hub{grid-column:1;grid-row:1 / 999;border-right:1px solid var(--line);padding-right:26px}
  #tdSettingsMount.s-sec .set-hub{display:flex}          /* keep the sidebar visible while a section is open */
  #tdSettingsMount .set-back{display:none!important}     /* the persistent sidebar replaces the "‹ Settings" back link */
  .set-hub-row .hub-chev{display:none}                   /* sidebar tabs need no drill chevron */
}