/* 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)}
.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}
.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)}
.ds-calc-row{position:relative;display:flex;align-items:stretch;width:100%}
.ds-calc-steppers{display:flex;flex-direction:column;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 6px}
.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)}
.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-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:9px 10px;color:var(--ink-mute);font-family:var(--font-ui);font-weight:500;font-size:calc(12.5px * 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}
.ds-modal.ds-modal--dialog{position:relative;width:auto;max-width:1280px;height:auto;max-height:calc(100vh - 48px);border-radius:2px;box-shadow:0 12px 40px rgba(14,14,12,.35)}
.ds-modal--dialog .ds-modal-body{overflow:auto;padding:36px 26px 20px}
/* Real bug, found live (2026-07-22) via a Playwright bounding-box check on
   the deployed TA Supplier Portal: .ds-modal-dialog-dismiss is position:
   absolute against .ds-modal--dialog itself (top:8px, own height 24px, so
   its footprint runs from y8 to y32 relative to the dialog). A first-row
   status ds-tag inside a ds-table-header legend row collides with it
   whenever the body's own top padding doesn't clear that 32px line.
   .ds-modal-body defaults to padding:0 (correct for the original
   iframe-embed full-screen modal). First attempt used padding-top:16px --
   measured 8px of real overlap still present (verified again live via the
   same bounding-box check), so this needed to fully clear dismiss's actual
   32px footprint plus a visible gap; 36px does. Scoped to .ds-modal--dialog
   only -- the full-screen modal is unaffected. */
.ds-modal-dialog-dismiss{position:absolute;top:8px;right:12px;z-index:1;background:transparent;border:0;color:var(--ink-mute);font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;cursor:pointer;padding:4px 8px}
.ds-modal-dialog-dismiss:hover{color:var(--baobab)}

/* 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: 9px 10px; color: var(--ink-mute); font-size:calc(12.5px * var(--fs-scale, 1)); }

/* --- 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: 700; font-size: 15px; letter-spacing: -0.01em; line-height: 1.2; margin: 0; font-style: normal; }

/* --- 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-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{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{background:rgba(250,250,246,0.15)}
.ds-window-pin[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)}
.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)}
.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:9px 10px;color:var(--ink-mute);font-family:var(--font-ui);font-weight:500;font-size:12.5px}

/* ===== 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: 9px 10px; color: var(--ink-mute); font-size: 12.5px; }

/* --- 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: 700; font-size: 15px; letter-spacing: -0.01em; line-height: 1.2; margin: 0; font-style: normal; }

/* --- 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: 9px 10px; color: var(--ink-mute); font-size: 12.5px; }

/* --- 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: 700; font-size: 15px; letter-spacing: -0.01em; line-height: 1.2; margin: 0; font-style: normal; }

/* --- 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}
/* TA-PORTAL density fix (2026-07-24): 32-36px input height, 10-11px labels,
   per the hard forms spec -- was inheriting the 42px/12px base DS scale. */
.module-form .ds-label{font-size:calc(10.5px * var(--fs-scale, 1))}
.module-form .ds-input,
.module-form .ds-select{padding:8px 10px;font-size:calc(13px * var(--fs-scale, 1))}
.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}
}
@media (max-width:980px){
  .module-workbench-header{flex-direction:column;align-items:flex-start}
  .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); }
/* text-align:right + display:block (2026-07-23): every existing .t-num usage
   is the sole content of its cell (a <span> wrapping one figure, or a <td>
   itself on the billing totals row) -- block makes the span fill the cell
   so its own text-align takes effect, pairing with the new .ds-th-num header
   rule above so the figure lines up directly under its header instead of
   sitting left-ish under a centered/left one. */
.t-num     { font-family: var(--font-ui); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; display: block; }

/* ===== 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 --- */
.cd-body { overflow-y: auto; padding: 20px; }
.cd-grid { margin-top: 0; }
.cd-err { color: var(--baobab); }
.cd-form .ds-actions { justify-content: flex-end; }
.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;
}

/* ===== 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. */
.ta-kanban{display:grid;width:100%;grid-template-columns:repeat(6, 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)}}
.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}
.ta-col-h{display:flex;align-items:center;gap:4px;padding:5px 6px;border-bottom:1px solid var(--hairline);background:var(--paper-2)}
.ta-col-t{font-family:var(--font-mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.02em;color:var(--ink-soft);flex:1;line-height:1.2}
.ta-col-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 4px}
.ta-col-b{padding:5px;display:flex;flex-direction:column;gap:4px;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:5px 6px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.ta-card:hover{border-color:var(--ink-faint)}
.ta-card-title{font-size:10.5px;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ta-card-meta{display:flex;justify-content:space-between;align-items:center;gap:6px}
.ta-card-id{font-family:var(--font-mono);font-size:8px;color:var(--ink-faint);letter-spacing:0.02em;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}
.rsel-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}
.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)}
.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)}
.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 ------------------------- */
.rsel-startdate{display:flex;align-items:center;gap:8px}
.rsel-asap-toggle{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}
  .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;align-items:stretch;gap:10px;padding:10px 2px;border-bottom:1px solid var(--hairline)}
