/* ============================================================
   ScormX Design System — "Canvas" (Navy · Teal · Gold)
   ------------------------------------------------------------
   Locked 2026-07-28. HubSpot-Canvas layout language on ScormX's
   own Navy structure + Teal information + Gold action.

   SAFE / OPT-IN: every class is `ds-` prefixed and there is NO
   bare-element styling, so linking this file changes no existing
   page. Real pages adopt it class-by-class during rollout.

   Reference page: /design-system.html
   Scope: scopes/app-chrome-design-system.md + hubspot-canvas-design-reference.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  /* ── Colour: three roles ─────────────────────────────── */
  /* NAVY = structure (sidebar, headings) */
  --ds-navy:#19364b; --ds-navy-2:#20455c; --ds-navy-3:#0f2536;
  /* TEAL = information (links, data, stat numbers, highlights) */
  --ds-teal:#0e8fa8; --ds-teal-mid:#0b7286; --ds-teal-wash:#e2f4f8;
  /* GOLD = action (primary CTAs) */
  --ds-gold-btn:#c1901f; --ds-gold-btn-hi:#a97d18;  /* button bg + white text */
  --ds-gold:#e0a52f; --ds-gold-link:#c68f24; --ds-gold-wash:#fcf3df; /* accent / links */

  /* ── Status palette (reserved — not for actions) ─────── */
  --ds-rose:#dd5e73;  --ds-rose-wash:#fbeaee;    /* e.g. Needs audit */
  --ds-amber:#d98324; --ds-amber-wash:#fbefdf;   /* e.g. In review */
  --ds-terracotta:#c25e45; --ds-clay:#d1553f; --ds-coral:#ef6c4d; /* free for status */
  --ds-success:#2e7d32; --ds-success-wash:#e8f5e9;
  --ds-danger:#dc3545;  --ds-danger-wash:#fdecea;

  /* ── Course-health status (from the UX thread) — the canonical
     "how is this course doing" scale ─────────────────────── */
  --ds-crit:#c8503f;  --ds-crit-wash:#f7e7e3;    /* out of date */
  --ds-warn:#c8862e;  --ds-warn-wash:#f6eddc;    /* review due */
  --ds-info:#3d73b8;  --ds-info-wash:#e4edf7;    /* in progress */
  --ds-queue:#7a6cae; --ds-queue-wash:#efeaf6;   /* in build queue */
  --ds-good:#2f9169;  --ds-good-wash:#e2f0ea;    /* current */

  /* ── Neutrals ────────────────────────────────────────── */
  --ds-ink:#0d2436; --ds-muted:#5b7186; --ds-subtle:#8aa0b2;
  --ds-border:#e3e8ee; --ds-border-2:#d5dde5;
  --ds-surface:#ffffff; --ds-canvas:#f4f7fa; --ds-surface-2:#f7f9fb;

  /* ── Spacing (4px scale) ─────────────────────────────── */
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px; --ds-5:20px;
  --ds-6:24px; --ds-8:32px; --ds-10:40px; --ds-12:48px; --ds-16:64px;

  /* ── Radius / control / type ─────────────────────────── */
  --ds-radius-control:8px; --ds-radius-card:12px; --ds-radius-pill:999px;
  --ds-control-h:40px; --ds-control-h-sm:32px;
  --ds-font:'Poppins','DM Sans',system-ui,-apple-system,sans-serif;
  --ds-shadow:0 12px 28px rgba(15,30,46,.10);
  --ds-ring:0 0 0 3px rgba(14,143,168,.18);
}

/* ── Typography helpers ─────────────────────────────────── */
.ds-h1{font:700 26px/1.15 var(--ds-font);letter-spacing:-.5px;color:var(--ds-ink)}
.ds-h2{font:700 20px/1.2 var(--ds-font);letter-spacing:-.3px;color:var(--ds-ink)}
.ds-h3{font:600 17px/1.25 var(--ds-font);color:var(--ds-ink)}
.ds-h4{font:600 15px/1.3 var(--ds-font);color:var(--ds-ink)}
.ds-lead{font:400 15px/1.55 var(--ds-font);color:var(--ds-muted)}
.ds-eyebrow{font:600 11px/1 var(--ds-font);letter-spacing:.08em;text-transform:uppercase;color:var(--ds-subtle)}
.ds-muted{color:var(--ds-muted)} .ds-link{color:var(--ds-teal);text-decoration:none;font-weight:500} .ds-link:hover{text-decoration:underline}

