/* Shared structure and components. Palettes live in the per-brand stylesheet
   that is concatenated after this file. Nothing here sets a brand colour. */

:root{
  color-scheme:light;
  --measure:68ch;
  --gutter:24px;
  --wrap:1100px;
  --space-section:160px;
  --space-act:128px;
  --space-header:76px;
  --step--1:13px;
  --step-0:16.5px;
  --step-1:19px;
  --step-2:23px;
  --step-3:29px;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.7;
}
[hidden]{display:none!important}
img{max-width:100%;height:auto}

h1,h2,h3{font-family:var(--font-display);font-weight:var(--display-weight);line-height:1.2;margin:0}

/* Navigation, labels, meta and controls use the UI face; running prose uses
   --font-body. The two are the same sans in Muse and differ in Instinct, where
   the prose is serif. */
.mast-nav,.wordmark-note,.breadcrumbs,.eyebrow,.chip,.copy,.reset,
.searchline input,.searchline select,.evidence-chip,.result-count,
.editorial-flag,.module-note,.module-footnote,.hub-footnote,
.scope-line,.report-detail,.task-card-meta,.caveat,.brief-foot,
.note h2,.note h3,.sub,.pull footer,.next-list span,
.task-card-category,.evidence-meta,.source-meta,.source-links,.source-author,
.change-log,.update-list time,.category-count,.section-index,
.brief-head label,.brief-status,.brief textarea,.compare-table thead th,
.footer-mark,.footer-links,.product-link{font-family:var(--font-ui)}
h1{font-size:clamp(30px,4.2vw,42px);letter-spacing:var(--display-tracking);line-height:1.12;text-wrap:balance}
h2{font-size:var(--step-2);letter-spacing:var(--display-tracking)}
h3{font-size:var(--step-1)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
strong{font-weight:650}
time{font-variant-numeric:tabular-nums}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-100px;z-index:9;background:var(--paper);padding:10px 14px;border:1px solid var(--accent)}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* ---- Chrome ----
   A wordmark on its own line over a full-width utility bar, the way a
   publication sets a masthead. It collapses to a single top strip on small
   screens. */
.wordmark{display:flex;align-items:center;gap:11px;text-decoration:none}
.wordmark-logo{width:34px;height:34px;flex:none}
.wordmark-text{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wordmark-name{font-family:var(--font-display);font-size:var(--step-1);font-weight:650;letter-spacing:var(--display-tracking);line-height:1.15}
.wordmark-name b{font-weight:inherit}
.wordmark-name span{color:var(--muted);font-weight:inherit}
.wordmark-note{
  font-family:var(--font-ui);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);line-height:1.2;
}

/* Masthead */
.mast{border-bottom:1px solid var(--rule);background:var(--paper)}
.mast-inner{display:flex;align-items:center;min-height:96px}
.utility{border-top:1px solid var(--rule)}
.utility-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:46px}
.mast-nav{display:flex;gap:26px;flex-wrap:wrap;font-family:var(--font-ui);font-size:13.5px}
.mast-nav a{text-decoration:none;color:var(--ink-soft);padding:12px 0;border-bottom:2px solid transparent;margin-bottom:-1px}
.mast-nav a:hover{color:var(--accent)}
.mast-nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--accent)}
.utility-note{font-family:var(--font-ui);font-size:11.5px;color:var(--muted);white-space:nowrap}

/* ---- Breadcrumbs ---- */
.breadcrumbs{padding:26px 0 0;font-size:var(--step--1);color:var(--muted)}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumbs li+li::before{content:'/';margin-right:6px;color:var(--rule-strong)}
.breadcrumbs a{color:var(--muted)}

/* ---- Shared page furniture ---- */
.eyebrow{font-size:var(--step--1);color:var(--muted);margin:0 0 10px;letter-spacing:.02em}
.eyebrow a{color:var(--accent)}
.standfirst{font-size:var(--step-1);color:var(--ink-soft);max-width:60ch;margin:20px 0 0;line-height:1.55}
.module{margin:var(--space-section) 0 0}
.module>h2{margin-bottom:22px}
.module-directory>.directory-head h2{font-size:var(--step-1);color:var(--muted);font-weight:650}
.module-note{font-size:var(--step--1);color:var(--muted);max-width:62ch;margin:-6px 0 16px}
.act .module-note:last-child{margin:24px 0 0}
.evidence-note{margin:0 0 30px}
.module-footnote{font-size:var(--step--1);color:var(--muted);margin-top:16px}
.module-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.module-head h2{margin:0}
.directory-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:26px}
.directory-head h2{margin:0;flex:none}
.filterbar{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:1px solid var(--rule);margin-bottom:38px}
.plain-list{margin:0;padding-left:20px}
.plain-list li{margin:0 0 8px;max-width:var(--measure)}
.plain-list li:last-child{margin-bottom:0}