.ds-flowchart-lane:last-child{border-bottom:0}
.ds-flowchart-lane-label{flex:0 0 132px;display:flex;align-items:center;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}
.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}

/* ===== 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;max-width:100%;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;flex:0 0 auto}

/* .ds-pill-text (2026-07-23): the pill is display:inline-flex, an atomic
   inline-level box -- a plain .ds-cell-truncate ellipsis rule on the
   containing <td> can only clip that whole box raggedly (no "…", the pill's
   own rounded border cut off mid-render) instead of eliding its text
   cleanly. Wrapping the variable-length text portion of a pill in
   .ds-pill-text (a flex child with min-width:0 so it's allowed to shrink
   below its content size, the actual reason a flex item ignores
   overflow/ellipsis otherwise) gives clean in-pill ellipsis when the
   column is narrower than the full role/country string, while the .ds-pill
   itself still respects max-width:100% so it never overflows its cell. */
.ds-pill-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ===== 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))}
   TA-PORTAL-LOCAL ADDITIONS -- not yet upstreamed to canonical mmd-portal-
   shell. Restored 2026-07-22 after the DS sync from canonical (a4565d2)
   silently deleted these on a wholesale cp overwrite -- they only ever
   existed in this app's vendored copy, so a copy-from-canonical dropped
   them. Real regression, found live via signed-in screenshot (side-rail/
   row-links/sort-filter/ActionSwitch/slot-picker/modal-scroll all broke).
   TODO: upstream these to mmd-portal-shell properly, then this block can
   go away and the two files stay a true 1:1 sync.
   ========================================================================== */
.module-workbench-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:8px 0 14px;border-bottom:1px solid var(--ink)}
.module-title-block{min-width:0}
.module-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.module-empty-state{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:40px 32px}
.module-empty-state .ds-actions{padding-top:4px}
.ds-process-flow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-top:10px}
.ds-process-node{display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:10px}
.ds-process-thumb{height:210px;border:1px solid var(--hairline);border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-2)}
.ds-process-node-foot{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:auto}
.ta-kanban{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:6px;height:min(70vh, 620px)}
.ta-card-meta{display:flex;justify-content:flex-end}
.ta-card-age{font-family:var(--font-mono);font-size:8px;color:var(--ink-faint)}
.ta-col-note{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)}
/* --- Home start-page agent-query grid (AgentQueryGrid.tsx) — dense grid of prompt buttons that seed the live Cowork agent (window "cowork:open" event); replaces the old employee-services link table ------ */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:10px}
.qa-btn{display:block;width:100%;background:var(--paper);border:0;padding:14px 16px;text-align:left;cursor:pointer;font-family:var(--font-ui);font-weight:600;font-size:13px;line-height:1.3;color:var(--ink)}
.qa-btn:not(:disabled):hover{background:var(--paper-2);color:var(--baobab)}
.qa-btn:not(:disabled):active{background:var(--baobab-bg)}
.qa-btn:disabled{background:var(--paper-2);color:var(--ink-mute);cursor:not-allowed}
.qa-btn:focus-visible{outline:2px solid var(--baobab);outline-offset:-2px}

.ds-flow-node{display:flex;flex-direction:column;gap:6px;width:176px;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}
/* TA-PORTAL: interview reschedule/cancel — single-active-panel switch
   (2026-07-21). Standing rule: forms never stack — this replaces two
   independently-conditional form blocks (slot-grid + cancel form) that
   could both render on screen at once with a segmented control showing
   exactly one panel at a time. Also authors .slot-grid/.slot-chip, which
   the interview-detail page already referenced with no definition
   anywhere in the DS (unstyled in prod) — real gap, closed here. */