/* ── Buttons — GOLD = primary action ────────────────────── */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--ds-control-h);padding:0 16px;border:1px solid transparent;border-radius:var(--ds-radius-control);font:600 13.5px/1 var(--ds-font);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.ds-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.ds-btn-sm{height:var(--ds-control-h-sm);padding:0 12px;font-size:12.5px}
.ds-btn-primary{background:var(--ds-gold-btn);color:#fff}           /* GOLD action */
.ds-btn-primary:hover{background:var(--ds-gold-btn-hi)}
.ds-btn-secondary{background:var(--ds-surface);color:var(--ds-teal);border-color:var(--ds-teal)}  /* teal = info action */
.ds-btn-secondary:hover{background:var(--ds-teal-wash)}
.ds-btn-ghost{background:var(--ds-surface);color:var(--ds-ink);border-color:var(--ds-border-2)}
.ds-btn-ghost:hover{border-color:var(--ds-subtle)}
.ds-btn-danger{background:var(--ds-surface);color:var(--ds-danger);border-color:var(--ds-border-2)}
.ds-btn-danger:hover{border-color:var(--ds-danger)}
.ds-btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Fields ─────────────────────────────────────────────── */
.ds-field{display:flex;flex-direction:column;gap:6px}
.ds-field+.ds-field{margin-top:var(--ds-5)}
.ds-label{font:500 13px/1.3 var(--ds-font);color:var(--ds-ink)}
.ds-label .req{color:var(--ds-gold-link);margin-left:2px}
.ds-hint{font:400 12px/1.5 var(--ds-font);color:var(--ds-muted)}
.ds-input,.ds-select,.ds-textarea{width:100%;min-height:var(--ds-control-h);padding:9px 12px;background:var(--ds-surface-2);border:1px solid var(--ds-border-2);border-radius:var(--ds-radius-control);font:400 15px/1.5 var(--ds-font);color:var(--ds-ink);transition:border-color .15s,box-shadow .15s,background .15s}
.ds-textarea{min-height:96px;resize:vertical;padding:10px 12px}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--ds-subtle)}
.ds-input:hover,.ds-select:hover,.ds-textarea:hover{border-color:#c2ccd6}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:none;background:var(--ds-surface);border-color:var(--ds-teal);box-shadow:var(--ds-ring)}
.ds-select{appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b7186' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}

/* ── Choices ────────────────────────────────────────────── */
.ds-check,.ds-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;color:var(--ds-ink)}
.ds-check input,.ds-radio input{accent-color:var(--ds-teal);width:16px;height:16px}
.ds-segmented{display:inline-flex;padding:3px;background:var(--ds-surface-2);border:1px solid var(--ds-border);border-radius:var(--ds-radius-control);gap:2px}
.ds-segmented button{border:none;background:transparent;cursor:pointer;font:500 13px/1 var(--ds-font);color:var(--ds-muted);padding:7px 16px;border-radius:6px}
.ds-segmented button.is-active{background:var(--ds-surface);color:var(--ds-teal);box-shadow:0 0 0 1px var(--ds-border)}
.ds-toggle{position:relative;display:inline-block;width:38px;height:22px}
.ds-toggle input{opacity:0;width:0;height:0}
.ds-toggle .track{position:absolute;inset:0;background:#cbd5df;border-radius:999px;transition:.2s}
.ds-toggle .track::before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.ds-toggle input:checked+.track{background:var(--ds-teal)}
.ds-toggle input:checked+.track::before{transform:translateX(16px)}

/* ── Cards / stat tiles ─────────────────────────────────── */
.ds-card{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);padding:var(--ds-6)}
.ds-stat{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);padding:18px 20px}
.ds-stat .k{font:500 12.5px/1 var(--ds-font);color:var(--ds-muted)}
.ds-stat .v{font:700 32px/1 var(--ds-font);color:var(--ds-teal);letter-spacing:-1px;margin-top:8px}  /* TEAL = data */
.ds-stat .s{font:400 12px/1 var(--ds-font);color:var(--ds-subtle);margin-top:7px}

