/* 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}
.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-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-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)}
.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}
.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)}
/* MMDB-1361 — persistent top-of-content black process-nav bar (e.g. the
   Procurement demand→pay strip). Deliberately its own class, not a reuse of
   .topbar: the shell forces `.shell .topbar{position:static;background:
   transparent}` so a lightweight breadcrumb strip never paints a full-bleed
   fixed black bar over the sidebar (see src/app/globals.css) — that override
   would strip the ink background this component needs. rgba(250,250,246,x)
   is the existing "paper on ink" convention already used for hover/hairline
   states on dark surfaces (see --hairline-on-ink, .ds-window-back:hover). */
.ds-procnav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;background:var(--ink);border-radius:4px;padding:6px;margin:0 0 24px}
.ds-procnav-item{display:inline-flex;align-items:center;font-family:var(--font-mono);font-weight:600;font-size:calc(11px * var(--fs-scale, 1));letter-spacing:0.1em;text-transform:uppercase;color:rgba(250,250,246,0.6);background:transparent;border:0;border-radius:3px;padding:10px 14px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background 0.14s ease,color 0.14s ease}
.ds-procnav-item:hover{color:var(--paper);background:rgba(250,250,246,0.1)}
.ds-procnav-item-active,
.ds-procnav-item-active:hover{color:var(--ink);background:var(--paper)}
.ds-records-compact{width:100%;border-collapse:collapse}
.ds-records-compact td{padding:10px 12px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.ds-records-compact tr:last-child td{border-bottom:0}
.ds-records-compact .ds-records-id{width:76px}
.ds-empty-row{padding:14px 16px;color:var(--ink-mute);font-family:var(--font-ui);font-weight:500;font-size:calc(13px * var(--fs-scale, 1))}

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

/* ds-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)}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== PORTAL-R-027 — floating-window chrome (central primitive) =====
   Consumed by the shell's R-026 manager AND available to remotes (the
   helpdesk FloatingWindow/.portal-pin-layer pattern migrates to this at its
   next touch — see PORTAL-R-027). Paper card on the letterbox canvas, ink
   border, restrained shadow, mono titlebar label; baobab red reserved for
   the close control's hover/active only. Every color here is a DS token —
   dark-canvas compatibility (R-007) is automatic. */
.ds-window{position:fixed;left:0;top:0;transform:translate(var(--win-x, 0px), var(--win-y, 0px));width:var(--win-w, 340px);height:var(--win-h, 260px);z-index:calc(80 + var(--win-z, 0));background:var(--paper);border:1px solid var(--ink);box-shadow:0 18px 44px -12px rgba(14,14,12,0.35);display:flex;flex-direction:column;overflow:hidden}
.ds-window[hidden]{display:none}
.ds-window--standard{background:var(--paper)}
.ds-window--note{background:var(--paper-2)}
.ds-window--frame{border-color:var(--ink)}
.ds-window--transient{box-shadow:0 12px 30px -10px rgba(14,14,12,0.3)}
.ds-window-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}

/* ===== 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:14px 16px;color:var(--ink-mute);font-family:var(--font-ui);font-weight:500;font-size:13px}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== OMS-DENSITY-RESTORE: portal-transaction workbench family (module-workbench) — spacing/size only, restored from canonical DS 2026-06-30 ===== */
/* ===== Portal transaction workbench ===== */
.module-workbench{display:grid;gap:16px;padding-top:6px}
.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-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)}
.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}
.module-status-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,0.55fr);gap:18px;padding:14px 16px;background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--baobab)}
.module-status-text{margin-top:4px;color:var(--ink-soft);font-family:var(--font-ui);font-size:13px;line-height:1.45}
.module-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,0.92fr);gap:18px;align-items:start}
.module-form{margin-top:0}
.module-form .ds-fieldset{padding:18px 20px;gap:12px}
.module-form .ds-textarea{min-height:70px}
.module-aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.module-table-section{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;margin-top:0}
.module-table-section .ds-records{margin-top:0}
.module-table-section .ds-records td{padding:12px 14px}
.module-row-action{width:140px;text-align:right}
.module-row-action .ds-button{padding:8px 12px;font-size:11px}

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

/* Reserve a right gutter on desktop so module-header actions (e.g. Helpdesk "New ticket")
   are not occluded by the fixed top-right .portal-user-menu (z-index 91). Only above the
   980px breakpoint, where the header is two-column and actions are right-aligned; below it
   actions move left (no collision) so no reserve is applied. */
@media (min-width:981px){
  .module-workbench-header{padding-right:248px}
  .portal-workbench-intro{padding-right:248px}
}
@media (max-width:980px){
  .module-workbench-header{grid-template-columns:1fr}
  .module-actions{justify-content:flex-start}
  .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}
  .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{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:40px 32px}
.module-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(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-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:210px;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-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;margin-top:auto}
.ds-process-thumb-empty{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px}
.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}
.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}
.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)}

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

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

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

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


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

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

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

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

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

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

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

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

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

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

/* --- from src/app/app/hr-h2r/HrH2rCaseDrawer.tsx --- */
.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)}

.ta-kanban{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:6px;height:min(70vh, 620px)}
.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-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:flex-end}
.ta-card-age{font-family:var(--font-mono);font-size:8px;color:var(--ink-faint)}
.ta-col-empty{color:var(--ink-faint);font-size:10px;text-align:center;padding:4px 0}
.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)}
.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)}

/* --- 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}}
/* --- 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}

/* --- 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: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}
.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:"→"}
/* ===== 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">`. */