/* An unsourced editorial judgement. Deliberately unlike the source-backed blocks:
   no accent, dashed rule, quieter type. */
.editorial-flag{
  font-size:12px;color:var(--muted);margin:0 0 14px;padding:5px 0 5px 11px;
  border-left:2px dashed var(--rule-strong);
}

/* ---- Home ---- */
/* The headline runs the measure, so the opening sits on the same left and
   right edges as everything under it. A second column here would have put an
   edge on the page that nothing else answers to. The deck is narrower because
   a deck is narrower, not because the space ran out. */
.home-header{padding:var(--space-header) 0 0}
.home-header h1{font-size:clamp(34px,5.6vw,76px);line-height:1.03;margin-bottom:0}
.home-header .standfirst{max-width:52ch;margin-top:30px}
.searchline{display:flex;gap:10px;max-width:560px;flex:1 1 440px}
.searchline input,.searchline select{
  font-family:var(--font-ui);font-size:15px;color:var(--ink);background:var(--field);
  border:1px solid var(--rule-strong);border-radius:var(--radius);padding:11px 13px;min-height:46px;min-width:0;
}
.searchline input{flex:1}
.searchline select{flex:none;width:152px}
.searchline input::placeholder{color:var(--muted)}
.result-count{font-size:var(--step--1);color:var(--muted);margin:0;white-space:nowrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 30px;padding:0}
.chip{
  font-family:var(--font-ui);font-size:14px;cursor:pointer;color:var(--ink-soft);
  background:var(--chip-bg);border:1px solid var(--chip-border);border-radius:var(--chip-radius);
  padding:8px 13px;min-height:40px;transition:color .12s,background-color .12s,border-color .12s;
}
.chip span{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;margin-left:5px}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.chip[aria-pressed=true] span{color:rgba(255,255,255,.75)}

.empty-state{border:1px dashed var(--rule-strong);padding:26px;margin-top:8px;max-width:var(--measure)}
.empty-state h3{margin-bottom:8px}
.empty-state p{color:var(--ink-soft);font-size:15px}
.reset{
  font-family:var(--font-ui);font-size:14px;cursor:pointer;background:var(--accent);color:#fff;
  border:1px solid var(--accent);border-radius:var(--radius);padding:10px 15px;min-height:44px;
}

/* ---- Task cards ----
   Borderless: entries are separated by space, not by a rule each. The first
   visible entry leads at full width, which gives the grid a shape. */
.card-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--card-gap);counter-reset:entry}
.task-card{
  position:relative;min-width:0;padding:0;background:transparent;border:0;counter-increment:entry;
  display:grid;grid-template-columns:104px minmax(0,1fr) 236px;gap:9px 40px;align-items:start;
}
.task-card-category{grid-column:1;grid-row:1/span 3;font-size:12.5px;color:var(--muted);margin:0;padding-top:5px}
.task-card[data-lead] .task-card-category{padding-top:9px}
.task-card-title{grid-column:2;grid-row:1;font-size:26px;line-height:1.2;margin:0}
.task-card-title a{text-decoration:none}
.task-card-title a::after{content:'';position:absolute;inset:-14px -16px}
.task-card-title a:hover{color:var(--accent);text-decoration:none}
.task-card:focus-within .task-card-title a{color:var(--accent)}
.task-card-outcome{grid-column:2;grid-row:2;font-size:15.5px;color:var(--ink-soft);margin:0;line-height:1.6;max-width:52ch}
.task-card-meta{
  grid-column:3;grid-row:1/span 3;align-self:start;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.6;letter-spacing:-.01em;
  color:var(--muted);margin:0;padding-top:9px;
}

/* The lead keeps every column the others use. Size and the drawn underline are
   what set it apart, so the index stays one shape down the page. */
.task-card[data-lead] .task-card-title{font-size:clamp(28px,3.4vw,40px);line-height:1.08}
.task-card[data-lead] .task-card-outcome{font-size:var(--step-1)}

.evidence-chip{
  font-size:11.5px;line-height:1;padding:5px 8px;border-radius:3px;white-space:nowrap;
  background:var(--chip-neutral);color:var(--ink-soft);
}
.evidence-chip.evidence-official{background:var(--accent-soft);color:var(--accent-ink)}

/* ---- Task detail ----
   Three weights give the page a shape: the brief is loud and breaks the reading
   measure, the source and the procedure are normal, and the reference material
   is small print at the foot. Sections are separated by air, not by a rule each. */