.ds-seg{display:inline-flex;border:1px solid var(--ink);border-radius:4px;overflow:hidden;margin:14px 0 0}
.ds-seg-btn{font-family:var(--font-ui);font-weight:600;font-size:calc(11.5px * var(--fs-scale, 1));letter-spacing:0.02em;padding:8px 16px;border:0;border-right:1px solid var(--hairline);background:var(--paper);color:var(--ink-soft);cursor:pointer}
.ds-seg-btn:last-child{border-right:0}
.ds-seg-btn[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.ds-seg-panel{display:none;border:1px solid var(--hairline);border-top:0;padding:16px;background:var(--paper-2)}
.ds-seg-panel.is-active{display:block}
.slot-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.slot-chip{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:calc(11.5px * var(--fs-scale, 1));padding:7px 12px;border-radius:4px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink);cursor:pointer;transition:background 0.14s ease, color 0.14s ease, border-color 0.14s ease}
.slot-chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* TA-PORTAL: whole-row-click records table + sortable/filterable headers
   (2026-07-21, standing rule: tables never show action buttons; the row
   is the click target; actions live inside the popup that opens).
   .ds-records-row-link: put on the FIRST <td>'s <a>; a ::after pseudo
   stretches it to cover the whole <tr> — no JS row handler needed for the
   click-target itself. .ds-th-sort: clickable column header. .ds-th-filter:
   compact per-column filter input in the row under headers. */
.ds-records-row-link{text-decoration:none;color:inherit}
tr:has(.ds-records-row-link){position:relative;cursor:pointer}
.ds-records-row-link::after{content:"";position:absolute;inset:0;z-index:1}
/* Any OTHER real link/control in a row (CV, Join, etc.) must stay above
   the row-open overlay above, or it becomes unclickable -- the overlay
   would intercept the click before it ever reaches the link. */
.ds-records td a:not(.ds-records-row-link){position:relative;z-index:2}
tr:has(.ds-records-row-link):hover td{background:var(--paper-2)}
.ds-th-sort{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0;font:inherit;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer}
.ds-th-sort:hover{color:var(--ink)}
.ds-th-sort-arrow{font-size:9px;opacity:.5}
.ds-th-sort[aria-sort="ascending"] .ds-th-sort-arrow,
.ds-th-sort[aria-sort="descending"] .ds-th-sort-arrow{opacity:1;color:var(--baobab-deep)}
.ds-th-filter-row td,.ds-th-filter-row th{padding:4px 10px;border-bottom:1px solid var(--hairline);background:var(--paper-2)}
.ds-th-filter{width:100%;font:inherit;font-size:11.5px;padding:4px 6px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink);border-radius:2px}
.ds-elapsed{font-variant-numeric:tabular-nums;color:var(--ink-mute)}

/* TA-PORTAL: scrollable ds-modal-body content variant (2026-07-21). Base
   .ds-modal-body is overflow:hidden (correct for its original iframe-embed
   use case). Record-detail popups hold real block content (tables, forms)
   instead of an iframe, which needs a min-width:0 flex fix too, or a wide
   table forces the whole modal to grow past the viewport instead of
   scrolling — real bug found live (10000px+ wide modal render). */
.ds-modal-body-scroll{overflow-y:auto;overflow-x:hidden;min-width:0}

/* TA-PORTAL: Reporting page pop-out detail buttons (2026-07-22). Literal
   port of the approved artifact's ".btn.secondary.small" on the four report
   cards ("Pop out for detail"). Distinct from the full-size .ds-button --
   the artifact deliberately uses a smaller, quieter button inside a stat
   card footer than the primary/secondary actions elsewhere in the app. */
.ds-button-small{padding:6px 12px;font-size:calc(10.5px * var(--fs-scale, 1))}

/* TA-PORTAL: Submission funnel bars (2026-07-22). Literal port of the
   approved artifact's .funnel/.funnel-row/.funnel-label/.funnel-bar-wrap/
   .funnel-bar/.funnel-count (Reporting page, "Submission funnel" pop-out
   dialog), translated from raw hex to DS custom properties. */
.ds-funnel{display:flex;flex-direction:column;margin-bottom:0}
.ds-funnel-row{display:grid;grid-template-columns:96px 40px 1fr 40px;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--hairline)}
.ds-funnel-row:last-child{border-bottom:0}
.ds-funnel-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;color:var(--ink-mute)}
.ds-funnel-count-val{font-family:var(--font-mono);font-size:12px;color:var(--ink);text-align:right}
.ds-funnel-bar-wrap{height:8px;background:var(--paper-3);border-radius:2px;overflow:hidden}
.ds-funnel-bar{height:8px;background:var(--baobab);border-radius:2px}
.ds-funnel-count{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute);text-align:right}
/* Discrete 5%-step width classes for the funnel bar -- CDS rule is zero
   inline styles in app code (including CSS-var handoffs), so the bar's
   data-driven width is expressed as one of these fixed steps (nearest 5%,
   floor 5%) instead of a style prop. */