/* ── Badges / status pills ──────────────────────────────── */
.ds-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--ds-radius-pill);font:600 11px/1.4 var(--ds-font)}
.ds-badge-teal{background:var(--ds-teal-wash);color:var(--ds-teal-mid)}
.ds-badge-grey{background:#eef2f5;color:var(--ds-muted)}
.ds-badge-rose{background:var(--ds-rose-wash);color:var(--ds-rose)}
.ds-badge-amber{background:var(--ds-amber-wash);color:var(--ds-amber)}
.ds-badge-success{background:var(--ds-success-wash);color:var(--ds-success)}
.ds-badge-gold{background:var(--ds-gold-wash);color:var(--ds-gold-link)}

/* ── Sidebar / nav ──────────────────────────────────────── */
.ds-sidebar{width:236px;background:var(--ds-navy);display:flex;flex-direction:column;padding-bottom:8px}
.ds-brand{display:flex;align-items:center;gap:10px;padding:18px 20px 14px}
.ds-brand .mark{width:30px;height:30px;border-radius:8px;background:var(--ds-teal);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.ds-brand .name{color:#fff;font-weight:600}
.ds-nav{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.ds-nav-sec{font:600 10px/1 var(--ds-font);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.32);padding:14px 10px 6px}
.ds-nav-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:7px;color:rgba(255,255,255,.62);text-decoration:none;font:500 13.5px/1 var(--ds-font);border-left:2px solid transparent}
.ds-nav-item svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.ds-nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.ds-nav-item.is-active{background:rgba(14,143,168,.16);color:#fff;border-left-color:var(--ds-teal)}

/* ── Topbar / search ────────────────────────────────────── */
.ds-topbar{height:56px;background:var(--ds-surface);border-bottom:1px solid var(--ds-border);display:flex;align-items:center;gap:16px;padding:0 24px}
.ds-search{display:flex;align-items:center;gap:9px;background:var(--ds-canvas);border:1px solid var(--ds-border);border-radius:9px;padding:8px 13px;color:var(--ds-subtle);font-size:13px;min-width:260px}
.ds-search svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ── Tabs / stepper ─────────────────────────────────────── */
.ds-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ds-border)}
.ds-tab{padding:11px 16px;font:600 13.5px/1 var(--ds-font);color:var(--ds-muted);border-bottom:2px solid transparent;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none}
.ds-tab.is-active{color:var(--ds-teal);border-bottom-color:var(--ds-teal)}
.ds-stepper{display:flex;align-items:center}
.ds-step{display:flex;align-items:center;gap:10px;color:var(--ds-subtle);font:500 13.5px/1 var(--ds-font)}
.ds-step .num{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--ds-surface-2);color:var(--ds-subtle);border:1px solid var(--ds-border)}
.ds-step.is-active{color:var(--ds-teal)} .ds-step.is-active .num{background:var(--ds-teal-wash);color:var(--ds-teal);border-color:var(--ds-teal)}
.ds-step.is-done .num{background:var(--ds-teal);color:#fff;border-color:var(--ds-teal)}
.ds-step-line{flex:1;height:1px;background:var(--ds-border);margin:0 14px;min-width:24px}

/* ── Table ──────────────────────────────────────────────── */
.ds-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ds-table th{text-align:left;font:600 11.5px/1 var(--ds-font);letter-spacing:.04em;text-transform:uppercase;color:var(--ds-subtle);padding:10px 14px;border-bottom:1px solid var(--ds-border)}
.ds-table td{padding:12px 14px;border-bottom:1px solid var(--ds-border);color:var(--ds-ink)}
.ds-table tr:hover td{background:var(--ds-surface-2)}

/* ── Alert ──────────────────────────────────────────────── */
.ds-alert{display:flex;gap:10px;padding:12px 14px;border-radius:var(--ds-radius-control);font-size:13.5px;border:1px solid}
.ds-alert-info{background:var(--ds-teal-wash);border-color:#bfe6ee;color:var(--ds-teal-mid)}
.ds-alert-success{background:var(--ds-success-wash);border-color:#c6e6c8;color:var(--ds-success)}
.ds-alert-warn{background:var(--ds-amber-wash);border-color:#f2d9b0;color:var(--ds-amber)}
.ds-alert-danger{background:var(--ds-danger-wash);border-color:#f5c6cb;color:var(--ds-danger)}

/* ── Progress ───────────────────────────────────────────── */
.ds-progress{height:6px;background:#eef2f5;border-radius:3px;overflow:hidden}
.ds-progress span{display:block;height:100%;background:var(--ds-teal);border-radius:3px}

/* ── Avatar ─────────────────────────────────────────────── */
.ds-avatar{width:34px;height:34px;border-radius:50%;background:var(--ds-teal-wash);border:1px solid var(--ds-teal);color:var(--ds-teal-mid);display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--ds-font)}

/* ── Modal ──────────────────────────────────────────────── */
.ds-modal{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:14px;box-shadow:var(--ds-shadow);width:420px;max-width:100%;overflow:hidden}
.ds-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--ds-border)}
.ds-modal-body{padding:20px}
.ds-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--ds-border);background:var(--ds-surface-2)}

/* ── Empty state ────────────────────────────────────────── */
.ds-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 24px}
.ds-empty .art{width:150px;height:130px;margin-bottom:14px}
.ds-empty h3{font:600 17px/1.3 var(--ds-font);color:var(--ds-ink)}
.ds-empty p{color:var(--ds-muted);margin:6px 0 16px;font-size:14px;max-width:380px}