.task-header{padding:var(--space-header) 0 0;max-width:var(--measure)}
.task-header h1{margin-bottom:0}
.task-header .standfirst{font-size:var(--step-2);color:var(--ink);margin-top:14px;max-width:52ch}

.task-body{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:0 56px;align-items:start;margin-top:8px}
.task-main{grid-column:1;grid-row:1;min-width:0}
.task-aside{grid-column:2;grid-row:1;position:sticky;top:22px;padding-top:46px;font-size:13px}
.section-index h2{font-size:13px;font-weight:650;color:var(--muted);margin-bottom:9px}
.section-index ul{list-style:none;margin:0;padding:0}
.section-index li{margin-bottom:1px}
.section-index a{display:block;padding:3px 0;color:var(--ink-soft);text-decoration:none;line-height:1.4}
.section-index a:hover{color:var(--accent);text-decoration:underline}
.aside-note{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);color:var(--muted);line-height:1.55}

.act{margin-top:var(--space-act);max-width:var(--measure)}
.act>h2{font-size:var(--step-1);color:var(--muted);margin-bottom:20px}

/* The source speaks at full size; the guide's caveat does not. */
.pull{margin:0;padding:0}
.pull p{font-family:var(--font-display);font-size:clamp(20px,2.1vw,25px);font-weight:var(--display-weight);line-height:1.32;letter-spacing:var(--display-tracking);color:var(--ink);margin:0;text-wrap:pretty}
.pull footer{margin-top:15px;font-size:13px;color:var(--muted)}
.caveat{margin-top:16px;font-size:13px;color:var(--muted)}
.report-detail{margin:22px 0 0;display:grid;gap:14px}
.report-detail dt{font-size:13px;color:var(--muted);margin-bottom:3px}
.report-detail dd{margin:0;font-size:15px;line-height:1.6}

/* The lead module: what the thing is, and how you know it came back right. */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px 44px}
.spec h3{font-size:13px;color:var(--muted);margin-bottom:9px}
.spec p{font-size:15.5px;line-height:1.6}
.spec-kind{
  font-family:var(--font-ui);font-size:12.5px;font-weight:650;color:var(--accent);
  border:1px solid var(--accent);border-radius:999px;padding:5px 12px;display:inline-block;margin-bottom:11px;
}
.spec .check-list li{font-size:15px}

/* The one thing the page exists for. */
.act-loud{margin-top:var(--space-section);max-width:none}
.brief{border-top:3px solid var(--brief-rule);border-bottom:3px solid var(--brief-rule)}
.brief-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0 0}
.brief-head h2{font-size:var(--step-1);color:var(--ink);margin:0}
.copy{
  font-family:var(--font-ui);font-size:13.5px;cursor:pointer;background:var(--accent);color:#fff;
  border:1px solid var(--accent);border-radius:var(--radius);padding:9px 15px;min-height:40px;white-space:nowrap;
}
.brief textarea{
  display:block;width:100%;border:0;background:transparent;resize:vertical;
  font-size:21px;line-height:1.55;color:var(--ink);padding:14px 0 24px;
  min-height:96px;max-height:60vh;field-sizing:content;
}
.dispatch-line{margin:16px 0 0;font-size:14.5px;line-height:1.75;color:var(--ink-soft);max-width:var(--measure)}
.dispatch-line strong{color:var(--ink)}
.brief-foot{margin:9px 0 0;font-size:12.5px;color:var(--muted);max-width:var(--measure)}

.step-list{margin:0;padding-left:22px}
.step-list li{margin-bottom:12px;padding-left:4px;line-height:1.65}
.step-list li:last-child{margin-bottom:0}
.checkpoints{margin-top:24px;padding:16px 18px;background:var(--sunken)}
.checkpoints h3{font-size:14px;margin-bottom:9px}
.checkpoints li{font-size:14.5px}
.product-link{margin-top:24px;font-size:13px;color:var(--muted)}
.product-entry{font-weight:650;color:var(--accent)}

/* Small print: reference material, set dense and in the UI face. */
.dense{
  margin-top:var(--space-section);padding-top:44px;
  columns:2;column-gap:46px;font-size:13.5px;line-height:1.6;
}
.note{break-inside:avoid;margin:0 0 30px}
/* The home and hub feet hold several short notes, which balance on their own.
   The task foot holds two, one of them long, so keeping it whole left one
   column nearly empty. Let the long one flow and keep its blocks intact. */