.ds-funnel-bar-w-0{width:5%}
.ds-funnel-bar-w-5{width:5%}
.ds-funnel-bar-w-10{width:10%}
.ds-funnel-bar-w-15{width:15%}
.ds-funnel-bar-w-20{width:20%}
.ds-funnel-bar-w-25{width:25%}
.ds-funnel-bar-w-30{width:30%}
.ds-funnel-bar-w-35{width:35%}
.ds-funnel-bar-w-40{width:40%}
.ds-funnel-bar-w-45{width:45%}
.ds-funnel-bar-w-50{width:50%}
.ds-funnel-bar-w-55{width:55%}
.ds-funnel-bar-w-60{width:60%}
.ds-funnel-bar-w-65{width:65%}
.ds-funnel-bar-w-70{width:70%}
.ds-funnel-bar-w-75{width:75%}
.ds-funnel-bar-w-80{width:80%}
.ds-funnel-bar-w-85{width:85%}
.ds-funnel-bar-w-90{width:90%}
.ds-funnel-bar-w-95{width:95%}
.ds-funnel-bar-w-100{width:100%}

/* TA-PORTAL density fix (2026-07-24): dense two-row contact block for the
   Account page ("Contacts" section) -- label (10px mono) | name (13px) |
   email (mono 12px), replacing the taller bordered .ds-contact-card. */
.ds-contact-row{display:flex;align-items:baseline;gap:14px;padding:6px 0;border-bottom:1px solid var(--hairline)}
.ds-contact-row:last-child{border-bottom:0}
.ds-contact-row-label{width:120px;flex-shrink:0;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)}
.ds-contact-row-name{font-family:var(--font-ui);font-weight:500;font-size:13px;color:var(--ink);flex:0 0 auto;min-width:180px}
.ds-contact-row-email{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
.ds-contact-row-email a{color:inherit}

/* TA-PORTAL density fix (2026-07-24): caps a form's content width so
   inputs never stretch full-viewport-wide (Account change-password). */
.ds-form-compact{max-width:680px}

/* TA-PORTAL density fix (2026-07-24): wide fixed column for a full email
   address in mono, single line (Interviews "Interviewer" column). */
.ds-col-wide{width:230px}

/* TA-PORTAL density fix (2026-07-24): native <details>/<summary> disclosure
   styled at the ds-table-title scale instead of a bare unstyled toggle
   (Interviews "Previous interviews (N)" section). */
.ds-native-disclosure{border-top:1px solid var(--hairline);padding-top:4px}
.ds-native-disclosure summary{list-style:none;cursor:pointer;padding:6px 0}
.ds-native-disclosure summary::-webkit-details-marker{display:none}
.ds-native-disclosure summary::before{content:"\25B8  ";color:var(--ink-mute);font-family:var(--font-mono);font-size:10px}
.ds-native-disclosure[open] summary::before{content:"\25BE  "}

/* TA-PORTAL: Account page coverage rows + dashed add pill + terms box
   (2026-07-22). Literal port of the approved artifact's #page-account
   .cov-row/.cov-country/.pill-add/.pill-plus/.tnc/.tnc .k, translated from
   raw hex to DS custom properties. Pending upstream to canonical
   mmd-portal-shell components.css. */
.ds-cov-row{display:flex;align-items:center;gap:14px;padding:9px 12px;border:1px solid var(--hairline);border-bottom:0;background:var(--paper)}
.ds-cov-row:last-child{border-bottom:1px solid var(--hairline)}
.ds-cov-country{width:84px;flex-shrink:0;font-family:var(--font-display);font-style:italic;font-size:14px}
.ds-pill-add{border-style:dashed;color:var(--ink-mute);cursor:pointer;background:none}
.ds-pill-add:hover{border-color:var(--baobab);color:var(--baobab-deep)}
.ds-pill-plus{width:22px;height:22px;padding:0;justify-content:center;font-weight:700;border-style:dashed}
.ds-tnc{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:14px}
.ds-tnc-kicker{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--baobab-deep);margin-bottom:5px}

/* TA-PORTAL: Demand page filters bar (2026-07-22). Literal port of the
   approved artifact's .filters/.filters select,input (lines 35-36) --
   country/stage/urgency dropdowns + a free-text position search sitting
   above the Demand table. Options are populated from real case data by
   DemandFilters.tsx, never a hardcoded/fabricated list. Pending upstream to
   canonical mmd-portal-shell components.css. */
.ds-filters{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
.ds-filter-select,.ds-filter-input{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));text-transform:uppercase;letter-spacing:0.03em;color:var(--ink-soft);background:var(--paper);border:1px solid var(--hairline);border-radius:2px;padding:6px 9px}

/* TA-PORTAL: Case detail Urgency value styled red when High (2026-07-22).
   Literal port of the approved artifact's inline
   `style="color:var(--baobab-deep)"` on the Urgency .disp (line 453) --
   the CDS forbids inline styles/CSS-var handoffs in app code, so this is
   authored as a named semantic modifier on .ds-input instead, applied only
   when the real urgency value is High. Pending upstream to canonical
   mmd-portal-shell components.css. */
