/* MMD Portal — components. All classes here must appear in design-system.manifest.json */

/* ===== Cards ===== */
.card{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:32px;display:flex;flex-direction:column;gap:14px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:32px}
.card-title{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:calc(22px * var(--fs-scale, 1));line-height:1.15;letter-spacing:-0.015em;color:var(--ink);margin:0}
.card-body{font-family:var(--font-ui);font-weight:500;font-size:calc(14.5px * var(--fs-scale, 1));line-height:1.55;color:var(--ink-soft);margin:0}
.card-cta{margin-top:auto;padding-top:10px}

/* ===== Buttons ===== */
.ds-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:4px;font-family:var(--font-ui);font-weight:600;font-size:calc(12.5px * var(--fs-scale, 1));letter-spacing:0.04em;cursor:pointer;transition:background 0.14s ease, color 0.14s ease, border-color 0.14s ease;text-decoration:none;border:1px solid transparent;line-height:1;white-space:nowrap;text-transform:uppercase}
.ds-button-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ds-button-primary:hover{background:var(--baobab);border-color:var(--baobab);color:var(--baobab-on, var(--paper))}
.ds-button-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.ds-button-secondary:hover{background:var(--ink);color:var(--paper)}
/* Destructive-secondary weight (2026-07-28) -- ds-button-danger was already
   referenced by several TA step dialogs (reject/return/no-hire controls)
   with no matching rule anywhere in this file, so those buttons silently
   rendered as plain unstyled buttons. Same structure as ds-button-secondary
   (transparent, outlined, inverts solid on hover) with baobab red standing
   in for ink -- the same token .ds-menu-item-danger already uses for
   destructive semantics, never a new color. */
.ds-button-danger{background:transparent;color:var(--baobab);border-color:var(--baobab)}
.ds-button-danger:hover{background:var(--baobab);color:var(--paper)}
.ds-button-on-dark-primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.ds-button-on-dark-primary:hover{background:var(--baobab);color:var(--paper);border-color:var(--baobab)}
.ds-button-on-dark-ghost{background:transparent;color:var(--paper);border-color:var(--paper)}
.ds-button-on-dark-ghost:hover{background:var(--paper);color:var(--ink)}
.ds-button:focus-visible{outline:2px solid var(--baobab);outline-offset:4px}
.ds-button:disabled,.ds-button-disabled,.ds-button.ds-button-disabled{opacity:0.45;cursor:not-allowed;pointer-events:none;background:var(--paper-2);color:var(--ink-mute);border-color:var(--hairline)}
.ds-button-primary:disabled,.ds-button-primary.ds-button-disabled,.ds-button-primary:disabled:hover,.ds-button-primary.ds-button-disabled:hover{background:var(--paper-2);color:var(--ink-mute);border-color:var(--hairline)}
.ds-button-secondary:disabled,.ds-button-secondary.ds-button-disabled,.ds-button-secondary:disabled:hover,.ds-button-secondary.ds-button-disabled:hover{background:var(--paper-2);color:var(--ink-mute);border-color:var(--hairline)}
.chat-quick-actions{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px 0;max-width:720px;width:100%;margin-left:auto;margin-right:auto}
.chat-quick-actions .quick-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:4px;font-family:var(--font-ui);font-weight:600;font-size:calc(11.5px * var(--fs-scale, 1));letter-spacing:0.03em;cursor:pointer;transition:background 0.14s ease, color 0.14s ease, border-color 0.14s ease;text-decoration:none;border:1px solid var(--hairline);background:transparent;color:var(--ink);line-height:1;white-space:nowrap;text-transform:uppercase}
.chat-quick-actions .quick-action-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chat-quick-actions .quick-action-btn:focus-visible{outline:2px solid var(--baobab);outline-offset:2px}
.chat-quick-actions .quick-action-btn:disabled{opacity:0.5;cursor:not-allowed}

/* ===== Forms ===== */
.ds-form{display:flex;flex-direction:column;gap:32px;margin-top:40px}
.ds-fieldset{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:28px 32px;display:flex;flex-direction:column;gap:18px;margin:0}
.ds-legend{font-family:var(--font-mono);font-weight:500;font-size:calc(11px * var(--fs-scale, 1));letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);padding:0 6px;margin-left:-6px}
.ds-field{display:flex;flex-direction:column;gap:6px}
.ds-field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ds-field-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.ds-field-span-2{grid-column:span 2}
.ds-field-control{position:relative;display:flex;align-items:center;width:100%}
.ds-field-control>.ds-input,.ds-field-control>.ds-select,.ds-field-control>.rsel,.ds-field-control>.rsel-startdate,.ds-field-control>.ds-calc-input{flex:1;min-width:0}
.ds-field-control .rsel-input,.ds-field-control>.ds-input,.ds-field-control>.ds-select,.ds-field-control>.ds-calc-input{padding-right:24px}
.ds-field-clear{position:absolute;right:5px;top:50%;transform:translateY(-50%);z-index:2;background:transparent;border:0;color:var(--ink-mute);font-family:var(--font-ui);font-size:13px;line-height:1;cursor:pointer;padding:3px 5px;border-radius:3px}
.ds-field-clear:hover{color:var(--paper);background:var(--baobab)}
.ds-calc-input{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;font-size:calc(14.5px * var(--fs-scale, 1));line-height:1.4;color:var(--ink);background:var(--paper-2);border:1px solid var(--hairline);border-radius:3px;padding:10px 12px;width:100%;transition:border-color 0.14s ease, background 0.14s ease}
.ds-calc-input:hover{border-color:var(--ink-mute)}
.ds-calc-input:focus{outline:none;border-color:var(--baobab);background:var(--paper)}
/* defect D3 (2026-07-24) -- steppers were stacked (flex-direction:column),
   forcing the whole calc row taller than a normal single-line input and
   breaking grid row height. Side-by-side instead: same visual height as
   any other .ds-input in the row. */
.ds-calc-row{position:relative;display:flex;align-items:stretch;width:100%;height:42px}
.ds-calc-steppers{display:flex;flex-direction:row;margin-left:-1px}
.ds-calc-step-btn{flex:1;font-family:var(--font-mono);font-size:9px;line-height:1;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);cursor:pointer;padding:0 8px}
.ds-calc-step-btn:first-child{border-top-right-radius:3px;border-bottom:none}
.ds-calc-step-btn:last-child{border-bottom-right-radius:3px}
.ds-calc-step-btn:hover{color:var(--ink);border-color:var(--ink-mute)}
.ds-label{font-family:var(--font-ui);font-weight:600;font-size:calc(12px * var(--fs-scale, 1));letter-spacing:0.04em;color:var(--ink);text-transform:uppercase}
.ds-input,
.ds-select,
.ds-textarea{font-family:var(--font-ui);font-weight:500;font-size:calc(14.5px * var(--fs-scale, 1));line-height:1.4;color:var(--ink);background:var(--paper-2);border:1px solid var(--hairline);border-radius:3px;padding:10px 12px;width:100%;transition:border-color 0.14s ease, background 0.14s ease}
.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover{border-color:var(--ink-mute)}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus{outline:none;border-color:var(--baobab);background:var(--paper)}
.ds-textarea{min-height:96px;resize:vertical;font-family:var(--font-ui)}
.ds-input[data-invalid="true"],
.ds-select[data-invalid="true"],
.ds-textarea[data-invalid="true"]{border-color:var(--baobab);background:var(--baobab-bg, var(--paper))}
.te-req{color:var(--baobab)}
.req-mark{color:var(--baobab)}
.ds-hint{font-family:var(--font-ui);font-weight:500;font-size:calc(12px * var(--fs-scale, 1));color:var(--ink-mute)}
.ds-field-hidden{display:none}
.ds-actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}

@media (max-width:640px){
  .ds-field-row-2{grid-template-columns:1fr}
  .ds-field-row-3{grid-template-columns:1fr}
  .ds-field-span-2{grid-column:span 1}
  .ds-fieldset{padding:20px}
}

/* ===== Review screen blocks ===== */
.ds-review-block{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:28px 32px;display:flex;flex-direction:column;gap:14px}
.ds-review-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:40px;align-items:start}
.ds-review-field{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-bottom:1px solid var(--hairline)}
.ds-review-field:last-child{border-bottom:0}
.ds-review-label{font-family:var(--font-mono);font-weight:500;font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute)}
.ds-review-value{font-family:var(--font-ui);font-weight:500;font-size:calc(15px * var(--fs-scale, 1));color:var(--ink)}
.ds-review-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}

@media (max-width:880px){
  .ds-review-grid{grid-template-columns:1fr}
  .ds-review-aside{position:static}
}

/* ===== Records table — used on landing for "open tasks" ===== */
.ds-records{width:100%;border-collapse:collapse;margin-top:24px}
.ds-records td{padding:18px 14px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.ds-records-id{width:120px}
.ds-records-title{font-family:var(--font-display);font-weight:700;font-size:calc(16px * var(--fs-scale, 1));letter-spacing:-0.015em;line-height:1.2;color:var(--ink)}
/* Atlas review-loop 3 (2026-07-18): unavailable actions in a records list (e.g. Invoices'
   Actions modal) used to render with the SAME full-weight .ds-records-title as an actually-
   clickable action next to it -- no visual distinction between "you can do this now" and "not
   available yet", forcing the reader down to small grey caption text to tell them apart. This
   modifier keeps the same face/size (still scannable as the same kind of row) but mutes the
   color and adds a not-allowed cursor, matching how .ds-button:disabled already signals
   unavailability elsewhere in the DS. */
.ds-records-title-disabled{font-family:var(--font-display);font-weight:700;font-size:calc(16px * var(--fs-scale, 1));letter-spacing:-0.015em;line-height:1.2;color:var(--ink-mute);cursor:not-allowed}
.ds-records-sub{display:block;margin-top:5px;color:var(--ink-mute);font-size:calc(12.5px * var(--fs-scale, 1));line-height:1.45}
.ds-table-section{background:transparent;border:0;border-top:1px solid var(--hairline);border-radius:0;margin-top:18px}
.ds-table-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid var(--hairline);flex-wrap:wrap;row-gap:10px}
.ds-table-title{font-family:var(--font-display);font-weight:700;font-size:calc(15px * var(--fs-scale, 1));letter-spacing:-0.01em;line-height:1.2;color:var(--ink);margin:0}
/* Italic-display modifier -- combine with .ds-table-title (or similar) when
   a title should read as an editorial headline, e.g. the legend row atop a
   centered ds-modal--dialog record-detail popup. Same font-style:italic
   already used on .brand/.brand-mini, surfaced here as a reusable class
   instead of repeating it ad hoc. */
.ds-title-italic{font-style:italic}
/* Plain mono uppercase kicker label, standalone (distinct from
   .ds-notice-label, which is baobab-tinted and lives inside a notice
   block). Pairs with .ds-table-title inside a .ds-table-header used as a
   dialog "legend" row: kicker + italic title on the left, a status tag on
   the right, single bottom border under just that row. */
.ds-kicker{font-family:var(--font-mono);font-weight:500;font-size:calc(10px * var(--fs-scale, 1));text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-mute)}
.ds-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:24px}
.ds-filterbar--scroll{flex-wrap:nowrap;overflow-x:auto}
/* Quiet inline toggle — small utility switches (e.g. elapsed vs actual time)
   that must not compete with real actions (Ben, 2026-07-27). */
.ds-quiet-toggle{background:none;border:0;padding:2px 0;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute,#8a857c);cursor:pointer}
.ds-quiet-toggle:hover{color:var(--ink,#141414);text-decoration:underline dotted}
.ds-filterbar--scroll>*{flex:0 0 auto}
.ds-filter-chip{font-family:var(--font-mono);font-weight:500;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);background:transparent;border:1px solid var(--hairline);border-radius:2px;padding:7px 10px;cursor:pointer}
.ds-filter-chip:hover,
.ds-filter-chip-active{color:var(--paper);background:var(--ink);border-color:var(--ink)}
/* Generic flex-wrap wrapper for a chip picker (e.g. TA Supplier Admin's
   countries multi-select) — reusable anywhere else a chip group is needed. */
.ds-chip-group{display:flex;flex-wrap:wrap;gap:6px}
/* MMDB-1361 — persistent top-of-content black process-nav bar (e.g. the
   Procurement demand→pay strip). Deliberately its own class, not a reuse of
   .topbar: the shell forces `.shell .topbar{position:static;background:
   transparent}` so a lightweight breadcrumb strip never paints a full-bleed
   fixed black bar over the sidebar (see src/app/globals.css) — that override
   would strip the ink background this component needs. rgba(250,250,246,x)
   is the existing "paper on ink" convention already used for hover/hairline
   states on dark surfaces (see --hairline-on-ink, .ds-window-back:hover). */
.ds-procnav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;background:var(--ink);border-radius:4px;padding:6px;margin:0 0 24px}
.ds-procnav-item{display:inline-flex;align-items:center;font-family:var(--font-mono);font-weight:600;font-size:calc(11px * var(--fs-scale, 1));letter-spacing:0.1em;text-transform:uppercase;color:rgba(250,250,246,0.6);background:transparent;border:0;border-radius:3px;padding:10px 14px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background 0.14s ease,color 0.14s ease}
.ds-procnav-item:hover{color:var(--paper);background:rgba(250,250,246,0.1)}
.ds-procnav-item-active,
.ds-procnav-item-active:hover{color:var(--ink);background:var(--paper)}
.ds-records-compact{width:100%;border-collapse:collapse}
.ds-records-compact td{padding:10px 12px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.ds-records-compact tr:last-child td{border-bottom:0}
.ds-records-compact .ds-records-id{width:76px}
.ds-empty-row{padding:14px 16px;color:var(--ink-mute);font-family:var(--font-ui);font-weight:500;font-size:calc(13px * var(--fs-scale, 1))}

/* ===== Embedded task surface ===== */
.ds-embed-frame{display:block;width:100%;height:calc(100vh - 56px);min-height:720px;border:0;background:var(--paper-2)}
.ds-modal-backdrop{position:fixed;inset:0;background:var(--paper-2);display:flex;align-items:stretch;justify-content:stretch;padding:0;z-index:1000}
.ds-modal{background:var(--paper-2);border:0;border-radius:0;width:100%;height:100vh;display:flex;flex-direction:column;box-shadow:none}
.ds-modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:0;background:var(--ink);color:var(--paper)}
.ds-modal-header .eyebrow,
.ds-modal-header .ds-table-title{color:var(--paper)}
.ds-modal-body{padding:0;overflow:hidden;flex:1}
.ds-modal .ds-embed-frame{height:100%;min-height:0}

/* ds-modal-dialog — centered popup card variant for forms/dialogs, distinct from
   the full-screen .ds-modal (embed/case-detail) surface (PORTAL-R-060) */
.ds-modal-backdrop.ds-modal-backdrop--dialog{background:rgba(14,14,12,.55);align-items:center;justify-content:center;padding:24px}
/* R3 (2026-07-24) -- resize:both + overflow:hidden on the element itself
   makes the native browser resize handle actually work (it needs
   overflow != visible and a box that isn't sized purely by intrinsic
   content); min-height/min-width stop it collapsing on the flex
   head/body/foot children. */
.ds-modal.ds-modal--dialog{position:relative;width:auto;min-width:min(560px,calc(100vw - 48px));max-width:1280px;height:auto;max-height:calc(100vh - 48px);border-radius:2px;box-shadow:0 12px 40px rgba(14,14,12,.35);display:flex;flex-direction:column;overflow:hidden;padding:0;resize:both}
.ds-step-span-2{grid-column:1 / -1}
.ds-modal-dialog-head{flex:none}
/* Dark theme header band (2026-07-24, Ben-mandated) -- matches the letterbox
   theme's dark top bars. Kicker + serif title + status chip in light text on
   var(--ink), compact light dismiss icon inside the band. The stepper (when
   present) sits in its own light strip below, not inside the dark band. */
.ds-modal-dialog-titlebar{display:flex;align-items:baseline;gap:10px;background:var(--ink);color:var(--paper);padding:14px 28px}
.ds-modal-dialog-titlebar-kicker{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb,var(--paper) 55%,transparent)}
.ds-modal-dialog-titlebar-pos{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:19px;color:var(--paper)}
.ds-modal-dialog-titlebar-chip{margin-left:auto;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;color:var(--paper);border:1px solid color-mix(in srgb,var(--paper) 40%,transparent);border-radius:8px;padding:1px 7px;background:transparent;white-space:nowrap}
.ds-modal-dialog-dismiss--on-dark{color:var(--paper);border-color:color-mix(in srgb,var(--paper) 40%,transparent)}
.ds-modal-dialog-dismiss--on-dark:hover{color:var(--baobab);border-color:var(--baobab)}
.ds-modal-dialog-stepstrip{padding:12px 28px 0}
/* NOT .ds-modal-body -- src/app/globals.css defines an unrelated, fully
   self-contained (position:fixed, centered, own border/shadow) simple-modal
   pattern under that exact class name; per-property cascade lets its unset
   properties (position/top/left/transform/z-index/border/box-shadow) bleed
   through ANY selector using that class, no matter our specificity, because
   our rules never touch those properties. Dedicated class instead -- confirmed
   root cause of the "phantom second dialog" defect, 2026-07-24. */
.ds-modal-dialog-body{position:static;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:0 28px 20px;background:none;border:0;box-shadow:none;transform:none;width:auto;max-width:none;max-height:none;top:auto;left:auto;z-index:auto;scrollbar-width:thin;scrollbar-color:var(--ink-mute) var(--paper-2)}
/* R3 -- visible scroll affordance (webkit) -- a body that overflows must
   visibly look scrollable, not like a hard-clipped edge. */
.ds-modal-dialog-body::-webkit-scrollbar{width:10px}
.ds-modal-dialog-body::-webkit-scrollbar-track{background:var(--paper-2)}
.ds-modal-dialog-body::-webkit-scrollbar-thumb{background:var(--ink-mute);border-radius:5px;border:2px solid var(--paper-2)}
.ds-modal-dialog-body::-webkit-scrollbar-thumb:hover{background:var(--ink-soft)}
.ds-modal-dialog-foot{flex:none;border-top:1px solid var(--hairline);padding:12px 28px 18px;background:var(--paper-2)}
.ds-modal-dialog-dismiss{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--hairline);border-radius:2px;color:var(--ink-mute);font-family:var(--font-mono);font-size:10px;line-height:1;cursor:pointer;padding:0;margin-left:auto}
.ds-modal-dialog-dismiss:hover{color:var(--baobab);border-color:var(--baobab)}

/* ds-step-flow -- process-phase stepper header, shared by every step dialog */
.ds-step-flow{display:flex;align-items:center;gap:2px;margin:12px 0 16px;padding:8px 4px;background:var(--paper);border:1px solid var(--hairline)}
.ds-step-flow-arrow{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--hairline);border-radius:2px;color:var(--ink-soft);cursor:pointer;font-family:var(--font-mono);font-size:11px;padding:0}
.ds-step-flow-arrow:disabled{color:var(--ink-faint);cursor:not-allowed;opacity:.4}
.ds-step-flow-arrow:not(:disabled):hover{color:var(--baobab);border-color:var(--baobab)}
.ds-step-flow-track{flex:1;display:flex;align-items:flex-start;justify-content:space-between;padding:0 8px}
.ds-step-flow-item{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;flex:1;min-width:0}
.ds-step-flow-connector{position:absolute;top:6px;left:-50%;width:100%;height:1px;background:var(--hairline);z-index:0}
.ds-step-flow-item:first-child .ds-step-flow-connector{display:none}
.ds-step-flow-dot{position:relative;z-index:1;width:13px;height:13px;border-radius:50%;border:1px solid var(--ink-mute);background:var(--paper);padding:0;cursor:default}
.ds-step-flow-dot--done{background:var(--ink-soft);border-color:var(--ink-soft);cursor:pointer}
.ds-step-flow-dot--current{width:15px;height:15px;background:var(--baobab);border-color:var(--baobab);box-shadow:0 0 0 3px var(--signal-amber-bg)}
.ds-step-flow-dot--locked{background:var(--paper);border-color:var(--hairline);cursor:not-allowed}
.ds-step-flow-dot--viewing{box-shadow:0 0 0 3px var(--paper-2),0 0 0 4px var(--ink-soft)}
.ds-step-flow-dot--done:hover,.ds-step-flow-dot--current:hover{filter:brightness(.85)}
.ds-step-flow-label{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-mute);text-align:center;white-space:nowrap;max-width:64px;overflow:hidden;text-overflow:ellipsis}
.ds-step-flow-item .ds-step-flow-label--current{color:var(--baobab);font-weight:600}
.ds-step-history{border:1px solid var(--hairline);border-left:3px solid var(--ink-soft);background:var(--paper);padding:10px 12px;margin-bottom:14px}
.ds-step-history-tag{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:8px}

/* main's TA-Supplier-Portal dismiss-collision fix (2026-07-22) -- scoped to
   the OLD shared .ds-modal-body class name (src/app/globals.css), which the
   new ds-modal-dialog-titlebar/-body/-foot head/body/foot layout above does
   NOT use (renamed specifically to stop colliding with that class, see the
   comment on .ds-modal-dialog-body). Any .ds-modal--dialog consumer still
   using the legacy .ds-modal-dialog-dismiss + .ds-modal-body pair (i.e. not
   yet migrated to StepShell) keeps this fix; migrated dialogs use the
   compact header-band dismiss above instead, which does not collide because
   it lives inside the flex titlebar, not position:absolute over the body. */
.ds-modal--dialog .ds-modal-body{overflow:auto;padding:36px 26px 20px}

/* ds-menu — central-DS popover primitive (PORTAL-R-007), mirrored from the
   shell (src/app/globals.css) so remote fragments may reuse it. */
.ds-menu{position:absolute;bottom:100%;left:12px;right:12px;margin-bottom:8px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:var(--radius);box-shadow:0 18px 44px rgba(14,14,12,0.28);overflow:hidden;z-index:30}
.ds-menu-card{display:flex;flex-direction:column}
.ds-menu-identity{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--hairline)}
.ds-menu-identity-meta{min-width:0;display:flex;flex-direction:column}
.ds-menu-identity-name{font-size:calc(13px * var(--fs-scale, 1));font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-menu-identity-email{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-menu-item{display:block;padding:10px 14px;font-size:calc(13px * var(--fs-scale, 1));font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline);background:transparent;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;cursor:pointer}
.ds-menu-item:hover{background:var(--paper-2)}
.ds-menu-item-danger{color:var(--baobab)}
.ds-menu-section{padding:12px 14px;border-bottom:1px solid var(--hairline)}
.ds-menu-section:last-child{border-bottom:0}
.ds-menu-section-label{display:block;font-family:var(--font-mono);font-size:calc(9px * var(--fs-scale, 1));letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.ds-menu-toggle-row{display:flex;gap:6px;margin-bottom:6px}
.ds-menu-toggle-row:last-child{margin-bottom:0}
.ds-menu-toggle{flex:1;padding:6px 8px;font-family:var(--font-ui);font-size:calc(12px * var(--fs-scale, 1));font-weight:600;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--radius-sm);cursor:pointer}
.ds-menu-toggle:hover{color:var(--ink)}
.ds-menu-toggle.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mmd-course-content{font-family:var(--font-ui)!important;background:var(--paper-2)!important;color:var(--ink)!important}
.mmd-course-content h1,
.mmd-course-content h2,
.mmd-course-content h3,
.mmd-course-content .brand{font-family:var(--font-display)!important;color:var(--ink)!important;letter-spacing:0!important}
.mmd-course-content p,
.mmd-course-content li,
.mmd-course-content button{font-family:var(--font-ui)!important}
.mmd-course-content .topbar,
.mmd-course-content .progress-fill{background:var(--baobab)!important}
.mmd-course-content .topbar{height:6px!important}
.mmd-course-content header{display:none!important}
.mmd-course-content main{max-width:none!important;width:100%!important;min-height:100vh!important;margin:0!important;padding:0!important}
.mmd-course-content .card{width:100%!important;min-height:0!important;margin:0!important;border:0!important;box-shadow:none!important;border-radius:0!important;background:var(--paper-2)!important;display:block!important;gap:0!important;overflow:visible!important}
.mmd-course-content .slide{max-width:none!important;width:100%!important;margin:0!important;padding:clamp(20px,3.4vw,42px)!important;border:0!important;gap:0!important}
.mmd-course-content .slide-illustration{margin:0 0 18px!important}
.mmd-course-content .slide-illustration svg{width:96px!important;height:96px!important}
.mmd-course-content .slide:has(.quiz),
.mmd-course-content .slide:has(.quiz-card),
.mmd-course-content .slide:has(.question),
.mmd-course-content .slide:has(.question-card),
.mmd-course-content .slide:has([class*="quiz"]),
.mmd-course-content .slide:has([class*="question"]){padding-top:clamp(16px,2.5vw,30px)!important}
.mmd-course-content .slide:has(.quiz) .slide-illustration,
.mmd-course-content .slide:has(.quiz-card) .slide-illustration,
.mmd-course-content .slide:has(.question) .slide-illustration,
.mmd-course-content .slide:has(.question-card) .slide-illustration,
.mmd-course-content .slide:has([class*="quiz"]) .slide-illustration,
.mmd-course-content .slide:has([class*="question"]) .slide-illustration{display:none!important}
.mmd-course-content .slide:has(.quiz) h1,
.mmd-course-content .slide:has(.quiz-card) h1,
.mmd-course-content .slide:has(.question) h1,
.mmd-course-content .slide:has(.question-card) h1,
.mmd-course-content .slide:has([class*="quiz"]) h1,
.mmd-course-content .slide:has([class*="question"]) h1{margin-bottom:16px!important}
.mmd-course-content .quiz,
.mmd-course-content .quiz-card,
.mmd-course-content .question,
.mmd-course-content .question-card,
.mmd-course-content [class*="quiz"],
.mmd-course-content [class*="question"]{margin-top:0!important;padding-top:0!important}
.mmd-course-content .answers,
.mmd-course-content .options,
.mmd-course-content .quiz-options{margin-top:14px!important}
.mmd-course-content header,
.mmd-course-content .lesson,
.mmd-course-content .slide,
.mmd-course-content .quiz-option{background:var(--paper-2)!important;border-color:var(--hairline)!important}
.mmd-course-content .callout,
.mmd-course-content .score-card{background:var(--paper-3)!important;border-color:var(--hairline)!important;color:var(--ink)!important}

/* ===== Mono + tag ===== */
.ds-mono{font-family:var(--font-mono);font-weight:500;font-size:calc(11.5px * var(--fs-scale, 1));letter-spacing:0.06em;color:var(--ink-soft)}
.ds-mono-hash{color:var(--baobab);margin-right:1px}
/* IT Backlog detail modal (2026-07-11): multiline verbatim mono block for test-case / agent context-query text, a clickable-row affordance, and a single-column stack-with-gap for stacked review blocks. Token-only, DS-owned. */
.ds-mono-block{font-family:var(--font-mono);font-weight:500;font-size:calc(11.5px * var(--fs-scale, 1));line-height:1.55;letter-spacing:0.01em;color:var(--ink-soft);background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:12px 14px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto;max-height:340px;overflow-y:auto}
.ds-row-click{cursor:pointer}
.ds-row-click:hover td{background:var(--paper-2)}
.ds-row-click:focus-visible{outline:2px solid var(--baobab);outline-offset:-2px}
.ds-detail-stack{display:flex;flex-direction:column;gap:16px}

.ds-tag{display:inline-block;font-family:var(--font-mono);font-weight:500;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:2px;padding:3px 7px}

/* ===== Notice strip ===== */
.ds-notice{background:var(--paper);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:20px 24px;margin:32px 0;display:flex;gap:18px;align-items:stretch;border-radius:4px}
.ds-notice-rule{width:3px;background:var(--baobab);align-self:stretch;border-radius:1px}
.ds-notice-label{font-family:var(--font-mono);font-weight:500;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.16em;text-transform:uppercase;color:var(--baobab);display:block;margin-bottom:5px}
.ds-notice-text{flex:1;font-family:var(--font-ui);font-weight:500;font-size:calc(14px * var(--fs-scale, 1));color:var(--ink-soft)}
.ds-notice-ok .ds-notice-rule{background:var(--signal-grass)}
.ds-notice-ok .ds-notice-label{color:var(--signal-grass)}
/* Dense inline variant -- same ds-notice-rule/ds-notice-label/ds-notice-text
   children (accent bar + label + text), tight padding/margin for a callout
   INSIDE a dialog body (e.g. a single contact line) instead of .ds-notice's
   page-level banner spacing. Combine as class="ds-notice ds-notice-compact"
   (plus ds-notice-ok for the green variant). */
.ds-notice-compact{padding:10px 14px;margin:0 0 12px;gap:12px;align-items:center}
.ds-notice-compact .ds-notice-label{margin-bottom:2px}

/* ===== TA-W8 (MMDB-1543) — inline button-busy spinner ===== */
.ds-spinner{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid color-mix(in srgb, currentColor 30%, transparent);border-top-color:currentColor;animation:ds-spin 0.7s linear infinite;flex:none}
@keyframes ds-spin{to{transform:rotate(360deg)}}
.ds-button-busy{cursor:progress;opacity:0.85}

/* ===== TA-W7 (MMDB-1533) — bottom-of-page decision/action row ===== */
.module-actions-bottom{border-top:1px solid var(--hairline);padding-top:18px;margin-top:6px}

/* ===== ServiceFlow — dense LiveKit avatar session stage =====
   Video tile + inline mic control + status line. One working surface:
   connect, watch/listen, talk. No dashboard chrome. Stage aspect ratio
   matches the avatar worker's native 512x576 (~8:9) portrait frame so the
   face is never cropped by a landscape tile. */
.sf-video-stage{position:relative;width:100%;max-width:400px;aspect-ratio:512/576;background:var(--ink);border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sf-video-stage video{width:100%;height:100%;object-fit:cover;display:block}
.sf-video-stage-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px}
.sf-video-stage-placeholder-glyph{font-family:var(--font-mono);font-size:calc(28px * var(--fs-scale, 1));line-height:1;color:var(--paper-2)}
.sf-video-stage[data-has-video="false"] .sf-video-stage-placeholder-glyph{animation:sf-pulse 1.8s ease-in-out infinite}
.sf-video-stage-placeholder-text{font-family:var(--font-mono);font-weight:500;font-size:calc(11.5px * var(--fs-scale, 1));letter-spacing:0.08em;text-transform:uppercase;color:var(--paper-2);text-align:center}
@keyframes sf-pulse{0%,100%{opacity:0.5}50%{opacity:1}}
.sf-controls{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.sf-mic-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:background 0.14s ease, border-color 0.14s ease}
.sf-mic-btn:hover{background:var(--baobab);border-color:var(--baobab)}
.sf-mic-btn[data-state="listening"],.sf-mic-btn[data-state="speaking"]{background:var(--baobab);border-color:var(--baobab)}
.sf-mic-btn[data-state="connecting"]{background:var(--paper-2);border-color:var(--hairline);color:var(--ink-soft);cursor:progress}
.sf-mic-btn:disabled{cursor:not-allowed;opacity:0.6}
/* Prominent circular "press and talk" control — a bigger, unmistakable
   orb variant of the mic button meant to sit centered under/overlaying an
   avatar video stage, with a distinct pulsing ring per connection state so
   the user always knows who currently has the floor: calm when idle,
   red-ring pulse while the mic is live and listening, green-ring pulse
   (different rhythm) while the avatar is speaking back. */
.sf-mic-orb{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;border:3px solid var(--paper);background:var(--ink);color:var(--paper);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.28);transition:background 0.16s ease,border-color 0.16s ease}
.sf-mic-orb svg{width:28px;height:28px}
.sf-mic-orb:hover{background:var(--baobab)}
.sf-mic-orb:disabled{cursor:progress;opacity:0.7}
.sf-mic-orb[data-state="listening"]{background:var(--baobab)}
.sf-mic-orb[data-state="listening"]::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--baobab);animation:sf-orb-ring 1.3s ease-out infinite}
.sf-mic-orb[data-state="speaking"]{background:var(--ink);border-color:var(--signal-grass)}
.sf-mic-orb[data-state="speaking"]::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--signal-grass);animation:sf-orb-ring 0.85s ease-out infinite}
.sf-mic-orb[data-state="connecting"]{background:var(--paper-2);color:var(--ink-soft);border-color:var(--hairline)}
.sf-mic-orb[data-state="error"]{background:var(--paper);color:var(--baobab);border-color:var(--baobab)}
@keyframes sf-orb-ring{0%{opacity:0.85;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.sf-persona-label{font-family:var(--font-ui);font-weight:600;font-size:calc(13px * var(--fs-scale, 1));color:var(--ink)}
.sf-status-line{font-family:var(--font-mono);font-weight:500;font-size:calc(12px * var(--fs-scale, 1));letter-spacing:0.04em;color:var(--ink-soft)}
.sf-status-line[data-state="speaking"]{color:var(--baobab)}
.sf-mute-btn{font-family:var(--font-mono);font-weight:600;font-size:calc(11px * var(--fs-scale, 1));letter-spacing:0.06em;text-transform:uppercase;padding:6px 12px;border-radius:3px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink-soft);cursor:pointer;transition:background 0.14s ease, color 0.14s ease}
.sf-mute-btn:hover{border-color:var(--ink);color:var(--ink)}
.sf-mute-btn[data-muted="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ===== Search + browse — dense list of link-only rows (PORTAL-R-009) =====
   A search input feeding a server-filtered list, where every row is a plain
   <a> (no per-row buttons/selects/dropdowns — those live on the row's detail
   page instead). Used by /app/admin/flowstate and reusable anywhere a
   "search+browse to detail" pattern is needed. */
.ds-search-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.ds-search-row .ds-input{max-width:360px}
.ds-link-list{display:flex;flex-direction:column;border-top:1px solid var(--hairline);margin-top:12px}
.ds-link-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 6px;border-bottom:1px solid var(--hairline);text-decoration:none;color:var(--ink);transition:background .12s ease}
.ds-link-row:hover{background:var(--paper)}
.ds-link-row-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ds-link-row-title{font-family:var(--font-ui);font-weight:600;font-size:calc(14.5px * var(--fs-scale, 1));color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-link-row-sub{font-family:var(--font-mono);font-size:calc(11px * var(--fs-scale, 1));letter-spacing:0.04em;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-link-row-meta{display:flex;align-items:center;gap:10px;flex:none}
.ds-link-row-go{font-family:var(--font-mono);font-size:calc(11px * var(--fs-scale, 1));letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-faint)}
.ds-link-row:hover .ds-link-row-go{color:var(--ink)}

/* ============================================================================
   MMD LEARNING (LMS) — premium redesign block. Editorial Industrial Letterbox.
   Self-contained: targets the learning remote's data-slots + classes. Tokens
   only (no new fonts/colors). Authored 2026-06-21 from a 3-critic synthesis.
   ============================================================================ */

/* --- Home page shell ------------------------------------------------------- */
.mmd-course-content,
.ds-learning-page { color: var(--ink); }
.ds-learning-page { max-width: 1180px; margin: 0 auto; padding: 34px 0 64px; }
.ds-learning-heading { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 4.6vw, 62px); line-height: 0.98; letter-spacing: -0.02em; }
.ds-learning-heading a { color: inherit; text-decoration: none; }
.ds-learning-heading em { color: var(--baobab); font-style: italic; }
.ds-learning-page .lede { max-width: 64ch; margin: 16px 0 0; color: var(--ink-soft); font-size:calc(15px * var(--fs-scale, 1)); line-height: 1.62; font-style: normal; }
.ds-empty-row { padding: 22px; border: 1px solid var(--hairline); color: var(--ink-mute); font-size:calc(14px * var(--fs-scale, 1)); background: var(--paper); }

/* --- Resume hero card ------------------------------------------------------ */
[data-slot="ds-resume"] {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 28px;
  margin: 26px 0 30px; padding: 22px 26px; background: var(--paper);
  border: 1px solid var(--hairline); border-left: 3px solid var(--baobab);
  text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease;
}
[data-slot="ds-resume"]:hover { border-color: var(--ink); transform: translateY(-1px); }
[data-slot="ds-resume-eyebrow"] { grid-column: 1; font-family: var(--font-mono); font-size:calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot="ds-resume-title"] { grid-column: 1; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.08; margin-top: 3px; }
[data-slot="ds-resume-meta"] { grid-column: 1; font-size:calc(13px * var(--fs-scale, 1)); color: var(--ink-soft); margin-top: 4px; }
[data-slot="ds-resume-meter"] { grid-column: 1; display: block; margin-top: 12px; max-width: 360px; }
[data-slot="ds-resume-cta"] { grid-column: 2; grid-row: 1 / span 4; align-self: center; font-family: var(--font-mono); font-size:calc(12px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 12px 20px; white-space: nowrap; transition: background .15s ease; }
[data-slot="ds-resume"]:hover [data-slot="ds-resume-cta"] { background: var(--baobab); }

/* --- Filter chips ---------------------------------------------------------- */
.ds-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.ds-filter-chip { font-family: var(--font-mono); font-size:calc(11px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); background: transparent; border: 1px solid var(--hairline); padding: 7px 13px; text-decoration: none; transition: all .12s ease; }
.ds-filter-chip:hover { color: var(--ink); border-color: var(--ink-mute); }
.ds-filter-chip-active { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* --- Section header (catalogue) ------------------------------------------- */
.ds-table-section { margin-top: 6px; }
.ds-table-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.eyebrow, [data-slot="course-kicker"] { font-family: var(--font-mono); font-size:calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: block; }
.ds-table-title, [data-slot="ds-table-title"] { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2vw, 24px); line-height: 1.1; margin: 3px 0 0; }

/* --- Catalogue: course cards (was a table) -------------------------------- */
[data-slot="ds-course-grid"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
[data-slot~="ds-course-card"] {
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 148px;
  padding: 20px 22px; background: var(--paper); border: 1px solid var(--hairline);
  text-decoration: none; color: var(--ink); position: relative; transition: border-color .15s ease, transform .15s ease;
}
[data-slot~="ds-course-card"]::after { content: "→"; position: absolute; right: 20px; bottom: 18px; font-size:calc(15px * var(--fs-scale, 1)); color: var(--ink-faint); opacity: 0; transform: translateX(-4px); transition: all .15s ease; }
[data-slot~="ds-course-card"]:hover { border-color: var(--ink); transform: translateY(-2px); }
[data-slot~="ds-course-card"]:hover::after { opacity: 1; transform: translateX(0); color: var(--baobab); }
[data-slot~="is-progress"] { border-left: 3px solid var(--ink); }
[data-slot~="is-complete"] { border-left: 3px solid var(--baobab); }
[data-slot="ds-course-cat"] { font-family: var(--font-mono); font-size:calc(10px * var(--fs-scale, 1)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot="ds-course-name"] { font-family: var(--font-display); font-weight: 500; font-size:calc(21px * var(--fs-scale, 1)); line-height: 1.14; align-self: start; }
[data-slot="ds-course-foot"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-slot="ds-course-go"] { font-family: var(--font-mono); font-size:calc(11px * var(--fs-scale, 1)); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot~="ds-course-card"]:hover [data-slot="ds-course-go"] { color: var(--ink); }
[data-slot="ds-course-fresh"] { font-size:calc(12.5px * var(--fs-scale, 1)); color: var(--ink-faint); }
[data-slot="ds-course-stamp"] { font-family: var(--font-mono); font-size:calc(11px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--baobab); }

/* --- Meter (proportional hairline) ---------------------------------------- */
[data-slot="ds-meter"] { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
[data-slot="ds-meter-track"] { position: relative; flex: 1 1 auto; min-width: 70px; height: 6px; background: var(--paper-2); border: 1px solid var(--hairline); overflow: hidden; }
[data-slot="ds-meter-fill"] { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--ink); width: 0; }
[data-slot="ds-meter-fill"][data-pct="0"] { width: 0; }
[data-slot="ds-meter-label"] { font-family: var(--font-mono); font-size:calc(11px * var(--fs-scale, 1)); letter-spacing: 0.04em; color: var(--ink-mute); white-space: nowrap; }

/* Proportional fill width keyed on data-pct (markup buckets to nearest 5).
   No inline styles — these live in the central DS. Applies to any *-fill. */
[data-pct="0"]{width:0}
[data-pct="5"]{width:5%}   [data-pct="10"]{width:10%} [data-pct="15"]{width:15%}
[data-pct="20"]{width:20%} [data-pct="25"]{width:25%} [data-pct="30"]{width:30%}
[data-pct="35"]{width:35%} [data-pct="40"]{width:40%} [data-pct="45"]{width:45%}
[data-pct="50"]{width:50%} [data-pct="55"]{width:55%} [data-pct="60"]{width:60%}
[data-pct="65"]{width:65%} [data-pct="70"]{width:70%} [data-pct="75"]{width:75%}
[data-pct="80"]{width:80%} [data-pct="85"]{width:85%} [data-pct="90"]{width:90%}
[data-pct="95"]{width:95%} [data-pct="100"]{width:100%}

/* ============================================================================
   COURSE + ACTIVITY — dark letterbox frame + body
   ============================================================================ */
[data-slot="ds-modal"] { display: flex; flex-direction: column; min-height: 100dvh; background: var(--paper); }
[data-slot="ds-modal-header"] {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 30px; background: var(--ink); color: var(--paper);
}
[data-slot="ds-modal-headline"] { min-width: 0; }
[data-slot="ds-modal-header"] [data-slot="course-kicker"] { color: color-mix(in srgb, var(--paper) 55%, transparent); }
[data-slot="ds-modal-crumb"] { color: color-mix(in srgb, var(--paper) 80%, transparent); text-decoration: none; }
[data-slot="ds-modal-crumb"]:hover { color: var(--paper); text-decoration: underline; }
[data-slot="ds-modal-header"] [data-slot="ds-table-title"] { color: var(--paper); font-size: clamp(15px, 1.6vw, 19px); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; }
[data-slot="ds-modal-header"] [data-slot="ds-actions"] { display: flex; align-items: center; gap: 8px; flex: none; }
[data-slot="ds-modal-body"] { flex: 1 1 auto; padding: 30px; }
[data-slot="ds-course-shell"] { max-width: 940px; margin: 0 auto; }

/* progress rule on course overview */
[data-slot="ds-progress"] { max-width: 520px; margin: 4px 0 20px; }
[data-slot="ds-progress-head"] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
[data-slot="ds-progress-goal"] { font-size:calc(13px * var(--fs-scale, 1)); color: var(--ink-soft); }
[data-slot="ds-progress-label"] { font-family: var(--font-mono); font-size:calc(12px * var(--fs-scale, 1)); letter-spacing: 0.04em; color: var(--ink-mute); }
[data-slot="ds-progress-track"] { position: relative; height: 7px; background: var(--paper-2); border: 1px solid var(--hairline); overflow: hidden; }
[data-slot="ds-progress-fill"] { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--ink); width: 0; }

/* ============================================================================
   COURSE SPINE — vertical timeline (was a table)
   ============================================================================ */
[data-slot="ds-spine"] { list-style: none; margin: 22px 0 0; padding: 0; position: relative; }
[data-slot="ds-spine"]::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: var(--hairline); }
[data-slot~="ds-spine-step"] { position: relative; }
[data-slot="ds-spine-main"] {
  display: grid; grid-template-columns: 16px 40px 1fr auto; align-items: center; column-gap: 16px;
  padding: 15px 14px 15px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink);
  transition: background .12s ease;
}
[data-slot="ds-spine-main"]:hover { background: var(--paper); }
[data-slot="ds-spine-node"] { grid-column: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--ink-faint); box-shadow: 0 0 0 4px var(--paper); z-index: 1; }
[data-slot~="is-done"] [data-slot="ds-spine-node"] { background: var(--ink); border-color: var(--ink); }
[data-slot~="is-next"] [data-slot="ds-spine-node"] { background: var(--paper); border: 2px solid var(--baobab); }
[data-slot="ds-spine-num"] { grid-column: 2; font-family: var(--font-display); font-size:calc(22px * var(--fs-scale, 1)); font-weight: 500; color: var(--ink-faint); line-height: 1; text-align: center; }
[data-slot~="is-next"] [data-slot="ds-spine-num"] { color: var(--ink); }
[data-slot~="is-done"] [data-slot="ds-spine-num"] { color: var(--ink-mute); }
[data-slot="ds-spine-text"] { grid-column: 3; min-width: 0; display: grid; gap: 2px; }
[data-slot="ds-spine-title"] { font-family: var(--font-display); font-weight: 500; font-size:calc(17px * var(--fs-scale, 1)); line-height: 1.18; color: var(--ink); }
[data-slot="ds-spine-sum"] { font-size:calc(13px * var(--fs-scale, 1)); color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-slot="ds-spine-meta"] { grid-column: 4; display: flex; align-items: center; gap: 14px; flex: none; }
[data-slot~="ds-spine-state"] { font-family: var(--font-mono); font-size:calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot="ds-spine-next"] { font-family: var(--font-mono); font-size:calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--baobab); }
[data-slot="ds-spine-go"] { font-family: var(--font-mono); font-size:calc(11px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); opacity: 0; transition: opacity .12s ease; white-space: nowrap; }
[data-slot="ds-spine-main"]:hover [data-slot="ds-spine-go"] { opacity: 1; color: var(--ink); }
[data-slot="ds-spine-go"].is-primary { opacity: 1; color: var(--paper); background: var(--ink); padding: 8px 14px; }
[data-slot="ds-spine-main"]:hover [data-slot="ds-spine-go"].is-primary { background: var(--baobab); color: var(--paper); }

/* ============================================================================
   ACTIVITY / LESSON — de-boxed editorial article
   ============================================================================ */
[data-slot="ds-activity"] { max-width: 720px; margin: 0 auto; }
[data-slot="ds-activity"] [data-slot="ds-table-header"] { display: block; margin-bottom: 6px; }
[data-slot="ds-activity-status"] { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size:calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border: 1px solid var(--hairline); color: var(--ink-mute); }
[data-slot~="ds-activity-status-quiz"] { color: var(--baobab); border-color: var(--baobab); background: var(--baobab-bg); }
[data-slot~="ds-activity-status-done"] { color: var(--ink); border-color: var(--ink); }
[data-slot="ds-activity-content"] { margin-top: 22px; font-size:calc(16px * var(--fs-scale, 1)); line-height: 1.66; color: var(--ink-soft); border-top: 2px solid var(--baobab); padding-top: 22px; }
[data-slot="ds-activity-content"] > *:first-child { margin-top: 0; }
[data-slot="ds-activity-content"] p { margin: 0 0 16px; max-width: 64ch; }
[data-slot="ds-activity-content"] h2, [data-slot="ds-activity-content"] h3, [data-slot="ds-activity-content"] h4 { font-family: var(--font-display); font-weight: 500; color: var(--ink); line-height: 1.2; margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--hairline); }
[data-slot="ds-activity-content"] ul, [data-slot="ds-activity-content"] ol { margin: 0 0 16px; padding-left: 4px; list-style: none; }
[data-slot="ds-activity-content"] li { position: relative; padding-left: 20px; margin: 0 0 9px; max-width: 62ch; }
[data-slot="ds-activity-content"] li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; background: var(--baobab); }
[data-slot="ds-activity-content"] strong, [data-slot="ds-activity-content"] b { color: var(--ink); font-weight: 600; }
[data-slot="ds-activity-content"] blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 2px solid var(--hairline); color: var(--ink-mute); font-style: italic; }
[data-slot="ds-figure"] { margin: 22px 0; padding: 22px; border: 1px solid var(--hairline); background: var(--paper); text-align: center; }
[data-slot="ds-figure"] svg { max-width: 100%; height: auto; }

/* activity banners */
[data-slot~="ds-activity-banner"] { margin: 18px 0; padding: 13px 16px; font-size:calc(14px * var(--fs-scale, 1)); border: 1px solid var(--hairline); }
[data-slot~="ds-activity-banner-pass"] { border-left: 3px solid var(--baobab); color: var(--ink); background: var(--paper); }
[data-slot~="ds-activity-banner-fail"] { border-left: 3px solid var(--signal-amber); color: var(--ink); background: var(--signal-amber-bg); }

/* ============================================================================
   KNOWLEDGE CHECK — hard dark section break (cinema bar feel)
   ============================================================================ */
.ds-quiz-form, [data-slot="ds-quiz"] { margin-top: 30px; }
[data-slot="ds-quiz-intro"] { background: var(--ink); color: var(--paper); padding: 20px 24px; margin: 0 0 4px; }
[data-slot="ds-quiz-intro-label"] { font-family: var(--font-display); font-style: italic; font-size:calc(22px * var(--fs-scale, 1)); display: block; }
[data-slot="ds-quiz-intro"] p { margin: 6px 0 0; font-size:calc(13.5px * var(--fs-scale, 1)); color: color-mix(in srgb, var(--paper) 75%, transparent); }
[data-slot="ds-quiz-question"] { border: 0; border-bottom: 1px solid var(--hairline); margin: 0; padding: 20px 0; }
[data-slot="ds-quiz-legend"] { font-family: var(--font-display); font-weight: 500; font-size:calc(17px * var(--fs-scale, 1)); padding: 0; margin-bottom: 12px; }
[data-slot="ds-quiz-option"] { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid var(--hairline); margin: 0 0 8px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
[data-slot="ds-quiz-option"]:hover { border-color: var(--ink-mute); background: var(--paper); }
[data-slot="ds-quiz-option"]:has(.ds-choice:checked) { border-color: var(--baobab); box-shadow: inset 3px 0 0 var(--baobab); }
.ds-choice { accent-color: var(--baobab); width: 16px; height: 16px; flex: none; }
[data-slot="ds-quiz-option-text"] { font-size:calc(14.5px * var(--fs-scale, 1)); color: var(--ink); }

/* ============================================================================
   ASSIGNMENT
   ============================================================================ */
.ds-assignment-form, [data-slot="ds-assignment"] { display: grid; gap: 10px; margin-top: 22px; }
[data-slot="ds-assignment-saved"] { padding: 16px 18px; background: var(--paper); border: 1px solid var(--hairline); border-left: 3px solid var(--baobab); margin-top: 18px; }
[data-slot="ds-assignment-saved"] blockquote { margin: 6px 0 0; font-size:calc(14.5px * var(--fs-scale, 1)); line-height: 1.55; color: var(--ink-soft); }
.ds-textarea { width: 100%; font-family: var(--font-ui); font-size:calc(14.5px * var(--fs-scale, 1)); line-height: 1.55; padding: 13px 15px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); resize: vertical; }
.ds-textarea:focus { outline: none; border-color: var(--ink); }
.ds-field-hidden { display: none; }

/* ============================================================================
   COMPLETION MOMENT — the reward
   ============================================================================ */
[data-slot="ds-complete"] { margin-top: 30px; padding: 34px 30px; background: var(--ink); color: var(--paper); text-align: center; display: grid; justify-items: center; gap: 8px; }
[data-slot="ds-complete-tick"] { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--baobab); color: var(--paper); font-size:calc(22px * var(--fs-scale, 1)); line-height: 1; }
[data-slot="ds-complete-head"] { font-family: var(--font-display); font-style: italic; font-size:calc(30px * var(--fs-scale, 1)); line-height: 1.05; margin-top: 6px; }
[data-slot="ds-complete-sub"] { font-size:calc(13.5px * var(--fs-scale, 1)); color: color-mix(in srgb, var(--paper) 72%, transparent); }
[data-slot="ds-complete"] [data-slot="ds-actions"] { margin-top: 16px; }

/* ============================================================================
   BUTTONS + actions (data-slot AND class forms) + tags
   ============================================================================ */
[data-slot="ds-actions"] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.ds-button, [data-slot~="ds-button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-mono); font-size:calc(12px * var(--fs-scale, 1)); letter-spacing: 0.05em; text-transform: uppercase;
  padding: 11px 18px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  text-decoration: none; cursor: pointer; transition: all .14s ease;
}
.ds-button:hover, [data-slot~="ds-button"]:hover { background: var(--paper-2); }
.ds-button-primary, [data-slot~="ds-button-primary"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ds-button-primary:hover, [data-slot~="ds-button-primary"]:hover { background: var(--baobab); border-color: var(--baobab); }
.ds-button-secondary, [data-slot~="ds-button-secondary"], [data-slot~="ds-button-on-light"] { background: transparent; color: var(--ink); border-color: var(--hairline); }
.ds-button-secondary:hover, [data-slot~="ds-button-secondary"]:hover { border-color: var(--ink); background: transparent; }
[data-slot~="ds-button-on-dark-ghost"] { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 35%, transparent); }
[data-slot~="ds-button-on-dark-ghost"]:hover { border-color: var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent); }
[data-slot~="ds-button-on-dark-primary"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
[data-slot~="ds-button-on-dark-primary"]:hover { background: var(--baobab); color: var(--paper); border-color: var(--baobab); }
[data-slot="ds-tag"] { display: inline-block; font-family: var(--font-mono); font-size:calc(11px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); padding: 5px 10px; }
[data-slot="ds-records-sub"] { font-size:calc(13px * var(--fs-scale, 1)); color: var(--ink-mute); }

/* embedded raw runtime frame (fallback only) */
[data-slot="ds-embed-frame"][hidden] { display: none; }
[data-slot="ds-embed-frame"] { margin-top: 18px; }

/* generated fallback course body */
[data-slot="course-body"] { max-width: 820px; margin: 0 auto; }
[data-slot="course-title"] { font-family: var(--font-display); font-weight: 500; font-size:calc(30px * var(--fs-scale, 1)); margin: 4px 0 8px; }
[data-slot="course-summary"] { color: var(--ink-soft); font-size:calc(15px * var(--fs-scale, 1)); margin: 0 0 20px; }
[data-slot="ds-records-compact"] { display: grid; gap: 8px; }

/* ============================================================================
   RESPONSIVE — stacked, thumb-first
   ============================================================================ */
@media (max-width: 860px) {
  [data-slot="ds-course-grid"] { grid-template-columns: minmax(0, 1fr); }
  [data-slot="ds-resume"] { grid-template-columns: minmax(0,1fr); }
  [data-slot="ds-resume-cta"] { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
  [data-slot="ds-modal-header"] { flex-wrap: wrap; padding: 12px 18px; gap: 10px; }
  [data-slot="ds-modal-header"] [data-slot="ds-table-title"] { max-width: 100%; white-space: normal; }
  [data-slot="ds-modal-body"] { padding: 20px 16px; }
  [data-slot="ds-spine-main"] { grid-template-columns: 16px 1fr; grid-template-areas: "node text" "node meta"; row-gap: 8px; column-gap: 12px; }
  [data-slot="ds-spine-num"] { display: none; }
  [data-slot="ds-spine-text"] { grid-area: text; }
  [data-slot="ds-spine-sum"] { white-space: normal; }
  [data-slot="ds-spine-meta"] { grid-area: meta; justify-content: flex-start; }
  [data-slot="ds-spine-go"] { opacity: 1; }
  [data-slot="ds-activity-content"] p, [data-slot="ds-activity-content"] li { max-width: none; }
}
/* ===== end LMS redesign block ===== */
.ds-tag-open{color:var(--ink);border-color:var(--ink)}
.ds-tag-progress{color:var(--ink);border-color:var(--ink-mute)}
.ds-tag-waiting{color:var(--ink-mute);border-color:var(--ink-mute)}
.ds-tag-resolved{color:var(--ink-mute);border-color:var(--hairline)}
.ds-tag-closed{color:var(--ink-faint);border-color:var(--hairline)}
.ds-tag-error{color:var(--baobab);border-color:var(--baobab)}

/* === LMS v2 P2 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 2 (consumers) central design-system additions.
   Authored by the learning remote; batched by the orchestrator into the shell's
   public/_design-system/components.css. Tokens ONLY — no hardcoded hex; all
   translucency via color-mix() over the central tokens.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Covers: R1 (course scroll), R2 (in-content pager), R6 (end page + cert CTA),
   R7 (home trophies).
   ========================================================================== */

/* --------------------------------------------------------------------------
   R1 — Course content must scroll (TC1.*)
   The course modal is a BOUNDED viewport box (height, not min-height) so its
   body can own the overflow; the header stays sticky at the top of that box.
   -------------------------------------------------------------------------- */
[data-slot="ds-modal"] {
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-slot="ds-modal-header"] {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
}

[data-slot="ds-modal-body"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   R2 — In-content navigation pager (TC2.*)
   A bottom prev/next pager rendered inside the activity, in addition to the
   sticky header prev/next. Real DB-ordered hrefs; first activity has no prev,
   the last content activity's next is the terminal knowledge check.
   -------------------------------------------------------------------------- */
[data-slot="ds-pager"] {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}

[data-slot="ds-pager-link"] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 0;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-2);
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot="ds-pager-link"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, var(--paper-2));
}

[data-slot="ds-pager-link"][data-dir="next"] {
  text-align: right;
  align-items: flex-end;
}

[data-slot="ds-pager-dir"] {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-pager-title"] {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* A disabled/absent slot (first activity has no prev) keeps the layout balanced. */
[data-slot="ds-pager-spacer"] {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 560px) {
  [data-slot="ds-pager"] {
    flex-direction: column;
  }
  [data-slot="ds-pager-link"][data-dir="next"] {
    text-align: left;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   R6 — End-of-course page + certificate (TC6.*)
   Shown only when isCourseComplete. Trophy mark, "Course complete", and the
   "Download certificate (PDF)" action.
   -------------------------------------------------------------------------- */
[data-slot="ds-end"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  max-width: 38rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

[data-slot="ds-end-trophy"] {
  width: 96px;
  height: 96px;
  display: block;
  color: var(--baobab);
}

[data-slot="ds-end-kicker"] {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--baobab);
}

[data-slot="ds-end-title"] {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

[data-slot="ds-end-sub"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 30rem;
}

[data-slot="ds-end-course"] {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

[data-slot="ds-end"] [data-slot="ds-actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   R7 — Trophies on the home page (TC7.*)
   One trophy per completed course; empty state when none.
   -------------------------------------------------------------------------- */
[data-slot="ds-trophies"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

[data-slot="ds-trophy"] {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot="ds-trophy"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 55%, var(--paper-2));
}

[data-slot="ds-trophy-emblem"] {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: block;
  color: var(--baobab);
}

[data-slot="ds-trophy-text"] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

[data-slot="ds-trophy-cat"] {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-trophy-name"] {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-slot="ds-trophy-empty"] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px dashed var(--hairline);
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  color: var(--ink-mute);
  font-family: var(--font-ui);
  font-size: 0.95rem;
}

/* === LMS v2 P3 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 3 (catalogue + admin) central design-system additions.
   Authored by the learning remote; batched by the orchestrator into the shell's
   public/_design-system/components.css. Tokens ONLY — no hardcoded hex; all
   translucency via color-mix() over the central tokens.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Covers: R9 (~N min estimate), R10 (categories + grouped catalogue),
   R11 (featured strip), R12 (required-for-you), R13 (admin page), R14 (covers).
   ========================================================================== */

/* --------------------------------------------------------------------------
   R14 — Course covers. A 1200x630 image (overviewfiles photo or generated
   Letterbox SVG) sat above the card body. object-fit:cover keeps the ratio.
   -------------------------------------------------------------------------- */
[data-slot="ds-cover"] {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  height: auto;
  object-fit: cover;
  background: var(--paper-2);
  border-bottom: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   R9 — "~N min" time-estimate badge.
   -------------------------------------------------------------------------- */
[data-slot="ds-est"] {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Course card with a cover (extends the P2 ds-course-card). The card becomes a
   vertical stack: cover on top, body (category + est, name, footer) below.
   -------------------------------------------------------------------------- */
[data-slot="ds-course-card"] {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

[data-slot="ds-course-cover"] {
  display: block;
}

[data-slot="ds-course-body"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.95rem 1rem 1rem;
  flex: 1 1 auto;
}

[data-slot="ds-course-meta"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   R12 — Required for you. Top-of-page section; cards carry due-state styling.
   -------------------------------------------------------------------------- */
[data-slot="ds-required-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

[data-slot="ds-required-card"] {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot="ds-required-card"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 55%, var(--paper-2));
}

[data-slot="ds-required-card"].is-overdue {
  border-left: 3px solid var(--baobab);
}

[data-slot="ds-required-card"].is-soon {
  border-left: 3px solid var(--signal-amber);
}

[data-slot="ds-required-cover"] {
  display: block;
}

[data-slot="ds-required-body"] {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem 1rem 1rem;
}

[data-slot="ds-required-meta"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

[data-slot="ds-required-cat"] {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-required-flag"] {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--baobab);
  padding: 0.1rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--baobab) 40%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, transparent);
}

[data-slot="ds-required-name"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

[data-slot="ds-required-due"] {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

[data-slot="ds-required-due"].is-overdue {
  color: var(--baobab);
  font-weight: 600;
}

[data-slot="ds-required-due"].is-soon {
  color: color-mix(in srgb, var(--signal-amber) 80%, var(--ink));
  font-weight: 600;
}

[data-slot="ds-required-est"] {
  margin-top: 0.1rem;
}

/* --------------------------------------------------------------------------
   R11 — Featured strip. A grid of cover cards above the catalogue.
   -------------------------------------------------------------------------- */
[data-slot="ds-featured-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   R10 — Catalogue grouped by real category, with per-category headers.
   -------------------------------------------------------------------------- */
[data-slot="ds-cat-group"] {
  margin-top: 1.5rem;
}

[data-slot="ds-cat-group"]:first-child {
  margin-top: 0;
}

[data-slot="ds-cat-heading"] {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}

/* Resume hero with a cover thumbnail alongside the text. */
[data-slot="ds-resume"] {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

[data-slot="ds-resume-cover"] {
  display: block;
  overflow: hidden;
  border: 1px solid var(--hairline);
}

[data-slot="ds-resume-text"] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

@media (max-width: 640px) {
  [data-slot="ds-resume"] {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   R13 — Admin page. Course rows with editable controls; 403 state.
   -------------------------------------------------------------------------- */
[data-slot="ds-admin-list"] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

[data-slot="ds-admin-course"] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
}

[data-slot="ds-admin-course-head"] {
  display: grid;
  grid-template-columns: minmax(0, 10rem) 1fr;
  gap: 1rem;
  align-items: center;
}

[data-slot="ds-admin-cover"] {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--hairline);
  background: var(--paper);
}

[data-slot="ds-admin-course-id"] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

[data-slot="ds-admin-cat"] {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-admin-title"] {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

[data-slot="ds-admin-meta-line"] {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-mute);
}

[data-slot="ds-admin-controls"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
}

[data-slot="ds-admin-form"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper) 60%, var(--paper-2));
}

[data-slot="ds-admin-field"] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

[data-slot="ds-admin-label"] {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

[data-slot="ds-admin-banner"] {
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

[data-slot="ds-admin-banner"].ds-admin-banner-ok {
  border-color: color-mix(in srgb, var(--signal-grass) 45%, var(--hairline));
  background: color-mix(in srgb, var(--signal-grass-bg) 60%, var(--paper-2));
  color: color-mix(in srgb, var(--signal-grass) 70%, var(--ink));
}

[data-slot="ds-admin-banner"].ds-admin-banner-err {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, var(--paper-2));
  color: var(--baobab);
}

[data-slot="ds-admin-403"] {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 34rem;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--hairline);
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
}

[data-slot="ds-admin-403-kicker"] {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--baobab);
}

@media (max-width: 560px) {
  [data-slot="ds-admin-course-head"] {
    grid-template-columns: 1fr;
  }
}

/* === LMS v2 P4 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 4 (home UX polish) central design-system additions.
   Authored by the learning remote; batched by the orchestrator into the shell's
   public/_design-system/components.css. Tokens ONLY — no hardcoded hex; all
   translucency via color-mix() over the central tokens.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Scope: P4 redesigns "Required for you" from an oversized cover hero into a
   COMPACT horizontal alert list (thumb · title + badge + due + ~min · CTA).
   The data-slot values carry state suffixes (e.g. "ds-required-row is-overdue"),
   so selectors use the whitespace-token match [data-slot~="…"].
   ========================================================================== */

/* --------------------------------------------------------------------------
   R12 (P4) — Required for you as a compact alert list. Each item is a tight
   horizontal row: small cover thumbnail (left) → title + Mandatory + due + ~min
   (centre, grows) → Continue/Start primary button (right). Rows stack.
   -------------------------------------------------------------------------- */
[data-slot~="ds-required-list"] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

[data-slot~="ds-required-row"] {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot~="ds-required-row"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 45%, var(--paper-2));
}

/* Due-state left rail — overdue (baobab) and due-soon (amber) only. */
[data-slot~="ds-required-row"][data-slot~="is-overdue"] {
  border-left: 3px solid var(--baobab);
}

[data-slot~="ds-required-row"][data-slot~="is-soon"] {
  border-left: 3px solid var(--signal-amber);
}

/* Small fixed-ratio cover thumbnail on the left. */
[data-slot~="ds-required-thumb"] {
  display: block;
  width: 140px;
  overflow: hidden;
  border: 1px solid var(--hairline);
}

[data-slot~="ds-required-thumb"] [data-slot="ds-cover"] {
  border-bottom: none;
}

[data-slot~="ds-required-body"] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

[data-slot~="ds-required-meta"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

[data-slot~="ds-required-cat"] {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot~="ds-required-flag"] {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--baobab);
  padding: 0.08rem 0.36rem;
  border: 1px solid color-mix(in srgb, var(--baobab) 40%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, transparent);
}

[data-slot~="ds-required-name"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-slot~="ds-required-facts"] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

[data-slot~="ds-required-due"] {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

[data-slot~="ds-required-due"][data-slot~="is-overdue"] {
  color: var(--baobab);
  font-weight: 600;
}

[data-slot~="ds-required-due"][data-slot~="is-soon"] {
  color: color-mix(in srgb, var(--signal-amber) 80%, var(--ink));
  font-weight: 600;
}

/* Continue/Start primary button on the right of each row. */
[data-slot~="ds-required-cta"] {
  flex: 0 0 auto;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 0.55rem 0.95rem;
  white-space: nowrap;
  transition: background 120ms ease;
}

[data-slot~="ds-required-row"]:hover [data-slot~="ds-required-cta"] {
  background: var(--baobab);
}

/* Mobile: drop the CTA onto its own line, keep thumb + text side by side. */
@media (max-width: 560px) {
  [data-slot~="ds-required-row"] {
    grid-template-columns: 96px 1fr;
    grid-template-areas:
      "thumb body"
      "cta   cta";
    row-gap: 0.6rem;
  }
  [data-slot~="ds-required-thumb"] {
    grid-area: thumb;
    width: 96px;
  }
  [data-slot~="ds-required-body"] {
    grid-area: body;
  }
  [data-slot~="ds-required-cta"] {
    grid-area: cta;
    justify-self: stretch;
    text-align: center;
  }
}

/* === LMS v2 P5 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 5 (navigation + button + usability pass) central
   design-system additions. Authored by the learning remote; batched by the
   orchestrator into the shell's public/_design-system/components.css.

   Tokens ONLY — NO hardcoded hex, NO new colours, NO new fonts. All translucency
   via color-mix() over the EXISTING central tokens. This is a USABILITY pass
   inside the existing "Editorial Letterbox" aesthetic — it does NOT change the
   colour scheme, fonts, covers, sections, or the concept of the app.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Fixes (all external-UX-critique validated, navigation/buttons/usability only):
   1. STEP-COUNT — markup-only (route.ts). No CSS here.
   2. BUTTON CLUTTER / HIERARCHY in the dark course/activity header:
      - breadcrumb trail (Learning / <course> / <step>) at top-left,
      - progress rendered as a plain label/meter (NOT a bordered pill),
      - Next is the single filled PRIMARY, Prev a quiet ghost secondary.
   3. ONE obvious next action on the home, reachable on mobile (390px).
   4. MOBILE TAP TARGETS — all nav/action buttons >=44px tall, single line.
   5. COWORK pill overlap — reserve bottom/right gutter on the LMS surfaces so
      the floating "Ask Cowork" launcher never covers actions or text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   #2 — Dark header breadcrumb trail. "All courses" and "Course overview" were
   competing bordered buttons; they are NAV LEVELS, not actions, so they become
   a quiet breadcrumb in the headline (top-left). Inherits the dark-header
   --paper text already set on [data-slot="ds-modal-header"].
   -------------------------------------------------------------------------- */
[data-slot="ds-modal-crumbs"] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size:calc(11px * var(--fs-scale, 1));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  min-width: 0;
}

[data-slot="ds-modal-crumbs"] [data-slot="ds-modal-crumb"] {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  text-decoration: none;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-slot="ds-modal-crumbs"] [data-slot="ds-modal-crumb"]:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-slot="ds-crumb-sep"] {
  color: color-mix(in srgb, var(--paper) 40%, transparent);
}

[data-slot="ds-crumb-current"] {
  color: color-mix(in srgb, var(--paper) 92%, transparent);
  font-weight: 700;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* #2 — Progress as a PLAIN label, not a bordered button-looking pill. No border,
   no fill box — just a quiet mono reading on the dark bar, set apart from the
   action buttons by spacing. */
[data-slot="ds-modal-progress"] {
  font-family: var(--font-mono);
  font-size:calc(11px * var(--fs-scale, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  white-space: nowrap;
  padding-right: 6px;
  border: 0;
  background: none;
}

/* #2 + #4 — Header action buttons: Next is the single filled PRIMARY, Prev the
   quiet ghost. Give both a comfortable >=44px tap target while keeping the
   compact letterbox look. Header buttons stay on a single line. */
[data-slot="ds-modal-header"] [data-slot~="ds-button"] {
  min-height: 40px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   #4 — MOBILE TAP TARGETS. On touch-width screens every nav/action button must
   be >=44px tall, single-line, and not clustered so tightly that they are easy
   to mis-tap. Applies to the dark header actions, the in-content pager, the
   spine "go" actions, and the home CTAs.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Header actions: full comfortable height, sensible spacing, Next stays
     dominant. They wrap onto their own row (shell already sets flex-wrap). */
  [data-slot="ds-modal-header"] [data-slot="ds-actions"] {
    gap: 10px;
    row-gap: 10px;
    width: 100%;
  }
  [data-slot="ds-modal-header"] [data-slot~="ds-button"] {
    min-height: 44px;
    flex: 1 1 auto;
  }
  /* The plain progress label drops above the buttons, not squeezed between them. */
  [data-slot="ds-modal-progress"] {
    flex: 1 0 100%;
    padding-right: 0;
  }

  /* In-content pager links: comfortable tap height, already stack at <=560px. */
  [data-slot="ds-pager-link"] {
    min-height: 44px;
  }

  /* Spine actions: the per-step "go" chip becomes a real, reachable button on
     mobile (the shell already reveals it at <=560px; here we give it height). */
  [data-slot="ds-spine-go"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  [data-slot="ds-spine-go"].is-primary {
    min-height: 44px;
    padding: 0 16px;
  }
}

/* --------------------------------------------------------------------------
   #3 — ONE obvious next action on the home, reachable on mobile. The compact
   required row and the resume hero each carry a single dominant primary button.
   Give those CTAs a >=44px tap target and, on mobile, keep them on their own
   full-width line below the card text (never hidden beside / under the cover).
   -------------------------------------------------------------------------- */
[data-slot~="ds-required-cta"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-slot="ds-resume-cta"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  /* Resume hero: cover sits on top, then text, then a full-width primary CTA so
     the action is visible without horizontal scroll and is not hidden below the
     image. (The shell already collapses to a single column; we make the CTA
     full-bleed and unmistakably the primary action.) */
  [data-slot="ds-resume-cta"] {
    justify-self: stretch;
    width: 100%;
    text-align: center;
  }
  /* Required row: the Continue/Start button spans full width on its own line
     (the shell sets grid-area:cta at <=560px; reinforce stretch up to 640px). */
  [data-slot~="ds-required-cta"] {
    justify-self: stretch;
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   #5 — COWORK pill overlap. The floating "Ask Cowork" launcher is pinned to the
   bottom-right of the viewport (~54px pill + 14px inset). Reserve a bottom (and
   a little right) gutter on the LMS surfaces so the launcher never sits over the
   primary action or body text. Token-free spacing only; no colours touched.

   --mmd-cowork-gutter: the clearance below the fold the launcher needs.
   -------------------------------------------------------------------------- */
[data-slot="ds-modal"],
.ds-learning-page {
  --mmd-cowork-gutter: 92px;
}

/* Course / activity surface: the scrolling body's inner shell reserves the
   gutter so the in-content pager, Next button, assignment form, and end-page
   CTA all clear the launcher. */
[data-slot="ds-modal-body"] [data-slot="ds-course-shell"] {
  padding-bottom: var(--mmd-cowork-gutter);
}

/* Home surface: reserve the same clearance below the last section so the
   catalogue's final card / CTA is never covered. */
.ds-learning-page {
  padding-bottom: var(--mmd-cowork-gutter);
}

/* On narrow screens the launcher is a touch larger relative to the viewport and
   actions go full-width; give a little more breathing room. */
@media (max-width: 640px) {
  [data-slot="ds-modal"],
  .ds-learning-page {
    --mmd-cowork-gutter: 104px;
  }
}

/* === LMS v2 P6 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 6 (navigation de-clutter + top step-progress nav) central
   design-system additions. Authored by the learning remote; batched by the
   orchestrator into the shell's public/_design-system/components.css.

   Tokens ONLY — NO hardcoded hex, NO new colours, NO new fonts. All translucency
   via color-mix() over the EXISTING central tokens. This is a NAVIGATION /
   USABILITY pass inside the existing "Editorial Letterbox" aesthetic — it does
   NOT change the colour scheme, fonts, covers, sections, or the app concept.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Stakeholder fixes (navigation/usability only):
   - Problem 2: a compact horizontal STEP-PROGRESS NAV at the TOP (under the dark
     header, inside ds-modal) on the in-activity / in-check views. Lists every
     step (content activities + terminal Knowledge check) as small clickable dots,
     marks done / current / to-do reusing the spine node language (filled ink disc
     = done, baobab ring = current, hollow = todo), includes a "Course overview"
     link, lets the learner jump to any chapter, and scrolls / wraps on mobile.
   - Problems 1 & 4: handled in route.ts markup (removed duplicate nav buttons);
     no CSS needed here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Problem 2 — top step-progress nav. It sits between the dark ds-modal-header
   and the ds-modal-body, on the light --paper surface. A "Course overview" link
   on the left, then a horizontally scrollable track of numbered step dots.
   -------------------------------------------------------------------------- */
[data-slot="ds-stepper"] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}

/* "Course overview" — a quiet mono nav link (not a button), set apart on the
   left so the user can always jump back to the spine. */
[data-slot="ds-stepper-overview"] {
  flex: none;
  font-family: var(--font-mono);
  font-size:calc(10.5px * var(--fs-scale, 1));
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 10px 6px 0;
  border-right: 1px solid var(--hairline);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
[data-slot="ds-stepper-overview"]:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The track scrolls horizontally so a long course never breaks the header. */
[data-slot="ds-stepper-track"] {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
[data-slot="ds-stepper-track"]::-webkit-scrollbar { height: 4px; }
[data-slot="ds-stepper-track"]::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

/* Each step: a node dot + number, with the label revealed for the current step
   and on hover/focus. Compact so many steps fit; min 40px hit area. */
[data-slot~="ds-stepper-step"] {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink-mute);
  padding: 6px 10px;
  min-height: 40px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
[data-slot~="ds-stepper-step"]:hover,
[data-slot~="ds-stepper-step"]:focus-visible {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--hairline);
  outline: none;
}

/* Node dot — reuse the spine visual language exactly:
   to-do = hollow (paper fill, faint ring); done = filled ink disc;
   current = paper fill with a baobab ring. */
[data-slot="ds-stepper-node"] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  background: var(--paper-2);
  border: 1px solid var(--ink-faint);
}
[data-slot~="is-done"] [data-slot="ds-stepper-node"] {
  background: var(--ink);
  border-color: var(--ink);
}
[data-slot~="is-current"] [data-slot="ds-stepper-node"] {
  background: var(--paper);
  border: 2px solid var(--baobab);
}

/* Step number — mono, quiet; sharpens for the current step. */
[data-slot="ds-stepper-num"] {
  font-family: var(--font-mono);
  font-size:calc(11px * var(--fs-scale, 1));
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  line-height: 1;
}
[data-slot~="is-done"] [data-slot="ds-stepper-num"] { color: var(--ink-faint); }
[data-slot~="is-current"] [data-slot="ds-stepper-num"] { color: var(--ink); }

/* Label — hidden by default to keep the track compact; shown for the current
   step (so the learner sees where they are) and on hover/focus of any step. */
[data-slot="ds-stepper-label"] {
  font-family: var(--font-ui);
  font-size:calc(12px * var(--fs-scale, 1));
  line-height: 1.1;
  color: inherit;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transition: max-width .14s ease, opacity .14s ease;
}
[data-slot~="is-current"] [data-slot="ds-stepper-label"],
[data-slot~="ds-stepper-step"]:hover [data-slot="ds-stepper-label"],
[data-slot~="ds-stepper-step"]:focus-visible [data-slot="ds-stepper-label"] {
  max-width: 16ch;
  opacity: 1;
}
[data-slot~="is-current"] {
  background: var(--paper-2);
  border-color: var(--hairline);
  color: var(--ink);
}

/* The terminal Knowledge check step reads as the sequence end — give its label a
   touch more room when revealed since "Knowledge check" is longer. */
[data-slot~="is-check"][data-slot~="is-current"] [data-slot="ds-stepper-label"],
[data-slot~="is-check"]:hover [data-slot="ds-stepper-label"],
[data-slot~="is-check"]:focus-visible [data-slot="ds-stepper-label"] {
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   Mobile (<=640px) — the stepper wraps gracefully without breaking the header.
   The overview link drops onto its own row above a full-width scrollable track,
   and step hit areas stay >=40px.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  [data-slot="ds-stepper"] {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 14px;
  }
  [data-slot="ds-stepper-overview"] {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    width: 100%;
    padding: 4px 0;
    min-height: 36px;
  }
  [data-slot="ds-stepper-track"] {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ===== PORTAL-R-027 — floating-window chrome (central primitive) =====
   Consumed by the shell's R-026 manager AND available to remotes (the
   helpdesk FloatingWindow/.portal-pin-layer pattern migrates to this at its
   next touch — see PORTAL-R-027). Paper card on the letterbox canvas, ink
   border, restrained shadow, mono titlebar label; baobab red reserved for
   the close control's hover/active only. Every color here is a DS token —
   dark-canvas compatibility (R-007) is automatic. */
.ds-window{position:fixed;left:0;top:0;transform:translate(var(--win-x, 0px), var(--win-y, 0px));width:var(--win-w, 340px);height:var(--win-h, 260px);z-index:calc(80 + var(--win-z, 0));background:var(--paper);border:1px solid var(--ink);box-shadow:0 18px 44px -12px rgba(14,14,12,0.35);display:flex;flex-direction:column;overflow:hidden}
.ds-window[hidden]{display:none}
.ds-window--standard{background:var(--paper)}
.ds-window--note{background:var(--paper-2)}
.ds-window--frame{border-color:var(--ink)}
.ds-window--transient{box-shadow:0 12px 30px -10px rgba(14,14,12,0.3)}
.ds-window--auto{height:auto;max-height:calc(100vh - 5rem)}
.ds-window-titlebar{display:flex;align-items:center;gap:4px;padding:6px 8px;background:var(--ink);color:var(--paper);cursor:grab;flex:0 0 auto;touch-action:none}
.ds-window-titlebar:active{cursor:grabbing}
.ds-window-title{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-window-spacer{flex:1}
.ds-window-back,.ds-window-pin,.ds-window-popout,.ds-window-close,.ds-window-minimize{border:0;background:transparent;color:var(--paper);cursor:pointer;width:22px;height:22px;display:grid;place-items:center;border-radius:3px;font-size:13px;line-height:1;flex:0 0 auto}
.ds-window-back:hover,.ds-window-pin:hover,.ds-window-popout:hover,.ds-window-minimize:hover{background:rgba(250,250,246,0.15)}
.ds-window-pin[aria-pressed="true"],.ds-window-minimize[aria-pressed="true"]{color:var(--baobab)}
.ds-window-close:hover{background:var(--baobab);color:var(--paper)}
.ds-window-body{flex:1;overflow:auto;padding:10px;font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink)}
.ds-window--frame .ds-window-body{padding:0;overflow:hidden}
.ds-window-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg, transparent 50%, var(--ink-mute) 50%)}

/* ===== UNION MERGE 2026-07-07: main-line central DS (datagrid, drilldown, workbench density, ds-range, fragment-topbar) appended after the deployed-line file (ds-window/menu/link-row/sf blocks). Last-rule-wins; shared classes take the main-line definition. Proper de-duplication tracked as DS debt. ===== */

/* MMD Portal — components. All classes here must appear in design-system.manifest.json */

/* ===== Cards ===== */
.card{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:32px;display:flex;flex-direction:column;gap:14px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:32px}
.card-title{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-0.015em;color:var(--ink);margin:0}
.card-body{font-family:var(--font-ui);font-weight:500;font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin:0}
.card-cta{margin-top:auto;padding-top:10px}

/* ===== Buttons ===== */
.ds-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:4px;font-family:var(--font-ui);font-weight:600;font-size:12.5px;letter-spacing:0.04em;cursor:pointer;transition:background 0.14s ease, color 0.14s ease, border-color 0.14s ease;text-decoration:none;border:1px solid transparent;line-height:1;white-space:nowrap;text-transform:uppercase}
.ds-button-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ds-button-primary:hover{background:var(--baobab);border-color:var(--baobab);color:var(--baobab-on, var(--paper))}
.ds-button-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.ds-button-secondary:hover{background:var(--ink);color:var(--paper)}
/* Destructive-secondary weight (2026-07-28) -- ds-button-danger was already
   referenced by several TA step dialogs (reject/return/no-hire controls)
   with no matching rule anywhere in this file, so those buttons silently
   rendered as plain unstyled buttons. Same structure as ds-button-secondary
   (transparent, outlined, inverts solid on hover) with baobab red standing
   in for ink -- the same token .ds-menu-item-danger already uses for
   destructive semantics, never a new color. */
.ds-button-danger{background:transparent;color:var(--baobab);border-color:var(--baobab)}
.ds-button-danger:hover{background:var(--baobab);color:var(--paper)}
.ds-button-on-dark-primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.ds-button-on-dark-primary:hover{background:var(--baobab);color:var(--paper);border-color:var(--baobab)}
.ds-button-on-dark-ghost{background:transparent;color:var(--paper);border-color:var(--paper)}
.ds-button-on-dark-ghost:hover{background:var(--paper);color:var(--ink)}
.ds-button:focus-visible{outline:2px solid var(--baobab);outline-offset:4px}
.ds-button:disabled,.ds-button-disabled,.ds-button.ds-button-disabled{opacity:0.45;cursor:not-allowed;pointer-events:none;background:var(--paper-2);color:var(--ink-mute);border-color:var(--hairline)}
.ds-button-primary:disabled,.ds-button-primary.ds-button-disabled,.ds-button-primary:disabled:hover,.ds-button-primary.ds-button-disabled:hover{background:var(--paper-2);color:var(--ink-mute);border-color:var(--hairline)}
.ds-button-secondary:disabled,.ds-button-secondary.ds-button-disabled,.ds-button-secondary:disabled:hover,.ds-button-secondary.ds-button-disabled:hover{background:var(--paper-2);color:var(--ink-mute);border-color:var(--hairline)}

/* ===== Forms ===== */
.ds-form{display:flex;flex-direction:column;gap:32px;margin-top:40px}
.ds-fieldset{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:28px 32px;display:flex;flex-direction:column;gap:18px;margin:0}
.ds-legend{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);padding:0 6px;margin-left:-6px}
.ds-field{display:flex;flex-direction:column;gap:6px}
.ds-field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ds-label{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:0.04em;color:var(--ink);text-transform:uppercase}
.ds-input,
.ds-select,
.ds-textarea{font-family:var(--font-ui);font-weight:500;font-size:14.5px;line-height:1.4;color:var(--ink);background:var(--paper-2);border:1px solid var(--hairline);border-radius:3px;padding:10px 12px;width:100%;transition:border-color 0.14s ease, background 0.14s ease}
.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover{border-color:var(--ink-mute)}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus{outline:none;border-color:var(--baobab);background:var(--paper)}
.ds-textarea{min-height:96px;resize:vertical;font-family:var(--font-ui)}
.ds-hint{font-family:var(--font-ui);font-weight:500;font-size:12px;color:var(--ink-mute)}
.ds-field-hidden{display:none}
.ds-actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}

@media (max-width:640px){
  .ds-field-row-2{grid-template-columns:1fr}
  .ds-fieldset{padding:20px}
}

/* ===== Review screen blocks ===== */
.ds-review-block{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:28px 32px;display:flex;flex-direction:column;gap:14px}
.ds-review-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:40px;align-items:start}
.ds-review-field{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-bottom:1px solid var(--hairline)}
.ds-review-field:last-child{border-bottom:0}
.ds-review-label{font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute)}
.ds-review-value{font-family:var(--font-ui);font-weight:500;font-size:15px;color:var(--ink)}
.ds-review-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}

@media (max-width:880px){
  .ds-review-grid{grid-template-columns:1fr}
  .ds-review-aside{position:static}
}

/* ===== Records table — used on landing for "open tasks" ===== */
.ds-records{width:100%;border-collapse:collapse;margin-top:24px}
.ds-records td{padding:18px 14px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.ds-records-id{width:120px}
.ds-records-title{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-0.015em;line-height:1.2;color:var(--ink)}
.ds-records-sub{display:block;margin-top:5px;color:var(--ink-mute);font-size:12.5px;line-height:1.45}
.ds-table-section{background:transparent;border:0;border-top:1px solid var(--hairline);border-radius:0;margin-top:18px}
.ds-table-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid var(--hairline);flex-wrap:wrap;row-gap:10px}
.ds-table-title{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-0.01em;line-height:1.2;color:var(--ink);margin:0}
.ds-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:24px}
.ds-filter-chip{font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);background:transparent;border:1px solid var(--hairline);border-radius:2px;padding:7px 10px;cursor:pointer}
.ds-filter-chip:hover,
.ds-filter-chip-active{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.ds-records-compact{width:100%;border-collapse:collapse}
.ds-records-compact td{padding:10px 12px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.ds-records-compact tr:last-child td{border-bottom:0}
.ds-records-compact .ds-records-id{width:76px}
.ds-empty-row{padding:14px 16px;color:var(--ink-mute);font-family:var(--font-ui);font-weight:500;font-size:13px}

/* ===== Embedded task surface ===== */
.ds-embed-frame{display:block;width:100%;height:calc(100vh - 56px);min-height:720px;border:0;background:var(--paper-2)}
.ds-modal-backdrop{position:fixed;inset:0;background:var(--paper-2);display:flex;align-items:stretch;justify-content:stretch;padding:0;z-index:1000}
.ds-modal{background:var(--paper-2);border:0;border-radius:0;width:100%;height:100vh;display:flex;flex-direction:column;box-shadow:none}
.ds-modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:0;background:var(--ink);color:var(--paper)}
.ds-modal-header .eyebrow,
.ds-modal-header .ds-table-title{color:var(--paper)}
.ds-modal-body{padding:0;overflow:hidden;flex:1}
.ds-modal .ds-embed-frame{height:100%;min-height:0}
/* ===== Modal scrollable form body (design-system ratchet: no per-component
   <style jsx> for this recurring pattern -- a scrollable, padded, vertically
   stacked form area inside a ds-modal-body, e.g. an H2R create/entry-step
   drawer). Consume directly; do not re-declare locally. ===== */
.ds-modal-body-form{overflow-y:auto;overflow-x:hidden;padding:20px;display:flex;flex-direction:column;gap:18px}
.ds-actions-end{justify-content:flex-end}
.ds-hint-error{color:var(--baobab)}
.mmd-course-content{font-family:var(--font-ui)!important;background:var(--paper-2)!important;color:var(--ink)!important}
.mmd-course-content h1,
.mmd-course-content h2,
.mmd-course-content h3,
.mmd-course-content .brand{font-family:var(--font-display)!important;color:var(--ink)!important;letter-spacing:0!important}
.mmd-course-content p,
.mmd-course-content li,
.mmd-course-content button{font-family:var(--font-ui)!important}
.mmd-course-content .topbar,
.mmd-course-content .progress-fill{background:var(--baobab)!important}
.mmd-course-content .topbar{height:6px!important}
.mmd-course-content header{display:none!important}
.mmd-course-content main{max-width:none!important;width:100%!important;min-height:100vh!important;margin:0!important;padding:0!important}
.mmd-course-content .card{width:100%!important;min-height:0!important;margin:0!important;border:0!important;box-shadow:none!important;border-radius:0!important;background:var(--paper-2)!important;display:block!important;gap:0!important;overflow:visible!important}
.mmd-course-content .slide{max-width:none!important;width:100%!important;margin:0!important;padding:clamp(20px,3.4vw,42px)!important;border:0!important;gap:0!important}
.mmd-course-content .slide-illustration{margin:0 0 18px!important}
.mmd-course-content .slide-illustration svg{width:96px!important;height:96px!important}
.mmd-course-content .slide:has(.quiz),
.mmd-course-content .slide:has(.quiz-card),
.mmd-course-content .slide:has(.question),
.mmd-course-content .slide:has(.question-card),
.mmd-course-content .slide:has([class*="quiz"]),
.mmd-course-content .slide:has([class*="question"]){padding-top:clamp(16px,2.5vw,30px)!important}
.mmd-course-content .slide:has(.quiz) .slide-illustration,
.mmd-course-content .slide:has(.quiz-card) .slide-illustration,
.mmd-course-content .slide:has(.question) .slide-illustration,
.mmd-course-content .slide:has(.question-card) .slide-illustration,
.mmd-course-content .slide:has([class*="quiz"]) .slide-illustration,
.mmd-course-content .slide:has([class*="question"]) .slide-illustration{display:none!important}
.mmd-course-content .slide:has(.quiz) h1,
.mmd-course-content .slide:has(.quiz-card) h1,
.mmd-course-content .slide:has(.question) h1,
.mmd-course-content .slide:has(.question-card) h1,
.mmd-course-content .slide:has([class*="quiz"]) h1,
.mmd-course-content .slide:has([class*="question"]) h1{margin-bottom:16px!important}
.mmd-course-content .quiz,
.mmd-course-content .quiz-card,
.mmd-course-content .question,
.mmd-course-content .question-card,
.mmd-course-content [class*="quiz"],
.mmd-course-content [class*="question"]{margin-top:0!important;padding-top:0!important}
.mmd-course-content .answers,
.mmd-course-content .options,
.mmd-course-content .quiz-options{margin-top:14px!important}
.mmd-course-content header,
.mmd-course-content .lesson,
.mmd-course-content .slide,
.mmd-course-content .quiz-option{background:var(--paper-2)!important;border-color:var(--hairline)!important}
.mmd-course-content .callout,
.mmd-course-content .score-card{background:var(--paper-3)!important;border-color:var(--hairline)!important;color:var(--ink)!important}

/* ===== Mono + tag ===== */
.ds-mono{font-family:var(--font-mono);font-weight:500;font-size:11.5px;letter-spacing:0.06em;color:var(--ink-soft)}
.ds-mono-hash{color:var(--baobab);margin-right:1px}
.ds-tag{display:inline-block;font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:2px;padding:3px 7px}

/* ===== Notice strip ===== */
.ds-notice{background:var(--paper);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:20px 24px;margin:32px 0;display:flex;gap:18px;align-items:stretch;border-radius:4px}
.ds-notice-rule{width:3px;background:var(--baobab);align-self:stretch;border-radius:1px}
.ds-notice-label{font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--baobab);display:block;margin-bottom:5px}
.ds-notice-text{flex:1;font-family:var(--font-ui);font-weight:500;font-size:14px;color:var(--ink-soft)}

/* ============================================================================
   MMD LEARNING (LMS) — premium redesign block. Editorial Industrial Letterbox.
   Self-contained: targets the learning remote's data-slots + classes. Tokens
   only (no new fonts/colors). Authored 2026-06-21 from a 3-critic synthesis.
   ============================================================================ */

/* --- Home page shell ------------------------------------------------------- */
.mmd-course-content,
.ds-learning-page { color: var(--ink); }
.ds-learning-page { max-width: 1180px; margin: 0 auto; padding: 34px 0 64px; }
.ds-learning-heading { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 4.6vw, 62px); line-height: 0.98; letter-spacing: -0.02em; }
.ds-learning-heading a { color: inherit; text-decoration: none; }
.ds-learning-heading em { color: var(--baobab); font-style: italic; }
.ds-learning-page .lede { max-width: 64ch; margin: 16px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.62; font-style: normal; }
.ds-empty-row { padding: 22px; border: 1px solid var(--hairline); color: var(--ink-mute); font-size: 14px; background: var(--paper); }

/* --- Resume hero card ------------------------------------------------------ */
[data-slot="ds-resume"] {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 28px;
  margin: 26px 0 30px; padding: 22px 26px; background: var(--paper);
  border: 1px solid var(--hairline); border-left: 3px solid var(--baobab);
  text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease;
}
[data-slot="ds-resume"]:hover { border-color: var(--ink); transform: translateY(-1px); }
[data-slot="ds-resume-eyebrow"] { grid-column: 1; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot="ds-resume-title"] { grid-column: 1; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.08; margin-top: 3px; }
[data-slot="ds-resume-meta"] { grid-column: 1; font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
[data-slot="ds-resume-meter"] { grid-column: 1; display: block; margin-top: 12px; max-width: 360px; }
[data-slot="ds-resume-cta"] { grid-column: 2; grid-row: 1 / span 4; align-self: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 12px 20px; white-space: nowrap; transition: background .15s ease; }
[data-slot="ds-resume"]:hover [data-slot="ds-resume-cta"] { background: var(--baobab); }

/* --- Filter chips ---------------------------------------------------------- */
.ds-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.ds-filter-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); background: transparent; border: 1px solid var(--hairline); padding: 7px 13px; text-decoration: none; transition: all .12s ease; }
.ds-filter-chip:hover { color: var(--ink); border-color: var(--ink-mute); }
.ds-filter-chip-active { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* --- Section header (catalogue) ------------------------------------------- */
.ds-table-section { margin-top: 6px; }
.ds-table-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.eyebrow, [data-slot="course-kicker"] { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: block; }
.ds-table-title, [data-slot="ds-table-title"] { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2vw, 24px); line-height: 1.1; margin: 3px 0 0; }

/* --- Catalogue: course cards (was a table) -------------------------------- */
[data-slot="ds-course-grid"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
[data-slot~="ds-course-card"] {
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 148px;
  padding: 20px 22px; background: var(--paper); border: 1px solid var(--hairline);
  text-decoration: none; color: var(--ink); position: relative; transition: border-color .15s ease, transform .15s ease;
}
[data-slot~="ds-course-card"]::after { content: "→"; position: absolute; right: 20px; bottom: 18px; font-size: 15px; color: var(--ink-faint); opacity: 0; transform: translateX(-4px); transition: all .15s ease; }
[data-slot~="ds-course-card"]:hover { border-color: var(--ink); transform: translateY(-2px); }
[data-slot~="ds-course-card"]:hover::after { opacity: 1; transform: translateX(0); color: var(--baobab); }
[data-slot~="is-progress"] { border-left: 3px solid var(--ink); }
[data-slot~="is-complete"] { border-left: 3px solid var(--baobab); }
[data-slot="ds-course-cat"] { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot="ds-course-name"] { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.14; align-self: start; }
[data-slot="ds-course-foot"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-slot="ds-course-go"] { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot~="ds-course-card"]:hover [data-slot="ds-course-go"] { color: var(--ink); }
[data-slot="ds-course-fresh"] { font-size: 12.5px; color: var(--ink-faint); }
[data-slot="ds-course-stamp"] { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--baobab); }

/* --- Meter (proportional hairline) ---------------------------------------- */
[data-slot="ds-meter"] { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
[data-slot="ds-meter-track"] { position: relative; flex: 1 1 auto; min-width: 70px; height: 6px; background: var(--paper-2); border: 1px solid var(--hairline); overflow: hidden; }
[data-slot="ds-meter-fill"] { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--ink); width: 0; }
[data-slot="ds-meter-fill"][data-pct="0"] { width: 0; }
[data-slot="ds-meter-label"] { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-mute); white-space: nowrap; }

/* Proportional fill width keyed on data-pct (markup buckets to nearest 5).
   No inline styles — these live in the central DS. Applies to any *-fill. */
[data-pct="0"]{width:0}
[data-pct="5"]{width:5%}   [data-pct="10"]{width:10%} [data-pct="15"]{width:15%}
[data-pct="20"]{width:20%} [data-pct="25"]{width:25%} [data-pct="30"]{width:30%}
[data-pct="35"]{width:35%} [data-pct="40"]{width:40%} [data-pct="45"]{width:45%}
[data-pct="50"]{width:50%} [data-pct="55"]{width:55%} [data-pct="60"]{width:60%}
[data-pct="65"]{width:65%} [data-pct="70"]{width:70%} [data-pct="75"]{width:75%}
[data-pct="80"]{width:80%} [data-pct="85"]{width:85%} [data-pct="90"]{width:90%}
[data-pct="95"]{width:95%} [data-pct="100"]{width:100%}

/* ============================================================================
   COURSE + ACTIVITY — dark letterbox frame + body
   ============================================================================ */
[data-slot="ds-modal"] { display: flex; flex-direction: column; min-height: 100dvh; background: var(--paper); }
[data-slot="ds-modal-header"] {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 30px; background: var(--ink); color: var(--paper);
}
[data-slot="ds-modal-headline"] { min-width: 0; }
[data-slot="ds-modal-header"] [data-slot="course-kicker"] { color: color-mix(in srgb, var(--paper) 55%, transparent); }
[data-slot="ds-modal-crumb"] { color: color-mix(in srgb, var(--paper) 80%, transparent); text-decoration: none; }
[data-slot="ds-modal-crumb"]:hover { color: var(--paper); text-decoration: underline; }
[data-slot="ds-modal-header"] [data-slot="ds-table-title"] { color: var(--paper); font-size: clamp(15px, 1.6vw, 19px); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; }
[data-slot="ds-modal-header"] [data-slot="ds-actions"] { display: flex; align-items: center; gap: 8px; flex: none; }
[data-slot="ds-modal-body"] { flex: 1 1 auto; padding: 30px; }
[data-slot="ds-course-shell"] { max-width: 940px; margin: 0 auto; }

/* progress rule on course overview */
[data-slot="ds-progress"] { max-width: 520px; margin: 4px 0 20px; }
[data-slot="ds-progress-head"] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
[data-slot="ds-progress-goal"] { font-size: 13px; color: var(--ink-soft); }
[data-slot="ds-progress-label"] { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute); }
[data-slot="ds-progress-track"] { position: relative; height: 7px; background: var(--paper-2); border: 1px solid var(--hairline); overflow: hidden; }
[data-slot="ds-progress-fill"] { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--ink); width: 0; }

/* ============================================================================
   COURSE SPINE — vertical timeline (was a table)
   ============================================================================ */
[data-slot="ds-spine"] { list-style: none; margin: 22px 0 0; padding: 0; position: relative; }
[data-slot="ds-spine"]::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: var(--hairline); }
[data-slot~="ds-spine-step"] { position: relative; }
[data-slot="ds-spine-main"] {
  display: grid; grid-template-columns: 16px 40px 1fr auto; align-items: center; column-gap: 16px;
  padding: 15px 14px 15px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink);
  transition: background .12s ease;
}
[data-slot="ds-spine-main"]:hover { background: var(--paper); }
[data-slot="ds-spine-node"] { grid-column: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--ink-faint); box-shadow: 0 0 0 4px var(--paper); z-index: 1; }
[data-slot~="is-done"] [data-slot="ds-spine-node"] { background: var(--ink); border-color: var(--ink); }
[data-slot~="is-next"] [data-slot="ds-spine-node"] { background: var(--paper); border: 2px solid var(--baobab); }
[data-slot="ds-spine-num"] { grid-column: 2; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink-faint); line-height: 1; text-align: center; }
[data-slot~="is-next"] [data-slot="ds-spine-num"] { color: var(--ink); }
[data-slot~="is-done"] [data-slot="ds-spine-num"] { color: var(--ink-mute); }
[data-slot="ds-spine-text"] { grid-column: 3; min-width: 0; display: grid; gap: 2px; }
[data-slot="ds-spine-title"] { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.18; color: var(--ink); }
[data-slot="ds-spine-sum"] { font-size: 13px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-slot="ds-spine-meta"] { grid-column: 4; display: flex; align-items: center; gap: 14px; flex: none; }
[data-slot~="ds-spine-state"] { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot="ds-spine-next"] { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--baobab); }
[data-slot="ds-spine-go"] { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); opacity: 0; transition: opacity .12s ease; white-space: nowrap; }
[data-slot="ds-spine-main"]:hover [data-slot="ds-spine-go"] { opacity: 1; color: var(--ink); }
[data-slot="ds-spine-go"].is-primary { opacity: 1; color: var(--paper); background: var(--ink); padding: 8px 14px; }
[data-slot="ds-spine-main"]:hover [data-slot="ds-spine-go"].is-primary { background: var(--baobab); color: var(--paper); }

/* ============================================================================
   ACTIVITY / LESSON — de-boxed editorial article
   ============================================================================ */
[data-slot="ds-activity"] { max-width: 720px; margin: 0 auto; }
[data-slot="ds-activity"] [data-slot="ds-table-header"] { display: block; margin-bottom: 6px; }
[data-slot="ds-activity-status"] { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border: 1px solid var(--hairline); color: var(--ink-mute); }
[data-slot~="ds-activity-status-quiz"] { color: var(--baobab); border-color: var(--baobab); background: var(--baobab-bg); }
[data-slot~="ds-activity-status-done"] { color: var(--ink); border-color: var(--ink); }
[data-slot="ds-activity-content"] { margin-top: 22px; font-size: 16px; line-height: 1.66; color: var(--ink-soft); border-top: 2px solid var(--baobab); padding-top: 22px; }
[data-slot="ds-activity-content"] > *:first-child { margin-top: 0; }
[data-slot="ds-activity-content"] p { margin: 0 0 16px; max-width: 64ch; }
[data-slot="ds-activity-content"] h2, [data-slot="ds-activity-content"] h3, [data-slot="ds-activity-content"] h4 { font-family: var(--font-display); font-weight: 500; color: var(--ink); line-height: 1.2; margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--hairline); }
[data-slot="ds-activity-content"] ul, [data-slot="ds-activity-content"] ol { margin: 0 0 16px; padding-left: 4px; list-style: none; }
[data-slot="ds-activity-content"] li { position: relative; padding-left: 20px; margin: 0 0 9px; max-width: 62ch; }
[data-slot="ds-activity-content"] li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; background: var(--baobab); }
[data-slot="ds-activity-content"] strong, [data-slot="ds-activity-content"] b { color: var(--ink); font-weight: 600; }
[data-slot="ds-activity-content"] blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 2px solid var(--hairline); color: var(--ink-mute); font-style: italic; }
[data-slot="ds-figure"] { margin: 22px 0; padding: 22px; border: 1px solid var(--hairline); background: var(--paper); text-align: center; }
[data-slot="ds-figure"] svg { max-width: 100%; height: auto; }

/* activity banners */
[data-slot~="ds-activity-banner"] { margin: 18px 0; padding: 13px 16px; font-size: 14px; border: 1px solid var(--hairline); }
[data-slot~="ds-activity-banner-pass"] { border-left: 3px solid var(--baobab); color: var(--ink); background: var(--paper); }
[data-slot~="ds-activity-banner-fail"] { border-left: 3px solid var(--signal-amber); color: var(--ink); background: var(--signal-amber-bg); }

/* ============================================================================
   KNOWLEDGE CHECK — hard dark section break (cinema bar feel)
   ============================================================================ */
.ds-quiz-form, [data-slot="ds-quiz"] { margin-top: 30px; }
[data-slot="ds-quiz-intro"] { background: var(--ink); color: var(--paper); padding: 20px 24px; margin: 0 0 4px; }
[data-slot="ds-quiz-intro-label"] { font-family: var(--font-display); font-style: italic; font-size: 22px; display: block; }
[data-slot="ds-quiz-intro"] p { margin: 6px 0 0; font-size: 13.5px; color: color-mix(in srgb, var(--paper) 75%, transparent); }
[data-slot="ds-quiz-question"] { border: 0; border-bottom: 1px solid var(--hairline); margin: 0; padding: 20px 0; }
[data-slot="ds-quiz-legend"] { font-family: var(--font-display); font-weight: 500; font-size: 17px; padding: 0; margin-bottom: 12px; }
[data-slot="ds-quiz-option"] { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid var(--hairline); margin: 0 0 8px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
[data-slot="ds-quiz-option"]:hover { border-color: var(--ink-mute); background: var(--paper); }
[data-slot="ds-quiz-option"]:has(.ds-choice:checked) { border-color: var(--baobab); box-shadow: inset 3px 0 0 var(--baobab); }
.ds-choice { accent-color: var(--baobab); width: 16px; height: 16px; flex: none; }
[data-slot="ds-quiz-option-text"] { font-size: 14.5px; color: var(--ink); }

/* ============================================================================
   ASSIGNMENT
   ============================================================================ */
.ds-assignment-form, [data-slot="ds-assignment"] { display: grid; gap: 10px; margin-top: 22px; }
[data-slot="ds-assignment-saved"] { padding: 16px 18px; background: var(--paper); border: 1px solid var(--hairline); border-left: 3px solid var(--baobab); margin-top: 18px; }
[data-slot="ds-assignment-saved"] blockquote { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.ds-textarea { width: 100%; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.55; padding: 13px 15px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); resize: vertical; }
.ds-textarea:focus { outline: none; border-color: var(--ink); }
.ds-field-hidden { display: none; }

/* ============================================================================
   COMPLETION MOMENT — the reward
   ============================================================================ */
[data-slot="ds-complete"] { margin-top: 30px; padding: 34px 30px; background: var(--ink); color: var(--paper); text-align: center; display: grid; justify-items: center; gap: 8px; }
[data-slot="ds-complete-tick"] { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--baobab); color: var(--paper); font-size: 22px; line-height: 1; }
[data-slot="ds-complete-head"] { font-family: var(--font-display); font-style: italic; font-size: 30px; line-height: 1.05; margin-top: 6px; }
[data-slot="ds-complete-sub"] { font-size: 13.5px; color: color-mix(in srgb, var(--paper) 72%, transparent); }
[data-slot="ds-complete"] [data-slot="ds-actions"] { margin-top: 16px; }

/* ============================================================================
   BUTTONS + actions (data-slot AND class forms) + tags
   ============================================================================ */
[data-slot="ds-actions"] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.ds-button, [data-slot~="ds-button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 11px 18px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  text-decoration: none; cursor: pointer; transition: all .14s ease;
}
.ds-button:hover, [data-slot~="ds-button"]:hover { background: var(--paper-2); }
.ds-button-primary, [data-slot~="ds-button-primary"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ds-button-primary:hover, [data-slot~="ds-button-primary"]:hover { background: var(--baobab); border-color: var(--baobab); }
.ds-button-secondary, [data-slot~="ds-button-secondary"], [data-slot~="ds-button-on-light"] { background: transparent; color: var(--ink); border-color: var(--hairline); }
.ds-button-secondary:hover, [data-slot~="ds-button-secondary"]:hover { border-color: var(--ink); background: transparent; }
[data-slot~="ds-button-on-dark-ghost"] { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 35%, transparent); }
[data-slot~="ds-button-on-dark-ghost"]:hover { border-color: var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent); }
[data-slot~="ds-button-on-dark-primary"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
[data-slot~="ds-button-on-dark-primary"]:hover { background: var(--baobab); color: var(--paper); border-color: var(--baobab); }
[data-slot="ds-tag"] { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); padding: 5px 10px; }
[data-slot="ds-records-sub"] { font-size: 13px; color: var(--ink-mute); }

/* embedded raw runtime frame (fallback only) */
[data-slot="ds-embed-frame"][hidden] { display: none; }
[data-slot="ds-embed-frame"] { margin-top: 18px; }

/* generated fallback course body */
[data-slot="course-body"] { max-width: 820px; margin: 0 auto; }
[data-slot="course-title"] { font-family: var(--font-display); font-weight: 500; font-size: 30px; margin: 4px 0 8px; }
[data-slot="course-summary"] { color: var(--ink-soft); font-size: 15px; margin: 0 0 20px; }
[data-slot="ds-records-compact"] { display: grid; gap: 8px; }

/* ============================================================================
   RESPONSIVE — stacked, thumb-first
   ============================================================================ */
@media (max-width: 860px) {
  [data-slot="ds-course-grid"] { grid-template-columns: minmax(0, 1fr); }
  [data-slot="ds-resume"] { grid-template-columns: minmax(0,1fr); }
  [data-slot="ds-resume-cta"] { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
  [data-slot="ds-modal-header"] { flex-wrap: wrap; padding: 12px 18px; gap: 10px; }
  [data-slot="ds-modal-header"] [data-slot="ds-table-title"] { max-width: 100%; white-space: normal; }
  [data-slot="ds-modal-body"] { padding: 20px 16px; }
  [data-slot="ds-spine-main"] { grid-template-columns: 16px 1fr; grid-template-areas: "node text" "node meta"; row-gap: 8px; column-gap: 12px; }
  [data-slot="ds-spine-num"] { display: none; }
  [data-slot="ds-spine-text"] { grid-area: text; }
  [data-slot="ds-spine-sum"] { white-space: normal; }
  [data-slot="ds-spine-meta"] { grid-area: meta; justify-content: flex-start; }
  [data-slot="ds-spine-go"] { opacity: 1; }
  [data-slot="ds-activity-content"] p, [data-slot="ds-activity-content"] li { max-width: none; }
}
/* ===== end LMS redesign block ===== */
.ds-tag-open{color:var(--ink);border-color:var(--ink)}
.ds-tag-progress{color:var(--ink);border-color:var(--ink-mute)}
.ds-tag-waiting{color:var(--ink-mute);border-color:var(--ink-mute)}
.ds-tag-resolved{color:var(--ink-mute);border-color:var(--hairline)}
.ds-tag-closed{color:var(--ink-faint);border-color:var(--hairline)}
.ds-tag-error{color:var(--baobab);border-color:var(--baobab)}

/* === LMS v2 P2 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 2 (consumers) central design-system additions.
   Authored by the learning remote; batched by the orchestrator into the shell's
   public/_design-system/components.css. Tokens ONLY — no hardcoded hex; all
   translucency via color-mix() over the central tokens.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Covers: R1 (course scroll), R2 (in-content pager), R6 (end page + cert CTA),
   R7 (home trophies).
   ========================================================================== */

/* --------------------------------------------------------------------------
   R1 — Course content must scroll (TC1.*)
   The course modal is a BOUNDED viewport box (height, not min-height) so its
   body can own the overflow; the header stays sticky at the top of that box.
   -------------------------------------------------------------------------- */
[data-slot="ds-modal"] {
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-slot="ds-modal-header"] {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
}

[data-slot="ds-modal-body"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   R2 — In-content navigation pager (TC2.*)
   A bottom prev/next pager rendered inside the activity, in addition to the
   sticky header prev/next. Real DB-ordered hrefs; first activity has no prev,
   the last content activity's next is the terminal knowledge check.
   -------------------------------------------------------------------------- */
[data-slot="ds-pager"] {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}

[data-slot="ds-pager-link"] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 0;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-2);
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot="ds-pager-link"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, var(--paper-2));
}

[data-slot="ds-pager-link"][data-dir="next"] {
  text-align: right;
  align-items: flex-end;
}

[data-slot="ds-pager-dir"] {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-pager-title"] {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* A disabled/absent slot (first activity has no prev) keeps the layout balanced. */
[data-slot="ds-pager-spacer"] {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 560px) {
  [data-slot="ds-pager"] {
    flex-direction: column;
  }
  [data-slot="ds-pager-link"][data-dir="next"] {
    text-align: left;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   R6 — End-of-course page + certificate (TC6.*)
   Shown only when isCourseComplete. Trophy mark, "Course complete", and the
   "Download certificate (PDF)" action.
   -------------------------------------------------------------------------- */
[data-slot="ds-end"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  max-width: 38rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

[data-slot="ds-end-trophy"] {
  width: 96px;
  height: 96px;
  display: block;
  color: var(--baobab);
}

[data-slot="ds-end-kicker"] {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--baobab);
}

[data-slot="ds-end-title"] {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

[data-slot="ds-end-sub"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 30rem;
}

[data-slot="ds-end-course"] {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

[data-slot="ds-end"] [data-slot="ds-actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   R7 — Trophies on the home page (TC7.*)
   One trophy per completed course; empty state when none.
   -------------------------------------------------------------------------- */
[data-slot="ds-trophies"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

[data-slot="ds-trophy"] {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot="ds-trophy"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 55%, var(--paper-2));
}

[data-slot="ds-trophy-emblem"] {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: block;
  color: var(--baobab);
}

[data-slot="ds-trophy-text"] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

[data-slot="ds-trophy-cat"] {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-trophy-name"] {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-slot="ds-trophy-empty"] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px dashed var(--hairline);
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  color: var(--ink-mute);
  font-family: var(--font-ui);
  font-size: 0.95rem;
}

/* === LMS v2 P3 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 3 (catalogue + admin) central design-system additions.
   Authored by the learning remote; batched by the orchestrator into the shell's
   public/_design-system/components.css. Tokens ONLY — no hardcoded hex; all
   translucency via color-mix() over the central tokens.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Covers: R9 (~N min estimate), R10 (categories + grouped catalogue),
   R11 (featured strip), R12 (required-for-you), R13 (admin page), R14 (covers).
   ========================================================================== */

/* --------------------------------------------------------------------------
   R14 — Course covers. A 1200x630 image (overviewfiles photo or generated
   Letterbox SVG) sat above the card body. object-fit:cover keeps the ratio.
   -------------------------------------------------------------------------- */
[data-slot="ds-cover"] {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  height: auto;
  object-fit: cover;
  background: var(--paper-2);
  border-bottom: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   R9 — "~N min" time-estimate badge.
   -------------------------------------------------------------------------- */
[data-slot="ds-est"] {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Course card with a cover (extends the P2 ds-course-card). The card becomes a
   vertical stack: cover on top, body (category + est, name, footer) below.
   -------------------------------------------------------------------------- */
[data-slot="ds-course-card"] {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

[data-slot="ds-course-cover"] {
  display: block;
}

[data-slot="ds-course-body"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.95rem 1rem 1rem;
  flex: 1 1 auto;
}

[data-slot="ds-course-meta"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   R12 — Required for you. Top-of-page section; cards carry due-state styling.
   -------------------------------------------------------------------------- */
[data-slot="ds-required-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

[data-slot="ds-required-card"] {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot="ds-required-card"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 55%, var(--paper-2));
}

[data-slot="ds-required-card"].is-overdue {
  border-left: 3px solid var(--baobab);
}

[data-slot="ds-required-card"].is-soon {
  border-left: 3px solid var(--signal-amber);
}

[data-slot="ds-required-cover"] {
  display: block;
}

[data-slot="ds-required-body"] {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem 1rem 1rem;
}

[data-slot="ds-required-meta"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

[data-slot="ds-required-cat"] {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-required-flag"] {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--baobab);
  padding: 0.1rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--baobab) 40%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, transparent);
}

[data-slot="ds-required-name"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

[data-slot="ds-required-due"] {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

[data-slot="ds-required-due"].is-overdue {
  color: var(--baobab);
  font-weight: 600;
}

[data-slot="ds-required-due"].is-soon {
  color: color-mix(in srgb, var(--signal-amber) 80%, var(--ink));
  font-weight: 600;
}

[data-slot="ds-required-est"] {
  margin-top: 0.1rem;
}

/* --------------------------------------------------------------------------
   R11 — Featured strip. A grid of cover cards above the catalogue.
   -------------------------------------------------------------------------- */
[data-slot="ds-featured-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   R10 — Catalogue grouped by real category, with per-category headers.
   -------------------------------------------------------------------------- */
[data-slot="ds-cat-group"] {
  margin-top: 1.5rem;
}

[data-slot="ds-cat-group"]:first-child {
  margin-top: 0;
}

[data-slot="ds-cat-heading"] {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}

/* Resume hero with a cover thumbnail alongside the text. */
[data-slot="ds-resume"] {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

[data-slot="ds-resume-cover"] {
  display: block;
  overflow: hidden;
  border: 1px solid var(--hairline);
}

[data-slot="ds-resume-text"] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

@media (max-width: 640px) {
  [data-slot="ds-resume"] {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   R13 — Admin page. Course rows with editable controls; 403 state.
   -------------------------------------------------------------------------- */
[data-slot="ds-admin-list"] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

[data-slot="ds-admin-course"] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
}

[data-slot="ds-admin-course-head"] {
  display: grid;
  grid-template-columns: minmax(0, 10rem) 1fr;
  gap: 1rem;
  align-items: center;
}

[data-slot="ds-admin-cover"] {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--hairline);
  background: var(--paper);
}

[data-slot="ds-admin-course-id"] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

[data-slot="ds-admin-cat"] {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-admin-title"] {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

[data-slot="ds-admin-meta-line"] {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-mute);
}

[data-slot="ds-admin-controls"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
}

[data-slot="ds-admin-form"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper) 60%, var(--paper-2));
}

[data-slot="ds-admin-field"] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

[data-slot="ds-admin-label"] {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

[data-slot="ds-admin-banner"] {
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

[data-slot="ds-admin-banner"].ds-admin-banner-ok {
  border-color: color-mix(in srgb, var(--signal-grass) 45%, var(--hairline));
  background: color-mix(in srgb, var(--signal-grass-bg) 60%, var(--paper-2));
  color: color-mix(in srgb, var(--signal-grass) 70%, var(--ink));
}

[data-slot="ds-admin-banner"].ds-admin-banner-err {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, var(--paper-2));
  color: var(--baobab);
}

[data-slot="ds-admin-403"] {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 34rem;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--hairline);
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
}

[data-slot="ds-admin-403-kicker"] {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--baobab);
}

@media (max-width: 560px) {
  [data-slot="ds-admin-course-head"] {
    grid-template-columns: 1fr;
  }
}

/* === LMS v2 P4 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 4 (home UX polish) central design-system additions.
   Authored by the learning remote; batched by the orchestrator into the shell's
   public/_design-system/components.css. Tokens ONLY — no hardcoded hex; all
   translucency via color-mix() over the central tokens.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Scope: P4 redesigns "Required for you" from an oversized cover hero into a
   COMPACT horizontal alert list (thumb · title + badge + due + ~min · CTA).
   The data-slot values carry state suffixes (e.g. "ds-required-row is-overdue"),
   so selectors use the whitespace-token match [data-slot~="…"].
   ========================================================================== */

/* --------------------------------------------------------------------------
   R12 (P4) — Required for you as a compact alert list. Each item is a tight
   horizontal row: small cover thumbnail (left) → title + Mandatory + due + ~min
   (centre, grows) → Continue/Start primary button (right). Rows stack.
   -------------------------------------------------------------------------- */
[data-slot~="ds-required-list"] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

[data-slot~="ds-required-row"] {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot~="ds-required-row"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 45%, var(--paper-2));
}

/* Due-state left rail — overdue (baobab) and due-soon (amber) only. */
[data-slot~="ds-required-row"][data-slot~="is-overdue"] {
  border-left: 3px solid var(--baobab);
}

[data-slot~="ds-required-row"][data-slot~="is-soon"] {
  border-left: 3px solid var(--signal-amber);
}

/* Small fixed-ratio cover thumbnail on the left. */
[data-slot~="ds-required-thumb"] {
  display: block;
  width: 140px;
  overflow: hidden;
  border: 1px solid var(--hairline);
}

[data-slot~="ds-required-thumb"] [data-slot="ds-cover"] {
  border-bottom: none;
}

[data-slot~="ds-required-body"] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

[data-slot~="ds-required-meta"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

[data-slot~="ds-required-cat"] {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot~="ds-required-flag"] {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--baobab);
  padding: 0.08rem 0.36rem;
  border: 1px solid color-mix(in srgb, var(--baobab) 40%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, transparent);
}

[data-slot~="ds-required-name"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-slot~="ds-required-facts"] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

[data-slot~="ds-required-due"] {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

[data-slot~="ds-required-due"][data-slot~="is-overdue"] {
  color: var(--baobab);
  font-weight: 600;
}

[data-slot~="ds-required-due"][data-slot~="is-soon"] {
  color: color-mix(in srgb, var(--signal-amber) 80%, var(--ink));
  font-weight: 600;
}

/* Continue/Start primary button on the right of each row. */
[data-slot~="ds-required-cta"] {
  flex: 0 0 auto;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 0.55rem 0.95rem;
  white-space: nowrap;
  transition: background 120ms ease;
}

[data-slot~="ds-required-row"]:hover [data-slot~="ds-required-cta"] {
  background: var(--baobab);
}

/* Mobile: drop the CTA onto its own line, keep thumb + text side by side. */
@media (max-width: 560px) {
  [data-slot~="ds-required-row"] {
    grid-template-columns: 96px 1fr;
    grid-template-areas:
      "thumb body"
      "cta   cta";
    row-gap: 0.6rem;
  }
  [data-slot~="ds-required-thumb"] {
    grid-area: thumb;
    width: 96px;
  }
  [data-slot~="ds-required-body"] {
    grid-area: body;
  }
  [data-slot~="ds-required-cta"] {
    grid-area: cta;
    justify-self: stretch;
    text-align: center;
  }
}

/* === LMS v2 P5 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 5 (navigation + button + usability pass) central
   design-system additions. Authored by the learning remote; batched by the
   orchestrator into the shell's public/_design-system/components.css.

   Tokens ONLY — NO hardcoded hex, NO new colours, NO new fonts. All translucency
   via color-mix() over the EXISTING central tokens. This is a USABILITY pass
   inside the existing "Editorial Letterbox" aesthetic — it does NOT change the
   colour scheme, fonts, covers, sections, or the concept of the app.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Fixes (all external-UX-critique validated, navigation/buttons/usability only):
   1. STEP-COUNT — markup-only (route.ts). No CSS here.
   2. BUTTON CLUTTER / HIERARCHY in the dark course/activity header:
      - breadcrumb trail (Learning / <course> / <step>) at top-left,
      - progress rendered as a plain label/meter (NOT a bordered pill),
      - Next is the single filled PRIMARY, Prev a quiet ghost secondary.
   3. ONE obvious next action on the home, reachable on mobile (390px).
   4. MOBILE TAP TARGETS — all nav/action buttons >=44px tall, single line.
   5. COWORK pill overlap — reserve bottom/right gutter on the LMS surfaces so
      the floating "Ask Cowork" launcher never covers actions or text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   #2 — Dark header breadcrumb trail. "All courses" and "Course overview" were
   competing bordered buttons; they are NAV LEVELS, not actions, so they become
   a quiet breadcrumb in the headline (top-left). Inherits the dark-header
   --paper text already set on [data-slot="ds-modal-header"].
   -------------------------------------------------------------------------- */
[data-slot="ds-modal-crumbs"] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  min-width: 0;
}

[data-slot="ds-modal-crumbs"] [data-slot="ds-modal-crumb"] {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  text-decoration: none;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-slot="ds-modal-crumbs"] [data-slot="ds-modal-crumb"]:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-slot="ds-crumb-sep"] {
  color: color-mix(in srgb, var(--paper) 40%, transparent);
}

[data-slot="ds-crumb-current"] {
  color: color-mix(in srgb, var(--paper) 92%, transparent);
  font-weight: 700;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* #2 — Progress as a PLAIN label, not a bordered button-looking pill. No border,
   no fill box — just a quiet mono reading on the dark bar, set apart from the
   action buttons by spacing. */
[data-slot="ds-modal-progress"] {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  white-space: nowrap;
  padding-right: 6px;
  border: 0;
  background: none;
}

/* #2 + #4 — Header action buttons: Next is the single filled PRIMARY, Prev the
   quiet ghost. Give both a comfortable >=44px tap target while keeping the
   compact letterbox look. Header buttons stay on a single line. */
[data-slot="ds-modal-header"] [data-slot~="ds-button"] {
  min-height: 40px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   #4 — MOBILE TAP TARGETS. On touch-width screens every nav/action button must
   be >=44px tall, single-line, and not clustered so tightly that they are easy
   to mis-tap. Applies to the dark header actions, the in-content pager, the
   spine "go" actions, and the home CTAs.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Header actions: full comfortable height, sensible spacing, Next stays
     dominant. They wrap onto their own row (shell already sets flex-wrap). */
  [data-slot="ds-modal-header"] [data-slot="ds-actions"] {
    gap: 10px;
    row-gap: 10px;
    width: 100%;
  }
  [data-slot="ds-modal-header"] [data-slot~="ds-button"] {
    min-height: 44px;
    flex: 1 1 auto;
  }
  /* The plain progress label drops above the buttons, not squeezed between them. */
  [data-slot="ds-modal-progress"] {
    flex: 1 0 100%;
    padding-right: 0;
  }

  /* In-content pager links: comfortable tap height, already stack at <=560px. */
  [data-slot="ds-pager-link"] {
    min-height: 44px;
  }

  /* Spine actions: the per-step "go" chip becomes a real, reachable button on
     mobile (the shell already reveals it at <=560px; here we give it height). */
  [data-slot="ds-spine-go"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  [data-slot="ds-spine-go"].is-primary {
    min-height: 44px;
    padding: 0 16px;
  }
}

/* --------------------------------------------------------------------------
   #3 — ONE obvious next action on the home, reachable on mobile. The compact
   required row and the resume hero each carry a single dominant primary button.
   Give those CTAs a >=44px tap target and, on mobile, keep them on their own
   full-width line below the card text (never hidden beside / under the cover).
   -------------------------------------------------------------------------- */
[data-slot~="ds-required-cta"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-slot="ds-resume-cta"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  /* Resume hero: cover sits on top, then text, then a full-width primary CTA so
     the action is visible without horizontal scroll and is not hidden below the
     image. (The shell already collapses to a single column; we make the CTA
     full-bleed and unmistakably the primary action.) */
  [data-slot="ds-resume-cta"] {
    justify-self: stretch;
    width: 100%;
    text-align: center;
  }
  /* Required row: the Continue/Start button spans full width on its own line
     (the shell sets grid-area:cta at <=560px; reinforce stretch up to 640px). */
  [data-slot~="ds-required-cta"] {
    justify-self: stretch;
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   #5 — COWORK pill overlap. The floating "Ask Cowork" launcher is pinned to the
   bottom-right of the viewport (~54px pill + 14px inset). Reserve a bottom (and
   a little right) gutter on the LMS surfaces so the launcher never sits over the
   primary action or body text. Token-free spacing only; no colours touched.

   --mmd-cowork-gutter: the clearance below the fold the launcher needs.
   -------------------------------------------------------------------------- */
[data-slot="ds-modal"],
.ds-learning-page {
  --mmd-cowork-gutter: 92px;
}

/* Course / activity surface: the scrolling body's inner shell reserves the
   gutter so the in-content pager, Next button, assignment form, and end-page
   CTA all clear the launcher. */
[data-slot="ds-modal-body"] [data-slot="ds-course-shell"] {
  padding-bottom: var(--mmd-cowork-gutter);
}

/* Home surface: reserve the same clearance below the last section so the
   catalogue's final card / CTA is never covered. */
.ds-learning-page {
  padding-bottom: var(--mmd-cowork-gutter);
}

/* On narrow screens the launcher is a touch larger relative to the viewport and
   actions go full-width; give a little more breathing room. */
@media (max-width: 640px) {
  [data-slot="ds-modal"],
  .ds-learning-page {
    --mmd-cowork-gutter: 104px;
  }
}

/* === LMS v2 P6 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 6 (navigation de-clutter + top step-progress nav) central
   design-system additions. Authored by the learning remote; batched by the
   orchestrator into the shell's public/_design-system/components.css.

   Tokens ONLY — NO hardcoded hex, NO new colours, NO new fonts. All translucency
   via color-mix() over the EXISTING central tokens. This is a NAVIGATION /
   USABILITY pass inside the existing "Editorial Letterbox" aesthetic — it does
   NOT change the colour scheme, fonts, covers, sections, or the app concept.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Stakeholder fixes (navigation/usability only):
   - Problem 2: a compact horizontal STEP-PROGRESS NAV at the TOP (under the dark
     header, inside ds-modal) on the in-activity / in-check views. Lists every
     step (content activities + terminal Knowledge check) as small clickable dots,
     marks done / current / to-do reusing the spine node language (filled ink disc
     = done, baobab ring = current, hollow = todo), includes a "Course overview"
     link, lets the learner jump to any chapter, and scrolls / wraps on mobile.
   - Problems 1 & 4: handled in route.ts markup (removed duplicate nav buttons);
     no CSS needed here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Problem 2 — top step-progress nav. It sits between the dark ds-modal-header
   and the ds-modal-body, on the light --paper surface. A "Course overview" link
   on the left, then a horizontally scrollable track of numbered step dots.
   -------------------------------------------------------------------------- */
[data-slot="ds-stepper"] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}

/* "Course overview" — a quiet mono nav link (not a button), set apart on the
   left so the user can always jump back to the spine. */
[data-slot="ds-stepper-overview"] {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 10px 6px 0;
  border-right: 1px solid var(--hairline);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
[data-slot="ds-stepper-overview"]:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* === Directory org chart (vertical tree) — central DS-owned. Search-and-expand
   hierarchy that replaces the old directory table. Indentation comes purely from
   nested <ul> nesting (no inline styles). === */
.directory-head{padding:30px 0 18px;border-bottom:1px solid var(--hairline)}
.directory-head h1{margin:10px 0 0;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-0.02em;color:var(--ink)}
.directory-intro{max-width:70ch;margin:14px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.6;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.directory-source{flex:none}
.directory-orgchart{display:grid;gap:16px;min-width:0}
.directory-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:12px}
.directory-toolbar .ds-field{min-width:180px}
.directory-tree{list-style:none;margin:0;padding:0;display:grid;gap:2px;min-width:0}
.directory-tree-root{margin-top:2px}
.directory-tree .directory-tree{margin:2px 0 2px 17px;padding-left:15px;border-left:1px solid var(--hairline)}
.directory-tree-item{margin:0;min-width:0}
.directory-node{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 8px;border:1px solid transparent;border-radius:4px;min-width:0}
.directory-node:hover{background:var(--paper)}
.directory-node.active{background:var(--paper);border-color:var(--ink)}
.directory-node-me{box-shadow:inset 3px 0 0 var(--baobab)}
.directory-node-match{background:var(--baobab-bg)}
.directory-node-toggle{width:24px;height:24px;display:inline-grid;place-items:center;border:1px solid var(--hairline);background:var(--paper);color:var(--ink-mute);cursor:pointer;border-radius:4px;font-family:var(--font-mono);font-size:13px;line-height:1;padding:0}
.directory-node-toggle:hover{color:var(--baobab);border-color:var(--baobab)}
.directory-node-spacer{display:inline-block;width:24px;height:24px}
.directory-node-main{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;min-width:0;padding:0;font:inherit}
.directory-node-text{display:grid;gap:1px;min-width:0}
.directory-node-name{font-family:var(--font-ui);font-weight:700;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.directory-node-meta{font-size:12px;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.directory-node-reports{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;padding-left:8px}
.directory-me-link{border:0;background:transparent;cursor:pointer;font:inherit}
.directory-me-link:disabled{cursor:default;opacity:0.6}
@media (max-width:820px){.directory-node-reports{display:none}.directory-tree .directory-tree{margin-left:12px;padding-left:11px}}

/* ============================================================================
   MMD LEARNING (LMS) design-system block — restored to source so every shell
   build carries it (previously lived only in ad-hoc build artifacts, which is
   why the learning page kept rendering unstyled after shell rebuilds).
   ============================================================================ */
/* ============================================================================
   MMD LEARNING (LMS) — premium redesign block. Editorial Industrial Letterbox.
   Self-contained: targets the learning remote's data-slots + classes. Tokens
   only (no new fonts/colors). Authored 2026-06-21 from a 3-critic synthesis.
   ============================================================================ */

/* --- Home page shell ------------------------------------------------------- */
.mmd-course-content,
.ds-learning-page { color: var(--ink); }
.ds-learning-page { max-width: 1180px; margin: 0 auto; padding: 34px 0 64px; }
.ds-learning-heading { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 4.6vw, 62px); line-height: 0.98; letter-spacing: -0.02em; }
.ds-learning-heading a { color: inherit; text-decoration: none; }
.ds-learning-heading em { color: var(--baobab); font-style: italic; }
.ds-learning-page .lede { max-width: 64ch; margin: 16px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.62; font-style: normal; }
.ds-empty-row { padding: 22px; border: 1px solid var(--hairline); color: var(--ink-mute); font-size: 14px; background: var(--paper); }

/* --- Resume hero card ------------------------------------------------------ */
[data-slot="ds-resume"] {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 28px;
  margin: 26px 0 30px; padding: 22px 26px; background: var(--paper);
  border: 1px solid var(--hairline); border-left: 3px solid var(--baobab);
  text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease;
}
[data-slot="ds-resume"]:hover { border-color: var(--ink); transform: translateY(-1px); }
[data-slot="ds-resume-eyebrow"] { grid-column: 1; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot="ds-resume-title"] { grid-column: 1; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.08; margin-top: 3px; }
[data-slot="ds-resume-meta"] { grid-column: 1; font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
[data-slot="ds-resume-meter"] { grid-column: 1; display: block; margin-top: 12px; max-width: 360px; }
[data-slot="ds-resume-cta"] { grid-column: 2; grid-row: 1 / span 4; align-self: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 12px 20px; white-space: nowrap; transition: background .15s ease; }
[data-slot="ds-resume"]:hover [data-slot="ds-resume-cta"] { background: var(--baobab); }

/* --- Filter chips ---------------------------------------------------------- */
.ds-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.ds-filter-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); background: transparent; border: 1px solid var(--hairline); padding: 7px 13px; text-decoration: none; transition: all .12s ease; }
.ds-filter-chip:hover { color: var(--ink); border-color: var(--ink-mute); }
.ds-filter-chip-active { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* --- Section header (catalogue) ------------------------------------------- */
.ds-table-section { margin-top: 6px; }
.ds-table-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.eyebrow, [data-slot="course-kicker"] { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: block; }
.ds-table-title, [data-slot="ds-table-title"] { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2vw, 24px); line-height: 1.1; margin: 3px 0 0; }

/* --- Catalogue: course cards (was a table) -------------------------------- */
[data-slot="ds-course-grid"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
[data-slot~="ds-course-card"] {
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 148px;
  padding: 20px 22px; background: var(--paper); border: 1px solid var(--hairline);
  text-decoration: none; color: var(--ink); position: relative; transition: border-color .15s ease, transform .15s ease;
}
[data-slot~="ds-course-card"]::after { content: "→"; position: absolute; right: 20px; bottom: 18px; font-size: 15px; color: var(--ink-faint); opacity: 0; transform: translateX(-4px); transition: all .15s ease; }
[data-slot~="ds-course-card"]:hover { border-color: var(--ink); transform: translateY(-2px); }
[data-slot~="ds-course-card"]:hover::after { opacity: 1; transform: translateX(0); color: var(--baobab); }
[data-slot~="is-progress"] { border-left: 3px solid var(--ink); }
[data-slot~="is-complete"] { border-left: 3px solid var(--baobab); }
[data-slot="ds-course-cat"] { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot="ds-course-name"] { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.14; align-self: start; }
[data-slot="ds-course-foot"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-slot="ds-course-go"] { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot~="ds-course-card"]:hover [data-slot="ds-course-go"] { color: var(--ink); }
[data-slot="ds-course-fresh"] { font-size: 12.5px; color: var(--ink-faint); }
[data-slot="ds-course-stamp"] { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--baobab); }

/* --- Meter (proportional hairline) ---------------------------------------- */
[data-slot="ds-meter"] { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
[data-slot="ds-meter-track"] { position: relative; flex: 1 1 auto; min-width: 70px; height: 6px; background: var(--paper-2); border: 1px solid var(--hairline); overflow: hidden; }
[data-slot="ds-meter-fill"] { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--ink); width: 0; }
[data-slot="ds-meter-fill"][data-pct="0"] { width: 0; }
[data-slot="ds-meter-label"] { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-mute); white-space: nowrap; }

/* Proportional fill width keyed on data-pct (markup buckets to nearest 5).
   No inline styles — these live in the central DS. Applies to any *-fill. */
[data-pct="0"]{width:0}
[data-pct="5"]{width:5%}   [data-pct="10"]{width:10%} [data-pct="15"]{width:15%}
[data-pct="20"]{width:20%} [data-pct="25"]{width:25%} [data-pct="30"]{width:30%}
[data-pct="35"]{width:35%} [data-pct="40"]{width:40%} [data-pct="45"]{width:45%}
[data-pct="50"]{width:50%} [data-pct="55"]{width:55%} [data-pct="60"]{width:60%}
[data-pct="65"]{width:65%} [data-pct="70"]{width:70%} [data-pct="75"]{width:75%}
[data-pct="80"]{width:80%} [data-pct="85"]{width:85%} [data-pct="90"]{width:90%}
[data-pct="95"]{width:95%} [data-pct="100"]{width:100%}

/* ============================================================================
   COURSE + ACTIVITY — dark letterbox frame + body
   ============================================================================ */
[data-slot="ds-modal"] { display: flex; flex-direction: column; min-height: 100dvh; background: var(--paper); }
[data-slot="ds-modal-header"] {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 30px; background: var(--ink); color: var(--paper);
}
[data-slot="ds-modal-headline"] { min-width: 0; }
[data-slot="ds-modal-header"] [data-slot="course-kicker"] { color: color-mix(in srgb, var(--paper) 55%, transparent); }
[data-slot="ds-modal-crumb"] { color: color-mix(in srgb, var(--paper) 80%, transparent); text-decoration: none; }
[data-slot="ds-modal-crumb"]:hover { color: var(--paper); text-decoration: underline; }
[data-slot="ds-modal-header"] [data-slot="ds-table-title"] { color: var(--paper); font-size: clamp(15px, 1.6vw, 19px); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; }
[data-slot="ds-modal-header"] [data-slot="ds-actions"] { display: flex; align-items: center; gap: 8px; flex: none; }
[data-slot="ds-modal-body"] { flex: 1 1 auto; padding: 30px; }
[data-slot="ds-course-shell"] { max-width: 940px; margin: 0 auto; }

/* progress rule on course overview */
[data-slot="ds-progress"] { max-width: 520px; margin: 4px 0 20px; }
[data-slot="ds-progress-head"] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
[data-slot="ds-progress-goal"] { font-size: 13px; color: var(--ink-soft); }
[data-slot="ds-progress-label"] { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute); }
[data-slot="ds-progress-track"] { position: relative; height: 7px; background: var(--paper-2); border: 1px solid var(--hairline); overflow: hidden; }
[data-slot="ds-progress-fill"] { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--ink); width: 0; }

/* ============================================================================
   COURSE SPINE — vertical timeline (was a table)
   ============================================================================ */
[data-slot="ds-spine"] { list-style: none; margin: 22px 0 0; padding: 0; position: relative; }
[data-slot="ds-spine"]::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: var(--hairline); }
[data-slot~="ds-spine-step"] { position: relative; }
[data-slot="ds-spine-main"] {
  display: grid; grid-template-columns: 16px 40px 1fr auto; align-items: center; column-gap: 16px;
  padding: 15px 14px 15px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink);
  transition: background .12s ease;
}
[data-slot="ds-spine-main"]:hover { background: var(--paper); }
[data-slot="ds-spine-node"] { grid-column: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--ink-faint); box-shadow: 0 0 0 4px var(--paper); z-index: 1; }
[data-slot~="is-done"] [data-slot="ds-spine-node"] { background: var(--ink); border-color: var(--ink); }
[data-slot~="is-next"] [data-slot="ds-spine-node"] { background: var(--paper); border: 2px solid var(--baobab); }
[data-slot="ds-spine-num"] { grid-column: 2; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink-faint); line-height: 1; text-align: center; }
[data-slot~="is-next"] [data-slot="ds-spine-num"] { color: var(--ink); }
[data-slot~="is-done"] [data-slot="ds-spine-num"] { color: var(--ink-mute); }
[data-slot="ds-spine-text"] { grid-column: 3; min-width: 0; display: grid; gap: 2px; }
[data-slot="ds-spine-title"] { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.18; color: var(--ink); }
[data-slot="ds-spine-sum"] { font-size: 13px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-slot="ds-spine-meta"] { grid-column: 4; display: flex; align-items: center; gap: 14px; flex: none; }
[data-slot~="ds-spine-state"] { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
[data-slot="ds-spine-next"] { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--baobab); }
[data-slot="ds-spine-go"] { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); opacity: 0; transition: opacity .12s ease; white-space: nowrap; }
[data-slot="ds-spine-main"]:hover [data-slot="ds-spine-go"] { opacity: 1; color: var(--ink); }
[data-slot="ds-spine-go"].is-primary { opacity: 1; color: var(--paper); background: var(--ink); padding: 8px 14px; }
[data-slot="ds-spine-main"]:hover [data-slot="ds-spine-go"].is-primary { background: var(--baobab); color: var(--paper); }

/* ============================================================================
   ACTIVITY / LESSON — de-boxed editorial article
   ============================================================================ */
[data-slot="ds-activity"] { max-width: 720px; margin: 0 auto; }
[data-slot="ds-activity"] [data-slot="ds-table-header"] { display: block; margin-bottom: 6px; }
[data-slot="ds-activity-status"] { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border: 1px solid var(--hairline); color: var(--ink-mute); }
[data-slot~="ds-activity-status-quiz"] { color: var(--baobab); border-color: var(--baobab); background: var(--baobab-bg); }
[data-slot~="ds-activity-status-done"] { color: var(--ink); border-color: var(--ink); }
[data-slot="ds-activity-content"] { margin-top: 22px; font-size: 16px; line-height: 1.66; color: var(--ink-soft); border-top: 2px solid var(--baobab); padding-top: 22px; }
[data-slot="ds-activity-content"] > *:first-child { margin-top: 0; }
[data-slot="ds-activity-content"] p { margin: 0 0 16px; max-width: 64ch; }
[data-slot="ds-activity-content"] h2, [data-slot="ds-activity-content"] h3, [data-slot="ds-activity-content"] h4 { font-family: var(--font-display); font-weight: 500; color: var(--ink); line-height: 1.2; margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--hairline); }
[data-slot="ds-activity-content"] ul, [data-slot="ds-activity-content"] ol { margin: 0 0 16px; padding-left: 4px; list-style: none; }
[data-slot="ds-activity-content"] li { position: relative; padding-left: 20px; margin: 0 0 9px; max-width: 62ch; }
[data-slot="ds-activity-content"] li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; background: var(--baobab); }
[data-slot="ds-activity-content"] strong, [data-slot="ds-activity-content"] b { color: var(--ink); font-weight: 600; }
[data-slot="ds-activity-content"] blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 2px solid var(--hairline); color: var(--ink-mute); font-style: italic; }
[data-slot="ds-figure"] { margin: 22px 0; padding: 22px; border: 1px solid var(--hairline); background: var(--paper); text-align: center; }
[data-slot="ds-figure"] svg { max-width: 100%; height: auto; }

/* activity banners */
[data-slot~="ds-activity-banner"] { margin: 18px 0; padding: 13px 16px; font-size: 14px; border: 1px solid var(--hairline); }
[data-slot~="ds-activity-banner-pass"] { border-left: 3px solid var(--baobab); color: var(--ink); background: var(--paper); }
[data-slot~="ds-activity-banner-fail"] { border-left: 3px solid var(--signal-amber); color: var(--ink); background: var(--signal-amber-bg); }

/* ============================================================================
   KNOWLEDGE CHECK — hard dark section break (cinema bar feel)
   ============================================================================ */
.ds-quiz-form, [data-slot="ds-quiz"] { margin-top: 30px; }
[data-slot="ds-quiz-intro"] { background: var(--ink); color: var(--paper); padding: 20px 24px; margin: 0 0 4px; }
[data-slot="ds-quiz-intro-label"] { font-family: var(--font-display); font-style: italic; font-size: 22px; display: block; }
[data-slot="ds-quiz-intro"] p { margin: 6px 0 0; font-size: 13.5px; color: color-mix(in srgb, var(--paper) 75%, transparent); }
[data-slot="ds-quiz-question"] { border: 0; border-bottom: 1px solid var(--hairline); margin: 0; padding: 20px 0; }
[data-slot="ds-quiz-legend"] { font-family: var(--font-display); font-weight: 500; font-size: 17px; padding: 0; margin-bottom: 12px; }
[data-slot="ds-quiz-option"] { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid var(--hairline); margin: 0 0 8px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
[data-slot="ds-quiz-option"]:hover { border-color: var(--ink-mute); background: var(--paper); }
[data-slot="ds-quiz-option"]:has(.ds-choice:checked) { border-color: var(--baobab); box-shadow: inset 3px 0 0 var(--baobab); }
.ds-choice { accent-color: var(--baobab); width: 16px; height: 16px; flex: none; }
[data-slot="ds-quiz-option-text"] { font-size: 14.5px; color: var(--ink); }

/* ============================================================================
   ASSIGNMENT
   ============================================================================ */
.ds-assignment-form, [data-slot="ds-assignment"] { display: grid; gap: 10px; margin-top: 22px; }
[data-slot="ds-assignment-saved"] { padding: 16px 18px; background: var(--paper); border: 1px solid var(--hairline); border-left: 3px solid var(--baobab); margin-top: 18px; }
[data-slot="ds-assignment-saved"] blockquote { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.ds-textarea { width: 100%; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.55; padding: 13px 15px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); resize: vertical; }
.ds-textarea:focus { outline: none; border-color: var(--ink); }
.ds-field-hidden { display: none; }

/* ============================================================================
   COMPLETION MOMENT — the reward
   ============================================================================ */
[data-slot="ds-complete"] { margin-top: 30px; padding: 34px 30px; background: var(--ink); color: var(--paper); text-align: center; display: grid; justify-items: center; gap: 8px; }
[data-slot="ds-complete-tick"] { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--baobab); color: var(--paper); font-size: 22px; line-height: 1; }
[data-slot="ds-complete-head"] { font-family: var(--font-display); font-style: italic; font-size: 30px; line-height: 1.05; margin-top: 6px; }
[data-slot="ds-complete-sub"] { font-size: 13.5px; color: color-mix(in srgb, var(--paper) 72%, transparent); }
[data-slot="ds-complete"] [data-slot="ds-actions"] { margin-top: 16px; }

/* ============================================================================
   BUTTONS + actions (data-slot AND class forms) + tags
   ============================================================================ */
[data-slot="ds-actions"] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.ds-button, [data-slot~="ds-button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 11px 18px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  text-decoration: none; cursor: pointer; transition: all .14s ease;
}
.ds-button:hover, [data-slot~="ds-button"]:hover { background: var(--paper-2); }
.ds-button-primary, [data-slot~="ds-button-primary"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ds-button-primary:hover, [data-slot~="ds-button-primary"]:hover { background: var(--baobab); border-color: var(--baobab); }
.ds-button-secondary, [data-slot~="ds-button-secondary"], [data-slot~="ds-button-on-light"] { background: transparent; color: var(--ink); border-color: var(--hairline); }
.ds-button-secondary:hover, [data-slot~="ds-button-secondary"]:hover { border-color: var(--ink); background: transparent; }
[data-slot~="ds-button-on-dark-ghost"] { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 35%, transparent); }
[data-slot~="ds-button-on-dark-ghost"]:hover { border-color: var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent); }
[data-slot~="ds-button-on-dark-primary"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
[data-slot~="ds-button-on-dark-primary"]:hover { background: var(--baobab); color: var(--paper); border-color: var(--baobab); }
[data-slot="ds-tag"] { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); padding: 5px 10px; }
[data-slot="ds-records-sub"] { font-size: 13px; color: var(--ink-mute); }

/* embedded raw runtime frame (fallback only) */
[data-slot="ds-embed-frame"][hidden] { display: none; }
[data-slot="ds-embed-frame"] { margin-top: 18px; }

/* generated fallback course body */
[data-slot="course-body"] { max-width: 820px; margin: 0 auto; }
[data-slot="course-title"] { font-family: var(--font-display); font-weight: 500; font-size: 30px; margin: 4px 0 8px; }
[data-slot="course-summary"] { color: var(--ink-soft); font-size: 15px; margin: 0 0 20px; }
[data-slot="ds-records-compact"] { display: grid; gap: 8px; }

/* ============================================================================
   RESPONSIVE — stacked, thumb-first
   ============================================================================ */
@media (max-width: 860px) {
  [data-slot="ds-course-grid"] { grid-template-columns: minmax(0, 1fr); }
  [data-slot="ds-resume"] { grid-template-columns: minmax(0,1fr); }
  [data-slot="ds-resume-cta"] { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
  [data-slot="ds-modal-header"] { flex-wrap: wrap; padding: 12px 18px; gap: 10px; }
  [data-slot="ds-modal-header"] [data-slot="ds-table-title"] { max-width: 100%; white-space: normal; }
  [data-slot="ds-modal-body"] { padding: 20px 16px; }
  [data-slot="ds-spine-main"] { grid-template-columns: 16px 1fr; grid-template-areas: "node text" "node meta"; row-gap: 8px; column-gap: 12px; }
  [data-slot="ds-spine-num"] { display: none; }
  [data-slot="ds-spine-text"] { grid-area: text; }
  [data-slot="ds-spine-sum"] { white-space: normal; }
  [data-slot="ds-spine-meta"] { grid-area: meta; justify-content: flex-start; }
  [data-slot="ds-spine-go"] { opacity: 1; }
  [data-slot="ds-activity-content"] p, [data-slot="ds-activity-content"] li { max-width: none; }
}
/* ===== end LMS redesign block ===== */
.ds-tag-open{color:var(--ink);border-color:var(--ink)}
.ds-tag-progress{color:var(--ink);border-color:var(--ink-mute)}
.ds-tag-waiting{color:var(--ink-mute);border-color:var(--ink-mute)}
.ds-tag-resolved{color:var(--ink-mute);border-color:var(--hairline)}
.ds-tag-closed{color:var(--ink-faint);border-color:var(--hairline)}
.ds-tag-error{color:var(--baobab);border-color:var(--baobab)}

/* === LMS v2 P2 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 2 (consumers) central design-system additions.
   Authored by the learning remote; batched by the orchestrator into the shell's
   public/_design-system/components.css. Tokens ONLY — no hardcoded hex; all
   translucency via color-mix() over the central tokens.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Covers: R1 (course scroll), R2 (in-content pager), R6 (end page + cert CTA),
   R7 (home trophies).
   ========================================================================== */

/* --------------------------------------------------------------------------
   R1 — Course content must scroll (TC1.*)
   The course modal is a BOUNDED viewport box (height, not min-height) so its
   body can own the overflow; the header stays sticky at the top of that box.
   -------------------------------------------------------------------------- */
[data-slot="ds-modal"] {
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-slot="ds-modal-header"] {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
}

[data-slot="ds-modal-body"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   R2 — In-content navigation pager (TC2.*)
   A bottom prev/next pager rendered inside the activity, in addition to the
   sticky header prev/next. Real DB-ordered hrefs; first activity has no prev,
   the last content activity's next is the terminal knowledge check.
   -------------------------------------------------------------------------- */
[data-slot="ds-pager"] {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}

[data-slot="ds-pager-link"] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 0;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-2);
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot="ds-pager-link"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, var(--paper-2));
}

[data-slot="ds-pager-link"][data-dir="next"] {
  text-align: right;
  align-items: flex-end;
}

[data-slot="ds-pager-dir"] {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-pager-title"] {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* A disabled/absent slot (first activity has no prev) keeps the layout balanced. */
[data-slot="ds-pager-spacer"] {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 560px) {
  [data-slot="ds-pager"] {
    flex-direction: column;
  }
  [data-slot="ds-pager-link"][data-dir="next"] {
    text-align: left;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   R6 — End-of-course page + certificate (TC6.*)
   Shown only when isCourseComplete. Trophy mark, "Course complete", and the
   "Download certificate (PDF)" action.
   -------------------------------------------------------------------------- */
[data-slot="ds-end"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  max-width: 38rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

[data-slot="ds-end-trophy"] {
  width: 96px;
  height: 96px;
  display: block;
  color: var(--baobab);
}

[data-slot="ds-end-kicker"] {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--baobab);
}

[data-slot="ds-end-title"] {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

[data-slot="ds-end-sub"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 30rem;
}

[data-slot="ds-end-course"] {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

[data-slot="ds-end"] [data-slot="ds-actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   R7 — Trophies on the home page (TC7.*)
   One trophy per completed course; empty state when none.
   -------------------------------------------------------------------------- */
[data-slot="ds-trophies"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

[data-slot="ds-trophy"] {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot="ds-trophy"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 55%, var(--paper-2));
}

[data-slot="ds-trophy-emblem"] {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: block;
  color: var(--baobab);
}

[data-slot="ds-trophy-text"] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

[data-slot="ds-trophy-cat"] {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-trophy-name"] {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-slot="ds-trophy-empty"] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px dashed var(--hairline);
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  color: var(--ink-mute);
  font-family: var(--font-ui);
  font-size: 0.95rem;
}

/* === LMS v2 P3 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 3 (catalogue + admin) central design-system additions.
   Authored by the learning remote; batched by the orchestrator into the shell's
   public/_design-system/components.css. Tokens ONLY — no hardcoded hex; all
   translucency via color-mix() over the central tokens.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Covers: R9 (~N min estimate), R10 (categories + grouped catalogue),
   R11 (featured strip), R12 (required-for-you), R13 (admin page), R14 (covers).
   ========================================================================== */

/* --------------------------------------------------------------------------
   R14 — Course covers. A 1200x630 image (overviewfiles photo or generated
   Letterbox SVG) sat above the card body. object-fit:cover keeps the ratio.
   -------------------------------------------------------------------------- */
[data-slot="ds-cover"] {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  height: auto;
  object-fit: cover;
  background: var(--paper-2);
  border-bottom: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   R9 — "~N min" time-estimate badge.
   -------------------------------------------------------------------------- */
[data-slot="ds-est"] {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Course card with a cover (extends the P2 ds-course-card). The card becomes a
   vertical stack: cover on top, body (category + est, name, footer) below.
   -------------------------------------------------------------------------- */
[data-slot="ds-course-card"] {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

[data-slot="ds-course-cover"] {
  display: block;
}

[data-slot="ds-course-body"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.95rem 1rem 1rem;
  flex: 1 1 auto;
}

[data-slot="ds-course-meta"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   R12 — Required for you. Top-of-page section; cards carry due-state styling.
   -------------------------------------------------------------------------- */
[data-slot="ds-required-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

[data-slot="ds-required-card"] {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot="ds-required-card"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 55%, var(--paper-2));
}

[data-slot="ds-required-card"].is-overdue {
  border-left: 3px solid var(--baobab);
}

[data-slot="ds-required-card"].is-soon {
  border-left: 3px solid var(--signal-amber);
}

[data-slot="ds-required-cover"] {
  display: block;
}

[data-slot="ds-required-body"] {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem 1rem 1rem;
}

[data-slot="ds-required-meta"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

[data-slot="ds-required-cat"] {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-required-flag"] {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--baobab);
  padding: 0.1rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--baobab) 40%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, transparent);
}

[data-slot="ds-required-name"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

[data-slot="ds-required-due"] {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

[data-slot="ds-required-due"].is-overdue {
  color: var(--baobab);
  font-weight: 600;
}

[data-slot="ds-required-due"].is-soon {
  color: color-mix(in srgb, var(--signal-amber) 80%, var(--ink));
  font-weight: 600;
}

[data-slot="ds-required-est"] {
  margin-top: 0.1rem;
}

/* --------------------------------------------------------------------------
   R11 — Featured strip. A grid of cover cards above the catalogue.
   -------------------------------------------------------------------------- */
[data-slot="ds-featured-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   R10 — Catalogue grouped by real category, with per-category headers.
   -------------------------------------------------------------------------- */
[data-slot="ds-cat-group"] {
  margin-top: 1.5rem;
}

[data-slot="ds-cat-group"]:first-child {
  margin-top: 0;
}

[data-slot="ds-cat-heading"] {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}

/* Resume hero with a cover thumbnail alongside the text. */
[data-slot="ds-resume"] {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

[data-slot="ds-resume-cover"] {
  display: block;
  overflow: hidden;
  border: 1px solid var(--hairline);
}

[data-slot="ds-resume-text"] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

@media (max-width: 640px) {
  [data-slot="ds-resume"] {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   R13 — Admin page. Course rows with editable controls; 403 state.
   -------------------------------------------------------------------------- */
[data-slot="ds-admin-list"] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

[data-slot="ds-admin-course"] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
}

[data-slot="ds-admin-course-head"] {
  display: grid;
  grid-template-columns: minmax(0, 10rem) 1fr;
  gap: 1rem;
  align-items: center;
}

[data-slot="ds-admin-cover"] {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--hairline);
  background: var(--paper);
}

[data-slot="ds-admin-course-id"] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

[data-slot="ds-admin-cat"] {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot="ds-admin-title"] {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

[data-slot="ds-admin-meta-line"] {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-mute);
}

[data-slot="ds-admin-controls"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
}

[data-slot="ds-admin-form"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper) 60%, var(--paper-2));
}

[data-slot="ds-admin-field"] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

[data-slot="ds-admin-label"] {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

[data-slot="ds-admin-banner"] {
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

[data-slot="ds-admin-banner"].ds-admin-banner-ok {
  border-color: color-mix(in srgb, var(--signal-grass) 45%, var(--hairline));
  background: color-mix(in srgb, var(--signal-grass-bg) 60%, var(--paper-2));
  color: color-mix(in srgb, var(--signal-grass) 70%, var(--ink));
}

[data-slot="ds-admin-banner"].ds-admin-banner-err {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, var(--paper-2));
  color: var(--baobab);
}

[data-slot="ds-admin-403"] {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 34rem;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--hairline);
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
}

[data-slot="ds-admin-403-kicker"] {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--baobab);
}

@media (max-width: 560px) {
  [data-slot="ds-admin-course-head"] {
    grid-template-columns: 1fr;
  }
}

/* === LMS v2 P4 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 4 (home UX polish) central design-system additions.
   Authored by the learning remote; batched by the orchestrator into the shell's
   public/_design-system/components.css. Tokens ONLY — no hardcoded hex; all
   translucency via color-mix() over the central tokens.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Scope: P4 redesigns "Required for you" from an oversized cover hero into a
   COMPACT horizontal alert list (thumb · title + badge + due + ~min · CTA).
   The data-slot values carry state suffixes (e.g. "ds-required-row is-overdue"),
   so selectors use the whitespace-token match [data-slot~="…"].
   ========================================================================== */

/* --------------------------------------------------------------------------
   R12 (P4) — Required for you as a compact alert list. Each item is a tight
   horizontal row: small cover thumbnail (left) → title + Mandatory + due + ~min
   (centre, grows) → Continue/Start primary button (right). Rows stack.
   -------------------------------------------------------------------------- */
[data-slot~="ds-required-list"] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

[data-slot~="ds-required-row"] {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
}

[data-slot~="ds-required-row"]:hover {
  border-color: color-mix(in srgb, var(--baobab) 45%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 45%, var(--paper-2));
}

/* Due-state left rail — overdue (baobab) and due-soon (amber) only. */
[data-slot~="ds-required-row"][data-slot~="is-overdue"] {
  border-left: 3px solid var(--baobab);
}

[data-slot~="ds-required-row"][data-slot~="is-soon"] {
  border-left: 3px solid var(--signal-amber);
}

/* Small fixed-ratio cover thumbnail on the left. */
[data-slot~="ds-required-thumb"] {
  display: block;
  width: 140px;
  overflow: hidden;
  border: 1px solid var(--hairline);
}

[data-slot~="ds-required-thumb"] [data-slot="ds-cover"] {
  border-bottom: none;
}

[data-slot~="ds-required-body"] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

[data-slot~="ds-required-meta"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

[data-slot~="ds-required-cat"] {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

[data-slot~="ds-required-flag"] {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--baobab);
  padding: 0.08rem 0.36rem;
  border: 1px solid color-mix(in srgb, var(--baobab) 40%, var(--hairline));
  background: color-mix(in srgb, var(--baobab-bg) 60%, transparent);
}

[data-slot~="ds-required-name"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-slot~="ds-required-facts"] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

[data-slot~="ds-required-due"] {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

[data-slot~="ds-required-due"][data-slot~="is-overdue"] {
  color: var(--baobab);
  font-weight: 600;
}

[data-slot~="ds-required-due"][data-slot~="is-soon"] {
  color: color-mix(in srgb, var(--signal-amber) 80%, var(--ink));
  font-weight: 600;
}

/* Continue/Start primary button on the right of each row. */
[data-slot~="ds-required-cta"] {
  flex: 0 0 auto;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 0.55rem 0.95rem;
  white-space: nowrap;
  transition: background 120ms ease;
}

[data-slot~="ds-required-row"]:hover [data-slot~="ds-required-cta"] {
  background: var(--baobab);
}

/* Mobile: drop the CTA onto its own line, keep thumb + text side by side. */
@media (max-width: 560px) {
  [data-slot~="ds-required-row"] {
    grid-template-columns: 96px 1fr;
    grid-template-areas:
      "thumb body"
      "cta   cta";
    row-gap: 0.6rem;
  }
  [data-slot~="ds-required-thumb"] {
    grid-area: thumb;
    width: 96px;
  }
  [data-slot~="ds-required-body"] {
    grid-area: body;
  }
  [data-slot~="ds-required-cta"] {
    grid-area: cta;
    justify-self: stretch;
    text-align: center;
  }
}

/* === LMS v2 P5 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 5 (navigation + button + usability pass) central
   design-system additions. Authored by the learning remote; batched by the
   orchestrator into the shell's public/_design-system/components.css.

   Tokens ONLY — NO hardcoded hex, NO new colours, NO new fonts. All translucency
   via color-mix() over the EXISTING central tokens. This is a USABILITY pass
   inside the existing "Editorial Letterbox" aesthetic — it does NOT change the
   colour scheme, fonts, covers, sections, or the concept of the app.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Fixes (all external-UX-critique validated, navigation/buttons/usability only):
   1. STEP-COUNT — markup-only (route.ts). No CSS here.
   2. BUTTON CLUTTER / HIERARCHY in the dark course/activity header:
      - breadcrumb trail (Learning / <course> / <step>) at top-left,
      - progress rendered as a plain label/meter (NOT a bordered pill),
      - Next is the single filled PRIMARY, Prev a quiet ghost secondary.
   3. ONE obvious next action on the home, reachable on mobile (390px).
   4. MOBILE TAP TARGETS — all nav/action buttons >=44px tall, single line.
   5. COWORK pill overlap — reserve bottom/right gutter on the LMS surfaces so
      the floating "Ask Cowork" launcher never covers actions or text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   #2 — Dark header breadcrumb trail. "All courses" and "Course overview" were
   competing bordered buttons; they are NAV LEVELS, not actions, so they become
   a quiet breadcrumb in the headline (top-left). Inherits the dark-header
   --paper text already set on [data-slot="ds-modal-header"].
   -------------------------------------------------------------------------- */
[data-slot="ds-modal-crumbs"] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  min-width: 0;
}

[data-slot="ds-modal-crumbs"] [data-slot="ds-modal-crumb"] {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  text-decoration: none;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-slot="ds-modal-crumbs"] [data-slot="ds-modal-crumb"]:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-slot="ds-crumb-sep"] {
  color: color-mix(in srgb, var(--paper) 40%, transparent);
}

[data-slot="ds-crumb-current"] {
  color: color-mix(in srgb, var(--paper) 92%, transparent);
  font-weight: 700;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* #2 — Progress as a PLAIN label, not a bordered button-looking pill. No border,
   no fill box — just a quiet mono reading on the dark bar, set apart from the
   action buttons by spacing. */
[data-slot="ds-modal-progress"] {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  white-space: nowrap;
  padding-right: 6px;
  border: 0;
  background: none;
}

/* #2 + #4 — Header action buttons: Next is the single filled PRIMARY, Prev the
   quiet ghost. Give both a comfortable >=44px tap target while keeping the
   compact letterbox look. Header buttons stay on a single line. */
[data-slot="ds-modal-header"] [data-slot~="ds-button"] {
  min-height: 40px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   #4 — MOBILE TAP TARGETS. On touch-width screens every nav/action button must
   be >=44px tall, single-line, and not clustered so tightly that they are easy
   to mis-tap. Applies to the dark header actions, the in-content pager, the
   spine "go" actions, and the home CTAs.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Header actions: full comfortable height, sensible spacing, Next stays
     dominant. They wrap onto their own row (shell already sets flex-wrap). */
  [data-slot="ds-modal-header"] [data-slot="ds-actions"] {
    gap: 10px;
    row-gap: 10px;
    width: 100%;
  }
  [data-slot="ds-modal-header"] [data-slot~="ds-button"] {
    min-height: 44px;
    flex: 1 1 auto;
  }
  /* The plain progress label drops above the buttons, not squeezed between them. */
  [data-slot="ds-modal-progress"] {
    flex: 1 0 100%;
    padding-right: 0;
  }

  /* In-content pager links: comfortable tap height, already stack at <=560px. */
  [data-slot="ds-pager-link"] {
    min-height: 44px;
  }

  /* Spine actions: the per-step "go" chip becomes a real, reachable button on
     mobile (the shell already reveals it at <=560px; here we give it height). */
  [data-slot="ds-spine-go"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  [data-slot="ds-spine-go"].is-primary {
    min-height: 44px;
    padding: 0 16px;
  }
}

/* --------------------------------------------------------------------------
   #3 — ONE obvious next action on the home, reachable on mobile. The compact
   required row and the resume hero each carry a single dominant primary button.
   Give those CTAs a >=44px tap target and, on mobile, keep them on their own
   full-width line below the card text (never hidden beside / under the cover).
   -------------------------------------------------------------------------- */
[data-slot~="ds-required-cta"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-slot="ds-resume-cta"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  /* Resume hero: cover sits on top, then text, then a full-width primary CTA so
     the action is visible without horizontal scroll and is not hidden below the
     image. (The shell already collapses to a single column; we make the CTA
     full-bleed and unmistakably the primary action.) */
  [data-slot="ds-resume-cta"] {
    justify-self: stretch;
    width: 100%;
    text-align: center;
  }
  /* Required row: the Continue/Start button spans full width on its own line
     (the shell sets grid-area:cta at <=560px; reinforce stretch up to 640px). */
  [data-slot~="ds-required-cta"] {
    justify-self: stretch;
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   #5 — COWORK pill overlap. The floating "Ask Cowork" launcher is pinned to the
   bottom-right of the viewport (~54px pill + 14px inset). Reserve a bottom (and
   a little right) gutter on the LMS surfaces so the launcher never sits over the
   primary action or body text. Token-free spacing only; no colours touched.

   --mmd-cowork-gutter: the clearance below the fold the launcher needs.
   -------------------------------------------------------------------------- */
[data-slot="ds-modal"],
.ds-learning-page {
  --mmd-cowork-gutter: 92px;
}

/* Course / activity surface: the scrolling body's inner shell reserves the
   gutter so the in-content pager, Next button, assignment form, and end-page
   CTA all clear the launcher. */
[data-slot="ds-modal-body"] [data-slot="ds-course-shell"] {
  padding-bottom: var(--mmd-cowork-gutter);
}

/* Home surface: reserve the same clearance below the last section so the
   catalogue's final card / CTA is never covered. */
.ds-learning-page {
  padding-bottom: var(--mmd-cowork-gutter);
}

/* On narrow screens the launcher is a touch larger relative to the viewport and
   actions go full-width; give a little more breathing room. */
@media (max-width: 640px) {
  [data-slot="ds-modal"],
  .ds-learning-page {
    --mmd-cowork-gutter: 104px;
  }
}

/* === LMS v2 P6 block === */
/* ==========================================================================
   MMD LMS v2 — PHASE 6 (navigation de-clutter + top step-progress nav) central
   design-system additions. Authored by the learning remote; batched by the
   orchestrator into the shell's public/_design-system/components.css.

   Tokens ONLY — NO hardcoded hex, NO new colours, NO new fonts. All translucency
   via color-mix() over the EXISTING central tokens. This is a NAVIGATION /
   USABILITY pass inside the existing "Editorial Letterbox" aesthetic — it does
   NOT change the colour scheme, fonts, covers, sections, or the app concept.

   Token contract (defined by the shell): --paper, --paper-2, --ink, --ink-soft,
   --ink-mute, --ink-faint, --hairline, --baobab, --baobab-2, --baobab-bg,
   --signal-amber, --signal-amber-bg, --signal-grass, --signal-grass-bg,
   --font-display, --font-ui, --font-mono.

   Stakeholder fixes (navigation/usability only):
   - Problem 2: a compact horizontal STEP-PROGRESS NAV at the TOP (under the dark
     header, inside ds-modal) on the in-activity / in-check views. Lists every
     step (content activities + terminal Knowledge check) as small clickable dots,
     marks done / current / to-do reusing the spine node language (filled ink disc
     = done, baobab ring = current, hollow = todo), includes a "Course overview"
     link, lets the learner jump to any chapter, and scrolls / wraps on mobile.
   - Problems 1 & 4: handled in route.ts markup (removed duplicate nav buttons);
     no CSS needed here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Problem 2 — top step-progress nav. It sits between the dark ds-modal-header
   and the ds-modal-body, on the light --paper surface. A "Course overview" link
   on the left, then a horizontally scrollable track of numbered step dots.
   -------------------------------------------------------------------------- */
[data-slot="ds-stepper"] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}

/* "Course overview" — a quiet mono nav link (not a button), set apart on the
   left so the user can always jump back to the spine. */
[data-slot="ds-stepper-overview"] {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 10px 6px 0;
  border-right: 1px solid var(--hairline);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
[data-slot="ds-stepper-overview"]:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The track scrolls horizontally so a long course never breaks the header. */
[data-slot="ds-stepper-track"] {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
[data-slot="ds-stepper-track"]::-webkit-scrollbar { height: 4px; }
[data-slot="ds-stepper-track"]::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

/* Each step: a node dot + number, with the label revealed for the current step
   and on hover/focus. Compact so many steps fit; min 40px hit area. */
[data-slot~="ds-stepper-step"] {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink-mute);
  padding: 6px 10px;
  min-height: 40px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
[data-slot~="ds-stepper-step"]:hover,
[data-slot~="ds-stepper-step"]:focus-visible {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--hairline);
  outline: none;
}

/* Node dot — reuse the spine visual language exactly:
   to-do = hollow (paper fill, faint ring); done = filled ink disc;
   current = paper fill with a baobab ring. */
[data-slot="ds-stepper-node"] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  background: var(--paper-2);
  border: 1px solid var(--ink-faint);
}
[data-slot~="is-done"] [data-slot="ds-stepper-node"] {
  background: var(--ink);
  border-color: var(--ink);
}
[data-slot~="is-current"] [data-slot="ds-stepper-node"] {
  background: var(--paper);
  border: 2px solid var(--baobab);
}

/* Step number — mono, quiet; sharpens for the current step. */
[data-slot="ds-stepper-num"] {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  line-height: 1;
}
[data-slot~="is-done"] [data-slot="ds-stepper-num"] { color: var(--ink-faint); }
[data-slot~="is-current"] [data-slot="ds-stepper-num"] { color: var(--ink); }

/* Label — hidden by default to keep the track compact; shown for the current
   step (so the learner sees where they are) and on hover/focus of any step. */
[data-slot="ds-stepper-label"] {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.1;
  color: inherit;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transition: max-width .14s ease, opacity .14s ease;
}
[data-slot~="is-current"] [data-slot="ds-stepper-label"],
[data-slot~="ds-stepper-step"]:hover [data-slot="ds-stepper-label"],
[data-slot~="ds-stepper-step"]:focus-visible [data-slot="ds-stepper-label"] {
  max-width: 16ch;
  opacity: 1;
}
[data-slot~="is-current"] {
  background: var(--paper-2);
  border-color: var(--hairline);
  color: var(--ink);
}

/* The terminal Knowledge check step reads as the sequence end — give its label a
   touch more room when revealed since "Knowledge check" is longer. */
[data-slot~="is-check"][data-slot~="is-current"] [data-slot="ds-stepper-label"],
[data-slot~="is-check"]:hover [data-slot="ds-stepper-label"],
[data-slot~="is-check"]:focus-visible [data-slot="ds-stepper-label"] {
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   Mobile (<=640px) — the stepper wraps gracefully without breaking the header.
   The overview link drops onto its own row above a full-width scrollable track,
   and step hit areas stay >=40px.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  [data-slot="ds-stepper"] {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 14px;
  }
  [data-slot="ds-stepper-overview"] {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    width: 100%;
    padding: 4px 0;
    min-height: 36px;
  }
  [data-slot="ds-stepper-track"] {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ===== OMS-DENSITY-RESTORE: portal-transaction workbench family (module-workbench) — spacing/size only, restored from canonical DS 2026-06-30 ===== */
/* ===== Portal transaction workbench ===== */
.module-workbench{display:grid;gap:16px;padding-top:6px}
/* D4/D5 fix: was display:grid with minmax(0,1fr) auto — the auto action track (which can itself
   be wide, e.g. a thumbnail + button) forced the 1fr title track to collapse on real content,
   so a wrapped title visually collided with the actions. Flex+wrap lets actions drop to their
   own row once the title needs its minimum comfortable width, instead of sharing a shrinking row. */
.module-workbench-header{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;padding:8px 0 14px;border-bottom:1px solid var(--ink)}
.module-title-block{flex:1 1 340px;min-width:0;max-width:640px}
.module-title{font-family:var(--font-ui);font-size:30px;line-height:1.12;font-weight:750;letter-spacing:0;margin:4px 0 0;color:var(--ink);max-width:100%;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.module-summary{max-width:880px;margin-top:7px;color:var(--ink-soft);font-family:var(--font-ui);font-size:14px;line-height:1.48}
.module-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;flex:0 0 auto;margin-left:auto}
.module-status-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,0.55fr);gap:18px;padding:14px 16px;background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--baobab)}
.module-status-text{margin-top:4px;color:var(--ink-soft);font-family:var(--font-ui);font-size:13px;line-height:1.45}
.module-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,0.92fr);gap:18px;align-items:start}
.module-form{margin-top:0}
.module-form .ds-fieldset{padding:18px 20px;gap:12px}
.module-form .ds-textarea{min-height:70px}
.module-aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.module-table-section{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;margin-top:0}
.module-table-section .ds-records{margin-top:0}
.module-table-section .ds-records td{padding:12px 14px}
.module-row-action{width:140px;text-align:right}
.module-row-action .ds-button{padding:8px 12px;font-size:11px}

/* ===== Dense ERP working surfaces — kill the hero header + stacked full-width filters =====
   Scoped to the portal-transaction workbench family (OMS et al.). Additive overrides only:
   compact one-line title (no hero), inline auto-width filter controls (so .ds-filterbar is a
   single tight row, not a column of full-width inputs), tightened gaps so the filter bar and
   first data rows sit above the fold. Spacing/size only — no colour/theme changes. Uses
   padding-top/bottom (not the shorthand) to preserve the desktop padding-right action reserve. */
.module-workbench{gap:10px;padding-top:2px}
.module-workbench .module-workbench-header{padding-top:4px;padding-bottom:8px}
.module-workbench .module-title{font-size:19px;line-height:1.18;margin-top:2px}
.module-workbench .module-summary{margin-top:4px;font-size:13px}
.module-workbench .ds-filterbar{margin-top:0;gap:7px}
.module-workbench .ds-filterbar .ds-input,
.module-workbench .ds-filterbar .ds-select{width:auto;flex:0 0 auto;padding:7px 9px;font-size:13px}
.module-workbench .ds-filterbar .ds-input{flex:0 1 200px;min-width:120px}
.module-workbench .ds-filterbar .ds-field{flex:0 0 auto;gap:3px}
.module-workbench .ds-table-section{margin-top:8px}
.module-workbench .ds-table-header{padding:8px 14px}
.module-workbench .module-table-section .ds-records td{padding:9px 12px}

/* Reserve a right gutter on desktop so module-header actions (e.g. Helpdesk "New ticket")
   are not occluded by the fixed top-right .portal-user-menu (z-index 91). Only above the
   980px breakpoint, where the header is two-column and actions are right-aligned; below it
   actions move left (no collision) so no reserve is applied. */
@media (min-width:981px){
  .module-workbench-header{padding-right:248px}
  .portal-workbench-intro{padding-right:248px}
}
.dealer-standalone-shell{min-height:100dvh}
@media (min-width:981px){
  .dealer-standalone-shell .module-workbench-header{padding-right:0}
}
@media (max-width:980px){
  .module-workbench-header{flex-direction:column;align-items:flex-start}
  .dealer-standalone-shell .module-title-block{flex:0 0 auto}
  .module-title-block{max-width:100%}
  .module-actions{justify-content:flex-start;margin-left:0}
  .module-status-strip{grid-template-columns:1fr}
  .module-grid{grid-template-columns:1fr}
  .module-aside{position:static}
}
@media (max-width:720px){
  .module-workbench{gap:12px;padding-top:0}
  .module-workbench-header{gap:12px;padding:2px 0 12px}
  .module-title{font-size:24px}
  .module-summary{font-size:13px}
  .module-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-left:0}
  .module-actions .ds-button{width:100%}
  .module-table-section{overflow:visible}
  .module-table-section .ds-records,
  .module-table-section .ds-records tbody,
  .module-table-section .ds-records tr,
  .module-table-section .ds-records td{display:block;width:100%}
  .module-table-section .ds-records{min-width:0}
  .module-table-section .ds-records tr{padding:12px 14px;border-bottom:1px solid var(--hairline)}
  .module-table-section .ds-records tr:last-child{border-bottom:0}
  .module-table-section .ds-records td{padding:3px 0;border-bottom:0}
  .module-table-section .ds-records-id{width:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--ink-mute)}
  .module-table-section .module-row-action{text-align:left;padding-top:8px}
  .module-form .ds-fieldset{padding:16px 18px}
}

/* Helpdesk UX 2026-06-16: genuine "all set" empty state (composes existing primitives). */
.module-empty-state,
.ds-empty-state{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:40px 32px}
.module-empty-state .ds-actions,
.ds-empty-state .ds-actions{padding-top:4px}
/* ===== END OMS-DENSITY-RESTORE ===== */

/* ===== EC×MD merge 2026-07-04: DataGrid (sortable/filterable/hover-preview) +
   drill-down node primitives. Composes only existing tokens (--ink/--paper/
   --hairline/--baobab/--font-mono/--radius-*) and existing ds-input/ds-filter-chip/
   ds-review-* classes for internal structure — see src/app/app/_components/DataGrid.tsx. */

/* Interactive breadcrumbs (drill-down back-navigation) — extends the existing
   ds-breadcrumbs component with a button reset; no new class introduced. */
.ds-breadcrumbs button{all:unset;cursor:pointer;font:inherit;color:inherit}
.ds-breadcrumbs button:hover:not(:disabled){color:var(--ink)}
.ds-breadcrumbs button:disabled{cursor:default;color:var(--ink)}

.ds-datagrid-wrap{position:relative;width:100%}
.ds-datagrid{width:100%;border-collapse:collapse;font-size:12.5px}
.ds-datagrid thead tr{border-bottom:1px solid var(--ink)}
.ds-datagrid tbody tr+tr{border-top:1px solid var(--hairline)}
.ds-datagrid td{padding:7px 10px;vertical-align:middle;color:var(--ink);line-height:1.35}
.ds-datagrid-th{position:relative;text-align:left;padding:6px 10px;font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.ds-datagrid-th-label{display:inline-flex;align-items:center;gap:4px}
.ds-datagrid-th[data-sortable="true"] .ds-datagrid-th-label{cursor:pointer}
.ds-datagrid-th[data-sortable="true"] .ds-datagrid-th-label:hover{color:var(--ink)}
.ds-datagrid-th-sort-asc .ds-datagrid-th-label::after{content:"▲";font-size:8px;color:var(--baobab);margin-left:1px}
.ds-datagrid-th-sort-desc .ds-datagrid-th-label::after{content:"▼";font-size:8px;color:var(--baobab);margin-left:1px}
.ds-datagrid-filter-toggle{border:0;background:transparent;color:var(--ink-faint);font-family:var(--font-mono);font-size:10.5px;padding:0 0 0 5px;cursor:pointer;line-height:1;vertical-align:middle}
.ds-datagrid-filter-toggle:hover,
.ds-datagrid-filter-toggle[data-active="true"]{color:var(--baobab)}
.ds-datagrid-filter{position:absolute;top:100%;left:6px;z-index:20;margin-top:4px;min-width:170px;max-width:260px;background:var(--paper);border:1px solid var(--ink);border-radius:var(--radius-sm);box-shadow:0 6px 16px rgba(14,14,12,0.16);padding:8px;display:flex;flex-direction:column;gap:6px;text-transform:none;letter-spacing:normal;font-family:var(--font-ui);font-weight:500}
.ds-datagrid-filter .ds-input{font-size:12.5px;padding:6px 8px}
.ds-datagrid-filter-chips{display:flex;flex-wrap:wrap;gap:4px;max-height:170px;overflow:auto}
.ds-datagrid-row{cursor:pointer;transition:background .1s ease}
.ds-datagrid-row:hover{background:var(--paper-2)}
.ds-datagrid-row:focus-visible{outline:2px solid var(--baobab);outline-offset:-2px}
.ds-datagrid-empty{padding:18px 10px;color:var(--ink-mute);font-size:12.5px;text-align:center}

.ds-hover-preview{position:fixed;left:var(--hp-x,-9999px);top:var(--hp-y,-9999px);z-index:1000;min-width:220px;max-width:300px;background:var(--ink);border-radius:var(--radius-sm);box-shadow:0 10px 28px rgba(14,14,12,0.3);padding:10px 12px;pointer-events:none}
.ds-hover-preview .ds-review-field{border-bottom:1px solid var(--hairline-on-ink);padding:5px 0}
.ds-hover-preview .ds-review-field:last-child{border-bottom:0}
.ds-hover-preview .ds-review-label{color:var(--paper-2)}
.ds-hover-preview .ds-review-value{color:var(--paper);font-size:12.5px}

.ds-drilldown-node{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:12px 14px;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .1s ease,background .1s ease}
.ds-drilldown-node:hover,
.ds-drilldown-node:focus-visible{border-color:var(--ink);background:var(--paper-2)}
.ds-drilldown-node-nm{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-0.01em}
.ds-drilldown-node-sub{display:block;margin-top:3px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-mute)}
.ds-drilldown-node-count{font-family:var(--font-mono);font-size:12px;color:var(--ink-mute);white-space:nowrap}
.ds-drilldown-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:6px}

/* ===== Process-flow iframe atlas (TA/H2R process review, 2026-07-16) ===== */
.ds-process-flow{grid-template-columns:minmax(0,1fr)}
.ds-process-flow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;margin-top:10px}
.ds-process-node{display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:8px}
.ds-process-node-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.ds-process-step{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:12px;font-weight:700}
.ds-process-thumb{height:132px;border:1px solid var(--hairline);border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-2)}
.ds-process-thumb-frame{width:200%;height:200%;border:0;transform:scale(.5);transform-origin:0 0;pointer-events:none;background:var(--paper-2)}
.ds-process-thumb-img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;background:var(--paper-2);border:0}
.ds-process-node-link{text-decoration:none;color:inherit;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}
.ds-process-node-link:hover,.ds-process-node-link:focus-visible{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ds-process-node-link .ds-button{pointer-events:none}
.ds-process-lane{margin-top:14px}
/* Lane title row inside the process-flow atlas — mono uppercase micro-label + count + thin
   rule, same language as .ds-process-packet-section-title (TA flow-atlas rework 2026-07-18). */
.ds-process-lane-header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--hairline)}
.ds-process-lane:first-child .ds-process-lane-header{margin-top:0}
.ds-process-lane-header-title{font-family:var(--font-mono);font-weight:600;font-size:calc(11px * var(--fs-scale, 1));letter-spacing:0.08em;text-transform:uppercase;color:var(--ink)}
.ds-process-lane-header-count{font-family:var(--font-mono);font-weight:500;font-size:calc(11px * var(--fs-scale, 1));letter-spacing:0.06em;color:var(--ink-mute)}

.ds-process-node-text{margin:0;color:var(--ink-soft);font-size:12.5px;line-height:1.45}
.ds-process-node-foot{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:auto}
.ds-process-thumb-empty{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px}
/* Small bordered launch-surface screenshot (e.g. dealer-portal-launch preview image) — same frame
   language as ds-process-thumb but a plain <img>, not an iframe-scaled live preview. */
.ds-preview-thumb{width:180px;height:110px;object-fit:cover;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--paper-2)}
/* Inline meta-line row (node/action/status style summary) used above a review/detail body —
   middle-dot-separated spans, muted weight, matches ds-process-node-text sizing. */
.ds-summary-row{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;color:var(--ink-soft);font-size:12.5px;line-height:1.5;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--hairline)}

a.ds-process-node{text-decoration:none;color:inherit;cursor:pointer}
a.ds-process-node:hover{border-color:var(--ink);background:var(--paper-2)}
a.ds-process-node:focus-visible{outline:2px solid var(--baobab);outline-offset:2px}

.ds-process-modal-body{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:0;padding:0;overflow:hidden;background:var(--paper-2)}
.ds-process-modal-aside{display:flex;flex-direction:column;gap:12px;min-width:0;border-right:1px solid var(--hairline);background:var(--paper);padding:16px;overflow:auto}
.ds-process-modal-frame{width:100%;height:100%;border:0;background:var(--paper-2)}
.ds-process-screen-page{height:100vh;overflow:auto;background:var(--paper-2);padding:18px}

/* --- Stat card (KPI preview with a pop-out to full detail) ---------------------------------
   Dense summary tile: title + a short stack of label/value rows + a pop-out trigger.
   Used for TA Supplier reporting previews (candidate performance, billing, revenue, funnel)
   so the page shows a scannable summary and the full sortable/filterable table (ds-datagrid)
   opens on demand rather than always rendering wide tables inline. Reusable anywhere a report
   section needs the same summarize-then-drill-in pattern. */
.ds-stat-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px}
.ds-stat-card{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:16px}
.ds-stat-card-title{font-family:var(--font-display);font-weight:700;font-size:calc(15px * var(--fs-scale, 1));letter-spacing:-0.01em;color:var(--ink);margin:0 0 8px}
.ds-stat-row{display:flex;justify-content:space-between;gap:10px;font-size:calc(12.5px * var(--fs-scale, 1));padding:5px 0;border-bottom:1px solid var(--hairline)}
.ds-stat-row:last-of-type{border-bottom:0}
.ds-stat-row-value{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.ds-stat-card-actions{margin-top:10px}

/* --- Contact card (name + role, email/phone meta, accent bar) --------------------------------
   Dense single-row callout for a named point of contact -- e.g. the MMD recruiter/hiring-manager
   shown at the top of a record-detail dialog. Distinct from .ds-notice (which is for a system
   message/warning with a mono eyebrow label): this is a person, so the primary line is their
   name in normal weight, not a label. Tone variants (--ok/--warn) mirror .ds-notice-ok's
   pattern via a modifier class on the accent bar. */
.ds-contact-card{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--baobab);border-radius:var(--radius-sm);padding:10px 14px;margin:12px 0}
.ds-contact-card-ok{border-left-color:var(--signal-grass)}
.ds-contact-card-warn{border-left-color:var(--signal-amber)}
.ds-contact-name{font-weight:600;font-size:calc(13.5px * var(--fs-scale, 1));color:var(--ink)}
.ds-contact-meta{font-family:var(--font-mono);font-size:calc(11px * var(--fs-scale, 1));color:var(--ink-mute);margin-top:2px}
.ds-contact-meta a{color:var(--baobab-deep)}

/* --- Status tile row (dense 3/4-up label+value cards) -----------------------------------------
   Compact prep/readiness indicators -- e.g. "CVs submitted / Shortlisted / Interview booked" on
   a demand-detail dialog, or interview prep status. Distinct from .ds-stat-card (which carries a
   display-font title and a stack of label/value rows): these are small, uniform, no title, and
   read at a glance in a grid. */
.ds-tile-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.ds-tile-row-4{grid-template-columns:repeat(4,1fr)}
.ds-tile{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:9px 10px}
.ds-tile-label{display:block;font-family:var(--font-mono);font-size:calc(9px * var(--fs-scale, 1));text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-mute);margin-bottom:4px}
.ds-tile-value{font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink)}
.ds-tile-value-yes{color:var(--signal-grass)}
.ds-tile-value-no{color:var(--baobab-deep)}
.ds-process-screen-shell{max-width:980px;margin:0 auto;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:14px}
.ds-process-screen-form{margin-top:14px}
.ds-fieldset-compact{margin:0;padding:0;border:0;gap:8px}
.ds-choice-list{display:grid;gap:6px}
.ds-choice{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:13px}
.ds-process-node-edges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ds-tag-return{color:var(--ink-mute);border-style:dashed}
/* Branch/return edge token inside .ds-process-node-edges — arrow + target step number + a short
   sentence-case verb (e.g. "→ 5 Assign supplier"), same border/radius/padding language as .ds-tag
   but NOT uppercased (branch chips read as short instructions, not shouty labels). Reuses the
   dashed .ds-tag-return treatment for return/back edges. TA flow-atlas rework 2026-07-18. */
.ds-process-branch-chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-weight:500;font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:0.02em;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:2px;padding:3px 7px;text-decoration:none}
a.ds-process-branch-chip:hover,a.ds-process-branch-chip:focus-visible{color:var(--ink);border-color:var(--ink-mute)}
.ds-process-branch-chip-return{border-style:dashed}

.ds-process-role-list{margin:0;padding-left:16px;color:var(--ink-soft);font-size:12.5px;line-height:1.5}

/* Field-level data-contract source tag — small mono marker next to every field label, reuses the
   ds-tag visual weight (signal by weight not hue) rather than inventing a colour-coded taxonomy. */
.ds-tag-source{display:inline-block;margin-left:6px;font-family:var(--font-mono);font-weight:500;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:2px;padding:1px 5px;vertical-align:middle}
.ds-process-field-note{display:block;margin-top:2px;color:var(--ink-mute);font-size:11px;line-height:1.4}
.ds-review-value-muted{color:var(--ink-mute);font-style:italic}

/* Approval / review packet (Section C) — requisition, budget-vs-plan, JD, candidate evidence,
   interview scores, prior-decision audit trail. Every section renders even when empty (explicit
   empty-state text), never a blank readonly line. */
.ds-process-packet{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:14px;margin-bottom:14px}
.ds-process-packet-section{padding:8px 0;border-bottom:1px solid var(--hairline)}
.ds-process-packet-section:last-child{border-bottom:0}
.ds-process-packet-section-title{display:block;font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.ds-process-packet-section-body{margin:0;color:var(--ink-soft);font-size:12.5px;line-height:1.5}

/* Candidate intake dual-lane (CV upload primary + existing-candidate picker) */
.ds-process-intake-lanes{display:flex;flex-direction:column;gap:16px}
.ds-process-intake-lane{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--paper-2)}
.ds-process-candidate-card{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:10px;border:1px dashed var(--hairline);border-radius:var(--radius-sm);background:var(--paper)}

/* Multi-file dropzone (CV upload, ID document upload, contract pack) */
.ds-process-dropzone{display:flex;flex-direction:column;gap:6px}
.ds-process-dropzone-area{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;border:1px dashed var(--ink-mute);border-radius:var(--radius-sm);background:var(--paper-2);cursor:pointer;padding:10px}
.ds-process-dropzone-hint{color:var(--ink-mute);font-size:12px;font-family:var(--font-mono);letter-spacing:0.03em}
.ds-process-dropzone-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ds-process-picker-input{background-image:none}

/* Cross-cutting case-summary slide-over (Section 1) — accumulated read-only timeline of every
   prior step's captured data, plus the "Return to step" control on nodes with a return edge. */
.ds-process-slideover-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.32);display:flex;justify-content:flex-end;z-index:1100}
.ds-process-slideover{width:min(480px,92vw);height:100vh;background:var(--paper-2);display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,.18)}
.ds-process-slideover-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--ink);color:var(--paper)}
.ds-process-slideover-header .eyebrow,
.ds-process-slideover-header .ds-table-title{color:var(--paper)}
.ds-process-slideover-body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.ds-process-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ds-process-timeline-item{border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--paper);padding:10px}
.ds-process-timeline-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;margin-bottom:8px}
.ds-process-timeline-fields{display:flex;flex-direction:column;gap:4px}
.ds-process-return-panel{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--hairline);padding-top:14px}

/* External candidate/new-hire self-service screen — no internal portal chrome, distinct framing */
.ds-process-external-shell{background:var(--paper-2)}
.ds-process-external-shell .ds-process-screen-shell{border-color:var(--ink-mute)}

/* Primary-forward-path connector between lane-adjacent cards. Given the atlas renders lanes as
   sequential card-grid blocks (not a freeform canvas), the connector is drawn once per lane
   handoff — a hairline rule + arrow glyph between one lane's block and the next lane the PRIMARY
   path continues into. Branch/return edges are NOT drawn as connectors — those are
   .ds-process-branch-chip rows on the originating card. TA flow-atlas rework 2026-07-18. */
.ds-process-connector{display:flex;align-items:center;gap:8px;margin:2px 0 0;padding:6px 2px 0;color:var(--ink-mute);font-family:var(--font-mono);font-weight:500;font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:0.04em}
.ds-process-connector::before{content:"";flex:1 1 auto;height:1px;background:var(--hairline)}
.ds-process-connector-arrow{flex:none;color:var(--ink-mute);font-family:var(--font-mono)}

/* Fixed-position status pill in a process-atlas card head — Live / Design-only / Blocked /
   External. Same dot+mono-label language as .ds-node-status (agent-approval family), signalled
   by weight/color, not an invented icon set. TA flow-atlas rework 2026-07-18. */
.ds-process-node{position:relative}
.ds-process-node-badge-status{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-weight:600;font-size:calc(9px * var(--fs-scale, 1));letter-spacing:0.1em;text-transform:uppercase;padding:3px 8px;border-radius:2px;border:1px solid var(--hairline);color:var(--ink-mute);background:var(--paper);line-height:1.4}
.ds-process-node-badge-status::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.ds-process-node-badge-status-live{color:var(--signal-grass);border-color:var(--signal-grass);background:var(--signal-grass-bg)}
.ds-process-node-badge-status-design-only{color:var(--ink-mute);border-color:var(--hairline);background:var(--paper-2)}
.ds-process-node-badge-status-blocked{color:var(--baobab);border-color:var(--baobab);background:var(--paper)}
.ds-process-node-badge-status-external{color:var(--signal-amber);border-color:var(--signal-amber);background:var(--signal-amber-bg)}

@media (max-width: 900px){
  .ds-process-flow-grid{grid-template-columns:1fr}
  .ds-process-modal-body{grid-template-columns:1fr}
  .ds-process-modal-aside{border-right:0;border-bottom:1px solid var(--hairline);max-height:35vh}
  .ds-process-slideover{width:100vw}
}
/* ===== END Process-flow iframe atlas ===== */
/* ===== END EC×MD merge DataGrid/drilldown ===== */

/* ===== Coloured range slider (portal-oms quote-builder discount depth, 2026-07-07) =====
   Signal by WEIGHT not hue (same rule the existing ds-tag-* scale already follows) — green/amber
   read as ink-scale gray steps, red is the one place that spends the scarce baobab accent (a
   margin-floor breach is exactly the kind of rare, blocking signal baobab is reserved for). No new
   hex values: every colour here is an existing root token (--ink/-mute/-faint, --baobab/-bg). */
.ds-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;padding:0;margin:0;cursor:pointer}
.ds-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--hairline)}
.ds-range::-moz-range-track{height:4px;border-radius:2px;background:var(--hairline)}
.ds-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;border:2px solid var(--paper);background:var(--ink-mute);box-shadow:0 1px 3px rgba(14,14,12,0.25)}
.ds-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:2px solid var(--paper);background:var(--ink-mute);box-shadow:0 1px 3px rgba(14,14,12,0.25)}
.ds-range:focus-visible{outline:2px solid var(--baobab);outline-offset:4px}
.ds-range-green::-webkit-slider-thumb{background:var(--ink-faint)}
.ds-range-green::-moz-range-thumb{background:var(--ink-faint)}
.ds-range-amber::-webkit-slider-thumb{background:var(--ink)}
.ds-range-amber::-moz-range-thumb{background:var(--ink)}
.ds-range-red::-webkit-slider-runnable-track{background:var(--baobab-bg)}
.ds-range-red::-moz-range-track{background:var(--baobab-bg)}
.ds-range-red::-webkit-slider-thumb{background:var(--baobab);border-color:var(--baobab-bg)}
.ds-range-red::-moz-range-thumb{background:var(--baobab);border-color:var(--baobab-bg)}

/* ===== Filterbar/nav group-section micro-label (portal-oms 16-button section nav, 2026-07-07) =====
   Same mono micro-caption treatment as .ds-legend/.ds-table-title, one step quieter (ink-faint,
   ink-mute is already spoken for by legend/table-title) — a plain grouping caption, not a control. */
.ds-menu-section-label{display:block;font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin:2px 2px 0 2px}

/* ===== Remote-fragment crumb line (2026-07-07) =====
   .topbar in the DS is the standalone-page FIXED bar (shell.css). Inside a mounted remote
   fragment that bar overlays the shell chrome and intercepts clicks on the first content row
   (live defect on /app/oms). Scoped to [data-remote-fragment], a topbar>crumbs is a static,
   in-flow crumb line instead -- same mono/uppercase treatment tier as .ds-breadcrumbs. */
[data-remote-fragment] .topbar{position:static;height:auto;background:transparent;border-bottom:0;z-index:auto;padding:0;margin:0 0 6px}
[data-remote-fragment] .topbar .crumbs{display:flex;gap:8px;align-items:center;font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute)}
[data-remote-fragment] .topbar .crumbs b{color:var(--ink);font-weight:600}
[data-remote-fragment] .topbar .crumbs .sep{color:var(--ink-faint)}


/* ============================================================
   REFINED DESIGN SYSTEM — DS package  (2026-07-07, approved by Ben)
   Mirrors the shell refinements so remote-rendered fragments match:
   modern form fields, banded (zebra) tables, opt-in hover row-actions,
   five-role type-ladder utilities. Appended at EOF to govern over the
   file's earlier (duplicated) blocks. Reversible: delete this block.
   ============================================================ */

/* modern form fields — hairline + rounded-8 + focus ring */
.ds-input, .ds-select, .ds-textarea {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--baobab-bg);
}

/* banded (zebra) tables — kept per Ben, applied to every DS table */
.ds-records tbody tr { transition: background 0.12s ease; }
.ds-records tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, var(--paper)); }
.ds-records tbody tr:hover           { background: var(--paper-2); }
.ds-records-compact tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, var(--paper)); }
.ds-records-compact tbody tr:hover           { background: var(--paper-2); }
.ds-datagrid-row:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, var(--paper)); }
.ds-datagrid-row:hover           { background: var(--paper-2); }

/* opt-in hover row-actions */
.row-actions { display: inline-flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.12s ease; }
tr:hover .row-actions, tr:focus-within .row-actions { opacity: 1; }
.row-kebab {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  color: var(--ink-faint); font-size: 16px; line-height: 1; cursor: pointer;
}
.row-kebab:hover { color: var(--ink); border-color: var(--hairline); background: var(--paper); }

/* five-role type-ladder utilities */
.t-display { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; line-height: 1.12; color: var(--ink); }
.t-section { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.t-label   { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); }
.t-body    { font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--ink); }
.t-num     { font-family: var(--font-ui); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ===== Logo slot (THM-R-001 §1.1) — the ONE fixed masthead/splash logo component.
   Structure/size never varies per theme; only --ds-logo-asset (the background-image
   url) changes, driven by data-ds-theme (THM-R-002/THM-R-003). */
.ds-logo{display:inline-block;width:132px;height:28px;background-image:var(--ds-logo-asset);background-repeat:no-repeat;background-position:left center;background-size:contain}

/* REFINED DS — learning heading cap (2026-07-08): bring the LMS hero heading
   down to the display ceiling, consistent with the portal type ladder. */
.ds-learning-heading { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; }

/* ============================================================================
   LINT REMEDIATION BATCH (THM-T-005, 2026-07-08)
   Verbatim migration of every page-local <style jsx> block into the central
   DS — closes the styleJsx debt hidden since the 2026-07-07 lineage reconcile
   (8d1727c) dropped the styleJsx checker from this gate. Zero visual change:
   each page's rules are kept byte-equivalent under its existing unique class
   prefix (ib-/ec-/md-/cd-/am-/ce-/chr-/h2r-/ov-/tp-/hb-/it-jml-/leave-/news-/
   bd-). Targeted transforms only:
   - :global(X) unwrapped to plain descendant selectors (real stylesheet now);
   - HrHandbook's bare .ds-button override scoped to .hb-head .ds-button;
   - ItServiceRequest's .it-jml-head variant scoped under .it-jml (its page
     wrapper) so it no longer collides with ItJmlLanding's rule;
   - identical .ec-sync* duplicates (EmployeesTab/MasterData) left in place —
     byte-identical rules, harmless.
   Tokens only — no new hex values.
   ============================================================================ */
/* --- from src/app/app/finance/posting/FinancePostingInbox.tsx --- */
.ib-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.ib-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; margin: 2px 0; }
.ib-sub { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.ib-err { color: var(--baobab); font-size: 12px; }
.ib-muted { color: var(--ink-mute); font-size: 12px; }
.ib-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ib-table thead th { text-align: left; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); padding: 4px 10px; border-bottom: 1px solid var(--hairline); }
/* Row is no longer a clickable <tr> (FIN-033 a11y): the voucher cell carries the
   real Next <Link>. Keep a subtle hover band but drop the row-level pointer so
   the row does not promise whole-row clickability it no longer has. */
.ib-row { border-bottom: 1px solid var(--hairline); }
.ib-row:hover { background: var(--paper-2); }
.ib-row td,.ib-row th { padding: 7px 10px; vertical-align: middle; }
.ib-table tbody th { text-align: left; font-family: var(--font-ui)!important; font-size: 12.5px!important; font-weight: 500!important; letter-spacing: 0!important; text-transform: none!important; color: var(--ink)!important; }
.ib-c { width: 64px; }
.ib-code { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--baobab); }
.ib-subj { color: var(--ink); }
a.ib-subj { cursor: pointer; text-decoration: none; }
a.ib-subj:hover { color: var(--baobab); text-decoration: underline; }
a.ib-subj:focus-visible { outline: 2px solid var(--baobab); outline-offset: 2px; }
.ib-step { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 1px; }
.ib-s { width: 150px; }
.ib-badge { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 3px; padding: 2px 5px; white-space: nowrap; }
.ib-badge.waiting-for-user { color: var(--signal-amber); border-color: var(--signal-amber); background: var(--signal-amber-bg); }
.ib-badge.running { color: var(--signal-amber); border-color: var(--signal-amber); background: var(--signal-amber-bg); }
.ib-badge.completed, .ib-badge.done { color: var(--signal-grass); border-color: var(--signal-grass); background: var(--signal-grass-bg); }
.ib-u { width: 120px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); white-space: nowrap; }

/* --- from src/app/app/hr/master-data/EmployeesTab.tsx --- */
.ec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ec-sub { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.ec-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ec-in { font-size: 12px; padding: 6px 8px; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--ink); }
.ec-err { color: var(--baobab); font-size: 12px; }
.ec-sync { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--paper-2); padding: 10px 12px; margin-bottom: 12px; }
.ec-sync-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-mute); margin-bottom: 6px; }
.ec-sync-head b { color: var(--ink); font-family: var(--font-display); }
.ec-muted { color: var(--ink-mute); font-size: 12px; }
.ec-form { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--paper-2); padding: 12px; margin-bottom: 14px; }
.ec-form-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ec-form-head b { font-family: var(--font-display); color: var(--ink); font-size: 14px; }
.ec-uid { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); }
.ec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 10px; }
.ec-field { display: flex; flex-direction: column; gap: 3px; }
.ec-field.wide { grid-column: span 2; }
.ec-field span { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.ec-field input, .ec-field select { font-size: 12px; padding: 5px 7px; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--ink); }
.ec-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.ec-ghost { font-size: 12px; background: none; border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 6px 12px; color: var(--ink-mute); cursor: pointer; }
.ec-ghost.on { color: var(--baobab); border-color: var(--baobab); }
.ec-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ec-table thead th { text-align: left; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); padding: 4px 10px; border-bottom: 1px solid var(--hairline); }
.ec-row { border-bottom: 1px solid var(--hairline); }
.ec-row:hover { background: var(--paper-2); }
.ec-row td { padding: 6px 10px; vertical-align: middle; color: var(--ink); }
.ec-nm { font-weight: 600; }
.ec-em { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.ec-st { width: 90px; }
.ec-badge { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 3px; padding: 2px 5px; }
.ec-badge.active { color: var(--signal-grass); border-color: var(--signal-grass); background: var(--signal-grass-bg); }
.ec-badge.inactive { color: var(--ink-mute); }
.ec-badge.retired { color: var(--signal-amber); border-color: var(--signal-amber); background: var(--signal-amber-bg); }
.ec-badge.dormant { color: var(--ink-faint); border-color: var(--hairline); }
.ec-ax { width: 170px; white-space: nowrap; text-align: right; }
.ec-link { background: none; border: none; font-size: 12px; color: var(--baobab); cursor: pointer; padding: 2px 6px; text-decoration: none; }
.ec-link.danger { color: var(--signal-amber); }
.ec-link:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 900px) { .ec-grid { grid-template-columns: repeat(2, 1fr); } .ec-field.wide { grid-column: span 2; } }

/* --- from src/app/app/hr/master-data/MasterData.tsx --- */
.md-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.md-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; margin: 2px 0; }
.md-sub { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.md-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.md-in { font-size: 12px; padding: 6px 8px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; color: var(--ink); }
.md-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 12px; }
.md-tab { font-size: 12px; padding: 6px 12px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-mute); cursor: pointer; }
.md-tab.on { color: var(--baobab); border-bottom-color: var(--baobab); font-weight: 600; }
.md-err { color: var(--baobab); font-size: 12px; }
.md-import-label { display: inline-flex; align-items: center; cursor: pointer; }
.ec-sync { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--paper-2); padding: 10px 12px; margin-bottom: 12px; }
.ec-sync-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-mute); margin-bottom: 6px; }
.ec-sync-head b { color: var(--ink); font-family: var(--font-display); }
.md-muted { color: var(--ink-mute); font-size: 12px; }
.md-form, .md-hist { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--paper-2); padding: 12px; margin-bottom: 14px; }
.md-form-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.md-form-head b { font-family: var(--font-display); color: var(--ink); font-size: 14px; }
.md-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 10px; }
.md-field { display: flex; flex-direction: column; gap: 3px; position: relative; }
.md-field.wide { grid-column: span 2; }
.md-field span { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.md-field input, .md-field select { font-size: 12px; padding: 5px 7px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; color: var(--ink); }
.md-field input.ro { background: var(--paper-2); color: var(--ink-mute); }
.md-mgr-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.md-mgr-item { display: block; width: 100%; text-align: left; font-size: 12px; padding: 5px 8px; background: none; border: none; border-bottom: 1px solid var(--hairline); cursor: pointer; color: var(--ink); }
.md-mgr-item:hover { background: var(--paper-2); }
.md-mgr-cur { font-size: 11px; color: var(--signal-grass); }
.md-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.md-ghost { font-size: 12px; background: none; border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 6px 12px; color: var(--ink-mute); cursor: pointer; }
.md-ghost.on { color: var(--baobab); border-color: var(--baobab); }
.md-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.md-table thead th { text-align: left; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); padding: 4px 10px; border-bottom: 1px solid var(--hairline); }
.md-row { border-bottom: 1px solid var(--hairline); }
.md-row:nth-child(even) { background: var(--paper-2); }
.md-row:hover { background: color-mix(in srgb, var(--paper-2) 72%, var(--ink) 9%); }
.md-ax .md-link { visibility: hidden; }
.md-row:hover .md-ax .md-link, .md-row:focus-within .md-ax .md-link { visibility: visible; }
.md-in:focus, .md-field input:focus, .md-field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--baobab-bg); }
.md-row td { padding: 6px 10px; vertical-align: middle; color: var(--ink); }
.md-badge { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 3px; padding: 2px 5px; }
.md-badge.active { color: var(--signal-grass); border-color: var(--signal-grass); background: var(--signal-grass-bg); }
.md-badge.retired, .md-badge.archived, .md-badge.inactive { color: var(--signal-amber); border-color: var(--signal-amber); background: var(--signal-amber-bg); }
.md-ax { width: 150px; white-space: nowrap; text-align: right; }
.md-link { background: none; border: none; font-size: 12px; color: var(--baobab); cursor: pointer; padding: 2px 5px; }
.md-link.danger { color: var(--signal-amber); }
.md-link:disabled { opacity: 0.5; }
.md-chg { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); max-width: 400px; overflow: hidden; text-overflow: ellipsis; }
.md-tree-country { margin-bottom: 10px; }
.md-tree-country-hd { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); border-bottom: 1px solid var(--hairline); padding: 4px 0; margin-bottom: 2px; }
.md-tree-node { }
.md-tree-children { padding-left: 18px; }
.md-tree-item { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--hairline); padding: 4px 6px; cursor: pointer; font-size: 12.5px; color: var(--ink); }
.md-tree-item:hover { background: var(--paper-2); }
.md-tree-hc { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); }
@media (max-width: 900px) { .md-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- from src/app/app/hr-h2r/HrH2rCaseDrawer.tsx --- */
/* The step form is the task on this surface; "Case details" is reference.
   .ds-review-grid / .ds-review-aside / .ds-form are page-level primitives that
   assume a scrolling page with 96px of fixed chrome and a content-dominant
   left column — all three are wrong inside this full-screen modal, so the
   drawer restates them here rather than changing them for every consumer. */
.cd-body { overflow-y: auto; padding: 24px 28px 32px; }
.cd-grid { margin-top: 0; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.cd-grid .ds-review-aside { position: static; }
.cd-form { margin-top: 0; }
.cd-err { color: var(--baobab); }
.cd-form .ds-actions { justify-content: flex-end; }
/* Fields flow into as many columns as fit, so the submit stays above the fold
   instead of ~200px below it, and collapse to one column when narrow.
   Textareas and the actions row always take the full width. */
.cd-form .ds-fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 24px; align-items: start; }
.cd-form .ds-fieldset > .ds-hint,
.cd-form .ds-actions,
.cd-form .ds-field:has(.ds-textarea) { grid-column: 1 / -1; }
.cd-header-actions { display: flex; align-items: center; gap: 8px; }
.cd-cancel-btn { border-color: var(--baobab); color: var(--baobab); }
.cd-cancel-btn:hover { background: var(--baobab); color: var(--paper); }
.cd-cancel-btn-solid { border-color: var(--baobab); color: var(--baobab); }
.cd-cancel-btn-solid:hover { background: var(--baobab); color: var(--paper); }
.cd-cancel-confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cd-cancel-confirm-actions { display: flex; gap: 8px; margin-left: auto; }
.cd-start-recruitment { margin-top: 10px; }
@media (max-width: 880px) { .cd-grid { grid-template-columns: 1fr; } }
      

.am-modal { max-width: 720px; margin: 40px auto; height: auto; max-height: calc(100vh - 80px); border: 1px solid var(--hairline); }
.am-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.am-details { grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
.am-comment { max-width: 100%; }
.am-actions { justify-content: flex-end; }
.am-decline { border-color: var(--baobab); color: var(--baobab); }
.am-decline:hover { background: var(--baobab); color: var(--paper); }
.am-sendback { border-color: var(--signal-amber); color: var(--signal-amber); }
.am-sendback:hover { background: var(--signal-amber); color: var(--paper); }
@media (max-width: 640px) { .am-details { grid-template-columns: 1fr; } }

/* --- from src/app/app/hr-h2r/HrH2rCreateExit.tsx --- */
.cxe-body { overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.cxe-err { color: var(--baobab); }
.cxe-submit { justify-content: flex-end; }

/* --- from src/app/app/hr-h2r/HrH2rCreateHiringRequest.tsx --- */
.chr-body { overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.chr-err { color: var(--baobab); }
.chr-role-mini { border-top: 1px dashed var(--hairline); margin-top: 14px; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.chr-submit { justify-content: flex-end; }

/* --- from src/app/app/hr-h2r/HrH2rKanbanBoard.tsx --- */
.h2r-board { margin-bottom: 4px; }
.h2r-board-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.h2r-board-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -0.02em; margin: 0; }
.h2r-board-count { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.h2r-board-err { color: var(--baobab); font-size: 12px; margin: 4px 0; }
.h2r-board-muted { color: var(--ink-mute); font-size: 12px; }
.h2r-board-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.h2r-col { flex: 0 0 200px; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); display: flex; flex-direction: column; max-height: 360px; }
.h2r-col-h { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--hairline); position: sticky; top: 0; background: var(--paper-2); }
.h2r-col-t { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.25; flex: 1; }
.h2r-col-n { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; padding: 0 5px; }
.h2r-col-add { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--baobab); color: var(--baobab); background: var(--paper); border-radius: 3px; font-family: var(--font-mono); font-size: 12px; line-height: 1; cursor: pointer; }
.h2r-col-add:hover { background: var(--baobab); color: var(--paper); }
.h2r-col-b { padding: 6px; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; }
.h2r-card { text-align: left; background: var(--paper); border: 1px solid var(--hairline); border-left: 3px solid var(--baobab); border-radius: var(--radius-sm); padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.h2r-card:hover { border-color: var(--ink-faint); }
.h2r-card-title { font-size: 11.5px; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h2r-card-meta { display: flex; justify-content: space-between; align-items: center; }
.h2r-chip { font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 3px; padding: 1px 4px; }
.h2r-card-id { font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-faint); }
.h2r-empty { color: var(--ink-faint); font-size: 11px; text-align: center; padding: 4px 0; }

/* --- from src/app/app/hr-h2r/HrH2rLanding.tsx --- */
.h2r-landing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.h2r-landing-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; margin: 2px 0; }
.h2r-filters { display: flex; gap: 8px; }
.h2r-filter-select { min-width: 150px; }
.h2r-landing-err { color: var(--baobab); font-size: 12px; }
.h2r-landing-muted { color: var(--ink-mute); font-size: 12px; }
.h2r-boards { display: flex; flex-direction: column; gap: 16px; }
.h2r-tiles { margin-top: 20px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.h2r-tiles-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.h2r-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; }
.h2r-tile { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--hairline); border-left: 3px solid var(--baobab); border-radius: var(--radius-sm); text-decoration: none; }
.h2r-tile:hover { border-color: var(--ink-faint); background: var(--paper-2); }
.h2r-tile-code { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--baobab); letter-spacing: 0.04em; }
.h2r-tile-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.2; }
      

.gcm-body { padding: 0; overflow-y: auto; }
.gcm-body .topbar { display: none; }

/* --- from src/app/app/hr-h2r/HrH2rRenderer.tsx --- */
.hr-h2r-nav-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hr-h2r-cancel-btn { border-color: var(--baobab); color: var(--baobab); }
.hr-h2r-cancel-btn:hover { background: var(--baobab); color: var(--paper); }
.hr-h2r-cancel-confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hr-h2r-cancel-confirm-actions { display: flex; gap: 8px; margin-left: auto; }
.hr-h2r-tech-detail { margin-top: 16px; font-size: 12px; color: var(--ink-mute); }
.hr-h2r-tech-detail summary { cursor: pointer; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }

/* --- from src/app/app/hr-h2r/HrH2rTileSubpage.tsx --- */
.tp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.tp-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: -0.02em; margin: 2px 0; }
.tp-err { color: var(--baobab); font-size: 12px; }
.tp-muted { color: var(--ink-mute); font-size: 12px; }
.tp-row-link { color: var(--ink); text-decoration: none; font-size: 13px; }
.tp-row-link:hover { color: var(--baobab); }
.tp-when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }

/* --- from src/app/app/hr-handbook/HrHandbook.tsx --- */
.hb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.hb-head .ds-button { white-space: nowrap; }
.hb-grid { display: grid; grid-template-columns: 248px 1fr; gap: 18px; align-items: start; }
.hb-list { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.hb-item { display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 7px 10px; background: transparent; border: 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.hb-item:last-child { border-bottom: 0; }
.hb-item:hover { background: var(--paper-2); }
.hb-item.active { background: var(--baobab-bg); box-shadow: inset 3px 0 0 var(--baobab); }
.hb-code { font-family: var(--font-mono); font-size: 10px; color: var(--baobab); letter-spacing: 0.04em; }
.hb-code.lg { font-size: 13px; }
.hb-name { font-size: 12px; color: var(--ink-soft); line-height: 1.25; }
.hb-detail { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px 18px; background: var(--paper); min-width: 0; }
.hb-d-head { display: flex; align-items: baseline; gap: 10px; }
.hb-d-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); letter-spacing: -0.02em; margin: 0; }
.hb-overview { font-size: 13px; color: var(--ink-soft); margin: 6px 0 8px; }
.hb-kv { background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 12px; color: var(--ink-soft); margin-bottom: 12px; }
.hb-kv div { margin: 1px 0; }
.hb-kl { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); margin-right: 6px; }
.hb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 12px; }
.hb-tab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 12px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ink-mute); cursor: pointer; }
.hb-tab:hover { color: var(--ink-soft); }
.hb-tab.active { color: var(--baobab); border-bottom-color: var(--baobab); }
.hb-swim-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 10px; background: var(--paper); }
/* Scale the generated swimlane to the column so wide diagrams are never clipped;
   preserve aspect ratio and keep horizontal scroll as a fallback for very wide lanes. */
.hb-swim-scroll svg { width: 100%; max-width: 100%; height: auto; display: block; }
.hb-legend { font-size: 11px; color: var(--ink-mute); margin: 6px 0 0; }
.hb-legend .dia { color: var(--baobab); }
.hb-steps { list-style: none; margin: 0; padding: 0; }
.hb-steps li { margin: 0 0 9px; }
.hb-step-h { font-weight: 600; color: var(--ink); font-size: 13px; }
.hb-sn { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; background: var(--baobab); color: var(--paper); border-radius: 50%; font-family: var(--font-mono); font-size: 10px; margin-right: 6px; }
.hb-role { float: right; font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); }
.hb-steps p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.hb-raci { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.hb-raci th { background: var(--ink); color: var(--paper); padding: 5px 8px; text-align: left; font-family: var(--font-mono); font-size: 10px; font-weight: 500; }
.hb-raci td { border: 1px solid var(--hairline); padding: 4px 8px; vertical-align: top; color: var(--ink-soft); }
.hb-raci th:nth-child(n+2), .hb-raci td:nth-child(n+2) { width: 15%; }
.hb-adv-block { margin: 0 0 8px; }
.hb-adv-role { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); }
.hb-adv ul { margin: 2px 0 6px 16px; }
.hb-adv li { font-size: 12.5px; color: var(--ink-soft); margin: 2px 0; line-height: 1.45; }
@media (max-width: 860px) { .hb-grid { grid-template-columns: 1fr; } }

/* --- from src/app/app/it/onboarding-offboarding/ItJmlLanding.tsx --- */
.it-jml-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.it-jml-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; margin: 2px 0; }
.it-jml-err { color: var(--baobab); font-size: 12px; }
.it-jml-muted { color: var(--ink-mute); font-size: 12px; }
.it-jml-boards { display: flex; flex-direction: column; gap: 16px; }

/* --- from src/app/app/it/onboarding-offboarding/ItServiceRequest.tsx --- */
.it-jml .it-jml-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.it-jml-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; margin: 2px 0; }
.it-jml-tabs { display: flex; gap: 4px; }
.it-jml-tab { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 14px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink-mute); border-radius: var(--radius-sm); cursor: pointer; }
.it-jml-tab.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.it-jml-card { max-width: 720px; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 20px; }
.it-jml-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
.it-jml-status { max-width: 720px; margin-top: 12px; font-size: 13px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--hairline); }
.it-jml-status.is-ok { color: var(--signal-grass); border-color: var(--signal-grass); background: var(--signal-grass-bg); }
.it-jml-status.is-err { color: var(--baobab); border-color: var(--baobab); background: var(--baobab-bg); }

/* --- from src/app/app/me/leave/LeaveList.tsx --- */
.leave-list-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.leave-list-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 2px 0;
}

/* --- from src/app/app/me/leave/[leaveId]/LeaveDetail.tsx --- */
.leave-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.leave-detail-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 2px 0;
}

/* --- from src/app/app/me/leave/new/LeaveRequestForm.tsx --- */
.leave-new-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.leave-new-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 2px 0;
}
.leave-new-card {
  max-width: 720px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.leave-status {
  max-width: 720px;
  margin-top: 12px;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
}
.leave-status.is-ok {
  color: var(--signal-grass);
  border-color: var(--signal-grass);
  background: var(--signal-grass-bg);
}
.leave-status.is-err {
  color: var(--baobab);
  border-color: var(--baobab);
  background: var(--baobab-bg);
}

/* --- from src/app/app/news/NewsList.tsx --- */
.news-head {
  margin-bottom: 14px;
}
.news-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 2px 0;
}

/* --- from src/app/app/procurement/ProcEa2Board.tsx --- */
.board {
  padding-bottom: 8px;
}
.bd-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.bd-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.bd-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--baobab);
}
.bd-title h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
}
.bd-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bd-err {
  color: var(--baobab);
  font-size: 12px;
  margin: 4px 0;
}
.bd-muted {
  color: var(--ink-mute);
  font-size: 12px;
}
.bd-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: flex-start;
}
.bd-col {
  flex: 0 0 240px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
}
.bd-col-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 9px;
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  background: var(--paper-2);
}
.bd-col-t {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.25;
}
.bd-col-n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0 5px;
  margin-left: 6px;
}
.bd-col-b {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
}
.bd-card {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--baobab);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bd-card:hover {
  border-color: var(--ink-faint);
  box-shadow: 0 1px 0 var(--hairline);
}
.bd-card-s {
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bd-card-m {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bd-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1px 4px;
}
.bd-badge.waiting-for-user {
  color: var(--signal-amber);
  border-color: var(--signal-amber);
  background: var(--signal-amber-bg);
}
.bd-badge.completed,
.bd-badge.done {
  color: var(--signal-grass);
  border-color: var(--signal-grass);
  background: var(--signal-grass-bg);
}
.bd-id {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-faint);
}
.bd-empty {
  color: var(--ink-faint);
  font-size: 11px;
  text-align: center;
  padding: 4px 0;
}

/* --- from src/app/app/procurement/ProcEa2Renderer.tsx --- */
.lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}
.lines-table th,
.lines-table td {
  border: 1px solid var(--hairline);
  padding: 4px 6px;
  text-align: left;
}
.lines-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
  background: var(--paper-2);
}
.lines-table-readonly td {
  color: var(--ink-soft);
}
.lines-table input.ds-input {
  width: 100%;
  min-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* HIRE-010: structured requirement editor (RequirementsEditor.tsx) is the
   first .lines-table consumer whose rows carry a <select> cell (priority)
   alongside the existing <input> cells — same full-width-in-cell treatment. */
.lines-table select.ds-select {
  width: 100%;
  min-width: 120px;
}

/* ===== FINREP dense financial-table numerics (2026-07-08) =====
   .ds-mono-num: right-aligned tabular-figure amount cell for td AND th — additive sibling
   to .ds-mono (which stays left-aligned for codes/hashes/ids elsewhere). Applied to numeric
   columns (opening/debit/credit/closing/balance/aging buckets) on GL reporting + FINREP
   report tables. .ds-mono-num-negative is a modifier (combine both classes) giving a
   negative amount the same "danger" ink the DS already uses for .ds-menu-item-danger. */
.ds-mono-num{font-family:var(--font-mono);font-weight:500;font-size:calc(11.5px * var(--fs-scale, 1));letter-spacing:0.02em;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-mono-num-negative{color:var(--baobab)}
th.ds-mono-num{font-weight:500}

/* .ds-records-compact-sticky: opt-in modifier (combine with .ds-records-compact on the same
   <table>) that pins the header row to the top of the page as a long report table scrolls.
   Scoped to the modifier so every OTHER .ds-records-compact table in the app (which does not
   add this class) is completely unaffected. */
.ds-records-compact-sticky thead th{position:sticky;top:0;z-index:3;background:var(--paper);border-bottom:1px solid var(--ink);padding:8px 12px;text-align:left;font-family:var(--font-mono);font-weight:500;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute)}
.ds-records-compact-sticky thead th.ds-mono-num{text-align:right}

/* ===== FINREP design-review fixes (2026-07-08, review C2 + I1) =====
   C2: `.module-workbench .ds-filterbar .ds-input{flex:0 1 200px}` assumes the input sits
   directly in the ROW-direction filterbar. Inside a `.ds-field` wrapper (COLUMN direction —
   the labeled-input pattern the reporting filter rows use) that 200px flex-basis applies to
   the vertical axis, blowing the input up to a 200px-tall card (verified via live computed
   styles: height:200px, flex:0 1 200px). Neutralize the basis in the ds-field context so the
   input keeps its natural compact height; width stays content-sized with the same 120px floor
   the row-direction rule uses. */
.module-workbench .ds-filterbar .ds-field .ds-input{flex:0 0 auto;min-width:120px}

/* I1: the union-merged file carries two conflicting `.ds-button-secondary:hover` rules — an
   earlier one sets {background:ink; color:paper}, a later one resets background to transparent
   but NOT color. Net computed hover state: paper-colored text on a transparent background =
   the button label disappears on hover (verified live: color rgb(250,250,246), bg transparent).
   Re-assert readable hover ink last so it wins; background/border keep the later rule's
   transparent/ink treatment. */
.ds-button-secondary:hover{color:var(--ink)}

/* ===== Reporting UX audit fixes (2026-07-09) =====
   ds-table-scroll: NEW opt-in wrapper (wrap `<div className="ds-table-scroll"><table ...>`)
   giving a report table a horizontal scrollbar when it's wider than its container. Review C3:
   Stock Valuation's Items table clipped 49.7px off the right edge of a 1440px viewport with
   `document.body.scrollWidth === window.innerWidth` exactly — i.e. there was NO scroll
   mechanism anywhere on the page; the overflow was simply unreachable, not just visually tight.
   `.ds-table-section`/`.ds-records-compact` never had an overflow rule at all, so ANY report
   table wider than its container has this same latent failure mode — applied across every
   report table in Reporting, not only the one the audit happened to catch.

   min-width:0 makes the wrapper a real overflow boundary: without it a grid/flex descendant
   defaults to min-width:auto and refuses to shrink below its table's intrinsic width, so
   overflow-x:auto has nothing to clip and never produces a scrollbar. */
.ds-table-scroll{overflow-x:auto;min-width:0}

/* Review C3 (root cause): `.module-workbench` is `display:grid` with an IMPLICIT `auto`
   column. A grid item's default `min-width:auto` lets the single auto track grow to the
   widest item's min-content — so a report table wider than the page (Stock Valuation's Items
   table: intrinsic 1158px inside a 1080px `.page-inner`) forced the whole track to 1158px,
   breaking out of the page and pushing the last column ~50px off the right edge of the
   viewport with `document.body.scrollWidth === window.innerWidth` (no page scroll to reach
   it) — the exact unreachable-overflow the audit caught. Verified live post-first-deploy:
   the `.ds-table-scroll` wrapper alone was inert (clientWidth === scrollWidth === 1158, never
   scrolled) because this outer track was still growing under it. Capping the column at
   `minmax(0,1fr)` floors the track at 0 and caps it at the container width, so every table
   section stays page-width and the `.ds-table-scroll` wrapper inside finally has something to
   clip + scroll. The header defines its own inner grid and is unaffected.

   SCOPED to the reporting surface (`[data-eid="reporting-section"]`, the reporting layout
   wrapper) rather than `.module-workbench` globally: the same class backs OMS / procurement /
   other workbench pages, and capping their grid track could clip a wide table that today
   overflows-visibly on a page WITHOUT a `.ds-table-scroll` wrapper. Reporting is the only
   surface that (a) was audited for this and (b) wraps every table in `.ds-table-scroll`, so
   the cap is safe and complete here and touches nothing else. */
[data-eid="reporting-section"] .module-workbench{grid-template-columns:minmax(0,1fr)}

/* Review C2: two independently-reproduced cases of an ACTIVE filter chip rendering with
   identical text/background color (`color: rgb(14,14,12)` == `background-color:
   rgb(14,14,12)`, both --ink) instead of the correct paper-on-ink. components.css carries
   .ds-filter-chip/.ds-filter-chip-active defined 5 separate times at different points in this
   file (lines ~77, ~271, ~1796, ~1916, ~3281 as of this fix) — all currently agree on the
   paper/ink values, but that many duplicate definitions of the same class is exactly the kind
   of specificity/ordering hazard that produces a black-on-black bug the moment any ONE copy
   drifts (as already happened to `.ds-filter-chip` itself: the padding/border-radius already
   differ between copies). Re-assert the correct active-chip colors as the unconditionally last
   word in the cascade for the reporting surface, same pattern as the C2/I1 fix directly above.
   Review C1: the period-preset chips (This month/This quarter/YTD/Prior year) never computed
   an active class AT ALL — clicking correctly updated from/to but gave zero visual
   confirmation, which reads as a dead button (worst on days the quarter and month ranges
   coincide). Fixed at the source in ReportingFilterBar.tsx / SaleReportReport.tsx /
   StatementReport.tsx / SalesSummaryReport.tsx (now compute the active class the same way the
   country/currency chips already did) — this rule is the CSS-side backstop for that class. */
.module-workbench .ds-filterbar .ds-filter-chip-active{color:var(--paper);background:var(--ink);border-color:var(--ink)}

/* Review I1: without a fixed table-layout, a report table's column widths are content-driven —
   expanding the Trial Balance tree deep enough (5+ levels) changed the Name column's effective
   width, which reflowed UNRELATED sibling rows elsewhere in the same table (a root row wrapping
   to two lines with no change to its own content or the viewport). .ds-records-compact-fixed is
   an opt-in modifier (combine with .ds-records-compact on the same <table>, alongside an explicit
   <colgroup> giving each column a percentage width) that makes column widths independent of cell
   content, so one row's content can never perturb another row's layout. Scoped to the modifier so
   every OTHER .ds-records-compact table (no explicit colgroup) is unaffected. */
.ds-records-compact-fixed{table-layout:fixed}
/* --- TA Recruitment breadcrumb + kanban main nav (TaMainNav.tsx) —
   TAR-R-061 / TAR-R-062. 12-column dense board (11 live phases + Completed)
   sized to fit on screen without page scroll; each column scrolls
   internally instead. Breadcrumb crumbs double as a phase filter/focus
   toggle for the board below them. -------------------------------------- */
.ta-nav{display:flex;flex-direction:column;gap:8px}
.ta-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--radius-sm)}
.ta-crumb-wrap{display:inline-flex;align-items:center;gap:2px}
.ta-crumb-sep{color:var(--ink-faint);font-size:11px}
.ta-crumb{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid transparent;border-radius:3px;padding:3px 7px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.03em;color:var(--ink-soft);cursor:pointer}
.ta-crumb:hover{background:var(--paper);border-color:var(--hairline)}
.ta-crumb-current{background:var(--baobab-bg);border-color:var(--baobab);color:var(--baobab)}
.ta-crumb-n{font-family:var(--font-mono);font-size:9px;color:var(--ink-mute);background:var(--paper);border:1px solid var(--hairline);border-radius:8px;padding:0 5px}
.ta-crumb-current .ta-crumb-n{border-color:var(--baobab);color:var(--baobab)}

/* ROOT-CAUSE FIX (2026-07-21, sideload-measured): this is the canonical,
   manifest-registered .ta-kanban rule. Two prior fix attempts edited a
   `kanban-2row` modifier class in the SHELL'S OWN globals.css instead of
   this file, so their 6-col/2-row grid never reliably won the cascade --
   this rule (equal specificity, loaded after globals.css on the page)
   always overrode it back to a stale 12-col single-row grid left over
   from an earlier board design. Fixed here, at the actual DS source of
   truth, and the app no longer needs a separate override class. */
/* R12 (2026-07-24) -- 10 live kanban phases (onboarding + completed moved
   out, R10/R11/R14) fit a clean 5-wide x 2-row grid -- wider columns than
   the old 6-wide/12-phase layout. */
.ta-kanban{display:grid;width:100%;grid-template-columns:repeat(5, minmax(0, 1fr));grid-auto-rows:minmax(220px, 1fr);gap:8px}
@media (max-width:900px){.ta-kanban{grid-template-columns:repeat(2, minmax(0, 1fr));grid-auto-rows:minmax(200px, 1fr)}}
/* R8 -- filter row above the board. */
.ta-filterbar{display:flex;gap:8px;margin-bottom:10px}
.ta-filterbar .ds-select{width:auto;min-width:160px}
/* R17 -- compact supplier-portal indicator on a card. */
.ta-badge-supplier{align-self:flex-start;font-family:var(--font-mono);font-size:8px;text-transform:uppercase;letter-spacing:.03em;color:var(--signal-amber);border:1px solid var(--signal-amber);border-radius:8px;padding:1px 5px;text-decoration:none;white-space:nowrap}
.ta-badge-supplier:hover{background:var(--signal-amber-bg)}
.ta-badge-supplier--on-dark{margin-left:8px;align-self:center}
/* R11/R14 -- Previous transactions: wider table-row layout, consistent
   (non-white) styling matching the kanban's own --paper-2/--ink vocabulary. */
.ta-prev{margin-top:16px;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--radius-sm);overflow:hidden}
.ta-prev-h{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--ink)}
.ta-prev-t{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--paper)}
.ta-prev-list{display:flex;flex-direction:column}
.ta-prev-row{display:grid;grid-template-columns:2.4fr 1fr 1fr 1fr 1fr;gap:10px;align-items:center;padding:8px 10px;background:var(--paper);border-bottom:1px solid var(--hairline);text-decoration:none;color:inherit}
.ta-prev-row:last-child{border-bottom:0}
.ta-prev-row:hover{background:var(--paper-2)}
.ta-prev-title{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-prev-meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-prev-phase{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft)}
.ta-prev-age{font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);text-align:right}
.ta-col{min-width:0;display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--radius-sm);overflow:hidden}
.ta-col-focused{border-color:var(--baobab);box-shadow:inset 0 0 0 1px var(--baobab)}
.ta-col-completed{background:var(--paper)}
.ta-col-dimmed{opacity:0.4}
.ta-col-drop-advance{border-color:var(--signal-grass);box-shadow:inset 0 0 0 2px var(--signal-grass);background:var(--signal-grass-bg)}
.ta-col-drop-demote{border-color:var(--signal-amber);box-shadow:inset 0 0 0 2px var(--signal-amber);background:var(--signal-amber-bg)}
.ta-card[draggable="true"]{cursor:grab}
.ta-card-dragging{opacity:0.45}
/* R13 (2026-07-24) -- column headers were the same weak --paper-2 tint as
   the body; strong dark band instead, matching the dialog dark titlebar
   treatment (var(--ink)). */
.ta-col-h{display:flex;align-items:center;gap:4px;padding:6px 6px;border-bottom:0;background:var(--ink)}
.ta-col-t{font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;color:var(--paper);flex:1;line-height:1.2}
.ta-col-n{font-family:var(--font-mono);font-size:9px;color:var(--paper);background:transparent;border:1px solid color-mix(in srgb,var(--paper) 40%,transparent);border-radius:8px;padding:0 4px}
/* R7 (2026-07-24) -- board holds dozens of cards; tighter row rhythm. */
.ta-col-b{padding:4px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1;min-height:0}
.ta-card{text-align:left;background:var(--paper);border:1px solid var(--hairline);border-left:2px solid var(--baobab);border-radius:3px;padding:4px 6px;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.ta-card{transition:border-color 0.12s ease,background 0.12s ease}
.ta-card:hover{border-color:var(--ink-faint);background:var(--paper-2)}
/* R8 -- single-line truncation with ellipsis, not a 2-line wrap, so a long
   title never pushes a card taller than its neighbors. */
.ta-card-title{font-size:10.5px;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-card-meta{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:1px;padding-top:3px;border-top:1px solid var(--hairline)}
.ta-card-id{font-family:var(--font-mono);font-size:8px;text-transform:uppercase;letter-spacing:0.03em;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ta-card-age{font-family:var(--font-mono);font-size:8px;color:var(--ink-faint);flex:none}
.ta-col-empty{color:var(--ink-faint);font-size:10px;text-align:center;padding:4px 0}
.ta-col-note{display:block;width:100%;font-family:var(--font-mono);font-size:8px;color:var(--ink-mute);text-align:center;padding:3px 4px;border-top:1px solid var(--hairline);background:var(--paper-2)}
.ta-col-note-action{appearance:none;cursor:pointer;border-left:0;border-right:0;border-bottom:0}
.ta-col-note-action:hover{color:var(--baobab);background:var(--paper)}
.ta-nav-refresh{align-self:flex-end;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-mute);background:transparent;border:1px solid var(--hairline);border-radius:3px;padding:3px 8px;cursor:pointer}
.ta-nav-refresh:hover{color:var(--ink);border-color:var(--ink-faint)}
/* BA-R2-005/BA-R2-006/UX-R2-003: row for the refresh action + the
   synthetic-case visibility toggle so the data-hygiene control sits next
   to the control it's paired with, not stacked as its own bar. */
.ta-nav-footer{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.ta-nav-footer .ta-nav-refresh{align-self:auto}

/* --- UX-R1-001: message threads (candidate signals/notes, case notes,
   interview cockpit transcript) — .msg-item-in = agent/system-authored,
   .msg-item-out = human-authored, distinguished by accent-bar side/color so
   a thread reads left-to-right without needing to re-read the author line
   on every row. -------------------------------------------------------- */
.msg-thread{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:320px;overflow-y:auto}
.msg-item{background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--ink-faint);border-radius:var(--radius-sm);padding:7px 10px}
.msg-item-in{border-left-color:var(--baobab)}
.msg-item-out{border-left-color:var(--ink-soft)}
.msg-item-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px}
.msg-item-author{font-family:var(--font-mono);font-weight:600;font-size:calc(10px * var(--fs-scale, 1));text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-soft)}
.msg-item-time{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));color:var(--ink-faint);flex:none}
.msg-item-body{font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));line-height:1.45;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}

/* --- UX-R1-001: requirement checklist — candidate multi-select (TaCaseDetail)
   and interview requirement-coverage (TaInterviewCockpit) share this family.
   .req-item-{covered,partial,gap} apply to either the row (coverage, state
   already known) or directly to the .req-item-state dot (candidate toggle,
   selected = covered) — both combinations are styled below. ------------- */
.req-checklist{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.req-item{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:7px 9px;font:inherit}
button.req-item{cursor:pointer}
button.req-item:hover{border-color:var(--ink-faint)}
.req-item-head{display:flex;align-items:center;gap:7px}
.req-item-state{width:8px;height:8px;flex:none;border-radius:50%;background:var(--paper-2);border:1px solid var(--hairline)}
.req-item-state.req-item-covered,.req-item.req-item-covered .req-item-state{background:var(--signal-grass);border-color:var(--signal-grass)}
.req-item.req-item-partial .req-item-state{background:var(--signal-amber);border-color:var(--signal-amber)}
.req-item.req-item-gap .req-item-state{background:transparent;border-color:var(--baobab)}
.req-item-label{flex:1;font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink)}
.req-item-tag{font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale, 1));text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:2px;padding:2px 6px;flex:none}
.req-item-evidence{font-family:var(--font-ui);font-size:calc(11.5px * var(--fs-scale, 1));line-height:1.4;color:var(--ink-mute);padding-left:15px}

/* --- UX-R1-001: inline supplier search (TaCaseDetail SupplierInlineSearch)
   — reuses the exact visual language ResolvingSelect's .rsel-* family
   already established (see below) rather than a third dropdown style. --- */
.inline-search{position:relative}
.inline-search-input{width:100%;font-family:var(--font-ui);font-size:13px;color:var(--ink);background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:7px 9px}
.inline-search-input:focus{outline:none;border-color:var(--baobab)}
.inline-search-results{position:absolute;z-index:20;top:calc(100% + 2px);left:0;right:0;max-height:260px;overflow-y:auto;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(14,14,12,0.12)}
.inline-search-result{display:block;width:100%;text-align:left;padding:6px 9px;font-family:var(--font-ui);font-size:12.5px;color:var(--ink-soft);background:transparent;border:0;border-bottom:1px solid var(--hairline);cursor:pointer}
.inline-search-result:last-child{border-bottom:0}
.inline-search-result:hover{background:var(--paper-2);color:var(--ink)}
.inline-search-empty{padding:8px 9px;font-family:var(--font-ui);font-size:12px;color:var(--ink-faint)}

/* --- UX-R1-001: onboarding/contract document-request rows (TaOnboardingSection) --- */
.doc-request-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px solid var(--hairline)}
.doc-request-row:last-of-type{border-bottom:0}
.doc-request-type{flex:1;font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink)}
.doc-request-state{font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale, 1));text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:2px;padding:2px 6px;flex:none}
.doc-request-state-shared{color:var(--signal-grass);border-color:var(--signal-grass)}
.doc-request-state-received{color:var(--signal-grass);border-color:var(--signal-grass)}
.doc-request-state-pending{color:var(--signal-amber);border-color:var(--signal-amber)}
.doc-request-link{font-family:var(--font-mono);font-size:calc(11px * var(--fs-scale, 1));color:var(--baobab);text-decoration:none;flex:none}
.doc-request-link:hover{text-decoration:underline}

/* --- UX-R1-001: interview cockpit live-hint strip (TaInterviewCockpit) --- */
.hint-strip{margin-top:6px;padding:8px 10px;background:var(--paper-2);border:1px solid var(--hairline);border-left:3px solid var(--baobab);border-radius:var(--radius-sm);font-family:var(--font-ui);font-size:calc(12px * var(--fs-scale, 1));line-height:1.45;color:var(--ink-soft)}

/* --- TAR-R-056 resolving dropdown (ResolvingSelect.tsx / CountrySelect) —
   type-ahead + near-match suggestions + create-new, extends the existing
   .inline-search visual language rather than inventing a new one. --------- */
.rsel{position:relative}
/* R2 (2026-07-24) -- rsel-input must be IDENTICAL geometry to .ds-input/
.ds-select/.ds-textarea (same font-size/weight/line-height/padding/
border-radius/background) so a text field and a typeahead field are never
visually distinguishable by height/shape inside the same form. */
.rsel-input{width:100%;font-family:var(--font-ui);font-weight:500;font-size:calc(14.5px * var(--fs-scale, 1));line-height:1.4;color:var(--ink);background:var(--paper-2);border:1px solid var(--hairline);border-radius:3px;padding:10px 12px;transition:border-color 0.14s ease, background 0.14s ease}
.rsel-input:hover{border-color:var(--ink-mute)}
.rsel-input:focus{outline:none;border-color:var(--baobab)}
.rsel-input:disabled{background:var(--paper-2);color:var(--ink-faint)}
.rsel-note{display:block;font-size:10.5px;color:var(--ink-mute);margin-top:2px}
.rsel-note-err{color:var(--baobab)}
.rsel-results{position:absolute;z-index:20;top:calc(100% + 2px);left:0;right:0;max-height:260px;overflow-y:auto;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(14,14,12,0.12)}
/* Dialog-safe variant (RselResults component, ResolvingSelect.tsx) -- fixed-position, coordinates from --rsel-x/--rsel-y/--rsel-w so the dropdown escapes any scrollable ancestor's clip (e.g. .ds-modal-dialog-body), same mechanism as .ds-hover-preview's --hp-x/--hp-y. */
.rsel-results--fixed{position:fixed;z-index:1200;top:var(--rsel-y,-9999px);left:var(--rsel-x,-9999px);right:auto;width:var(--rsel-w,auto)}
.rsel-option{display:flex;width:100%;text-align:left;justify-content:space-between;gap:8px;padding:6px 9px;font-size:12.5px;color:var(--ink-soft);background:transparent;border:0;border-bottom:1px solid var(--hairline);cursor:pointer}
.rsel-option:last-child{border-bottom:0}
.rsel-option:hover{background:var(--paper-2);color:var(--ink)}
/* Defect 2 (2026-07-28) -- keyboard highlight, same visual weight as :hover
   so ArrowDown navigation reads identically to a mouse hover (CountrySelect
   in ResolvingSelect.tsx: typing + Enter had no keyboard path at all). */
.rsel-option--active{background:var(--paper-2);color:var(--ink)}
.rsel-empty{padding:8px 9px;font-size:12px;color:var(--ink-faint)}
.rsel-create{border-top:1px solid var(--hairline)}
.rsel-warn{padding:6px 9px;font-size:10.5px;color:var(--signal-amber);background:var(--signal-amber-bg)}
.rsel-option-create{color:var(--baobab);font-weight:600}
.rsel-option-create:hover{background:var(--baobab-bg)}
.rsel-country-group{display:flex;flex-direction:column}
.rsel-country-head{font-weight:600}
.rsel-country-count{font-family:var(--font-mono);font-size:9px;color:var(--ink-mute)}
.rsel-entity-option{padding-left:20px;font-size:12px;color:var(--ink-soft)}

/* --- TAR-R-057 ASAP-or-date start-date control ------------------------- */
/* defect D2 (2026-07-24) -- keep the ASAP checkbox + date input on ONE
   line even in a narrow 3-col grid cell; without this the row wraps and
   blows the grid row height. */
.rsel-startdate{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;height:42px}
.rsel-startdate .ds-input{flex:1;min-width:0;height:100%}
.rsel-asap-toggle{flex:none;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.03em;color:var(--ink-soft);white-space:nowrap}
.rsel-startdate .ds-input{flex:1}

/* --- category-nav: collapsible left-nav category folders (IT Service Desk
   accordion, S9). Header is a real button (aria-expanded/aria-controls);
   body only mounts while open. Dense — no extra vertical padding beyond
   what a single-line category row needs. */
.category-nav-header{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;cursor:pointer;padding:12px 20px;font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);transition:color .12s ease}
.category-nav-header:hover{color:var(--ink)}
.category-nav-header svg{width:13px;height:13px;color:var(--ink-faint);flex:none}
.category-nav-label{flex:1;min-width:0}
.category-nav-count{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-faint);flex:none}
.category-nav-chevron{display:inline-flex;flex:none;transition:transform .14s ease}
.category-nav-chevron svg{width:12px;height:12px;color:var(--ink-faint)}
.category-nav-chevron[data-state="open"]{transform:rotate(90deg)}
.category-nav-body{padding-bottom:4px}

/* ===== FinancialMatrix — management reporting matrix (2026-07-10) ===== */
.ds-financial-matrix-wrap{max-width:100%;overflow:auto;border:1px solid var(--hairline);background:var(--paper)}
.ds-financial-matrix{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-family:var(--font-ui);font-size:12px;line-height:1.25}
.ds-financial-matrix-caption{text-align:left;padding:9px 12px;border-bottom:1px solid var(--hairline);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);background:var(--paper-2)}
.ds-financial-matrix thead th{position:sticky;top:0;z-index:4;padding:9px 10px;border-bottom:1px solid var(--ink);background:var(--paper);color:var(--ink-mute);font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ds-financial-matrix tbody th,.ds-financial-matrix tbody td{padding:8px 10px;border-bottom:1px solid var(--hairline);background:var(--paper);white-space:nowrap}
.ds-financial-matrix tbody tr:last-child th,.ds-financial-matrix tbody tr:last-child td{border-bottom:0}
.ds-financial-matrix-row-label{position:sticky;left:0;z-index:2;min-width:230px;max-width:300px;text-align:left}
.ds-financial-matrix thead .ds-financial-matrix-row-label{z-index:6}
.ds-financial-matrix-row-parent th,.ds-financial-matrix-row-parent td{font-weight:700;background:var(--paper-2)}
.ds-financial-matrix-row-parent .ds-financial-matrix-row-label{background:var(--paper-2)}
.ds-financial-matrix-row-child .ds-financial-matrix-row-label{padding-left:32px;color:var(--ink-soft)}
.ds-financial-matrix-toggle{display:flex;align-items:flex-start;gap:8px;width:100%;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.ds-financial-matrix-toggle:hover{color:var(--baobab)}
.ds-financial-matrix-sub{display:block;margin-top:2px;color:var(--ink-mute);font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.03em}
.ds-financial-matrix-cell{display:block;width:100%;min-width:62px;margin:-8px -10px;padding:8px 10px;border:0;background:transparent;color:inherit;font:inherit;text-align:right;cursor:pointer}
.ds-financial-matrix-cell:hover{background:var(--baobab-bg);color:var(--baobab)}
.ds-financial-matrix-cell:disabled{cursor:default;color:var(--ink-faint)}
.ds-financial-matrix-cell:disabled:hover{background:transparent;color:var(--ink-faint)}
.ds-financial-matrix-cell-selected{background:var(--baobab-bg);color:var(--baobab);box-shadow:inset 0 -2px 0 var(--baobab)}
.ds-financial-matrix-total{position:sticky;right:0;z-index:3;border-left:1px solid var(--hairline);background:var(--paper)}
.ds-financial-matrix thead .ds-financial-matrix-total{z-index:7}
.ds-financial-matrix-row-parent .ds-financial-matrix-total{background:var(--paper-2)}
.ds-financial-matrix-empty{padding:28px;text-align:center;color:var(--ink-mute)}
@media(max-width:640px){
  .ds-financial-matrix-row-label{min-width:180px;max-width:210px}
  .ds-financial-matrix tbody th,.ds-financial-matrix tbody td{padding-top:10px;padding-bottom:10px}
}

/* Reporting workbench modifiers: fixed-shell clearance and owned wide-content overflow. */
.module-workbench.module-workbench-reporting{grid-template-columns:minmax(0,1fr)}
.ds-page-below-topbar{padding-top:88px}
@media(max-width:640px){.ds-page-below-topbar{padding-top:72px}}
/* --- Our Values (STEEL) page (values/page.tsx) — paper hero, STEEL letter strip,
   value grid, culture band. Baobab red stays a SCARCE accent: only the framed
   baobab mark + the 5 STEEL strip letters carry it; the value-grid letter badges
   use ink/paper so red does not flood the page. ------ */
.values-topbar{margin-bottom:0}
.values-page{display:flex;flex-direction:column;gap:28px}
.values-hero{display:flex;justify-content:space-between;align-items:center;gap:32px;padding-bottom:24px;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.values-hero-copy{max-width:560px}
.values-hero-copy h1{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:42px;letter-spacing:-0.02em;color:var(--ink);margin:6px 0 10px}
.values-hero-copy p{color:var(--ink-mute);font-size:14px;line-height:1.55;margin:0}
.values-baobab{display:flex;align-items:center;gap:16px;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--radius);padding:16px 20px;max-width:360px}
.values-baobab-mark{flex:none;width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--hairline)}
.values-baobab span{display:block;font-size:13px;color:var(--ink);line-height:1.4}
.values-baobab strong{display:block;margin-top:4px;font-family:var(--font-display);font-style:italic;font-weight:700;font-size:13px;color:var(--ink-soft)}
.values-strip{display:flex;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.values-letter-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:18px 8px;border-right:1px solid var(--hairline);background:var(--paper)}
.values-letter-card:last-child{border-right:0}
.values-letter-card span{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:32px;line-height:1;color:var(--baobab)}
.values-letter-card small{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;color:var(--ink-faint)}
.values-grid{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.values-card{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;background:var(--paper);padding:22px 24px;border-bottom:1px solid var(--hairline)}
.values-card:last-child{border-bottom:0}
.values-card-letter{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-style:italic;font-weight:800;font-size:64px;line-height:1;color:var(--baobab);border-right:1px solid var(--hairline);min-height:76px}
.values-card h2{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-0.01em;margin:4px 0 6px}
.values-card p{color:var(--ink-mute);font-size:13px;line-height:1.5;margin:0}
.values-culture{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:24px;border-top:1px solid var(--hairline);flex-wrap:wrap}
.values-culture h2{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:21px;color:var(--ink);margin:6px 0}
.values-culture p{max-width:480px;color:var(--ink-mute);font-size:13px;line-height:1.55;margin:0}

/* Sticky-note launcher glyph: central CDS object, never page-owned styling. */
.win-launcher-sticky-icon{position:relative;display:block;width:15px;height:17px;margin:auto;background:var(--paper);border:1px solid currentColor;border-radius:2px}
.win-launcher-sticky-icon::after{content:"";position:absolute;right:-1px;top:-1px;width:6px;height:6px;background:var(--ink);border-left:1px solid var(--paper);border-bottom:1px solid var(--paper)}
@media(max-width:860px){.values-card{grid-template-columns:64px 1fr;padding:18px 16px;gap:14px}.values-card-letter{font-size:48px;min-height:60px}}

/* Reporting workbench overflow ownership at narrow widths. */
.module-workbench.module-workbench-reporting{overflow-x:clip}
.module-workbench-reporting>.ds-filterbar{max-width:100%;overflow-x:auto;flex-wrap:nowrap}
.module-workbench-reporting .ds-datagrid-wrap{max-width:100%;min-width:0;overflow-x:auto}
.module-workbench-reporting .ds-financial-matrix-wrap{contain:inline-size}
/* ============================================================================
   IT Service Desk — execution-first two-pane surface (sd-*) + ServiceFlow
   next-steps layer (sf-*). Ported from the approved v8 interaction reference.
   Uses ONLY central design-system tokens (globals.css :root); the ds-*
   component classes come from the central DS (public/_design-system/
   components.css). Candidate DS primitives: "app-shell", "category-nav",
   "assistant-video", "process-strip", "draft-note", "install-list",
   "request-strip".
   ============================================================================ */

.sd-app{display:flex;flex-direction:column;height:calc(100vh - 96px);min-height:520px;background:var(--paper-2);color:var(--ink-soft);font-family:var(--font-ui);font-weight:500;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;border:1px solid var(--ink)}

.sd-top{display:flex;align-items:center;gap:30px;padding:13px 26px;background:var(--paper);border-bottom:1px solid var(--ink);flex:none}
.sd-brand{display:flex;flex-direction:column;gap:2px;flex:none;max-width:none;cursor:pointer;background:transparent;border:0;text-align:left;padding:0}
.sd-title{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:27px;line-height:1;letter-spacing:-0.02em;color:var(--ink);margin:0}

.sd-body{flex:1;display:flex;min-height:0}

.sd-menu{width:284px;flex:none;border-right:1px solid var(--ink);background:var(--paper);overflow-y:auto;padding:8px 0 34px}
.sd-group{border-bottom:1px solid var(--hairline)}
.sd-group:last-child{border-bottom:0}
/* S9: category header/count/chevron/body are central DS classes
   (category-nav-*, public/_design-system/components.css) — accordion nav. */
.sd-task{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-left:2px solid transparent;padding:8px 20px 8px 22px;font-family:var(--font-ui);font-weight:500;font-size:13.5px;color:var(--ink-soft);cursor:pointer;line-height:1.3;transition:background .12s ease,color .12s ease}
.sd-task:hover{background:var(--paper-2);color:var(--ink)}
.sd-task-active{background:var(--paper-2);color:var(--ink);border-left-color:var(--baobab);font-weight:600}
.sd-task-dot{width:5px;height:5px;border-radius:50%;background:var(--ink-faint);flex:none}
.sd-task-active .sd-task-dot{background:var(--baobab)}
.sd-menu-empty{padding:22px 20px;font-family:var(--font-ui);font-size:13px;color:var(--ink-mute)}

.sd-pane{flex:1;overflow-y:auto;background:var(--paper-2)}
.sd-detail{max-width:720px;margin:0 auto;padding:20px 36px 52px;animation:sd-fade .26s ease both}
@keyframes sd-fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ServiceFlow video+voice panel. Video: the real ServiceFlow Video Agent
   LiveKit track (room "serviceflow-demo") renders into .sf-av-video once
   subscribed; the branded canvas presence is the idle/not-yet-connected
   state and is hidden once video arrives. There is exactly ONE recording
   control (.sf-mic-orb — central DS, see components.css); "Read aloud" and
   the assistant-voice mute button below are voice OUTPUT only and never
   touch the microphone. Avatar stage sized as the panel centrepiece (not a
   small tile) while staying inside the dense two-pane layout. */
/* Frameless: the video sits directly in the page, not inside a boxed card —
   no border/radius/background/padding on the outer wrapper or the video
   stage itself. Sized to hug the video + its status column instead of
   stretching the full .sd-detail width — the status/ON-toggle side has
   little content, so an unbounded flex:1 there used to leave a wide dead
   strip on the right. */
.sd-assistant{display:flex;gap:20px;align-items:stretch;max-width:560px}
/* Left column: avatar video stage stacked with the prominent live-mic orb
   (central DS .sf-mic-orb, see components.css) so the "press and talk"
   control always reads as centered directly under the avatar's face. */
.sd-avatar-col{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;width:400px}
/* No border/border-radius (that's the boxed-tile look Ben removed) — the
   radial-gradient stays as the idle-avatar canvas's own rendering surface
   (the canvas only strokes transparent rings/face, not a filled backdrop),
   not "frame chrome" around a finished video. */
.sd-avatar{position:relative;width:400px;height:300px;background:radial-gradient(circle at 50% 40%,var(--paper) 0%,var(--paper-2) 82%);overflow:hidden}
.sf-av-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sf-av-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:var(--ink)}
.sd-avatar[data-has-video="true"] .sf-av-canvas{display:none}
.sd-avatar:not([data-has-video="true"]) .sf-av-video{display:none}
.sd-avatar-tag{position:absolute;bottom:0;left:0;right:0;background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase;text-align:center;padding:2px 0;z-index:3}
.sd-assistant-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center}
.sf-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-mute)}
.sf-status b{color:var(--ink);font-weight:500}
.sf-status .sf-dot{width:6px;height:6px;border-radius:50%;background:var(--signal-grass);flex:none}
.sf-status .sf-state{color:var(--ink-mute)}
.sd-assistant[data-state="speaking"] .sf-dot{background:var(--baobab)}
.sd-assistant[data-state="speaking"] .sf-state{color:var(--baobab)}
.sd-assistant[data-state="listening"] .sf-dot{background:var(--signal-amber);animation:sd-micpulse 1.3s ease-in-out infinite}
.sd-assistant[data-state="listening"] .sf-state{color:var(--signal-amber)}
.sd-assistant[data-state="muted"] .sf-dot{background:var(--ink-faint)}
.sf-caption{font-family:var(--font-ui);font-size:13px;line-height:1.35;color:var(--ink-soft);margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sf-caption q{font-style:italic;color:var(--ink)}
.sd-assistant-controls{display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap}
.sf-ctl{display:inline-flex;align-items:center;gap:6px;background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--hairline);border-radius:22px;padding:6px 12px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:border-color .14s ease,color .14s ease}
.sf-ctl:hover{border-color:var(--ink-mute);color:var(--ink)}
.sf-ctl svg{width:14px;height:14px}
.sf-ctl-off{color:var(--ink-faint);border-style:dashed}
.sf-speak-ind{display:inline-flex;align-items:flex-end;gap:2px;height:13px;margin-left:2px}
.sf-speak-ind i{width:2.5px;height:4px;background:var(--baobab);border-radius:1px;display:block}
.sd-assistant[data-state="speaking"] .sf-speak-ind i{animation:sf-eq .6s ease-in-out infinite}
.sf-speak-ind i:nth-child(2){animation-delay:.15s}
.sf-speak-ind i:nth-child(3){animation-delay:.3s}
.sf-speak-ind i:nth-child(4){animation-delay:.45s}
@keyframes sf-eq{0%,100%{height:4px}50%{height:12px}}
@keyframes sd-micpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--baobab) 34%,transparent)}50%{box-shadow:0 0 0 5px transparent}}
@media (max-width:640px){.sd-avatar{display:none}}

.sd-taskhead{margin:14px 0 0}
.sd-task-title{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(20px,2.1vw,27px);line-height:1.06;letter-spacing:-0.015em;color:var(--ink);margin:5px 0 0;text-wrap:balance}

.sd-stage{margin:24px 0 0}
.sd-cta-row{display:flex;gap:13px;align-items:center;flex-wrap:wrap}
.sd-primary{padding:13px 22px;font-size:12.5px}
.sd-primary svg{width:15px;height:15px}
.sd-cta-note{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-mute);display:inline-flex;align-items:center;gap:6px}
.sd-cta-note svg{width:12px;height:12px;color:var(--ink-faint)}

.sd-run-line{display:flex;align-items:center;gap:12px;font-family:var(--font-ui);font-size:15px;color:var(--ink-soft);padding:6px 0 16px}
.sd-run-line b{color:var(--ink);font-weight:600}
.sd-spin{width:18px;height:18px;border:2px solid var(--hairline);border-top-color:var(--baobab);border-radius:50%;flex:none;animation:sd-spin .7s linear infinite}
@keyframes sd-spin{to{transform:rotate(360deg)}}
.sd-ok-glyph{width:20px;height:20px;border-radius:50%;background:var(--signal-grass);color:var(--paper);display:grid;place-items:center;flex:none}
.sd-ok-glyph svg{width:13px;height:13px}

.sd-field-labelrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sd-dictate{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);padding:1px 3px}
.sd-dictate:hover{color:var(--baobab)}
.sd-dictate svg{width:12px;height:12px}
.sd-dictate-live{color:var(--baobab)}

.sd-prefill{display:inline-flex;align-items:center;align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:0.02em;color:var(--ink-mute);background:var(--paper-2);border:1px dashed var(--hairline);border-radius:3px;padding:3px 8px}

.sd-priority{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--baobab);background:var(--baobab-bg);border:1px solid color-mix(in srgb,var(--baobab) 28%,var(--hairline));border-radius:3px;padding:7px 11px;margin:15px 0 0}
.sd-priority svg{width:14px;height:14px;flex:none}

.sd-catalog{display:flex;flex-direction:column;border-top:1px solid var(--hairline);margin:16px 0 0}
.sd-cat-row{display:flex;align-items:center;gap:13px;padding:12px 4px;border-bottom:1px solid var(--hairline)}
.sd-cat-ico{width:26px;height:26px;flex:none;color:var(--ink-mute);display:grid;place-items:center}
.sd-cat-ico svg{width:19px;height:19px}
.sd-cat-h{flex:1;min-width:0}
.sd-cat-name{display:block;font-family:var(--font-ui);font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.2}
.sd-cat-meta{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:0.03em;color:var(--ink-faint);margin-top:2px}
.sd-cat-state{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--signal-grass)}
.sd-cat-state svg{width:13px;height:13px}

.sd-done-title{display:flex;align-items:center;gap:10px;margin-bottom:5px}

.sd-reset{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);padding:0;margin-top:18px}
.sd-reset:hover{color:var(--baobab)}
.sd-reset svg{width:13px;height:13px}

/* validation flag (replaces the reference's inline borderColor set) */
.sd-flag-err{border-color:var(--baobab)}
.sf-action .ds-button:disabled{opacity:.45;pointer-events:none}

/* ============================================================================
   next-steps layer — process strip + prefilled draft note.
   ============================================================================ */
.sf-preview{display:flex;flex-direction:column;gap:15px;margin:16px 0 0;animation:sd-fade .24s ease both}
.sf-target{display:flex;flex-direction:column;gap:11px}
.sf-target .ds-field{max-width:360px}
.sf-target .ds-field-row-2{max-width:440px}
.sf-chiprow{margin:0;padding:0;border:0}
.sf-chip.ds-filter-chip-active{color:var(--paper);background:var(--baobab);border-color:var(--baobab)}
.sf-more{display:flex;flex-direction:column;gap:6px;max-width:300px}
.sf-more .ds-label{color:var(--ink-faint)}

.sf-happens{display:flex;flex-direction:column;gap:9px}
.sf-happens-h{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.sf-strip{display:flex;align-items:flex-start;flex-wrap:wrap;max-width:560px}
.sf-node{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;flex:0 0 auto;min-width:0;max-width:118px;padding:0 3px;transition:opacity .3s ease}
.sf-node-ico{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--hairline);background:var(--paper);font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);transition:background .3s ease,border-color .3s ease,color .3s ease}
.sf-node-ico svg{width:15px;height:15px}
.sf-node-label{font-family:var(--font-ui);font-size:11.5px;line-height:1.22;color:var(--ink-mute);max-width:15ch;transition:color .3s ease}
.sf-conn{flex:0 0 30px;width:30px;min-width:16px;height:1.5px;background:var(--hairline);margin-top:12px;position:relative;overflow:hidden}
.sf-conn::after{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.sf-conn--on::after{transform:scaleX(1)}
.sf-node--here .sf-node-ico{border-color:var(--baobab);border-width:2px}
.sf-node--here .sf-node-label{color:var(--ink);font-weight:600}
.sf-here-dot{width:9px;height:9px;border-radius:50%;background:var(--baobab);animation:sf-hi 2.1s ease-in-out infinite}
@keyframes sf-hi{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--baobab) 40%,transparent)}55%{box-shadow:0 0 0 5px transparent}}
.sf-here-tag{font-family:var(--font-mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--baobab);margin-top:-2px}
.sf-node--next{opacity:.55}
.sf-node--done .sf-node-ico{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.sf-node--done .sf-node-label{color:var(--ink-soft)}
.sf-node--active .sf-node-ico{border-color:var(--baobab)}
.sf-node--active .sf-node-label{color:var(--ink);font-weight:600}
.sf-node-spin{width:15px;height:15px;border:2px solid var(--baobab-bg);border-top-color:var(--baobab);border-radius:50%;animation:sd-spin .7s linear infinite}
.sf-node--waiting .sf-node-ico{border-color:var(--signal-amber);color:var(--signal-amber)}
.sf-node--waiting .sf-node-label{color:var(--ink);font-weight:600}
.sf-wait-dot{width:9px;height:9px;border-radius:50%;background:var(--signal-amber);animation:sf-hi 2.1s ease-in-out infinite}

.sf-note,.sf-summary{padding:15px 17px;display:flex;flex-direction:column;gap:13px}
.sf-note-head{display:flex;flex-wrap:wrap;gap:6px 30px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.sf-note-row{display:flex;align-items:baseline;gap:10px;min-width:0}
.sf-note-k{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint);flex:none}
.sf-note-v{font-family:var(--font-ui);font-size:13.5px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.sf-note-v b{color:var(--ink-faint);font-weight:400}
.sf-msg{font-family:var(--font-ui);font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.sf-fill{color:var(--ink);font-weight:600;box-shadow:inset 0 -0.42em 0 var(--baobab-bg)}
.sf-blank{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-mute);background:var(--paper-2);border:1px dashed var(--hairline);border-radius:3px;padding:1px 7px;white-space:nowrap}
.sf-reason{display:flex;flex-direction:column;gap:6px}
.sf-summary .sf-msg{font-size:15px}
.sf-prefill-line{display:flex}

.sf-agentq{display:flex;flex-direction:column;gap:13px}
.sf-agent-line{font-family:var(--font-ui);font-size:17px;line-height:1.45;color:var(--ink);margin:0;padding-left:13px;border-left:2px solid var(--baobab);text-wrap:balance;max-width:60ch}
.sf-ask-row{display:flex;gap:10px;align-items:center;max-width:540px;flex-wrap:wrap}
.sf-ask-in{flex:1;min-width:220px}
.sf-suggest{display:flex;flex-direction:column;gap:7px}
.sf-suggest-h{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint)}
.sf-branch{display:flex;gap:11px;flex-wrap:wrap}
.sf-sample{font-family:var(--font-mono);font-size:10px;letter-spacing:0.02em;color:var(--ink-mute);background:var(--paper-2);border:1px dashed var(--hairline);border-radius:3px;padding:5px 9px;margin:0;align-self:flex-start;max-width:60ch;line-height:1.4}

.sf-action{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:2px}
.sf-hint{font-family:var(--font-ui);font-size:12.5px}
.sf-note-done{margin:2px 0 0}
.sf-note-done .sd-reset{margin-top:12px}

/* desk "My requests" — session-local + honest: only items started this
   session, each backed by a real ticket / process transaction. */
.sf-myreq{display:flex;flex-direction:column;gap:9px;margin:26px 0 0;padding-top:18px;border-top:1px solid var(--hairline)}
.sf-myreq .sf-happens-h{margin:0;display:flex;align-items:center;gap:8px}
.sf-myreq-n{font-family:var(--font-mono);font-size:9px;letter-spacing:0.06em;color:var(--paper);background:var(--ink);border-radius:20px;padding:1px 7px}
.sf-myreq-list{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.sf-myreq-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--hairline)}
.sf-myreq-t{font-family:var(--font-ui);font-weight:600;font-size:14px;color:var(--ink);flex:none}
.sf-myreq-s{flex:1;min-width:0;font-family:var(--font-mono);font-size:11px;letter-spacing:0.02em;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-myreq-row .ds-tag{flex:none}

.sf-amend{display:flex;flex-direction:column;gap:6px;max-width:440px}
.sf-done-row{display:flex;gap:20px;flex-wrap:wrap;align-items:center}

@media (prefers-reduced-motion:reduce){
  .sd-detail,.sf-preview{animation:none}
  .sd-spin,.sf-node-spin,.sf-here-dot,.sf-wait-dot,.sf-speak-ind i,.sd-assistant[data-state="listening"] .sf-dot{animation:none}
  .sf-mic-orb[data-state="listening"]::after,.sf-mic-orb[data-state="speaking"]::after{animation:none}
}
@media (max-width:860px){
  .sd-body{flex-direction:column;overflow-y:auto}
  .sd-menu{width:100%;max-height:32vh;border-right:0;border-bottom:1px solid var(--ink);padding-bottom:0}
  .sd-pane{overflow:visible}
  .sd-detail{max-width:none;padding:16px 20px 28px}
  .sd-assistant{max-width:100%}
  .sd-avatar-col{width:min(400px,100%)}
  .sd-avatar{width:100%;max-width:400px;height:auto;aspect-ratio:4/3}
  .sd-app .ds-field-row-2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sd-menu{max-height:26vh}
  .sd-detail{padding:12px 14px 24px}
  .sd-assistant{flex-direction:column;gap:10px}
  .sd-avatar-col,.sd-assistant-body{width:100%}
}

/* Portal mobile navigation: compact trigger plus a scrollable CDS panel. */
.portal-mobile-nav-trigger{display:none}
@media (max-width:860px){
  .portal-shell-frame>.portal-mobile-nav-trigger{display:inline-flex;position:fixed;top:10px;right:10px;z-index:121;width:auto}
  .portal-shell-frame.portal-mobile-nav-open>.sb{display:flex;position:fixed;inset:0;z-index:120;height:100vh;max-height:100vh;overflow-y:auto;flex-direction:column;align-items:stretch;flex-wrap:nowrap;padding:54px 12px 20px;background:var(--ink);border-right:0}
  .portal-shell-frame.portal-mobile-nav-open>.sb .sb-brand{padding:0 0 10px}
  .portal-shell-frame.portal-mobile-nav-open>.sb .sb-group-label{display:block}
  .portal-shell-frame.portal-mobile-nav-open>.sb .sb-folders{display:block}
  .portal-shell-frame.portal-mobile-nav-open>.sb .sb-nav{display:flex;flex-direction:column}
  /* .sb-nav is now always-mounted (Loop-3 accordion fix, 2026-07-18) and relies on the
     [hidden] attribute to hide collapsed folder bodies. The rule above unconditionally sets
     display:flex on every .sb-nav while the mobile drawer is open, which outranks the UA
     [hidden]{display:none} default and made every folder body show at once. Add the
     explicit [hidden] override at higher specificity, matching the codebase's own pattern
     (.ds-window[hidden]/.upload-list[hidden]) so a collapsed folder body stays hidden even
     while the drawer is open. */
  .portal-shell-frame.portal-mobile-nav-open>.sb .sb-nav[hidden]{display:none}
  .portal-shell-frame.portal-mobile-nav-open>.sb .sb-who{display:flex}
}

/* ===== Evidence-photo thumbnail (WBO capture, MMDB-0266 / WBO-R-007 AC2, 2026-07-11) =====
   A bounded preview of a captured evidence photo (weighbridge ticket) shown before submit,
   with an adjacent Retake control (.ds-button). The captured image is client-downscaled to
   <=1280px; this caps the on-screen preview to a legible-but-compact thumbnail so it never
   blows the mobile capture form. Token-only styling — no hardcoded color. */
.ds-evidence-thumb{display:block;max-width:220px;width:100%;height:auto;border:1px solid var(--hairline);border-radius:4px;background:var(--paper-2)}

/* Cowork mobile file attachment & folder mapping — CoFlow features */
.upload-list{max-width:720px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px}
.upload-list[hidden]{display:none}
.upload-chip{display:inline-flex;align-items:center;max-width:100%;min-height:28px;border:1px solid var(--hairline);border-radius:6px;background:var(--paper-2);color:var(--ink-soft);font-family:var(--font-ui);font-weight:600;font-size:12px;line-height:1.2;padding:5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-input{display:none}
.chat-attach-sheet{position:absolute;left:0;bottom:calc(100% + 8px);z-index:46;display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--hairline);border-radius:8px;box-shadow:0 12px 32px rgba(14,14,12,0.16);padding:6px;width:168px}
.chat-attach-sheet[hidden]{display:none}
.chat-attach-option{min-height:44px;text-align:left;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);font-family:var(--font-ui);font-weight:600;font-size:13px;padding:0 10px;cursor:pointer}
.chat-attach-option:hover{background:var(--paper-2);border-color:var(--hairline)}
.chat-attach-option:disabled{opacity:0.55}
.chat-upload{min-width:48px;min-height:48px;border:1px solid var(--hairline);border-radius:8px;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-weight:600;font-size:18px;letter-spacing:0.04em;padding:0}
.chat-upload:disabled{opacity:0.55}
.folder-chip{cursor:pointer}
.folder-chip:hover{border-color:var(--baobab);color:var(--baobab)}
.folder-unmap{display:inline-flex;align-items:center;justify-content:center;min-height:28px;border:1px solid var(--hairline);border-radius:6px;background:var(--paper);color:var(--ink-soft);font-family:var(--font-ui);font-weight:600;font-size:12px;line-height:1.2;padding:5px 8px;cursor:pointer}
.folder-unmap:hover{border-color:var(--baobab);color:var(--baobab)}
.artifact-save{display:inline-flex;align-items:center;justify-content:center;min-height:36px;border:1px solid var(--hairline);border-radius:6px;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-weight:600;font-size:13px;line-height:1.2;padding:8px 10px;cursor:pointer}
.artifact-save:hover{border-color:var(--baobab);color:var(--baobab)}
.artifact-save:disabled{opacity:0.6}

/* Expenses claim detail — receipt image preview (MMDB-0945/0952/0953). */
.ds-receipt-preview{max-width:320px;border:1px solid var(--hairline);border-radius:3px}

/* --- Flowchart canvas: process lanes of linked node cards ------------------
   Generic building block for any "swimlane of live screens" canvas (first
   used by the procurement process flowchart). A lane is a labelled row; each
   node is a plain <a> card so the whole card navigates to the live screen —
   no bespoke per-app styling, token-only. */
.ds-flowchart{overflow-x:auto;padding-bottom:4px}
.ds-flowchart-lane{display:flex;flex-direction:column;gap:8px;padding:10px 2px;border-bottom:1px solid var(--hairline)}
.ds-flowchart-lane:last-child{border-bottom:0}
/* Inner row for the label+track pair, so a lane can also carry a full-width ds-notice
   (hand-off banner) as a sibling block above it instead of the notice being squeezed
   into the same row (UX review 2026-07-18). Label stays top-anchored per PR #245. */
.ds-flowchart-lane-row{display:flex;align-items:stretch;gap:10px}
.ds-flowchart-lane-label{flex:0 0 132px;display:flex;align-items:flex-start;padding-top:2px;font-family:var(--font-mono);font-weight:600;font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft)}
.ds-flowchart-track{display:flex;align-items:stretch;gap:0;flex:1;width:max-content}
.ds-flow-node{display:flex;flex-direction:column;gap:6px;width:224px;flex:0 0 auto;padding:8px;background:var(--paper);border:1px solid var(--hairline);border-radius:4px;text-decoration:none;color:var(--ink);transition:border-color .14s ease,transform .14s ease}
.ds-flow-node:hover{border-color:var(--baobab);transform:translateY(-2px)}
.ds-flow-node:focus-visible{outline:2px solid var(--baobab);outline-offset:2px}
/* Normalize native <button> UA chrome when .ds-flow-node lands on a button instead of an
   <a> (e.g. atlas cards with no live href) -- resets font/cursor/text-align/appearance so
   anchor- and button-rendered cards are pixel-identical (BA/UX review, 2026-07-18). */
button.ds-flow-node{appearance:none;-webkit-appearance:none;cursor:pointer;font:inherit;text-align:left;margin:0}
.ds-flow-node-index{font-family:var(--font-mono);font-weight:600;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.1em;color:var(--ink-mute)}
.ds-flow-node-thumb{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);border:1px solid var(--hairline);border-radius:3px}
.ds-flow-node-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.ds-flow-node-label{font-family:var(--font-ui);font-weight:700;font-size:calc(12.5px * var(--fs-scale, 1));line-height:1.25;color:var(--ink)}
.ds-flow-node-purpose{font-family:var(--font-ui);font-weight:500;font-size:calc(11px * var(--fs-scale, 1));line-height:1.4;color:var(--ink-soft)}
.ds-flow-connector{flex:0 0 22px;display:flex;align-items:center;justify-content:center;align-self:center;color:var(--ink-faint);font-size:14px}
.ds-flow-connector::before{content:"→"}
/* ---- Flow node: step meta row + persona tag + agent/human context lines -----
   Added for the procurement process-flow atlas (2026-07-18): every node in a
   dense cross-process atlas needs to say, at a glance, WHO works the screen and
   WHAT is agent-assisted vs. human-gated, without turning into explainer chrome.
   Reuses .ds-tag for status (ds-tag-positive/progress/waiting = live/partial/
   design-only) — only the 4 classes below are new. */
.ds-flow-node-meta{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ds-flow-node-role{align-self:flex-start;font-family:var(--font-mono);font-weight:500;font-size:calc(9.5px * var(--fs-scale, 1));letter-spacing:0.06em;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:2px;padding:2px 6px}
.ds-flow-node-context{display:flex;flex-direction:column;gap:3px;margin-top:2px;padding-top:6px;border-top:1px solid var(--hairline)}
.ds-flow-node-prefill,.ds-flow-node-gate{font-family:var(--font-ui);font-weight:500;font-size:calc(10.5px * var(--fs-scale, 1));line-height:1.35;color:var(--ink-soft)}
.ds-flow-node-prefill b,.ds-flow-node-gate b{font-family:var(--font-mono);font-weight:600;font-size:calc(9px * var(--fs-scale, 1));letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-mute);margin-right:4px}
.ds-flow-node-gate b{color:var(--baobab)}
/* ===== Finance report-table total + section rows (2026-07-16) =====
   .ds-records-total: a sum/totalling <tr> inside a .ds-records-compact (or any
   records) table — heavier ink + a top rule so the foot/bold line reads as a
   total. .ds-records-section: a divider/section-header <tr> within the same table
   (e.g. costing block headers), rendered as a muted mono uppercase band so it is
   clearly a structural break, not a data row. Both are additive: apply to a <tr>.
   Token-only. Replaces the undefined .fin-total/.fin-num classes the finance
   pages had been using before the QA/UX review. */
.ds-records-compact tbody th:not(.ds-mono-num){font-family:var(--font-ui)!important;font-weight:500!important;font-size:calc(13px * var(--fs-scale, 1))!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;text-align:left!important}
.ds-records-compact tbody th.ds-records-title{font-family:var(--font-display)!important;font-weight:700!important;font-size:calc(16px * var(--fs-scale, 1))!important;letter-spacing:-0.015em!important;line-height:1.2!important;color:var(--ink)!important;text-transform:none!important}
.ds-records-total td,.ds-records-total th{font-weight:700!important;color:var(--ink)!important;border-top:1px solid var(--ink)}
.ds-records-section td,.ds-records-section th{font-family:var(--font-mono)!important;font-weight:600!important;font-size:calc(10.5px * var(--fs-scale, 1))!important;letter-spacing:0.1em!important;text-transform:uppercase!important;color:var(--ink-mute)!important;background:var(--paper-2);border-top:1px solid var(--hairline)}

/* ============================================================================
   TA supplier portal — review-fix wave 2 (2026-07-17)
   Closes a pre-existing drift: candidate-table/score-badge were added directly
   to mmd-ta-portal's VENDORED copy on 2026-07-08 and never landed here in the
   canonical DS. Migrating them in now (with the D2 fix already applied) so the
   "authored in shell, synced to app" rule holds going forward.
   ============================================================================ */

/* --- Candidate pipeline table --------------------------------------------- */
.candidate-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px}
.candidate-table thead tr{border-bottom:1px solid var(--ink)}
.candidate-table th{text-align:left;padding:6px 10px;font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.candidate-row{border-top:1px solid var(--hairline);cursor:pointer;transition:background .1s ease}
.candidate-row:hover{background:var(--paper-2)}
.candidate-row:focus-visible{outline:2px solid var(--baobab);outline-offset:-2px}
.candidate-row td{padding:8px 10px;vertical-align:middle;color:var(--ink);line-height:1.35}
.candidate-row-select{width:15px;height:15px;accent-color:var(--baobab);cursor:pointer}

/* D2: single-line ellipsis truncation moved onto each text node individually.
   The old .candidate-cell{max-width:1px;overflow:hidden;text-overflow:ellipsis;
   white-space:nowrap} only ever worked for one line — candidate-name (inline)
   plus candidate-role (display:block) are two lines, so the second line was
   being hard-clipped with no ellipsis. */
.candidate-cell{width:26%;max-width:260px;min-width:180px}
.candidate-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui);font-weight:600;color:var(--ink)}
.candidate-role{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--ink-mute);margin-top:1px}

.candidate-row-toggle{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:0;background:transparent;color:var(--ink-faint);cursor:pointer;padding:0}
.candidate-row-toggle::before{content:"▸";font-size:9px;display:block;transition:transform .12s ease}
.candidate-row[data-expanded="true"] .candidate-row-toggle::before{transform:rotate(90deg);color:var(--ink)}
.candidate-row-detail{background:var(--paper-2)}
.candidate-row-detail td{padding:12px 16px 16px 34px;border-top:1px solid var(--hairline);font-size:12.5px;color:var(--ink-soft);line-height:1.55}

/* --- Score badge — 0-100, 3 severity steps on existing signal tokens ------ */
.score-badge{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:20px;padding:0 6px;font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:0.01em;border-radius:var(--radius-sm);border:1px solid transparent;line-height:1}
.score-badge-high{color:var(--signal-grass);background:var(--signal-grass-bg);border-color:color-mix(in srgb, var(--signal-grass) 35%, transparent)}
.score-badge-mid{color:var(--signal-amber);background:var(--signal-amber-bg);border-color:color-mix(in srgb, var(--signal-amber) 35%, transparent)}
.score-badge-low{color:var(--baobab);background:var(--baobab-bg);border-color:color-mix(in srgb, var(--baobab) 35%, transparent)}

/* D4: recommendation-tag sentiment tones, consistent with score-badge-high/low.
   None of the existing ds-tag-* variants (open/progress/waiting/resolved/
   closed/error) express a positive/negative read — they're status-lifecycle
   tones. "Maybe" reuses the existing neutral ds-tag-waiting. */
.ds-tag-positive{color:var(--signal-grass);border-color:color-mix(in srgb, var(--signal-grass) 55%, transparent)}
.ds-tag-negative{color:var(--baobab);border-color:color-mix(in srgb, var(--baobab) 55%, transparent)}

/* D3: fixed topbar is 72px tall (position:fixed, z-index:50). In-page hash
   anchors (#screening, #messages, etc.) must not land their target under it.
   Generic rule — any id-carrying anchor target gets breathing room above. */
[id]{scroll-margin-top:80px}

/* D1: the 8-column candidate-table has expand/collapse row state
   (.candidate-row[data-expanded]) and a colspan detail row, so it doesn't
   survive the block-stacking transform used by `.module-table-section
   .ds-records` on narrow viewports. Reuse the existing `.ds-table-scroll`
   opt-in wrapper instead (already proven for the Reporting overflow fix) —
   app wraps `<table className="candidate-table">` in
   `<div className="ds-table-scroll">`. */

.ds-process-thumb-compact{height:120px}
.ds-process-node-static{opacity:1;background:var(--paper-2)}

/* ============================================================================
   TA Supplier Admin modal chrome — TaSupplierEditModal.tsx (2026-07-21)
   Moved from src/app/globals.css into the canonical DS per adversarial
   review on PR #298: app-local CSS for a bespoke modal pattern (portal-user
   section divider, inline delete-confirm row, generated-password reveal +
   copy control) is a CDS violation even when TA-module-specific — every
   visual pattern is a named DS class, never authored in app code.
   ============================================================================ */
.ta-supplier-users-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--hairline)}
.ta-supplier-confirm-row{display:flex;align-items:center;gap:10px;font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink)}
.ta-supplier-password-reveal{display:flex;align-items:center;gap:10px}
.ta-supplier-password-copy{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);background:transparent;border:1px solid var(--hairline);border-radius:2px;padding:4px 8px;cursor:pointer}
.ta-supplier-password-copy:hover{color:var(--ink);border-color:var(--ink)}
.ta-supplier-password-copy[data-copied="true"]{color:var(--signal-grass);border-color:var(--signal-grass)}

/* ============================================================================
   Agent-approval components — ds-agent-card / ds-node-status / ds-node-who /
   ds-disclosure (2026-07-18)
   Agentic-approval model: for each human step an AGENT TASK pre-computes and
   pre-fills the proposed decision, the numbers, the routing, and plain-
   English reasoning; the human only APPROVES/REJECTS/ADJUSTS with all of
   that context visible on one screen. ds-agent-card is that single-screen
   approval surface; ds-node-status marks a step's approval state; ds-node-who
   attributes a field or action to the agent or the human; ds-disclosure holds
   the supporting context/reasoning collapsed by default so the proposal
   stays dense and scannable. Tokens only: --ink, --ink-mute, --paper-2,
   --hairline, --baobab, --signal-grass(-bg), --signal-amber(-bg),
   --font-mono. No new hex, no inline style.
   ============================================================================ */

/* --- ds-agent-card: the human-gated, agent-prepared approval surface ------ */
.ds-agent-card{background:var(--paper-2);border:1px solid var(--hairline);border-top:2px solid var(--ink);border-radius:4px;padding:20px 24px;display:flex;flex-direction:column;gap:14px}
.ds-agent-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ds-agent-card-reasoning{display:flex;flex-direction:column;gap:6px;font-family:var(--font-mono);font-size:calc(12.5px * var(--fs-scale, 1));line-height:1.5;color:var(--ink-mute)}
.ds-agent-card[data-readiness="blocked"]{border-top-color:var(--signal-amber)}
.ds-agent-card[data-readiness="partial"]{border-top-color:var(--signal-amber)}
.ds-agent-card-eyebrow{font-family:var(--font-mono);font-weight:500;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);display:block;margin:0 0 4px}
.ds-agent-card-title{font-family:var(--font-mono);font-weight:600;font-size:calc(16.5px * var(--fs-scale, 1));letter-spacing:-0.005em;line-height:1.25;color:var(--ink);margin:0}
.ds-agent-card-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.ds-agent-card-proposal{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:12px 0;display:flex;flex-direction:column;gap:5px}
.ds-agent-card-proposal-label{font-family:var(--font-mono);font-weight:500;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute)}
.ds-agent-card-proposal-value{font-family:var(--font-mono);font-weight:600;font-size:calc(21px * var(--fs-scale, 1));letter-spacing:-0.01em;color:var(--ink)}
.ds-agent-card-context{display:flex;flex-direction:column}
.ds-agent-card-context-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--hairline)}
.ds-agent-card-context-row:last-child{border-bottom:0}
.ds-agent-card-context-label{font-family:var(--font-mono);font-weight:500;font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);flex:0 0 auto}
.ds-agent-card-context-value{font-family:var(--font-mono);font-weight:500;font-size:calc(13px * var(--fs-scale, 1));color:var(--ink);text-align:right}
.ds-agent-card-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:2px}

/* --- ds-node-status: the step's approval state -------------------------- */
.ds-node-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:600;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.1em;text-transform:uppercase;padding:3px 9px;border-radius:2px;border:1px solid var(--hairline);color:var(--ink-mute);background:var(--paper-2);line-height:1.4}
.ds-node-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ds-node-status-prepared{color:var(--ink-mute);border-color:var(--hairline)}
.ds-node-status-pending{color:var(--signal-amber);border-color:var(--signal-amber);background:var(--signal-amber-bg)}
.ds-node-status-approved{color:var(--signal-grass);border-color:var(--signal-grass);background:var(--signal-grass-bg)}
.ds-node-status-adjusted{color:var(--signal-amber);border-color:var(--signal-amber);background:var(--signal-amber-bg)}
.ds-node-status-rejected{color:var(--baobab);border-color:var(--baobab)}

/* --- ds-node-who: attributes a field/action to the agent or the human ---- */
.ds-node-who{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:500;font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:0.04em;color:var(--ink-mute)}
.ds-node-who-icon{width:15px;height:15px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:calc(8px * var(--fs-scale, 1));font-weight:700;flex:none;border:1px solid var(--hairline);color:var(--ink-mute);background:var(--paper-2)}
.ds-node-who-agent{color:var(--ink-mute)}
.ds-node-who-agent .ds-node-who-icon{color:var(--ink-mute);border-color:var(--hairline)}
.ds-node-who-human{color:var(--ink)}
.ds-node-who-human .ds-node-who-icon{color:var(--paper-2);background:var(--ink);border-color:var(--ink)}

/* --- ds-disclosure: supporting context/reasoning, collapsed by default --- */
.ds-disclosure{border-top:1px solid var(--hairline)}
.ds-disclosure-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 0;background:transparent;border:0;cursor:pointer;font-family:var(--font-mono);color:var(--ink-mute);text-align:left}
.ds-disclosure-trigger:focus-visible{outline:2px solid var(--baobab);outline-offset:2px}
.ds-disclosure-label{font-weight:500;font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:0.12em;text-transform:uppercase;color:inherit}
.ds-disclosure-icon{font-size:calc(9px * var(--fs-scale, 1));color:var(--ink-mute);transition:transform .12s ease;flex:none}
.ds-disclosure[data-open="true"] .ds-disclosure-icon{transform:rotate(90deg)}
.ds-disclosure-panel{display:none;padding:0 0 14px;font-family:var(--font-mono);font-weight:500;font-size:calc(12.5px * var(--fs-scale, 1));line-height:1.55;color:var(--ink-mute)}
.ds-disclosure[data-open="true"] .ds-disclosure-panel{display:block}

/* Process-owner review atlas (JML, 2026-07-18): the second column of
   .ds-process-modal-body is meant for either a live .ds-embed-frame iframe OR,
   where no live iframe embed is appropriate, a scrollable stack of real captured
   screens / honest BLOCKED cards. .ds-process-modal-main is that scrollable
   wrapper -- .ds-process-modal-body already sets overflow:hidden on itself so
   something inside must own the scroll. .ds-review-screenshot renders a real
   captured screenshot at full, uncropped width (unlike the existing
   .ds-process-thumb-img/.ds-preview-thumb crops, which are deliberately small
   thumbnails, not a complete-screen review surface). .ds-flowchart-lane-governance
   visually separates governance/oversight lanes (GLPI intake, GLPI Workbench)
   from the two numbered operational execution lanes in the same diagram. */
.ds-process-modal-main{overflow:auto;min-height:0;padding:20px;display:flex;flex-direction:column;gap:16px}
.ds-review-screenshot{display:block;width:100%;height:auto;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--paper-2)}
.ds-flowchart-lane-governance{border-top:2px dashed var(--hairline);margin-top:8px;padding-top:16px;background:var(--paper-2)}

/* TA-R2607-1 — visible, space-efficient gap between the shell topbar/subnav
   and TA recruitment page content (the board sat flush under the subnav). */
[data-eid="ta-cases-list"]{margin-top:14px}

/* ===== TA step dialogs (Ben-approved designs 2026-07-22) =====
   Semantic classes mirroring the four approved mocks 1:1:
   JD, Approval, Supplier-assignment, Candidate-intake (+quick review).
   Consumed by src/app/app/ta-recruitment/stepDialogs/*. */
.ds-step-legend{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:16px}
.ds-step-legend-kicker{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)}
.ds-step-legend-pos{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:19px}
.ds-step-legend-chip{margin-left:auto;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--hairline);border-radius:8px;padding:1px 7px;background:var(--paper);white-space:nowrap}
/* R3 -- align-items:start so a field with a hint line (taller) doesn't
   stretch a shorter sibling field's input to fill the row, which read as
   a dead gap under the shorter field. */
.ds-step-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px;margin-bottom:14px;align-items:start}
.ds-step-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-bottom:14px;align-items:start}
.ds-step-row-full{margin-bottom:14px}
.ds-step-section{margin-bottom:22px}
.ds-step-section:last-of-type{margin-bottom:0}
/* R3 -- section headers must read stronger than field sub-labels
   (.ds-label: 12px/weight 600/var(--ink)). Bigger, bolder, heavier rule. */
.ds-step-section-title{display:flex;align-items:baseline;gap:8px;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:16px;font-family:var(--font-mono);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
.ds-step-section-title-hint{margin-left:auto;font-family:var(--font-ui);font-size:11px;text-transform:none;letter-spacing:0;color:var(--ink-mute);white-space:nowrap}
.ds-modal.ds-modal--dialog.ds-modal--dialog-wide{width:min(880px,calc(100vw - 48px))}
.ds-step-packet{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-bottom:14px}
.ds-step-fact{background:var(--paper);padding:8px 10px}
.ds-step-fact-k{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);margin-bottom:3px}
.ds-step-fact-v{font-size:13px}
.ds-step-fact-sub{color:var(--ink-mute);font-size:11px}
.ds-step-fact--risk{background:var(--signal-amber-bg)}
.ds-step-fact--risk .ds-step-fact-v{color:var(--signal-amber);font-weight:600}
.ds-step-agentnote{display:flex;gap:10px;background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--signal-amber);padding:10px 12px;margin-bottom:14px}
.ds-step-agentnote-tag{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--signal-amber);white-space:nowrap}
.ds-step-agentnote-body{font-size:12.5px;line-height:1.5}
.ds-step-refrow{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--hairline);padding:8px 12px;margin-bottom:14px}
.ds-step-refrow-tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);white-space:nowrap}
.ds-step-refrow-excerpt{font-size:12px;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ds-step-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:18px}
.ds-step-actions-spacer{flex:1}
.ds-step-table{border:1px solid var(--hairline);margin-bottom:4px;overflow-x:auto}
.ds-step-table table{width:100%;border-collapse:collapse}
.ds-step-table th{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);text-align:left;padding:7px 9px;background:var(--paper-2);border-bottom:1px solid var(--hairline);white-space:nowrap;cursor:pointer}
.ds-step-table th.ds-num,.ds-step-table td.ds-num{text-align:right;font-variant-numeric:tabular-nums}
.ds-step-table td{font-size:12.5px;padding:7px 9px;background:var(--paper);border-bottom:1px solid var(--hairline);cursor:pointer;vertical-align:top}
.ds-step-table tr:last-child td{border-bottom:0}
.ds-step-table tr.ds-row-sel td{background:var(--signal-grass-bg)}
.ds-step-table tr.ds-row-sel td:first-child{box-shadow:inset 3px 0 0 var(--signal-grass)}
.ds-step-table tr.ds-row-dim td{opacity:.55}
.ds-step-table-nm{font-weight:600}
.ds-step-table-sub{color:var(--ink-mute);font-size:10.5px}
.ds-step-tickcell{width:30px;text-align:center;padding-left:8px;padding-right:2px}
.ds-tickmark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid var(--ink-faint);border-radius:2px;font-size:11px;color:transparent;background:var(--paper)}
.ds-tickmark--on{background:var(--signal-grass);border-color:var(--signal-grass);color:var(--paper)}
.ds-step-selall{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:8px 10px;background:var(--signal-grass-bg);border:1px solid var(--hairline);border-top:0;margin-bottom:4px;cursor:pointer}
.ds-step-selall-count{margin-left:auto;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;color:var(--signal-grass)}
.ds-step-tablehint{font-size:11px;color:var(--ink-mute);margin-bottom:14px}
.ds-step-agentbox{border:1px solid var(--hairline);border-left:3px solid var(--signal-amber);background:var(--paper);padding:10px 12px;margin-bottom:12px}
.ds-step-agentbox-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ds-step-agentbox-title{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--signal-amber)}
.ds-step-agentbox-saved{font-family:var(--font-mono);font-size:9px;color:var(--signal-grass)}
.ds-step-agentbox-btns{margin-left:auto;display:flex;gap:8px}
.ds-step-agentbox textarea{width:100%;font-family:var(--font-ui);font-size:12.5px;color:var(--ink);background:var(--paper-2);border:1px solid var(--hairline);border-radius:2px;padding:8px 10px;resize:vertical;line-height:1.45}
.ds-step-uploadrow{display:flex;align-items:center;gap:12px;border:1px dashed var(--ink-faint);background:var(--paper);padding:8px 12px;margin-bottom:12px}
.ds-step-uploadrow-tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.ds-step-uploadrow-files{font-size:12px;color:var(--ink-mute);flex:1}
.ds-step-filters{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ds-filterchip{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.03em;border:1px solid var(--hairline);border-radius:10px;background:var(--paper);color:var(--ink-soft);padding:3px 11px;cursor:pointer}
.ds-filterchip--on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ds-step-filters-note{margin-left:auto;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;color:var(--ink-mute)}
.ds-natexp{display:inline-block;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.03em;border-radius:8px;padding:1px 7px;white-space:nowrap;background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--hairline)}
.ds-natexp--expat{color:var(--baobab);border-color:var(--baobab)}
.ds-natexp--rejected{color:var(--ink-mute);border-color:var(--ink-mute)}
.ds-matchscore{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:700;border-radius:2px;padding:2px 7px;min-width:34px;text-align:center}
.ds-matchscore--hi{background:var(--signal-grass-bg);color:var(--signal-grass)}
.ds-matchscore--mid{background:var(--signal-amber-bg);color:var(--signal-amber)}
.ds-matchscore--none{background:var(--paper-2);color:var(--ink-mute);border:1px solid var(--hairline)}
.ds-matchwhy{font-size:10.5px;color:var(--ink-mute);display:block;max-width:220px}
.ds-step-review{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.ds-step-cv{border:1px solid var(--hairline);background:var(--paper);padding:14px 16px;font-size:12.5px;line-height:1.5;overflow-y:auto;max-height:60vh}
.ds-step-cv h3{font-family:var(--font-display);font-style:italic;font-size:16px;margin-bottom:2px}
.ds-step-cv-meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);margin-bottom:10px}
.ds-step-cv-sec{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);margin:10px 0 3px}
.ds-step-matchpanel{display:flex;flex-direction:column;gap:10px}
.ds-step-matchhead{display:flex;align-items:center;gap:10px;border:1px solid var(--hairline);background:var(--paper);padding:10px 12px}
.ds-step-matchhead-big{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--signal-grass)}
.ds-step-matchhead-lbl{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;color:var(--ink-mute)}
.ds-step-matchwhy{border:1px solid var(--hairline);border-left:3px solid var(--signal-grass);background:var(--paper);padding:10px 12px;font-size:12.5px;line-height:1.55}
.ds-step-matchwhy-t{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--signal-grass);margin-bottom:5px}
.ds-step-matchwhy ul{margin:0 0 0 16px}
.ds-step-matchwhy li{margin-bottom:3px}
.ds-step-matchwhy li.ds-neg{color:var(--baobab)}
.ds-step-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.ds-step-facts-f{background:var(--paper);padding:7px 10px}
.ds-step-numstep{display:grid;grid-template-columns:1fr 44px;border:1px solid var(--hairline);border-radius:2px;background:var(--paper)}
.ds-step-numstep input{border:0;background:transparent;text-align:right;font-variant-numeric:tabular-nums;padding:8px 10px;font-size:13px;font-family:var(--font-ui);width:100%}
.ds-step-numstep-btns{display:grid;grid-template-rows:1fr 1fr;border-left:1px solid var(--hairline)}
.ds-step-numstep-btns button{font-family:var(--font-mono);font-size:8px;background:var(--paper-2);border:0;cursor:pointer;color:var(--ink-soft)}
.ds-step-numstep-btns button:first-child{border-bottom:1px solid var(--hairline)}
/* ===== ds-rag — red/amber/green compliance status chip (HR data-protection
   summary, reusable for any RAG compliance/health cell). Semantic DS object;
   app code must never recolor these. ===== */
.ds-rag{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;padding:2px 8px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:default}
.ds-rag-red{color:var(--baobab);background:var(--baobab-bg);border-color:var(--baobab)}
.ds-rag-amber{color:var(--signal-amber);background:var(--signal-amber-bg);border-color:var(--signal-amber)}
.ds-rag-green{color:var(--signal-grass);background:var(--signal-grass-bg);border-color:var(--signal-grass)}
button.ds-rag{cursor:pointer}
button.ds-rag:hover{filter:brightness(0.94)}
/* ds-cell-link — in-table text trigger that opens a detail popup. */
.ds-cell-link{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-faint);text-underline-offset:2px;cursor:pointer;text-align:left}
.ds-cell-link:hover{text-decoration-color:var(--baobab);color:var(--baobab)}
/* ec-table-roomy — spread variant of ec-table for reading-heavy compliance/
   reference tables: larger type, taller rows, more cell air. */
.ec-table-roomy{font-size:13.5px;line-height:1.55}
.ec-table-roomy thead th{font-size:10px;padding:8px 14px}
.ec-table-roomy tbody th,.ec-table-roomy tbody td{padding:12px 14px;vertical-align:top}

/* ===== ds-toast — transient confirmation/error message for an action that
   just completed (e.g. "Candidate submitted"). Per the approved TA supplier
   portal artifact's own interaction contract: "zero window.prompt/confirm/
   alert -- in-page editor + toast instead". Fixed bottom-right, stacks
   multiple, JS owns mount/auto-dismiss timing; this file owns appearance
   only. Semantic variants only -- app code picks -ok or -error, never an
   inline color. ===== */
.ds-toast-stack{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.ds-toast{pointer-events:auto;min-width:220px;max-width:360px;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--hairline);background:var(--paper);box-shadow:0 4px 16px rgba(0,0,0,0.14);font-family:var(--font-mono);font-size:12.5px;font-weight:500;line-height:1.4;color:var(--ink)}
.ds-toast-ok{border-color:var(--signal-grass);background:var(--signal-grass-bg)}
.ds-toast-error{border-color:var(--baobab);background:var(--baobab-bg)}

/* ===== ds-page-head — kicker + italic title + right-aligned live count,
   border-bottom under it. Literal port of the approved TA supplier portal
   artifact's .page-head (kicker/h1/count on every page: Demand, Candidates,
   Interviews, Reporting, Account) -- every page in that artifact opens with
   this banner and none of the TA portal pages had it. Semantic DS object,
   reusable anywhere a page needs the same "kicker + title + live count"
   opening banner. ===== */
.ds-page-head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--ink);padding-bottom:6px;margin-bottom:14px}
.ds-page-head-title{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:19px;color:var(--ink)}
.ds-page-head-count{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute)}

/* ===== ds-urgency — urgency label color, ported from the approved TA
   artifact's .urg-high/.urg-normal. ===== */
.ds-urgency-high{color:var(--baobab)}
.ds-urgency-normal{color:var(--ink-mute)}

/* ===== ds-pill / ds-pill-fit — rounded inline chip for a role/country/
   status summary line, ported from the approved TA artifact's .pill/
   .pill-fit (Candidates page "Roles" column: "92% QA Engineer · Angola —
   Shortlisted"). Neutral border only -- the artifact's decorative
   per-country hue variants aren't backed by a real semantic distinction,
   so this stays one consistent style rather than an arbitrary color map. */
.ds-pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.02em;padding:4px 10px;border-radius:11px;border:1px solid var(--hairline);background:var(--paper)}
.ds-pill-fit{font-weight:600}

/* ===== ds-chip — small yes/no/unknown status pill for a prep checklist row
   (Interviews "Prep" column: Invite sent / Confirmed / CV shared / JD
   briefed), ported from the approved TA artifact's .chip/.chip-yes/
   .chip-no. -unknown is real: not every signal is tracked in FlowMaster
   yet, and this must read as "not tracked", never a fabricated no. ===== */
.ds-chip{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.03em;padding:2px 7px;border-radius:8px;border:1px solid var(--hairline);display:inline-block}
.ds-chip-yes{color:var(--signal-grass);border-color:var(--signal-grass);background:var(--signal-grass-bg)}
.ds-chip-no{color:var(--baobab);border-color:var(--baobab);background:var(--baobab-bg)}
.ds-chip-unknown{color:var(--ink-faint);border-color:var(--hairline);background:var(--paper-2)}

/* ===== ds-stage — colored pipeline-stage pills, literal port of the
   approved TA supplier artifact's .stage-*/.status-* (rounded 9px pills,
   tinted per stage: sourcing=red, screening=amber, interview=green,
   offer=neutral-dark, pool=muted, hired=solid green, outcome pass/fail =
   solid green/red). Ben's live complaint 2026-07-22: shipped pills were
   monochrome ds-tag variants — "they are not green!". These are the
   approved colored shapes. ===== */
.ds-stage{display:inline-block;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:0.04em;padding:3px 8px;border-radius:9px;border:1px solid var(--hairline)}
.ds-stage-sourcing{color:var(--baobab-deep, var(--baobab));border-color:var(--baobab-deep, var(--baobab));background:var(--baobab-bg)}
.ds-stage-screening{color:var(--signal-amber);border-color:var(--signal-amber);background:var(--signal-amber-bg)}
.ds-stage-interview{color:var(--signal-grass);border-color:var(--signal-grass);background:var(--signal-grass-bg)}
.ds-stage-offer{color:var(--ink-soft);border-color:var(--ink);background:var(--paper-3)}
.ds-stage-pool{color:var(--ink-mute);border-color:var(--hairline);background:var(--paper-3)}
.ds-stage-hired{color:#fff;border-color:var(--signal-grass);background:var(--signal-grass)}
.ds-stage-pass{color:#fff;border-color:var(--signal-grass);background:var(--signal-grass)}
.ds-stage-fail{color:#fff;border-color:var(--baobab-deep, var(--baobab));background:var(--baobab-deep, var(--baobab))}

/* ===== ds-app* — MOBILE-FIRST APPLICATION SHELL =====
   Authored for the OMS dealer app (dealer.baobab-ts.com + its Capacitor native
   shell), which is a phone-first product, not a desk surface: the existing
   module-workbench header + ds-filterbar "nav" collapsed into a ~600px dead gap
   at 390px wide and put a 5-way navigation into a wrapping row of buttons.
   Semantic app-shell objects, so app code points at a component instead of
   composing a phone layout out of table/filterbar atoms.

   Everything below is safe-area aware (iOS notch / Android gesture bar) and
   keeps every tap target at or above 44px. Above 720px the same markup centres
   in a reading column — one component, both form factors, no app-side media
   queries. */
.ds-app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--canvas, var(--paper-2))}
.ds-appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--paper);border-bottom:1px solid var(--hairline)}
/* The square group mark is deliberately NOT a themable token: THM-R-004/005 fix
   the themable set to accent + wide logo, and the monogram is the group mark, not
   a per-country asset. */
.ds-appbar-brand{display:block;width:34px;height:34px;flex:0 0 auto;background-image:url("/icons/mmd-mark.svg");background-repeat:no-repeat;background-position:center;background-size:contain}
.ds-appbar-titles{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.ds-appbar-eyebrow{font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale, 1));letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute)}
.ds-appbar-title{font-family:var(--font-ui);font-weight:700;font-size:calc(15px * var(--fs-scale, 1));line-height:1.2;color:var(--ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-appbar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ds-appbar-back{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:-10px;border:0;background:transparent;color:var(--ink);font-family:var(--font-ui);font-weight:600;font-size:calc(13px * var(--fs-scale, 1));cursor:pointer}
.ds-appbar-back:focus-visible{outline:2px solid var(--baobab);outline-offset:2px}

.ds-app-body{flex:1 1 auto;display:flex;flex-direction:column;gap:14px;padding:14px 16px calc(84px + env(safe-area-inset-bottom));width:100%;max-width:760px;margin:0 auto}
.ds-app-body>.ds-form{margin-top:0;gap:16px}
.ds-app-body>.ds-table-section,.ds-app-body>section{margin-top:0}

/* Bottom tab bar — the app's primary navigation on a phone. */
.ds-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;background:var(--paper);border-top:1px solid var(--hairline);padding-bottom:env(safe-area-inset-bottom)}
.ds-tabbar-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:6px 2px;border:0;border-top:2px solid transparent;background:transparent;color:var(--ink-mute);font-family:var(--font-ui);font-weight:600;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.02em;cursor:pointer}
.ds-tabbar-item-active{color:var(--ink);border-top-color:var(--baobab)}
.ds-tabbar-item:focus-visible{outline:2px solid var(--baobab);outline-offset:-2px}
.ds-tabbar-glyph{font-size:17px;line-height:1}
.ds-tabbar-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* Record list — the phone form of a records table. One tappable card per row. */
.ds-cardlist{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.ds-cardlist-item{display:flex;flex-direction:column;gap:6px;width:100%;min-height:44px;padding:12px 14px;text-align:left;background:var(--paper);border:1px solid var(--hairline);border-radius:4px;color:var(--ink);font-family:var(--font-ui);cursor:pointer}
.ds-cardlist-item:focus-visible{outline:2px solid var(--baobab);outline-offset:2px}
.ds-cardlist-static{cursor:default}
.ds-cardlist-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ds-cardlist-title{font-weight:700;font-size:calc(14px * var(--fs-scale, 1));line-height:1.25;color:var(--ink)}
.ds-cardlist-id{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));color:var(--ink-mute);white-space:nowrap}
.ds-cardlist-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:calc(12px * var(--fs-scale, 1));color:var(--ink-soft)}
.ds-cardlist-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ds-cardlist-price{font-family:var(--font-mono);font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink)}

/* Label/value display list — company information, order facts, app details. */
.ds-infolist{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hairline);border-radius:4px}
.ds-infolist-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:11px 14px;border-bottom:1px solid var(--hairline)}
.ds-infolist-row:last-child{border-bottom:0}
.ds-infolist-label{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-mute);flex:0 0 38%}
.ds-infolist-value{font-family:var(--font-ui);font-size:calc(13px * var(--fs-scale, 1));line-height:1.45;color:var(--ink);text-align:right;flex:1 1 auto;overflow-wrap:anywhere}
.ds-infolist-value-block{text-align:left}
.ds-infolist-link{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* Sticky filter/search row that survives a scrolling list. */
.ds-searchbar{position:sticky;top:calc(54px + env(safe-area-inset-top));z-index:20;display:flex;gap:8px;padding:8px 0;background:var(--canvas, var(--paper-2))}
.ds-searchbar>.ds-input{flex:1 1 auto;min-width:0}
.ds-searchbar>.ds-select{flex:0 0 auto;max-width:44%}

/* Section heading inside the app body (replaces ds-table-header on phone). */
.ds-app-section{display:flex;flex-direction:column;gap:8px}
.ds-app-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ds-app-section-title{font-family:var(--font-ui);font-weight:700;font-size:calc(13.5px * var(--fs-scale, 1));letter-spacing:0.01em;color:var(--ink);margin:0}
.ds-app-section-count{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));color:var(--ink-mute)}

/* Sticky primary action bar for long phone forms (submit stays reachable). */
.ds-app-actionbar{position:sticky;bottom:calc(60px + env(safe-area-inset-bottom));display:flex;gap:8px;padding:10px 0;background:var(--canvas, var(--paper-2))}
.ds-app-actionbar>.ds-button{flex:1 1 0;min-height:44px}

/* Full-bleed brand lockup for the sign-in screen. */
.ds-app-signin{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 0 6px}
.ds-app-signin-mark{display:block;width:120px;height:44px;background-image:var(--ds-logo-asset);background-repeat:no-repeat;background-position:center;background-size:contain}
.ds-app-signin-title{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:calc(21px * var(--fs-scale, 1));color:var(--ink);margin:0}
.ds-app-signin-sub{font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink-soft);text-align:center;margin:0}

/* Phone-width overrides for atoms that were authored desk-first. */
@media (max-width: 560px){
  .ds-app-body>.ds-fieldset,.ds-app-body .ds-fieldset{padding:16px 14px;gap:14px}
  .ds-app-body .ds-field-row-2,.ds-app-body .ds-field-row-3{grid-template-columns:1fr}
  .ds-app-body .ds-actions{flex-wrap:wrap}
  .ds-app-body .ds-actions>.ds-button{flex:1 1 46%;min-height:44px}
  .ds-app-body .ds-input,.ds-app-body .ds-select,.ds-app-body .ds-textarea{min-height:44px;font-size:16px}
}
@media (min-width: 721px){
  .ds-tabbar{max-width:760px;left:50%;transform:translateX(-50%);border-left:1px solid var(--hairline);border-right:1px solid var(--hairline)}
}

/* ===== Remote canvas frame — in-flow host for an embedded remote module =====
   The <iframe> a shell route uses to mount a remote app inside the content column
   (/app, /app/project-planning, /app/learning, /app/procurement). It is an ordinary
   in-flow block that fills the column it sits in.
   It must never be position:fixed / inset:0 / pointer-events:none: a fixed overlay
   treatment lifts the frame above the shell navigation and, with height:auto in the
   flex body, collapses it to the browser default 150px iframe height, which is what
   broke all four of those pages between 2026-07-25 and 2026-07-27.
   A remote that needs a click-through overlay to host draggable .ds-window popups
   uses .ds-window-canvas below, not this class. */
.remote-canvas-frame{display:block;width:100%;min-height:calc(100vh - 56px);border:0;background:var(--paper-2)}

/* Click-through full-viewport layer a remote uses to host draggable .ds-window
   popups over its own content. Transparent; only the windows themselves take the
   pointer. This is what the fixed/overlay treatment above was actually meant for. */
.ds-window-canvas{position:fixed;inset:0;z-index:80;pointer-events:none}
.ds-window-canvas>*{pointer-events:auto}


/* ===== Line-level report ledger (2026-07-26, Sale Report) =====
   `.ds-records-ledger` (opt-in modifier, combine with `.ds-records-compact`)
   is the density a workbook-shaped report needs on screen: an invoice-line
   report carries 17 narrow columns, and at `.ds-records-compact` scale every
   date and document number wrapped onto a second line, tripling row height
   and pushing the money columns out of sight. Cells hold one line, padding
   drops to ledger scale, and the table keeps its natural width so the
   surrounding `.ds-table-scroll` scrolls it horizontally instead of crushing
   the columns. `.ds-records-clip` caps a free-text cell (customer, item
   description) and ellipsises the overflow so one long name cannot set the
   width of the whole table. */
.ds-records-ledger{width:max-content;min-width:100%;font-size:calc(12.5px * var(--fs-scale, 1))}
.ds-records-ledger td{padding:5px 10px;white-space:nowrap}
.ds-records-ledger thead th{padding:6px 10px;white-space:nowrap}
.ds-records-ledger tfoot td{padding:7px 10px;border-top:1px solid var(--ink);font-weight:600}
.ds-records-ledger .ds-records-clip{max-width:240px;overflow:hidden;text-overflow:ellipsis}

/* Tight case-view variants (Ben 2026-07-27: a transaction fits one screen).
   Semantic DS objects — app code points at these, never restyles locally. */
.ds-form-tight{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.ds-fieldset-tight{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:10px 14px;display:flex;flex-direction:column;gap:8px;margin:0}
.ds-review-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 18px}
.ds-review-strip .ds-review-field{padding:3px 0;gap:2px;border-bottom:0}
.ds-review-strip .ds-review-value{font-size:calc(13px * var(--fs-scale, 1))}

/* Review-strip prose stays left-aligned; only numeric values right-align via
   ds-mono-num (UX audit 2026-07-27). */
.ds-review-strip .ds-review-value{text-align:left}
.ds-datagrid td.ds-mono-num,.ds-review-strip .ds-review-value.ds-mono-num{text-align:right;font-variant-numeric:tabular-nums}


/* ============================================================
   OMS ground-up components (UX spec 2026-07-27): line-item cards,
   the two-tier line table, context/dealer strips, summary footer,
   segmented decisions, toned badges, order tracker, negative button.
   Semantic only — app code points at these, never composes atoms.
   ============================================================ */

/* LineItemCard — one transaction line as a stacked card. */
.ds-line-card{background:var(--paper-2,rgba(0,0,0,.025));border:1px solid var(--hairline);border-radius:3px;padding:10px 12px 12px;margin-bottom:8px;display:flex;flex-direction:column;gap:8px}
.ds-line-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ds-line-card-title{font-weight:600;color:var(--ink)}
.ds-line-card-math{font-family:var(--font-mono);font-size:13px;color:var(--ink);white-space:nowrap}
.ds-line-card-note{font-size:12.5px;color:var(--ink-mute);border-left:2px solid var(--hairline);padding-left:8px}
.ds-line-card-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.ds-line-card-actionrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ds-line-card-remove{margin-left:auto}

/* DecisionControl — segmented, mutually exclusive choice per line. */
.ds-seg{display:inline-flex;border:1px solid var(--ink);border-radius:2px;overflow:hidden}
.ds-seg button{background:var(--paper);border:0;border-left:1px solid var(--hairline);padding:6px 12px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.ds-seg button:first-child{border-left:0}
.ds-seg button.ds-seg--on{background:var(--ink);color:var(--paper)}
.ds-seg button:disabled{color:var(--ink-faint);cursor:default}

/* PriceBadge tones — ds-pill stays the base; tone is the only variable. */
.ds-pill--good{border-color:var(--signal-grass);color:var(--signal-grass)}
.ds-pill--warn{border-color:var(--signal-amber);color:var(--signal-amber)}
.ds-pill--bad{border-color:var(--baobab);color:var(--baobab)}

/* Context strip: transaction facts (existing ds-review-strip family) stays.
   Dealer rail: the muted commercial-profile row beneath it. */
.ds-dealer-rail{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12px;color:var(--ink-mute);padding:6px 0 2px;border-bottom:1px solid var(--hairline)}
.ds-dealer-rail b{font-weight:600;color:var(--ink-soft)}

/* Summary footer — line-total math, once per screen, sticky in its scroll box. */
.ds-summary-footer{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;gap:4px 22px;justify-content:flex-end;padding:8px 2px;font-family:var(--font-mono);font-size:13px}
.ds-summary-footer .ds-summary-item{display:flex;gap:8px;align-items:baseline}
.ds-summary-footer .ds-summary-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.ds-summary-footer .ds-summary-total{font-weight:700}

/* LineTable — max-6-primary-column grid with a muted reference sub-row. */
.ds-line-table .ds-datagrid-row td{vertical-align:top}
.ds-line-table .ds-line-table-ref td{border-top:0;padding-top:0;font-size:11.5px;color:var(--ink-mute)}
.ds-line-table .ds-line-table-ref .ds-ref-item{display:inline-flex;gap:5px;margin-right:16px}
.ds-line-table .ds-line-table-ref .ds-ref-label{letter-spacing:.05em;text-transform:uppercase;font-size:10px}

/* Order tracker — one-line dealer-facing progress stepper. */
.ds-order-track{display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:4px 0 8px}
.ds-order-track .ds-track-node{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-faint)}
.ds-order-track .ds-track-node::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-faint);background:var(--paper)}
.ds-order-track .ds-track-node--past{color:var(--ink-mute)}
.ds-order-track .ds-track-node--past::before{background:var(--ink-mute);border-color:var(--ink-mute)}
.ds-order-track .ds-track-node--current{color:var(--ink);font-weight:700}
.ds-order-track .ds-track-node--current::before{background:var(--ink);border-color:var(--ink)}
.ds-order-track .ds-track-node--branch{color:var(--signal-amber)}
.ds-order-track .ds-track-node--branch::before{background:var(--signal-amber);border-color:var(--signal-amber)}
.ds-order-track .ds-track-sep{flex:1 1 18px;min-width:18px;height:1px;background:var(--hairline);margin:0 8px}
.ds-order-track{width:100%}

/* Third button token: ends/reverses the transaction. */
.ds-button-negative{background:var(--paper);border:1px solid var(--baobab);color:var(--baobab)}
.ds-button-negative:hover{background:var(--baobab);color:var(--paper)}

/* Narrow viewports: the line table yields to cards; the summary footer
   un-sticks so it never fights the keyboard. */
@media (max-width: 480px){
  .ds-line-table table, .ds-line-table thead, .ds-line-table tbody, .ds-line-table tr, .ds-line-table td, .ds-line-table th{display:block}
  .ds-line-table thead{display:none}
  .ds-line-table .ds-datagrid-row{border-top:1px solid var(--hairline);padding:8px 0}
  .ds-summary-footer{position:static}
}

/* Sortable/filterable work queues (Ben, 2026-07-27): every list header can
   sort, the queue can be text-filtered, and long lists scroll inside their
   own viewport with the header row pinned. */
.ds-th-sort{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;display:inline-flex;gap:4px;align-items:baseline}
.ds-th-sort:hover{text-decoration:underline}
.ds-th-sort .ds-sort-dir{font-size:9px;color:var(--ink-mute)}
.ds-table-viewport{max-height:62vh;overflow:auto}
.ds-table-viewport thead th{position:sticky;top:0;background:var(--paper);z-index:2}
.ds-filter-input{max-width:220px}

/* Process navigation — where this case sits in the flow (Ben, 2026-07-27).
   Reuses the order-track dot grammar for the full step sequence. */
.ds-process-nav{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;padding:2px 0 10px;border-bottom:1px solid var(--hairline);margin-bottom:10px;width:100%}

/* Merged report filter row (reporting redesign, 2026-07-27): ALL of a
   report's filters (country · period · currency) in ONE dense wrapping row,
   groups separated by hairline dividers, instead of three stacked
   ds-filterbar rows each paying its own margin + border-bottom. */
.ds-filterbar-merged{align-items:center;margin:4px 0 12px;padding-bottom:10px;row-gap:6px}
.ds-filterbar-sep{width:1px;height:18px;background:var(--hairline);margin:0 6px;align-self:center}

/* ===== Reporting BA/UX round-1 fixes (2026-07-28) ===== */

/* I1: `.ds-filter-chip:hover`/`.ds-filter-chip-active` are defined 5+ times
   across this merged file at different points; the LAST `:hover` copy in
   source order only reset color (not background), and the last background-
   setting copy sits earlier — net computed hover state on ANY filter chip
   in the app was ink-colored text on an ink-colored background (invisible),
   exactly the "solid black rectangle, no visible label" the costing-summary
   period chips were caught rendering (round-1 UX 10-U1/BA 10-B1: the chip
   itself was never even marked active, the black block was a frozen hover
   state). Reassert the correct paper-on-ink hover as the unconditionally
   last word, same pattern as the existing .ds-filter-chip-active reassertion
   directly above (line ~5971). */
.module-workbench .ds-filterbar .ds-filter-chip:hover{color:var(--paper);background:var(--ink);border-color:var(--ink)}

/* C3 follow-up: `.ds-table-scroll{overflow-x:auto}` genuinely scrolls, but
   macOS/Gecko auto-hide the scrollbar until the pointer is over the track —
   a wide report table just reads as silently clipped (round-1 BA/UX
   01-U1/02-U1/03-U1/05-U1: "numbers overlap", "column clipped, only a
   stray digit visible"). Force a persistent, visible thin scrollbar so the
   cut-off edge is a legible invitation to scroll, not a dead end. */
.ds-table-scroll{scrollbar-width:thin;scrollbar-color:var(--ink-mute) transparent}
.ds-table-scroll::-webkit-scrollbar{height:8px}
.ds-table-scroll::-webkit-scrollbar-track{background:transparent}
.ds-table-scroll::-webkit-scrollbar-thumb{background:var(--ink-mute);border-radius:4px}
/* Belt-and-suspenders: OS/engine scrollbar rendering is not reliable enough
   on its own (verified headless — a thin native scrollbar did not paint at
   all in a Camoufox render even with the rules above) to be the ONLY
   discoverability signal that a table has more columns off-screen. The
   classic pure-CSS "scroll shadow" — two edge gradients that scroll WITH
   the content (`background-attachment:local`) layered under two that stay
   fixed to the viewport (`background-attachment:scroll`) — shows a soft
   dark edge only on whichever side still has unscrolled content, and
   disappears once that edge is fully scrolled into view. No JS, works in
   every engine, never lies about scroll state. */
.ds-table-scroll{
  background-color:var(--paper);
  background-image:
    linear-gradient(to right, var(--paper) 30%, rgba(0,0,0,0)),
    linear-gradient(to left, var(--paper) 30%, rgba(0,0,0,0)),
    linear-gradient(to right, rgba(14,14,12,.14), rgba(0,0,0,0)),
    linear-gradient(to left, rgba(14,14,12,.14), rgba(0,0,0,0));
  background-repeat:no-repeat;
  background-position:left center, right center, left center, right center;
  background-size:28px 100%, 28px 100%, 10px 100%, 10px 100%;
  background-attachment:local, local, scroll, scroll;
}

/* A `table-layout:fixed` column can only ever be as wide as its colgroup
   percentage of the CURRENT container — on a narrow container that crushes
   9-13 digit financial figures into their neighbor (round-1 01-U1/02-U1:
   "53,856,088.62157,838,095.5..." one illegible run-on string). Give the
   fixed reporting tables a real minimum pixel width so every numeric column
   keeps enough room for a full figure; `.ds-table-scroll` then supplies the
   horizontal scroll (with the now-visible scrollbar above) once the
   viewport is narrower than that minimum, instead of the columns silently
   shrinking below readable width. */
.ds-records-compact-fixed{min-width:1100px}
/* The 17-column Sale-Report / ledger-style tables need much more room —
   scoped to the modifier that already caps free-text cells (see
   .ds-records-ledger .ds-records-clip below) so this never affects the
   6-column Trial Balance table above. */
.ds-records-ledger{min-width:1700px}

/* I4 follow-up: `.ds-records-clip` was scoped to only work inside
   `.ds-records-ledger` (the Sale Report table). Round-1 03-U4/05-U4/08-U2
   flag the identical long-name row-height raggedness on AR/AP Aging and
   Sales Summary, which use plain `.ds-records-compact` — generalize the
   clip utility so any report table's name cell can opt in, one line +
   ellipsis + a `title` attribute carrying the full text. */
.ds-records-clip{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 13-U1/01-U4: a plain (non -merged) `.ds-filterbar` reused as a one-line
   read-only stat strip (e.g. "Opening / Closing / N lines" above a table)
   inherited the real filter row's bottom margin + padding + hairline
   (meant to separate filters from data) — on a stat strip that reads as an
   unexplained blank spacer row before the table heading. Modifier resets
   the reserved space to a single tight rule-less gap. */
.ds-filterbar-stats{margin:4px 0 8px;padding-bottom:0;border-bottom:0}

/* 11-U2/12-U1: the "Close the panel or pick a report above…" prompt
   (ReportingLayout) previously reused `.ds-empty-row`, which — depending on
   what data row happened to sit directly above it (a bordered `ds-link-row`
   list vs. a plain `<table>`) — visually boxed itself into looking like one
   more list item on the Views panel but rendered as bare unboxed text on
   the Access panel: the SAME element, two different apparent treatments.
   One dedicated, context-independent style: small muted mono caption, never
   a box, applied identically regardless of what precedes it. */
/* 12-U2: the previous unboxed rendering sat ~15px above the viewport's own
   bottom edge with nothing below it — genuine bottom padding on the prompt
   itself so the panel never reads as clipped. */
.ds-panel-close-hint{margin-top:10px;padding:10px 2px 28px;font-family:var(--font-mono);font-size:calc(11px * var(--fs-scale, 1));letter-spacing:0.02em;color:var(--ink-mute);border:0;background:transparent}

/* 03-U3/05-U3/07-U1/02-U3/04-U1/06-U1/08-U1: several report filter rows put a
   labeled field (AS OF, slow-moving days, code, FC currency) into a
   `.ds-field` — which stacks its label ABOVE the control (`flex-direction:
   column`) — inside an otherwise single-row `.ds-filterbar-merged`. Each one
   reads as its own tiny two-line form glued onto the chip row instead of one
   merged row. `.ds-field-inline` keeps `.ds-field`'s label+control pairing
   but lays them out side by side on the SAME baseline the chips sit on. */
.ds-field-inline{flex-direction:row;align-items:center;gap:6px}
.ds-field-inline .ds-label{margin:0;white-space:nowrap}
.ds-oms-shell{display:grid;grid-template-columns:var(--ds-oms-rail-width) minmax(0,1fr);min-height:100%;background:var(--paper-2);color:var(--ink-soft)}
.ds-oms-nav{position:sticky;top:0;align-self:start;height:100dvh;overflow:auto;display:flex;flex-direction:column;gap:var(--ds-space-16);padding:var(--ds-space-22) var(--ds-space-16);background:var(--ink);color:var(--paper)}
.ds-oms-nav-group{display:flex;flex-direction:column;gap:var(--ds-space-4)}
.ds-oms-nav-label{margin:0 0 var(--ds-space-4);padding:0 var(--ds-space-12);color:var(--ink-faint);font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ds-oms-nav-link{display:flex;align-items:center;min-height:var(--ds-control-compact);padding:var(--ds-space-9) var(--ds-space-12);border-radius:var(--ds-radius-sm);color:var(--ink-faint);font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));text-decoration:none;transition:background var(--ds-motion-fast) ease-out,color var(--ds-motion-fast) ease-out}
.ds-oms-nav-link:hover{background:var(--ink-soft);color:var(--paper)}
.ds-oms-nav-link-active{background:var(--paper);color:var(--ink);font-weight:700}
.ds-oms-nav-link-active:hover{background:var(--paper);color:var(--ink)}
.ds-oms-main{min-width:0;background:var(--paper-2)}
.ds-oms-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--ds-space-24);padding:var(--ds-space-24) var(--ds-space-30) var(--ds-space-16);border-bottom:var(--ds-rule) solid var(--hairline);background:var(--paper)}
.ds-oms-header-copy{min-width:0;max-width:var(--ds-oms-copy-max)}
.ds-oms-tabs{display:flex;min-width:0;overflow-x:auto;padding:0 var(--ds-space-30);border-bottom:var(--ds-rule) solid var(--hairline);background:var(--paper)}
.ds-oms-tab{display:inline-flex;align-items:center;min-height:var(--ds-control-tab);padding:0 var(--ds-space-14);border-bottom:var(--ds-rule-active) solid transparent;color:var(--ink-mute);font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));font-weight:600;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;white-space:nowrap;transition:border-color var(--ds-motion-fast) ease-out,color var(--ds-motion-fast) ease-out}
.ds-oms-tab:hover{color:var(--ink)}
.ds-oms-tab-active{border-bottom-color:var(--baobab);color:var(--baobab)}
.ds-oms-canvas{min-width:0;padding:var(--ds-space-24) var(--ds-space-30) var(--ds-space-30)}
.ds-oms-screen{display:flex;flex-direction:column;min-width:0;gap:var(--ds-oms-screen-gap)}
.ds-process-thumb.ds-process-thumb-placeholder{height:var(--ds-oms-process-thumb-size)}
.ds-process-thumb-placeholder-frame{width:100%;height:100%;background:repeating-linear-gradient(var(--ds-oms-process-thumb-stripe-angle),var(--ds-oms-process-thumb-stripe-base) 0,var(--ds-oms-process-thumb-stripe-base) var(--ds-oms-process-thumb-stripe-base-stop),var(--ds-oms-process-thumb-stripe-line) var(--ds-oms-process-thumb-stripe-base-stop),var(--ds-oms-process-thumb-stripe-line) var(--ds-oms-process-thumb-stripe-line-stop))}
.ds-oms-workspace{display:flex;align-items:stretch;min-width:0}
.ds-oms-workspace>.ds-oms-card{flex:1}
.ds-oms-card{min-width:0;padding:var(--ds-space-16);border:var(--ds-rule) solid var(--hairline);border-radius:var(--ds-radius-sm);background:var(--paper)}
.ds-oms-table{width:100%;border-collapse:collapse;background:var(--paper);font-variant-numeric:tabular-nums}
.ds-oms-table th{padding:var(--ds-space-10) var(--ds-space-14);border-bottom:var(--ds-rule) solid var(--hairline);background:var(--paper-2);color:var(--ink-mute);font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale, 1));letter-spacing:.1em;text-align:left;text-transform:uppercase}
.ds-oms-table td{padding:var(--ds-space-12) var(--ds-space-14);border-bottom:var(--ds-rule) solid var(--hairline);vertical-align:middle}
.ds-oms-table tbody tr{transition:background var(--ds-motion-fast) ease-out}
.ds-oms-table tbody tr:hover{background:var(--paper-2)}
.ds-oms-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-space-14) var(--ds-space-16)}
.ds-oms-section-rail{width:var(--ds-oms-section-rail-width);flex:none;display:flex;flex-direction:column;gap:var(--ds-space-2);padding:var(--ds-space-8) 0;border-right:var(--ds-rule) solid var(--hairline);background:var(--paper-2)}
.ds-oms-section-link{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-10);min-height:var(--ds-control-compact);padding:var(--ds-space-8) var(--ds-space-12);border-left:var(--ds-rule-active) solid transparent;color:var(--ink-mute);text-decoration:none;transition:background var(--ds-motion-fast) ease-out,border-color var(--ds-motion-fast) ease-out,color var(--ds-motion-fast) ease-out}
.ds-oms-section-link:hover{background:var(--paper);color:var(--ink)}
.ds-oms-section-link-active{border-left-color:var(--baobab);background:var(--paper);color:var(--ink)}
.ds-oms-gateway-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-16);min-width:0;padding:var(--ds-space-10) var(--ds-space-14);border:var(--ds-rule) solid var(--hairline);background:var(--paper-2);font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));letter-spacing:.08em;text-transform:uppercase}
.ds-oms-state{display:grid;justify-items:start;gap:var(--ds-space-10);padding:var(--ds-space-24);border:var(--ds-rule) solid var(--hairline);border-left:var(--ds-rule-emphasis) solid var(--baobab);background:var(--paper)}
.ds-oms-state-actions{display:flex;flex-wrap:wrap;gap:var(--ds-space-10);margin-top:var(--ds-space-4)}
.ds-oms-confirmation{padding:var(--ds-space-16);border:var(--ds-rule) solid var(--hairline);border-left:var(--ds-rule-emphasis) solid var(--baobab);background:var(--baobab-bg)}
.ds-oms-mobile-strip{display:none}
.ds-oms-nav-link:focus-visible,.ds-oms-tab:focus-visible,.ds-oms-section-link:focus-visible{outline:var(--ds-rule-active) solid var(--baobab);outline-offset:var(--ds-focus-offset)}
.ds-oms-shell :is(.ds-input,.ds-select,.ds-textarea,.ds-button):focus-visible{outline:var(--ds-rule-active) solid var(--baobab);outline-offset:var(--ds-focus-offset)}
@media(max-width:760px){
  .ds-oms-shell{grid-template-columns:minmax(0,1fr)}
  .ds-oms-nav{display:none}
  .ds-oms-mobile-strip{display:flex;align-items:center;gap:var(--ds-space-8);min-height:var(--ds-control-touch);overflow-x:auto;padding:var(--ds-space-6) var(--ds-space-14);border-bottom:var(--ds-rule) solid var(--hairline);background:var(--ink);color:var(--paper)}
  .ds-oms-header{align-items:flex-start;flex-direction:column;padding:var(--ds-space-18) var(--ds-space-16) var(--ds-space-12)}
  .ds-oms-tabs{padding:0 var(--ds-space-8)}
  .ds-oms-canvas{padding:var(--ds-space-18) var(--ds-space-16) var(--ds-space-24)}
  .ds-oms-workspace{flex-direction:column}
  .ds-oms-form-grid{grid-template-columns:minmax(0,1fr)}
  .ds-oms-section-rail{width:auto;overflow-x:auto;flex-direction:row;border-right:0;border-bottom:var(--ds-rule) solid var(--hairline)}
  .ds-oms-section-link{flex:none;border-left:0;border-bottom:var(--ds-rule-active) solid transparent}
  .ds-oms-section-link-active{border-bottom-color:var(--baobab)}
}
@media(prefers-reduced-motion:reduce){
  .ds-oms-nav-link,.ds-oms-tab,.ds-oms-table tbody tr,.ds-oms-section-link{transition-duration:var(--ds-motion-none)}
}

/* Search picker — the field for choosing ONE record out of thousands
   (Senegal carries 2,326 business partners and 990 finished goods). A native
   select cannot be searched, so the control is a text input that queries the
   source and offers the matches it got back, with the count it did not show.
   Chosen state reads as a settled value, not as a search box. */
.ds-picker{position:relative;display:flex;flex-direction:column;gap:3px}
.ds-picker .ds-picker-input{width:100%}
.ds-picker .ds-picker-chosen{display:flex;align-items:baseline;gap:8px;justify-content:space-between;border:1px solid var(--hairline);padding:5px 7px;background:var(--paper)}
.ds-picker .ds-picker-chosen-name{font-weight:600}
.ds-picker .ds-picker-chosen-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute)}
.ds-picker .ds-picker-change{background:none;border:0;padding:0;font:inherit;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer;text-decoration:underline}
.ds-picker .ds-picker-list{position:absolute;top:100%;left:0;right:0;z-index:30;max-height:240px;overflow:auto;background:var(--paper);border:1px solid var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.ds-picker .ds-picker-option{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--hairline);padding:6px 8px;font:inherit;cursor:pointer}
.ds-picker .ds-picker-option:hover,.ds-picker .ds-picker-option:focus-visible{background:var(--wash)}
.ds-picker .ds-picker-option-name{font-size:12.5px}
.ds-picker .ds-picker-option-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute)}
.ds-picker .ds-picker-note{font-size:11px;color:var(--ink-mute)}
.ds-picker .ds-picker-error{font-size:11px;color:var(--baobab);display:flex;gap:8px;align-items:baseline}
.ds-picker .ds-picker-retry{background:none;border:0;padding:0;font:inherit;font-size:11px;color:var(--baobab);text-decoration:underline;cursor:pointer}

/* Case facts on a dark dialog titlebar. The plain pill is paper-on-paper
   there and rendered as three blank boxes (design review, 2026-07-27). */
.ds-modal-dialog-titlebar .ds-fact{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--paper);border:1px solid color-mix(in srgb,var(--paper) 35%,transparent);border-radius:8px;padding:1px 7px;background:transparent;white-space:nowrap}

/* Terms & conditions on a quote — the binding text a dealer accepts with the
   offer. Take it or leave it; no negotiation affordance (2026-07-28). */
.ds-terms{border:1px solid var(--hairline);background:var(--wash);padding:8px 10px;margin:10px 0}
.ds-terms .ds-terms-title{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
.ds-terms .ds-terms-text{font-size:11.5px;white-space:pre-wrap;max-height:180px;overflow:auto}
.ds-terms .ds-terms-bind{font-size:10.5px;font-weight:700;margin-top:6px}

/* Quantity in kilograms — figures read from the right, no browser spinner
   chrome (Ben, 2026-07-29: tonnes confused users; arrows useless). */
.ds-qty-kg{text-align:right;font-variant-numeric:tabular-nums}
.ds-qty-kg::-webkit-outer-spin-button,.ds-qty-kg::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ds-qty-kg{-moz-appearance:textfield;appearance:textfield}

/* The dialog's process rail breathes on its own row — it was crushed against
   the dark titlebar (Ben, 2026-07-29). */
.ds-modal--dialog .ds-process-nav{margin:6px 0 12px;padding:6px 0 12px}