.task-page .dense .note{break-inside:auto}
.task-page .dense .note>*{break-inside:avoid}
.task-page .dense .note h2,.task-page .dense .note h3{break-after:avoid}
.foot-block{break-inside:avoid;margin-bottom:20px}
.foot-block:last-child{margin-bottom:0}
.foot-block h3{margin-bottom:6px}
.home .dense{columns:3;column-gap:38px}
.note:last-child{margin-bottom:0}
.note h2{font-size:14.5px;font-weight:650;letter-spacing:0;margin-bottom:10px}
.note h3{font-size:12.5px;font-weight:650;color:var(--muted);margin-bottom:5px}
.note p{line-height:1.6}
.note .plain-list{padding-left:17px}
.note .plain-list li{margin-bottom:5px;max-width:none}
.note .editorial-flag{font-size:11.5px;margin:0 0 10px;padding:3px 0 3px 9px}
.split{display:grid;gap:18px}
.dense .category-links li,.dense .update-list li{grid-template-columns:minmax(0,1fr);gap:2px;padding:9px 0}
.dense .category-links a,.dense .update-list a{font-weight:650}
.dense .standard-list{padding-left:17px}
.dense .standard-list li{margin-bottom:7px;max-width:none}
.dense .module-footnote{font-size:12px;margin-top:11px}

.check-list{list-style:none;margin:0;padding:0}
.check-list li{position:relative;padding:0 0 7px 21px;line-height:1.55}
.check-list li::before{content:'';position:absolute;left:0;top:.36em;width:11px;height:11px;border:1.5px solid var(--rule-strong)}

.trouble-list{margin:0}
.trouble-list>div{padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.trouble-list>div:first-child{padding-top:0}
.trouble-list>div:last-child{border-bottom:0;padding-bottom:0}
.trouble-list dt{font-weight:650;margin-bottom:3px}
.trouble-list dd{margin:0;color:var(--ink-soft)}

.evidence-list{list-style:none;margin:0;padding:0}
.evidence-list li{margin-bottom:13px}
.evidence-list li:last-child{margin-bottom:0}
.evidence-meta{font-size:12px;color:var(--muted);margin-top:4px}
.sub{font-weight:650;color:var(--muted);font-size:12.5px;margin:15px 0 5px}
.change-log{list-style:none;margin:0;padding:0}
.change-log li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;padding:3px 0;font-size:12.5px}
.change-log time{color:var(--muted)}

.act-next{margin-top:var(--space-section)}
.next-list{list-style:none;margin:0;padding:0}
.next-list li{padding:13px 0;border-bottom:1px solid var(--rule-soft)}
.next-list li:first-child{border-top:1px solid var(--rule-soft)}
.act-next h3{font-family:var(--font-ui);font-size:var(--step--1);font-weight:650;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:32px 0 10px}
.act-next h2+h3{margin-top:20px}
.next-all{margin:12px 0 0;font-family:var(--font-ui);font-size:var(--step--1)}
.next-list a{font-weight:650;text-decoration:none}
.next-list a:hover{text-decoration:underline}
.next-list span{display:block;color:var(--muted);font-size:14px;margin-top:3px}

/* ---- Category hub ---- */
.hub-header{padding:var(--space-header) 0 0;max-width:var(--measure)}
.hub-header h1{margin-bottom:0}
.scope-line{margin:20px 0 0;font-size:14.5px;line-height:1.75;color:var(--ink-soft);max-width:var(--measure)}
.scope-line strong{color:var(--ink)}

.goal-list{list-style:none;margin:0;padding:0;max-width:860px}
.goal-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule-soft)}
.goal-list li:last-child{border-bottom:0}
.goal-outcome{color:var(--ink-soft);line-height:1.55;font-size:15px}
.goal-link{white-space:nowrap;font-weight:650;color:var(--accent);font-size:14.5px}

.table-scroll{overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}
.compare-table th,.compare-table td{padding:12px 16px 12px 0;vertical-align:top;border-bottom:1px solid var(--rule-soft);line-height:1.55}
.compare-table thead th{font-size:12.5px;color:var(--muted);font-weight:650;border-bottom:1px solid var(--rule-strong);white-space:nowrap}
.compare-table th[scope=row]{font-weight:650;min-width:11em}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:0}

.sequence-list{margin:0;padding-left:22px}
.sequence-list li{margin-bottom:12px}
.sequence-list span{display:block;color:var(--muted);font-size:14px}

.category-links{list-style:none;margin:0;padding:0}
.category-links li{display:grid;grid-template-columns:minmax(9em,auto) minmax(0,1fr) auto;gap:8px 20px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule-soft);font-size:15px}
.category-links li:last-child{border-bottom:0}
.category-links a{font-weight:650;color:var(--accent);text-decoration:none}
.category-links a:hover{text-decoration:underline}
.category-links span{color:var(--ink-soft);font-size:14px;line-height:1.55}
.category-count{color:var(--muted);white-space:nowrap;font-size:13px}