.ds-input-urgent{color:var(--baobab-deep)}

/* TA-PORTAL: Dialog legend open-slot badge (2026-07-22). Literal port of
   the approved artifact's .badge (line 138) -- reused here for the
   Candidate submission dialog's "N open slot(s)" indicator, computed from
   the case's real headcount minus candidates already hired for it. Pending
   upstream to canonical mmd-portal-shell components.css. */
.ds-badge{font-family:var(--font-mono);font-size:9px;color:var(--ink-mute);border:1px solid var(--hairline);border-radius:8px;padding:1px 7px;background:var(--paper)}

/* TA-PORTAL: Candidate detail "AI-generated pitch" length slider row
   (2026-07-22). Literal port of the approved artifact's .pitch-controls
   (line 559, dlg-candidate) -- label + native input[type=range] + word-count
   readout above the readonly pitch textarea. Pending upstream to canonical
   mmd-portal-shell components.css. */
.ds-pitch-controls{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-family:var(--font-mono);font-size:11px;color:var(--ink-mute)}
.ds-pitch-len{flex:1;max-width:220px}

/* TA-PORTAL-LOCAL ADDITIONS -- Interviews modal (F13/F14, 2026-07-22).
   Literal port of the approved artifact's dlg-interview / dlg-interview-past
   (lines 586-653): .callout .big (line 121) for the scheduled-time
   headline inside a .ds-contact-card, and .sub-section/.sub-head/h2/.n
   (interview-feedback sub-section on the past/terminal layout). Reuses the
   existing ds-contact-card/-ok/-warn chrome for every callout row instead
   of inventing a parallel "callout" component, since they are visually and
   structurally the same block (icon-left card, name line, meta line, one
   optional trailing action). Pending upstream to canonical mmd-portal-shell
   components.css. */
.ds-contact-name-big{font-family:var(--font-display);font-style:italic;font-size:17px;font-weight:600}
.ds-sub-section{margin:16px 0}
.ds-sub-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.ds-sub-head h2{font-family:var(--font-display);font-style:normal;font-weight:700;font-size:15px;letter-spacing:-0.01em;margin:0}
.ds-sub-head .ds-sub-head-note{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute)}

/* TA-PORTAL: right-aligned action inside a .ds-filters bar (2026-07-22).
   Literal port of the approved artifact's Candidates-page filters row,
   which places "Upload new CV to pool" via inline `style="margin-left:auto"`
   (line 269) -- the CDS forbids inline styles in app code, so this is
   authored as a named semantic modifier instead. Pending upstream to
   canonical mmd-portal-shell components.css. */
.ds-filters-push-end{margin-left:auto}

/* TA-PORTAL: designer-review fixes (2026-07-22).

   A1 (BLOCKER) -- RecordTable.tsx/ReportTable.tsx render a bare `col.label`
   text node inside <th> for any column with no sortValue (e.g. Interviewer,
   Prep), which falls through to the browser default <th> styling (bold
   serif) instead of the artifact's uniform 9.5px uppercase mono header
   (artifact line 39, `.recs thead th`). Root-cause fix: a `.ds-th` class
   applied to EVERY <th>, sortable or not, carrying the same typography as
   the existing `.ds-th-sort` button so both states render identically. */
.ds-th{font-family:var(--font-mono);font-size:9.5px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);white-space:nowrap}

/* Main-portal reference measurement (2026-07-24, signed-in via leased
   e2e.tester2, FLOW_FREE SKU, portal-test.baobab-ts.com /app/it/backlog and
   /app/ta-recruitment/suppliers): .ds-th above never set font-weight, so it
   fell through to the browser UA-default bold (~700) <th> weight -- this
   app has no Tailwind-preflight-style `th{font-weight:inherit}` reset to
   neutralize it the way the canonical mmd-portal-shell build does. Live
   getComputedStyle on the canonical app's own RecordTable header cells
   (same component family TA's .ds-th is patched for) measured
   font-weight:500, not 700 -- confirmed real, not a fluke, on 2 separate
   live pages. Explicit font-weight:500 closes that gap. */

