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

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

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

/* ===== Receipt/photo display (expenses remote review aside, 2026-07-08) =====
   Uploaded receipt photo shown inside the expense-review aside -- same hairline border + 4px
   radius as .ds-review-block/.card, sized to the image rather than a container. */
.ds-receipt-image{display:block;max-width:100%;height:auto;border:1px solid var(--hairline);border-radius:4px}

/* ============================================================================
   TA RECRUITMENT — dense component set (2026-07-08)
   Candidate pipeline table/row, score badge, requirements checklist, interview
   cockpit hint strip, message thread, scheduling slot grid, onboarding
   doc-request row, supplier inline-search. Same tier/weight as .ds-datagrid /
   .ds-spine / .ds-quiz-* above: mono-uppercase micro-labels, hairline
   dividers, 12-13px body text, dense padding. Severity/state colour is
   signalled by WEIGHT + the existing signal tokens only — no new hex values:
   --paper/-2/-3, --ink/-soft/-mute/-faint, --hairline, --baobab/-bg,
   --signal-amber/-bg, --signal-grass/-bg, --radius-sm, --font-display/-ui/-mono.
   Recommendation chips reuse the existing .ds-tag / .ds-tag-* family rather
   than a new class — only score-badge (numeric 0-100) is genuinely new.
   ============================================================================ */

/* --- Candidate pipeline table --------------------------------------------- */
.candidate-table{width:100%;border-collapse:collapse;font-size:12.5px}
.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}
.candidate-cell{max-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.candidate-name{font-family:var(--font-ui);font-weight:600;color:var(--ink)}
.candidate-role{display:block;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)}

/* --- Requirements checklist (side panel) ----------------------------------- */
.req-checklist{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.req-item{border-bottom:1px solid var(--hairline);padding:8px 2px}
.req-item-head{display:flex;align-items:center;gap:8px;cursor:pointer;background:transparent;border:0;width:100%;padding:0;text-align:left;font:inherit}
.req-item-state{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-faint)}
.req-item-partial .req-item-state{background:var(--signal-amber)}
.req-item-covered .req-item-state{background:var(--signal-grass)}
.req-item-label{flex:1 1 auto;min-width:0;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.req-item-covered .req-item-label{color:var(--ink-soft)}
.req-item-tag{flex:none;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-mute)}
.req-item-partial .req-item-tag{color:var(--signal-amber)}
.req-item-covered .req-item-tag{color:var(--signal-grass)}
.req-item-evidence{margin:6px 0 0 16px;padding:8px 10px;background:var(--paper-2);border-left:2px solid var(--hairline);font-size:12px;color:var(--ink-mute);line-height:1.5}

/* --- Interview cockpit hint strip — single-line, unobtrusive --------------- */
.hint-strip{display:flex;align-items:center;gap:7px;padding:4px 10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.03em;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--radius-sm);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hint-strip::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--baobab)}

/* --- Compact message/notes thread ------------------------------------------ */
.msg-thread{display:flex;flex-direction:column;gap:9px;padding:2px 0}
.msg-item{max-width:82%;padding:8px 11px;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm)}
.msg-item-in{align-self:flex-start;border-left:2px solid var(--ink-mute)}
.msg-item-out{align-self:flex-end;background:var(--paper-2);border-right:2px solid var(--baobab)}
.msg-item-meta{display:flex;gap:8px;align-items:baseline;margin-bottom:3px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-mute)}
.msg-item-author{color:var(--ink)}
.msg-item-time{color:var(--ink-faint)}
.msg-item-body{font-size:12.5px;line-height:1.5;color:var(--ink-soft);white-space:pre-wrap}

/* --- Scheduling time-slot grid ---------------------------------------------- */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));gap:6px}
.slot-chip{display:flex;align-items:center;justify-content:center;padding:7px 4px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.01em;color:var(--ink);background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .1s ease, background .1s ease, color .1s ease}
.slot-chip:hover{border-color:var(--ink-mute)}
.slot-chip:focus-visible{outline:2px solid var(--baobab);outline-offset:1px}
.slot-chip-selected{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.slot-chip-disabled{color:var(--ink-faint);background:var(--paper-2);border-color:var(--hairline);cursor:not-allowed}
.slot-chip-disabled:hover{border-color:var(--hairline)}

/* --- Onboarding doc-request row --------------------------------------------- */
.doc-request-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;column-gap:12px;padding:8px 10px;border-bottom:1px solid var(--hairline);font-size:12.5px}
.doc-request-type{color:var(--ink);font-weight:500}
.doc-request-state{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--hairline);color:var(--ink-mute);white-space:nowrap}
.doc-request-state-requested{color:var(--ink-mute);border-color:var(--hairline)}
.doc-request-state-received{color:var(--signal-amber);background:var(--signal-amber-bg);border-color:color-mix(in srgb, var(--signal-amber) 40%, transparent)}
.doc-request-state-verified{color:var(--signal-grass);background:var(--signal-grass-bg);border-color:color-mix(in srgb, var(--signal-grass) 40%, transparent)}
.doc-request-link{font-family:var(--font-mono);font-size:11px;letter-spacing:0.03em;color:var(--ink-mute);text-decoration:none}
.doc-request-link:hover{color:var(--baobab)}

/* --- Supplier picker inline-search ------------------------------------------ */
.inline-search{position:relative;width:100%}
.inline-search-input{width:100%;font-family:var(--font-ui);font-size:13px;padding:8px 10px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink)}
.inline-search-input:focus{outline:none;border-color:var(--ink)}
.inline-search-results{position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:2px;max-height:260px;overflow:auto;background:var(--paper);border:1px solid var(--ink);box-shadow:0 6px 16px rgba(14,14,12,0.16)}
.inline-search-result{display:block;width:100%;padding:8px 10px;font:inherit;font-size:12.5px;text-align:left;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--hairline);cursor:pointer}
.inline-search-result:last-child{border-bottom:0}
.inline-search-result:hover,
.inline-search-result-active{background:var(--paper-2)}
.inline-search-empty{padding:10px;font-size:12px;color:var(--ink-mute)}