.category-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px}
.category-index h3{margin-bottom:7px}
.category-index h3 a{text-decoration:none}
.category-index h3 a:hover{text-decoration:underline}
.category-index p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:0}
.category-index .category-count{display:block;margin-top:7px;font-size:12.5px}
.hub-footnote{margin:34px 0 0;padding-top:18px;border-top:1px solid var(--rule);font-size:var(--step--1);color:var(--muted);max-width:var(--measure)}

/* ---- Home modules ---- */
.pick{max-width:var(--measure)}
.pick h3{font-size:var(--step-1);margin-bottom:7px}
.pick h3 a{text-decoration:none}
.pick h3 a:hover{text-decoration:underline}
.pick-outcome{color:var(--ink-soft);margin:0 0 12px;max-width:52ch}
.pick-note{font-size:15px;color:var(--ink-soft);margin:0 0 4px;max-width:58ch;line-height:1.65}

.update-list{list-style:none;margin:0;padding:0}
.update-list li{display:grid;grid-template-columns:96px minmax(9em,auto) minmax(0,1fr);gap:8px 20px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule-soft);font-size:14.5px}
.update-list li:last-child{border-bottom:0}
.update-list time{color:var(--muted);font-size:13px}
.update-list a{font-weight:650;color:var(--accent);text-decoration:none}
.update-list a:hover{text-decoration:underline}
.update-list span{color:var(--ink-soft)}

.standard-list{margin:0;padding-left:22px}
.standard-list li{margin-bottom:12px;max-width:var(--measure);line-height:1.65}
.standard-list li:last-child{margin-bottom:0}

/* ---- Prose pages ---- */
.prose-page{max-width:var(--measure)}
.prose-header{padding:var(--space-header) 0 0}
.prose-header h1{margin-bottom:0}
.register-list{list-style:none;margin:0;padding:0}
.register-list li{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--rule-soft)}
.register-list li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.register-list h3{font-size:var(--step-1);margin-bottom:6px}
.register-list h3 a{text-decoration:none}
.register-list h3 a:hover{text-decoration:underline}
.register-list p{margin:6px 0 0;font-size:15px;line-height:1.6}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--rule);margin-top:var(--space-section);background:var(--paper)}
.footer-inner{display:flex;align-items:start;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-top:52px;padding-bottom:72px}
.footer-mark{font-size:var(--step--1);color:var(--muted);max-width:46ch;line-height:1.6;margin:0}
.footer-mark strong{color:var(--ink)}
.footer-links{list-style:none;margin:0;padding:0;font-size:var(--step--1);display:grid;align-content:start;gap:7px}
.footer-links a{color:var(--muted)}