/* CDS consistency fix (2026-07-24) -- `.ds-th` above sets header TYPOGRAPHY
   but no table ever declared a padding/border rule for the `<th>` element
   itself, only for `<td>` (.ds-records td / .ds-records-compact td). Every
   header cell in every RecordTable/ReportTable was rendering on the browser
   UA-default ~1px cell padding while its own body cells sat at 9-18px --
   exactly the "inconsistent and missing padding" defect flagged in review.
   Matches the one existing canonical precedent for a sticky dense-table
   header (.ds-records-compact-sticky thead th: padding 8px 12px, text-align
   left) so every RecordTable/ReportTable header now sits on the same
   padding rhythm as its body rows and as the rest of the portal.

   OPEN QUESTION for Ben, not changed here (2026-07-24 live re-check): the
   -sticky precedent above is only used live on the main portal's Reporting
   tables (SaleReportReport.tsx etc). The plain, NON-sticky RecordTable
   family this TA table actually belongs to -- confirmed live on
   portal-test.baobab-ts.com /app/it/backlog, same component, signed in via
   leased e2e.tester2 -- renders thead th at the browser UA-default ~1px,
   i.e. canonical itself has no explicit padding rule for THIS table
   family. So this 8px/12px value has no live match anywhere in that exact
   component family; it borrows the *sticky report-table* look. Left as-is
   (not reverted to 1px) because reverting would reintroduce the "missing
   padding" symptom Ben explicitly flagged, and this is a genuinely
   two-sided call, not a hard defect -- flagging for a decision rather than
   silently regressing already-shipped, reviewed behavior. */
.ds-records th,.ds-records-compact th{padding:8px 12px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:middle}
.ds-records th.ds-th-num,.ds-records-compact th.ds-th-num{text-align:right}

/* A2 (MINOR) -- report card headings must be italic Fraunces per the
   artifact's `.report-card h3` (line 174). The shared `.ds-stat-card-title`
   is non-italic (used elsewhere without italics), so this is a scoped
   modifier applied only on ReportCards.tsx's card headings. */
.ds-stat-card-title-italic{font-style:italic}

/* A4 -- literal ports of artifact components not yet in the DS, added so
   the sibling agent building CaseModal/CandidateModal/InterviewModal/etc.
   can consume them immediately.

   .ds-fit / .ds-fit-high / .ds-fit-mid: artifact lines 66-68, inline-block
   mono 11px bold pill, radius 9px. high/mid map to the existing signal
   custom properties (grass = ok/green, amber = warn) instead of the
   artifact's raw hex, per DS convention. */
.ds-fit{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:600;padding:2px 7px;border-radius:9px}
.ds-fit-high{background:var(--signal-grass-bg);color:var(--signal-grass)}
.ds-fit-mid{background:var(--signal-amber-bg);color:var(--signal-amber)}

/* .ds-pill-country-angola / -guinea / -ghana: artifact lines 87-89, colored
   border+bg pill variants layered on the existing base `.pill`-style chip.
   Applied alongside the shared `.ds-pill` base class. */
.ds-pill-country-angola{border-color:var(--baobab);color:var(--baobab-deep);background:var(--baobab-bg)}
.ds-pill-country-guinea{border-color:var(--signal-grass);color:var(--signal-grass);background:var(--signal-grass-bg)}
.ds-pill-country-ghana{border-color:var(--signal-amber);color:var(--signal-amber);background:var(--signal-amber-bg)}

/* .ds-prep / .ds-prep-item / -k / -v / -yes / -no: artifact lines 123-129,
   3-col grid of small interview-prep stat tiles. */
.ds-prep{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.ds-prep-item{background:var(--paper);border:1px solid var(--hairline);border-radius:2px;padding:9px 10px}
.ds-prep-item-k{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-mute);display:block;margin-bottom:4px}
.ds-prep-item-v{font-size:12.5px}
.ds-prep-item-v-yes{color:var(--signal-grass)}
.ds-prep-item-v-no{color:var(--baobab-deep)}

/* .ds-sub-head-compact: corrects the earlier `.ds-sub-head` port, which
   drifted from the artifact's `.sub-head` (lines 141-143) -- artifact is a
   plain flex baseline row (14.5px italic serif h2 + 10px mono muted count,
   margin-bottom 8px, no card/border/padding box). The existing
   `.ds-sub-head` rule above already matches this shape; this modifier
   fixes the one deviation (14px -> 14.5px h2) so a byte-for-byte match is
   available without touching the existing rule other call sites may rely
   on. */
.ds-sub-head-compact h2{font-size:14.5px}

/* .ds-range-baobab: artifact line 157, input[type=range] accent-color. */
.ds-range-baobab{accent-color:var(--baobab)}

/* A3 (MINOR) -- .side-main (shell.css) carries NO padding at all, so page
   content sits flush against both the left rail edge and the right
   viewport edge: the .ds-page-head kicker clips at the rail and the count
   clips at the viewport edge. components.css loads after shell.css (see
   app/layout.tsx), so this override wins. Matches the artifact's
   `.main{padding:14px 30px 60px}` (line 27). */
.side-main{padding:14px 30px 60px}