/* ── Magazine cover card ────────────────────────────────── */
.ds-cover-card{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:14px;overflow:hidden;transition:transform .12s,box-shadow .12s}
.ds-cover-card:hover{transform:translateY(-3px);box-shadow:var(--ds-shadow)}
.ds-cover{position:relative;height:180px;background:#dfe6ec}
.ds-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ds-cover .scrim{position:absolute;left:0;right:0;bottom:0;height:72%;background:linear-gradient(transparent,rgba(9,20,32,.78))}
.ds-cover .cat{position:absolute;top:13px;left:14px;font:700 10.5px/1 var(--ds-font);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.32);padding:4px 9px;border-radius:6px}
.ds-cover .title{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;font:700 19px/1.2 var(--ds-font);letter-spacing:-.3px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.ds-cover-body{padding:13px 16px 15px}

/* ============================================================
   Patterns from the UX thread (Living Library + Course Spine)
   ============================================================ */

/* ── Health pulse tile ──────────────────────────────────── */
.ds-tile{position:relative;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:12px;padding:14px 15px;overflow:hidden;cursor:pointer}
.ds-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tc,var(--ds-border-2))}
.ds-tile .n{font:600 26px/1 var(--ds-font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ds-tile .l{font-size:12px;color:var(--ds-muted);margin-top:6px;display:flex;align-items:center;gap:6px}
.ds-tile .l .d{width:7px;height:7px;border-radius:50%;background:var(--tc)}
.ds-tile.crit{--tc:var(--ds-crit)} .ds-tile.warn{--tc:var(--ds-warn)} .ds-tile.info{--tc:var(--ds-info)} .ds-tile.queue{--tc:var(--ds-queue)} .ds-tile.good{--tc:var(--ds-good)}

/* ── Attention card ─────────────────────────────────────── */
.ds-att{display:flex;align-items:center;gap:14px;background:var(--ds-surface);border:1px solid var(--ds-border);border-left:3px solid var(--ac,var(--ds-warn));border-radius:11px;padding:13px 16px}
.ds-att.crit{--ac:var(--ds-crit);--acw:var(--ds-crit-wash)} .ds-att.warn{--ac:var(--ds-warn);--acw:var(--ds-warn-wash)}
.ds-att .ico{width:34px;height:34px;border-radius:9px;background:var(--acw);color:var(--ac);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.ds-att .body{flex:1;min-width:0}
.ds-att .t{font:600 14px/1.3 var(--ds-font);margin-bottom:2px}
.ds-att .why{font-size:12.5px;color:var(--ds-muted)} .ds-att .why b{color:var(--ac);font-weight:600}

/* ── Course-health chip ─────────────────────────────────── */
.ds-hchip{display:inline-flex;align-items:center;gap:5px;font:600 11px/1.4 var(--ds-font);padding:3px 9px;border-radius:20px}
.ds-hchip .d{width:6px;height:6px;border-radius:50%}
.ds-hchip.crit{color:var(--ds-crit);background:var(--ds-crit-wash)} .ds-hchip.crit .d{background:var(--ds-crit)}
.ds-hchip.warn{color:var(--ds-warn);background:var(--ds-warn-wash)} .ds-hchip.warn .d{background:var(--ds-warn)}
.ds-hchip.info{color:var(--ds-info);background:var(--ds-info-wash)} .ds-hchip.info .d{background:var(--ds-info)}
.ds-hchip.queue{color:var(--ds-queue);background:var(--ds-queue-wash)} .ds-hchip.queue .d{background:var(--ds-queue)}
.ds-hchip.good{color:var(--ds-good);background:var(--ds-good-wash)} .ds-hchip.good .d{background:var(--ds-good)}
.ds-hchip.cust{color:var(--ds-teal-mid);background:var(--ds-teal-wash)} .ds-hchip.cust .d{background:var(--ds-teal)}  /* store-added → Customise */

/* ── "Add to library" door ──────────────────────────────── */
.ds-door{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:12px;padding:18px;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:border-color .12s}
.ds-door:hover{border-color:var(--ds-teal)}
.ds-door .ico{width:38px;height:38px;border-radius:10px;background:var(--ds-teal-wash);color:var(--ds-teal-mid);display:flex;align-items:center;justify-content:center;font-size:19px}
.ds-door h3{font:600 14.5px/1.3 var(--ds-font);margin:2px 0 0} .ds-door p{font-size:12.5px;color:var(--ds-muted);margin:0}

/* ── Spine / timeline (new-user flow) ───────────────────── */
.ds-spine{position:relative}
.ds-step{position:relative;display:grid;grid-template-columns:46px 1fr;gap:20px;padding-bottom:30px}
.ds-step::before{content:"";position:absolute;left:22px;top:34px;bottom:-6px;width:2px;background:var(--ds-border-2)}
.ds-step:last-child::before{display:none}
.ds-node{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ds-surface);border:2px solid var(--ds-teal);color:var(--ds-teal-mid);font:600 16px/1 var(--ds-font);font-variant-numeric:tabular-nums;position:relative;z-index:1;box-shadow:0 0 0 5px var(--ds-canvas)}
.ds-step-card{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:14px;padding:18px 20px 16px;margin-top:-2px}
.ds-step-q{font:500 21px/1.22 var(--ds-font);letter-spacing:-.015em;margin:0 0 13px} .ds-step-q .q{color:var(--ds-teal);font-weight:600}

/* ── Tone pill (the emotional arc) ──────────────────────── */
.ds-tone{font:600 10px/1 var(--ds-font);letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:var(--ds-teal-wash);color:var(--ds-teal-mid)}
.ds-tone.think{background:var(--ds-teal-wash);color:var(--ds-teal-mid)}
.ds-tone.fun{background:var(--ds-gold-wash);color:var(--ds-gold-link)}
.ds-tone.serious{background:#e9ecf3;color:#5a6b8c}

/* ============================================================
   New-user flow components — promoted from mockup-prototype.html
   (2026-07-28). TODO: add a showcase row to /design-system.html.
   ============================================================ */

/* Pick-one option cards — a small fixed choice (≤4), visible not hidden */
.ds-optcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.ds-optcard{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;border:1px solid var(--ds-border-2);border-radius:10px;padding:14px 10px;cursor:pointer;background:var(--ds-surface);text-align:center;transition:border-color .12s,background .12s}
.ds-optcard:hover{border-color:var(--ds-teal)}
.ds-optcard.is-active{border-color:var(--ds-teal);background:var(--ds-teal-wash);box-shadow:0 0 0 1px var(--ds-teal)}
.ds-optcard .t{font:600 13.5px/1.25 var(--ds-font);color:var(--ds-ink)}
.ds-optcard .d{font:400 11.5px/1.3 var(--ds-font);color:var(--ds-muted)}
.ds-optcard .rec{margin-top:5px;font:700 8.5px/1 var(--ds-font);letter-spacing:.05em;text-transform:uppercase;color:var(--ds-gold-link)}

/* Combo input — paste text OR drop files, one box */
.ds-combo{border:1px solid var(--ds-border-2);border-radius:12px;background:var(--ds-surface-2);overflow:hidden;transition:border-color .15s,background .15s,box-shadow .15s}
.ds-combo:focus-within{border-color:var(--ds-teal);background:var(--ds-surface);box-shadow:var(--ds-ring)}
.ds-combo textarea{display:block;width:100%;border:none;background:transparent;resize:vertical;min-height:104px;padding:14px 16px;font:400 15px/1.55 var(--ds-font);color:var(--ds-ink);outline:none}
.ds-combo-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--ds-border);background:var(--ds-surface);font:600 13px/1 var(--ds-font);color:var(--ds-teal)}

/* Animated 'AI working' — spinner + shimmering rotating text (the character layer) */
.ds-working{display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--ds-teal-wash);border:1px solid #c7e6ee;border-radius:10px}
.ds-working .orb{width:16px;height:16px;border:2px solid #bfe0e8;border-top-color:var(--ds-teal);border-radius:50%;animation:ds-spin .8s linear infinite;flex-shrink:0}
.ds-working .msg{font:600 13px/1 var(--ds-font);transition:opacity .25s;background:linear-gradient(90deg,var(--ds-teal-mid),#5fc7db,var(--ds-teal-mid));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ds-shimmer 2.2s linear infinite}
@keyframes ds-spin{to{transform:rotate(360deg)}}
@keyframes ds-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.ds-working .orb{animation:none}.ds-working .msg{animation:none;color:var(--ds-teal-mid);-webkit-text-fill-color:var(--ds-teal-mid)}}

/* Match card — cover + title + big teal % stat (never louder than the title) */
.ds-match{display:flex;gap:15px;align-items:center;border:1px solid var(--ds-border);border-radius:12px;padding:13px 16px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.ds-match:hover{border-color:var(--ds-teal);box-shadow:0 1px 3px rgba(13,36,54,.06)}
.ds-match .m-body{flex:1;min-width:0}
.ds-match .m-t{font:600 15.5px/1.25 var(--ds-font);color:var(--ds-ink)}
.ds-match .m-m{font:400 12.5px/1.45 var(--ds-font);color:var(--ds-muted);margin-top:4px}
.ds-match .m-pct{flex-shrink:0;text-align:right}
.ds-match .m-pct .lbl{font:600 9.5px/1 var(--ds-font);letter-spacing:.07em;text-transform:uppercase;color:var(--ds-subtle);margin-bottom:4px}
.ds-match .m-pct .n{font:700 30px/1 var(--ds-font);color:var(--ds-teal);letter-spacing:-1.5px;font-variant-numeric:tabular-nums}

/* Locked section — greyed fields with a hovering prompt (HubSpot progressive disclosure) */
.ds-locked{position:relative}
.ds-locked-fields{opacity:.4;filter:saturate(.6);pointer-events:none}
.ds-locked-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none;font:500 16px/1.55 var(--ds-font);color:var(--ds-ink);padding:0 24px}
.ds-locked-msg b{font-weight:700}

/* Approve-and-advance row — question → answer → approve → collapses to a ticked
   heading, re-openable as an accordion (content drops UNDER the heading).
   Stateful (needs is-active / is-done / is-open toggled in JS). Reference:
   mockup-prototype.html .qs / .beat. TODO: extract full class set. */