/* ---- Responsive ---- */
@media (max-width:980px){
  .task-body{grid-template-columns:minmax(0,1fr)}
  .task-main{grid-column:1;grid-row:2}
  .task-aside{grid-column:1;grid-row:1;position:static;padding-top:26px;border-top:1px solid var(--rule);margin-top:26px}
  .dense,.home .dense{columns:1}
  .section-index ul{columns:2;column-gap:26px}
  .section-index li{break-inside:avoid}
  .aside-note{margin-top:16px}
  .pick{max-width:var(--measure)}
}
@media (max-width:760px){
  :root{--gutter:20px;--space-section:88px;--space-act:72px;--space-header:44px}
  .mast-inner{min-height:0;padding:14px 0}
  .utility-note{display:none}
  /* One scrolling row, not a ragged second line: overflow-x only engages once
     wrapping is off. */
  .mast-nav{gap:18px;width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .mast-nav a{white-space:nowrap}
  .category-index{grid-template-columns:minmax(0,1fr)}
  .task-card{grid-template-columns:minmax(0,1fr);gap:8px}
  .task-card-category,.task-card-title,.task-card-outcome,.task-card-meta{grid-column:1;grid-row:auto;padding-top:0}
  .task-card[data-lead] .task-card-title,
  .task-card[data-lead] .task-card-outcome,
  .task-card[data-lead] .task-card-meta{grid-column:1}
  .brand-muse .task-card-category{flex-direction:row;align-items:baseline;gap:11px}
  .task-card[data-lead] .task-card-title{font-size:var(--step-3)}
  .directory-head{align-items:flex-start}
  .searchline{flex:1 1 100%;max-width:none}
  /* The count stops squeezing the tab scroller; the rule stays under the tabs
     so the active tab still sits on it. */
  .filterbar{display:block;border-bottom:0}
  .brand-muse .chips{border-bottom:1px solid var(--rule)}
  .filterbar .result-count{margin-top:12px}
  .goal-list li,.category-links li,.update-list li{grid-template-columns:minmax(0,1fr)}
  .goal-link{white-space:normal}
  .update-list li{gap:4px}
  .change-log li{grid-template-columns:minmax(0,1fr);gap:2px}
  .footer-inner{gap:24px}
  /* The comparison table becomes one labelled block per task rather than a scroller. */
  .compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .compare-table tr{display:block;border:1px solid var(--rule);border-radius:var(--radius);padding:16px;margin-bottom:12px}
  .compare-table th[scope=row]{display:block;padding:0 0 12px;font-size:var(--step-1);border-bottom:1px solid var(--rule-soft)}
  .compare-table td{display:block;padding:10px 0 0;border:0}
  .compare-table td::before{content:attr(data-label);display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
  .compare-table tbody tr:last-child{margin-bottom:0}
}
@media (max-width:520px){
  :root{--gutter:16px;--step-0:16px}
  .searchline{flex-direction:column}
  .searchline select{width:100%}
  .chips{gap:7px}
  .brief textarea{font-size:16px}
  .brief-head{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Muse Task Hub — the existing clean editorial direction, carried through.
   Blue from the handwritten M, white stock, tasks as a ruled list rather than
   boxes, filters as a tab row. */

.brand-muse{
  --font-body:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-ui:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display-weight:600;
  --display-tracking:-.022em;

  --paper:#fff;
  --sunken:#f5f7fa;
  --field:#fff;
  --card:transparent;
  --ink:#141b21;
  --ink-soft:#3f4b55;
  --muted:#5f6b75;
  --rule:#e4e9ee;
  --rule-soft:#edf1f4;
  --rule-strong:#d2dae1;
  --accent:#0064e0;
  --accent-ink:#0b4ea8;
  --accent-soft:#e9f1fd;
  --chip-neutral:#eef1f4;
  --chip-bg:transparent;
  --chip-border:transparent;

  --radius:8px;
  --chip-radius:0;
  --mark-radius:50%;
  --brief-rule:var(--accent);
  --card-gap:54px;
  --wrap:1060px;
}

/* Entries sit on white with nothing but space between them; the tab row's
   baseline is the only rule in the directory. */
.brand-muse .task-card:hover .task-card-title a{color:var(--accent)}
/* The drawn underline deepens with the title rather than being joined by a second one. */
.brand-muse .task-card[data-lead]:hover .task-card-title{filter:saturate(1.35)}

/* Category filters behave as tabs along a single rule. */
.brand-muse .chips{gap:22px;flex-wrap:nowrap;overflow-x:auto;margin:0}
.brand-muse .chip{
  background:transparent;border:0;border-bottom:2px solid transparent;
  padding:11px 0 12px;white-space:nowrap;flex:none;border-radius:0;
}
.brand-muse .chip:hover{background:transparent;color:var(--accent)}
.brand-muse .chip[aria-pressed=true]{background:transparent;color:var(--accent);border-bottom-color:var(--accent);font-weight:650}
.brand-muse .chip[aria-pressed=true] span{color:var(--muted)}

.brand-muse .searchline input{border-radius:var(--radius)}
.brand-muse .wordmark-name{font-weight:650}
.brand-muse .empty-state{border-radius:var(--radius)}



/* ---- Muse's own voice ----
   The mark is three hand-drawn strokes, so the ink is the site's signature:
   a drawn rule instead of a hairline, and a drawn underline on the lead entry.
   The directory is an index, so its entries are numbered like one. */

/* A stroke, not a border. preserveAspectRatio=none lets one drawn line stretch. */
.brand-muse .dense,
.brand-muse [data-band='tint']{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6C82 2 163 8 244 4.5C325 1.5 406 7 487 3.5C534 1.5 566 5 597 3.5' fill='none' stroke='%230064e0' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:top left;
  background-size:100% 10px;
}

/* Entries are numbered, the way a contents page is. */
.brand-muse .task-card-category{display:flex;flex-direction:column;gap:5px}
.brand-muse .task-card-category::before{
  content:counter(entry,decimal-leading-zero);
  font-family:var(--font-mono);font-size:15px;color:var(--accent);letter-spacing:.02em;line-height:1;
}

/* The lead entry is underscored by hand. */
.brand-muse .task-card[data-lead] .task-card-title{width:fit-content;max-width:100%;padding-bottom:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6C82 2 163 8 244 4.5C325 1.5 406 7 487 3.5C534 1.5 566 5 597 3.5' fill='none' stroke='%230064e0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:bottom left;background-size:100% 9px;
}

/* Muse had no section grounds at all, which is why it read flat.
   The editorial pick gets the blue; the reference foot gets the tint. */
.brand-muse [data-band]{position:relative;padding:80px 0;margin:var(--space-section) 0}
.brand-muse [data-band='accent']{
  background:var(--accent);color:#fff;
  box-shadow:0 0 0 100vmax var(--accent);
  clip-path:inset(0 -100vmax);
}
.brand-muse [data-band='accent'] h2,
.brand-muse [data-band='accent'] h3,
.brand-muse [data-band='accent'] a,
.brand-muse [data-band='accent'] strong{color:#fff}
.brand-muse [data-band='accent']>h2{font-size:var(--step-1);color:#bcd5fb;margin-bottom:18px}
.brand-muse [data-band='accent'] h3{font-size:clamp(25px,3.2vw,36px);line-height:1.15;margin-bottom:12px}
.brand-muse [data-band='accent'] .pick{
  max-width:none;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:16px 56px;align-items:start;
}
.brand-muse [data-band='accent'] .pick-outcome,
.brand-muse [data-band='accent'] .pick-note,
.brand-muse [data-band='accent'] .dispatch-line{color:#d6e5fd}
.brand-muse [data-band='accent'] a{text-decoration:underline;text-underline-offset:3px}
.brand-muse [data-band='accent'] :focus-visible{outline-color:#fff}
.brand-muse [data-band='tint']{
  background-color:var(--sunken);
  box-shadow:0 0 0 100vmax var(--sunken);
  clip-path:inset(0 -100vmax);
  border-top:0;padding-top:64px;
}

@media (max-width:760px){
  .brand-muse [data-band]{padding:48px 0}
  .brand-muse [data-band='accent'] .pick{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* Structured illustrations contain editorial labels, never product screenshots. */
.task-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:0;list-style:none}.task-flow li{border-top:2px solid currentColor;padding:.75rem 0;min-width:0}.task-flow p{overflow-wrap:anywhere}figure[data-task-diagram]{margin:1.5rem 0}figure[data-task-diagram] figcaption{font-size:.8rem;opacity:.75}.recurring-entry{margin:1.5rem 0;font-size:.9rem} @media(max-width:600px){.task-flow{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   Rich task content. Muse hands back artifacts, so source material is presented
   as reference cards and reference views. Everything is readable with the
   stylesheet alone: no script runs to reveal any of it.
   --------------------------------------------------------------------------- */

.task-flow-detailed li.is-checkpoint{border-left:3px solid var(--accent);padding-left:14px}
.flow-checkpoint{
  display:inline-block;margin:4px 0 0;font-family:var(--font-ui);font-size:11.5px;
  font-weight:650;letter-spacing:.02em;color:var(--accent);
}

.rich-guide{margin-top:30px}
.rich-guide section+section{margin-top:26px}
.rich-guide h3{font-size:var(--step-1);margin:0 0 9px;line-height:1.3}
.rich-guide p{margin:0 0 12px;color:var(--ink-soft);max-width:var(--measure)}
.rich-guide p:last-child{margin-bottom:0}

.faq{margin-top:34px}
.faq>.faq-heading{font-size:var(--step-1);margin:0 0 14px;font-weight:inherit;letter-spacing:inherit}
.faq-item{border-top:1px solid var(--rule)}
.faq-item:last-of-type{border-bottom:1px solid var(--rule)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:15px 34px 15px 0;position:relative;
  font-weight:650;line-height:1.45;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'';position:absolute;right:6px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .14s;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary:hover::after{border-color:var(--accent)}
.faq-answer{padding:0 0 17px}
.faq-answer p{margin:0;color:var(--ink-soft);max-width:var(--measure)}

.variants{margin-top:32px;padding-top:26px;border-top:1px solid var(--rule)}
.variants>h3{font-size:var(--step-1);margin:0 0 6px}
.variants>.module-note{margin:0 0 18px}
/* .module-note carries margin-top:-6px so it can tuck under a heading. These two
   follow a list and a transcript, not a heading, so the pull-up has to go or the
   note sits on top of the last line. */
.excerpts>.module-note{margin:14px 0 0}
.transcript>.module-note{margin:16px 0 0}
.variant+.variant{margin-top:18px}
.variant-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
.variant-head label{font-family:var(--font-ui);font-size:var(--step--1);font-weight:650;color:var(--ink-soft)}
.variant textarea{
  width:100%;display:block;font:inherit;font-size:var(--step-0-quiet);line-height:1.6;
  color:var(--ink);background:var(--field);border:1px solid var(--rule-strong);
  border-radius:var(--radius);padding:12px 14px;resize:vertical;field-sizing:content;
}
.copy-variant{
  flex:none;font-family:var(--font-ui);font-size:12px;font-weight:650;cursor:pointer;
  color:var(--accent);background:transparent;border:1px solid var(--rule-strong);
  border-radius:var(--chip-radius);padding:5px 12px;min-height:32px;
}
.copy-variant:hover{border-color:var(--accent)}
.variant-status{margin:6px 0 0;min-height:1.3em;font-family:var(--font-ui);font-size:12px;color:var(--muted)}

.output-template{margin-top:34px}
.output-template>h3{font-size:var(--step-1);margin:0 0 12px}
.output-template caption{
  caption-side:top;text-align:left;margin-bottom:11px;
  font-family:var(--font-ui);font-size:12px;line-height:1.5;color:var(--muted);
}

/* Source cards sit side by side where there is room; the kind label is the part
   that must survive every width. */
.excerpts{margin-top:34px}
.excerpts>h3{font-size:var(--step-1);margin:0 0 14px}
.excerpt-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.excerpt{margin:0;padding:17px 19px;background:var(--sunken);border-radius:var(--radius)}
.excerpt-kind{
  margin:0 0 8px;font-family:var(--font-ui);font-size:11.5px;font-weight:650;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.excerpt blockquote{margin:0;padding:0;border:0}
.excerpt blockquote p{margin:0;font-size:var(--step-1);line-height:1.5;color:var(--ink)}
.excerpt figcaption{margin-top:10px;font-family:var(--font-ui);font-size:12px;color:var(--muted)}

/* A transcript, not a chat. No bubbles and no alignment by speaker: these are
   quoted lines from someone else's recording, and they have to keep looking
   like quotations rather than like messages this site produced. */
.transcript{margin-top:34px;padding:20px 22px;border:1px solid var(--rule);border-radius:var(--radius)}
.transcript>h3{font-size:var(--step-1);margin:0 0 8px}
.transcript-flag{
  margin:0 0 16px;font-family:var(--font-ui);font-size:12px;line-height:1.55;color:var(--muted);
}
.transcript-turns{list-style:none;margin:0;padding:0;border-left:2px solid var(--rule-strong)}
.transcript-turns li{padding:0 0 14px 16px}
.transcript-turns li:last-child{padding-bottom:0}
.transcript-speaker{
  margin:0 0 3px;font-family:var(--font-ui);font-size:11.5px;font-weight:650;
  letter-spacing:.03em;color:var(--muted);
}
.transcript-text{margin:0;color:var(--ink);line-height:1.55}
.transcript-link{margin:16px 0 0;font-family:var(--font-ui);font-size:var(--step--1)}

.interface-reference{margin:26px 0 0;padding:0}
.interface-reference img{
  display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--radius);
}
.interface-reference figcaption{
  margin-top:10px;font-family:var(--font-ui);font-size:12px;line-height:1.55;color:var(--muted);
}
.interface-caption{display:block;margin-bottom:3px}

@media (max-width:720px){
  .variant-head{flex-wrap:wrap}
  .excerpt{padding:15px 16px}
  .excerpt blockquote p{font-size:var(--step-0)}
  .transcript{padding:17px 16px}
}
@media (max-width:520px){
  .variant textarea{font-size:16px}
  .faq-item summary{padding-right:28px}
}

/* ---- Explainer ---- */
.explainer .prose-header .module-note{margin:16px 0 0}

/* 2026-10-12: short agent prompt on the home page, directory pages, share row. */
.recurring-block{margin:1.25rem 0 0;padding:16px 18px;border:1px solid var(--rule-strong);background:var(--sunken);max-width:var(--measure)}
.recurring-block-head{margin:0 0 8px;font-weight:650;color:var(--ink)}
.recurring-prompt{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:14px;line-height:1.5;padding:10px 12px;border:1px solid var(--rule);background:var(--field);color:var(--ink);resize:vertical}
.recurring-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:10px}
.recurring-status{margin:6px 0 0;font-size:13px;color:var(--muted)}
.recurring-status:empty{display:none}
.recurring-note{margin:6px 0 0;font-size:13px;color:var(--muted)}
.recurring-note kbd{font-family:var(--font-mono);font-size:12px;padding:1px 5px;border:1px solid var(--rule-strong);border-radius:3px;background:var(--paper)}
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:28px 0 0}
.pager[hidden]{display:none}
.pager a,.pager span{min-width:36px;padding:7px 10px;box-sizing:border-box;text-align:center;border:1px solid var(--rule);color:var(--ink-soft);text-decoration:none;font-variant-numeric:tabular-nums;font-size:14px}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager span[aria-current]{border-color:var(--ink);color:var(--ink);font-weight:650}
.remote-results{margin-top:8px}
.share-row{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:16px 0 0;font-size:14px;color:var(--muted)}
.share-row a{color:var(--ink-soft)}
.share-row a:hover{color:var(--accent)}
.share-copy{font:inherit;font-size:14px;padding:0;border:0;background:none;color:var(--ink-soft);text-decoration:underline;cursor:pointer}