/* Designer round-2: dialogs sized to content produced visibly inconsistent
   widths (~656px demand vs ~926px candidate). Artifact line 94 sizes every
   dialog identically: width:min(1020px, viewport minus rail+gutter). Local
   override pending upstreaming. */
.ds-modal.ds-modal--dialog{width:min(1020px,calc(100vw - 300px))}
.ds-prep4{grid-template-columns:repeat(4,1fr)}

/* ===== TA-PORTAL-LOCAL ADDITIONS -- Ben's 6-item rail/table/pool pass
   (2026-07-23), not yet upstreamed. ===== */

/* .side-rail-logo: real vendored MMD logo SVG (white fill) replacing the
   plain text lockup in .side-rail-brand -- sits white-on-black at the top
   of the rail, subtitle stays underneath via the existing
   .side-rail-brand small rule. */
.side-rail-logo{display:block;width:130px;height:auto}

/* .side-rail-id-top: repositions the existing .side-rail-id block (company
   name + email) from the bottom of the rail to directly under the
   logo/subtitle, above the nav, so the signed-in partner sees whose
   account they're in immediately. Same content/markup as .side-rail-id,
   only the rule/spacing direction flips (bottom hairline instead of top,
   no top margin since it now follows the brand block). */
.side-rail-id-top{border-top:0;border-bottom:1px solid var(--hairline-on-ink);margin-top:0;margin-bottom:10px;padding:12px 18px 14px}

/* Item 3 -- fixed table layout + header filter/sort popover, shared by
   every ds-records / ds-records-compact table (RecordTable.tsx,
   ReportTable.tsx) so Demand/Candidates/Interviews/Reporting all get it.
   table-layout:fixed makes the browser size columns from the FIRST row
   only, so typing into a column's filter (which only ever changes which
   BODY rows render, never the header row) can no longer reflow/resize
   columns -- solves the literal complaint without touching row content.
   .ds-records-max caps table width so wide viewports don't stretch
   columns edge-to-edge (item 6), left-aligned since no auto margins are
   set. */
.ds-records-fixed{table-layout:fixed}
.ds-records-max{width:100%}

/* Single-line rows, ellipsis + full value in the row's own popup (Demand,
   Candidates, Interviews, Screening tables -- all RecordTable-rendered,
   all .ds-records-fixed) -- was: long position/candidate names wrapped
   onto a 2nd line, making every row a different height. Scoped to
   .ds-records-fixed only, so the taller two-line ds-records-title used
   elsewhere (e.g. plain non-fixed record tables with a ds-records-sub
   line under the title) is unaffected. */
.ds-records-fixed td.ds-records-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-records-fixed .ds-records-row-link{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* .ds-cell-truncate: same single-line ellipsis treatment as the title column
   above, extended to any OTHER free-text column (e.g. current role, location,
   entity) that RecordTable/ReportTable mark col.truncate -- was: those
   columns had no truncation rule at all, so a merged "role · employer"
   string wrapped onto 2-3 lines inside a fixed-width cell (2026-07-23). */
.ds-cell-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ds-col-* -- <col> width categories for RecordTable/ReportTable's
   <colgroup> (Column.width, see RecordTable.tsx). Root-cause fix for text
   columns truncating at ~15 characters while numeric/date columns sat on
   spare width: table-layout:fixed with NO <colgroup> splits every column
   into an equal share regardless of content type. Giving every numeric/tag/
   date column a small fixed width and leaving text columns "flex" (no
   width -- table-layout:fixed hands unspecified columns the remainder,
   split among themselves) means the free-text columns absorb the width the
   count/date/status columns don't need (2026-07-23). Default is "flex" when
   a column sets no width at all, so every OTHER RecordTable/ReportTable
   consumer that never opts in is unaffected -- identical to today's
   no-colgroup equal-share behavior. */
.ds-col-flex{width:auto}
.ds-col-short{width:100px}
.ds-col-num{width:92px}
.ds-col-date{width:100px}
.ds-col-tag{width:132px}
.ds-col-wide-tag{width:210px}

/* .ds-th-num: right-aligns a numeric column's header so it lines up over the
   right-aligned .t-num figures below it (Column.numeric, see RecordTable.tsx
   / ReportTable.tsx). Additive to .ds-th -- alignment only, no other .ds-th
   styling (font/size/case/color) changes. Root-cause fix for numeric cells
   rendering left-ish under a browser-default-centered <th> (2026-07-23). */
.ds-th-num{text-align:right}

/* .ds-th-menu-wrap: relatively-positioned wrapper so the popover anchors
   to its own header button, not the table. .ds-th-btn: the header
   sort/filter affordance itself, styled identically to the (now removed)
   permanent-row .ds-th-sort button it replaces. .ds-th-filter-dot: small
   baobab dot shown on the button when that column has an active filter,
   so a collapsed popover still shows filter state at a glance. */
.ds-th-menu-wrap{position:relative;display:inline-flex}
.ds-th-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;font:inherit;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer}
.ds-th-btn:hover{color:var(--ink)}
.ds-th-btn[aria-sort="ascending"] .ds-th-sort-arrow,
.ds-th-btn[aria-sort="descending"] .ds-th-sort-arrow{opacity:1;color:var(--baobab-deep)}
.ds-th-filter-dot{width:5px;height:5px;border-radius:50%;background:var(--baobab);display:inline-block;flex:0 0 auto}

/* .ds-th-popover: the filter+sort popover itself -- absolutely positioned
   below the header button so it never participates in table layout (no
   width impact on the column it belongs to). .ds-th-popover-sort holds
   two explicit asc/desc buttons (clearer inside a popover than a single
   toggle). Reuses the existing .ds-th-filter input style unchanged. */
.ds-th-popover{position:absolute;top:100%;left:0;z-index:40;margin-top:5px;background:var(--paper);border:1px solid var(--hairline);border-radius:3px;box-shadow:0 8px 20px rgba(0,0,0,.16);padding:9px;min-width:180px;display:flex;flex-direction:column;gap:7px;text-align:left}
.ds-th-popover-sort{display:flex;gap:6px}
.ds-th-popover-sort button{flex:1;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.03em;padding:5px 6px;border:1px solid var(--hairline);background:var(--paper-2);color:var(--ink-mute);cursor:pointer;border-radius:2px}
.ds-th-popover-sort button[aria-pressed="true"]{color:var(--ink);border-color:var(--baobab);background:var(--baobab-bg)}
.ds-th-popover .ds-th-filter{width:100%}

/* Item 4 -- candidate-pool buckets (PoolPickerModal.tsx). .ds-bucket: one
   collapsible group. .ds-bucket-head: the clickable summary row (band
   label + count + arrow), a real <button> so it's keyboard-operable.
   .ds-bucket-body: only rendered when open (component controls this, not
   CSS display:none, so the table inside never runs off-screen work). */
.ds-bucket{border:1px solid var(--hairline);border-radius:3px;margin-bottom:8px;background:var(--paper)}
.ds-bucket-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 12px;background:none;border:0;font:inherit;cursor:pointer;text-align:left}
.ds-bucket-head:hover{background:var(--paper-2)}
.ds-bucket-head-label{font-family:var(--font-display);font-style:italic;font-size:13.5px;color:var(--ink)}
.ds-bucket-count{font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);letter-spacing:.03em;margin-left:8px}
.ds-bucket-arrow{font-size:10px;color:var(--ink-mute)}
.ds-bucket-body{border-top:1px solid var(--hairline)}
.ds-bucket-body .ds-records-compact{margin:0}

/* Item 5 -- quiet data-handling notice for the candidate pool. Deliberately
   NOT .ds-notice (that component's baobab side-rule reads as an alert;
   this is an informational note, not a warning) -- plain muted block,
   small type, sits at the top of the pool section. */
.ds-notice-quiet{background:var(--paper-2);border-radius:3px;padding:9px 12px;margin:0 0 14px;font-family:var(--font-ui);font-size:11.5px;line-height:1.5;color:var(--ink-mute)}

/* ===== TA supplier portal visual-quality rebuild (2026-07-23) =====
   .ds-fact-grid / .ds-fact / .ds-fact-label / .ds-fact-value: the dense
   replacement for boxed "one dash inside a card" fact tiles (case detail,
   candidate detail, account). No background, no border, no padding box --
   just a tight multi-column grid of label-over-value pairs, each pair
   separated from the next only by a hairline under the whole grid row.
   Column count is fluid (auto-fill) so it densifies on wide screens and
   wraps cleanly on narrow ones without a media query. */
.ds-fact-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));gap:12px 28px;margin:10px 0;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.ds-fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.ds-fact-label{font-family:var(--font-mono);font-weight:500;font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-fact-value{font-family:var(--font-ui);font-weight:500;font-size:13.5px;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-fact-value-muted{color:var(--ink-mute);font-style:italic}

/* Report-table rows that open the corresponding ReportModal detail on
   click (Reporting page rebuild -- replaces the four "Pop out for detail"
   stat-card buttons). Reuses .ds-datagrid-row's cursor/hover/focus
   treatment so a report row and a datagrid row read identically. */
.ds-report-row{cursor:pointer;transition:background .1s ease}
.ds-report-row:hover{background:var(--paper-2)}
.ds-report-row:focus-visible{outline:2px solid var(--baobab);outline-offset:-2px}