/* 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:136px;
  --space-act:72px;
  --space-header:76px;
  --step--1:13px;
  --step-0-quiet:15px;
  --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. */
.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)}
.brand-instinct .wrap{max-width:940px}

/* ---- Chrome ----
   This site has one grammar: navigation stands in a column beside the content,
   the way a manual does, and collapses to a top strip on small screens where a
   rail has nowhere to stand. Muse's masthead lives in Muse's own stylesheet. */
.wordmark{display:flex;align-items:center;gap:11px;text-decoration:none}
.wordmark-mark{
  width:32px;height:32px;flex:none;display:grid;place-items:center;
  background:var(--mark-bg,var(--accent));color:#fff;font-family:var(--font-display);font-size:18px;
  border-radius:var(--mark-radius);
}
.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;
}

/* Rail.
   document.mjs wraps rail + content in .shell for layout 'rail', so the grid
   hangs there. The rail stands in column one, .shell-main carries the divider
   so it runs the whole page, and the footer sits outside .shell entirely: it
   is the foot of the site, not of the article. Its text is still indented by
   one rail width so it aligns with the content column.
   align-items:start is what lets the rail stick: the box stays content-height
   while its grid area is the full row, which is the room sticky needs. */
.layout-rail .shell{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  align-items:start;
}
.layout-rail .rail{
  grid-column:1;
  position:sticky;top:0;max-height:100vh;overflow-y:auto;
  padding:30px 26px 26px;
  display:flex;flex-direction:column;gap:26px;background:var(--paper);
}
/* overflow-x:clip, not hidden: it stops the bands' 100vmax bleed at the
   content column instead of letting them slide under the rail, and unlike
   hidden it makes no scroll container, so the sticky task aside still
   sticks to the viewport. */
.layout-rail .shell-main{grid-column:2;border-left:1px solid var(--rule);min-height:100vh;overflow-x:clip}
.layout-rail .footer{padding-left:var(--rail)}
.layout-rail .wordmark{flex-direction:column;align-items:flex-start;gap:8px}
.layout-rail .wordmark-text{flex-direction:column;align-items:flex-start;gap:3px}
.rail-nav{display:flex;flex-direction:column;gap:1px;font-family:var(--font-ui);font-size:14.5px}
.rail-nav a{text-decoration:none;color:var(--ink-soft);padding:7px 10px;margin-left:-10px;border-radius:7px}
.rail-nav a:hover{color:var(--accent);background:var(--sunken)}
.rail-nav a[aria-current=page]{color:var(--accent);background:var(--accent-soft);font-weight:650;box-shadow:inset 3px 0 0 0 var(--signal)}

/* The category list is the reason the rail is 236px wide. Sentence case, not
   another small-caps label: the site already has one above the wordmark. */
.rail-group{display:flex;flex-direction:column;gap:1px;margin-top:4px;padding-top:22px;border-top:1px solid var(--rule)}
.rail-group-head{font-family:var(--font-ui);font-size:var(--step--1);color:var(--muted);margin:0 0 9px;padding-left:0}
.rail-cats{display:flex;flex-direction:column;gap:1px;font-family:var(--font-ui);font-size:14px}
.rail-cats a{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  text-decoration:none;color:var(--ink-soft);padding:6px 10px;margin-left:-10px;border-radius:7px;
}
.rail-cats a span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rail-cats a:hover{color:var(--accent);background:var(--sunken)}
.rail-cats a:hover span{color:var(--accent)}
.rail-cats a[aria-current=page]{color:var(--accent);background:var(--accent-soft);font-weight:650;box-shadow:inset 3px 0 0 0 var(--signal)}
.rail-cats a[aria-current=page] span{color:var(--accent)}

/* ---- 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-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}
.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:var(--step--1);color:var(--muted);margin:0 0 14px;padding:5px 0 5px 11px;
  border-left:2px dashed var(--rule-strong);
}

/* ---- Home ---- */
.home-header{padding:var(--space-header) 0 0;max-width:62ch}
.home-header h1{margin-bottom:0}
.searchline{display:flex;gap:10px;margin-top:36px;max-width:640px}
.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 input{max-width:430px}
.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:var(--step--1);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:repeat(2,minmax(0,1fr));gap:var(--card-gap) 44px;counter-reset:entry}
.task-card{position:relative;min-width:0;padding:0;background:transparent;border:0;counter-increment:entry}
.task-card-category{font-size:var(--step--1);color:var(--muted);margin:0 0 7px}
.task-card-title{font-size:var(--step-2);line-height:1.22;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{font-size:var(--step-0-quiet);color:var(--ink-soft);margin:10px 0 0;line-height:1.6;max-width:46ch}
.task-card-meta{
  font-family:var(--font-mono);font-size:11.5px;line-height:1.55;letter-spacing:-.01em;
  color:var(--muted);margin:14px 0 0;
}

.task-card[data-lead]{grid-column:1/-1;padding-bottom:14px}
.task-card[data-lead] .task-card-title{font-size:clamp(25px,3vw,33px);line-height:1.12}
.task-card[data-lead] .task-card-outcome{font-size:var(--step-1);max-width:54ch;margin-top:13px}

.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}

/* Instinct's lead module: a ladder of what happens without you, where it stops,
   and what you sign off. */
.reach-flag{font-size:var(--step-0-quiet);color:var(--ink-soft);margin:0 0 22px;padding:12px 0 12px 16px;border-left:3px solid var(--accent)}
.reach-flag strong{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.ladder{list-style:none;margin:0;padding:0;counter-reset:rung}
.ladder>li{counter-increment:rung;position:relative;padding:0 0 22px 40px}
.ladder>li:last-child{padding-bottom:0}
.ladder>li::before{
  content:counter(rung);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-ui);font-size:12.5px;font-weight:650;
  background:var(--accent);color:#fff;
}
.ladder>li::after{content:'';position:absolute;left:13px;top:29px;bottom:4px;width:1px;background:var(--rule-strong)}
.ladder>li:last-child::after{display:none}
.ladder h3{font-size:var(--step-0);font-weight:650;margin-bottom:7px}
.ladder li{font-size:15px}

/* Muse's 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:84px;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:14px;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:var(--step-0-quiet);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:var(--step--1);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:var(--step-0);font-weight:650;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;border-top:2px solid var(--ink);
  columns:2;column-gap:46px;font-size:var(--step--1);line-height:1.6;
}
.note{break-inside:avoid;margin:0 0 30px}
.home .dense{columns:3;column-gap:38px}
.note:last-child{margin-bottom:0}
.note h2{font-size:var(--step-0-quiet);font-weight:650;letter-spacing:0;margin-bottom:10px}
.note h3{font-size:var(--step--1);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{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:var(--step--1);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:var(--step--1);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:var(--step-0-quiet);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:var(--step-0-quiet);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:var(--step--1);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:var(--step--1)}

.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:var(--step-0-quiet);line-height:1.55}
.category-count{color:var(--muted);white-space:nowrap;font-size:var(--step--1)}

.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:var(--step-0-quiet);color:var(--ink-soft);line-height:1.6;margin:0}
.category-index .category-count{display:block;margin-top:7px}
.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:var(--step-0-quiet)}
.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{font-size:var(--step--1);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:64px;--space-act:48px;--space-header:44px}
  .layout-rail .shell{display:block}
  .layout-rail .shell-main{border-left:0;min-height:0}
  .layout-rail .footer{padding-left:0}
  .layout-rail .rail{
    position:static;max-height:none;overflow:visible;flex-direction:row;align-items:center;
    flex-wrap:wrap;gap:12px 22px;border-bottom:1px solid var(--rule);padding:14px var(--gutter);
  }
  .layout-rail .wordmark{flex-direction:row;align-items:center;gap:11px}
  .layout-rail .wordmark-text{flex-direction:row;align-items:baseline;gap:10px}
  /* Wrap rather than scroll. A horizontal scroller with no affordance simply
     hid the last item -- 'About' sat 39px past the edge with nothing to say so.
     On a phone a second line costs less than an unreachable link. */
  .rail-nav{flex-direction:row;flex-wrap:wrap;gap:4px 18px;width:100%;overflow:visible}
  .rail-nav a{padding:6px 0;margin:0;white-space:nowrap}
  /* Categories run inline here too, so the rail stays a strip instead of the
     282px column a vertical list turned it into. */
  .rail-group{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:0;padding-top:13px}
  .rail-group-head{margin:0}
  .rail-cats{flex-direction:row;flex-wrap:wrap;gap:4px 16px}
  .rail-cats a{padding:6px 0;margin:0;gap:6px;justify-content:flex-start;white-space:nowrap}
  /* A filled block reads as a button when the items sit in a row, so the
     current item keeps the green as an underline instead. */
  .rail-nav a[aria-current=page],
  .rail-cats a[aria-current=page]{background:transparent;box-shadow:inset 0 -2px 0 0 var(--signal);border-radius:0}
  .card-grid,.category-index{grid-template-columns:minmax(0,1fr)}
  .task-card[data-lead] .task-card-title{font-size:var(--step-2)}
  .fit-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .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}
  .brand-instinct .task-card:hover,
  .brand-instinct .task-card:focus-within{transform:none}
}
/* Instinct Tasks — Instinct's own monochrome identity (white stock, near-black,
   bracketed serif, rounded-square mark), given weight: display type at real
   scale, one ember accent, alternating section grounds, and an oversized
   sign-off. Small functional text stays in the UI sans. */

.brand-instinct{
  --font-body:ui-serif,"Iowan Old Style",Charter,"Bitstream Charter",Georgia,"Times New Roman",Times,serif;
  --font-display:ui-serif,"Iowan Old Style",Charter,"Bitstream Charter",Georgia,"Times New Roman",Times,serif;
  --font-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display-weight:700;
  --display-tracking:-.015em;

  --paper:#fff;
  --sunken:#f4f5f7;
  --field:#fff;
  --card:#fff;
  --ink:#101114;
  --ink-soft:#3a3d44;
  --muted:#6a6e77;
  --rule:#e2e4e8;
  --rule-soft:#eef0f2;
  --rule-strong:#c3c7ce;

  /* Instinct's interface is a text message, so the signal colour is the message
     bubble. The bubble green itself is only ever a fill — it is 2.2:1 on white,
     so it can never carry text. The deep green does that, at 5.9:1 on white and
     5.2:1 on the silver panel. Graphite and silver still carry the structure. */
  --accent:#15743a;
  --accent-ink:#0f5a2c;
  --accent-soft:#e6f6ec;
  --signal:#34c759;
  --mark-bg:var(--ink);
  --band-tint:#f1f2f5;
  --band-dark:#1b1d21;

  --chip-neutral:#eff1f4;
  --chip-bg:transparent;
  --chip-border:#c3c7ce;

  /* The app-icon squircle from instinct.com, carried through the interface. */
  --radius:10px;
  --chip-radius:8px;
  --mark-radius:27.5%;
  --rail:236px;
  --brief-rule:var(--accent);
  --card-gap:20px;
  --wrap:1100px;
}

/* ---- Display at scale ---- */
.brand-instinct h1{font-size:clamp(34px,5.2vw,62px);letter-spacing:-.022em;line-height:1.06}
.brand-instinct .home-header h1{max-width:15ch}
.brand-instinct .home-header .standfirst{max-width:44ch;font-size:var(--step-2)}
.brand-instinct .module>h2{font-size:32px}
.brand-instinct .task-header .standfirst{font-size:25px;line-height:1.4}
/* Set in type rather than behind a stand-in app badge. The product name is in
   ink, this guide's half is in silver, so the relationship reads at a glance. */
.brand-instinct .wordmark-name{font-size:21px;letter-spacing:-.02em}

/* ---- Section grounds ----
   Full bleed with no horizontal overflow: the shadow paints past the wrapper,
   the clip stops it becoming scrollable width. */
.brand-instinct [data-band]{position:relative;padding:84px 0;margin:var(--space-section) 0}
/* main is a BFC (overflow-x:clip), so a trailing band's bottom margin cannot
   collapse into the footer's top margin and the home page ends on 272px of
   white where every other page ends on 136px. */
.brand-instinct [data-band]:last-child{margin-bottom:0}
.brand-instinct [data-band='tint']{
  background:var(--band-tint);color:var(--ink-soft);
  box-shadow:0 0 0 100vmax var(--band-tint);
  clip-path:inset(0 -100vmax);
  border-top:2px solid var(--ink);
}
.brand-instinct [data-band='accent']{
  background:var(--band-dark);color:#fff;
  box-shadow:0 0 0 100vmax var(--band-dark);
  clip-path:inset(0 -100vmax);
}
.brand-instinct [data-band='accent'] h2,
.brand-instinct [data-band='accent'] h3,
.brand-instinct [data-band='accent'] a,
.brand-instinct [data-band='accent'] strong{color:#fff}
.brand-instinct [data-band='accent'] h3{font-size:clamp(25px,3.2vw,36px);line-height:1.15;margin-bottom:12px}
.brand-instinct [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-instinct [data-band='accent'] .pick-detail{padding-top:6px}
.brand-instinct [data-band='accent']>h2{font-size:var(--step-1);color:#5fd98a;margin-bottom:18px}
.brand-instinct [data-band='accent'] .pick-outcome,
.brand-instinct [data-band='accent'] .pick-note,
.brand-instinct [data-band='accent'] .dispatch-line{color:#ced4dd}
.brand-instinct [data-band='accent'] a{text-decoration:underline;text-underline-offset:3px}
.brand-instinct [data-band='accent'] :focus-visible{outline-color:#fff}

/* ---- Entries as tinted panels, not outlined boxes ---- */
.brand-instinct .task-card{
  background:var(--sunken);border-radius:12px;padding:28px 30px 26px;
  transition:background-color .14s,transform .14s,box-shadow .14s;
}
/* The card lifts off a solid slab of accent rather than gaining an outline: one
   hard-edged shadow, no blur and no spread, so the colour reads as a block the
   card is sitting on. */
.brand-instinct .task-card:hover,
.brand-instinct .task-card:focus-within{
  background:#f7f8fa;transform:translateY(-3px);
  box-shadow:0 6px 0 0 var(--accent);
}
.brand-instinct .task-card-title{line-height:1.18}
.brand-instinct .task-card-category{color:var(--accent);font-weight:650}
.brand-instinct .chip[aria-pressed=true]{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.brand-instinct .chip[aria-pressed=true] span{color:rgba(16,17,20,.62)}
.brand-instinct .task-card-outcome{color:var(--ink-soft)}
.brand-instinct .task-card[data-lead]{padding-bottom:30px}

/* Monochrome evidence: maker material is a filled seal, a public report is outlined.
   The written label carries the meaning; fill only reinforces it. */
.brand-instinct .evidence-chip{
  background:transparent;color:var(--muted);border:1px solid var(--rule-strong);
  font-size:11px;padding:4px 7px;
}
.brand-instinct .evidence-chip.evidence-official{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Links carry an underline as well as the ember, so colour is never the only cue. */
.brand-instinct .goal-link,
.brand-instinct .category-links a,
.brand-instinct .update-list a,
.brand-instinct .eyebrow a,
.brand-instinct .product-entry{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

.brand-instinct .pull p{color:var(--ink)}
.brand-instinct .checkpoints{background:var(--sunken);border-left:3px solid var(--accent)}
.brand-instinct .compare-table thead th{color:var(--ink);border-bottom-color:var(--ink)}

/* An oversized sign-off rather than another row of small print. */
.brand-instinct .footer{border-top-width:2px;border-top-color:var(--ink)}
.brand-instinct .footer-mark{max-width:38ch}
.brand-instinct .footer-mark strong{
  display:block;font-family:var(--font-display);font-size:clamp(28px,4.4vw,50px);
  line-height:1.02;letter-spacing:-.025em;color:var(--ink);margin-bottom:12px;
}

@media (max-width:760px){
  .brand-instinct [data-band]{padding:48px 0;margin:var(--space-section) 0}
  .brand-instinct .module>h2{font-size:25px}
  .brand-instinct .home-header h1{max-width:none}
  .brand-instinct [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:var(--step--1);opacity:.75}.recurring-entry{margin:26px 0 0;font-size:var(--step-0-quiet)} @media(max-width:600px){.task-flow{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   Rich task content. Layout first, so every block below is readable with the
   stylesheet only — no script runs to reveal any of it.
   --------------------------------------------------------------------------- */

/* The detailed flow keeps the numbered rhythm of the generic one but carries a
   checkpoint marker, which is a statement about where the task stops and asks,
   never a statement that a step has been done. */
.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);padding:0}
.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}
/* A glyph built from borders, so the marker is present even where a custom
   list-style would be dropped. */
.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}
.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}
/* The template caption is the label that stops these rows reading as a receipt,
   so it sits above the rows and is never the thing that scrolls away. */
.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);
}

.excerpts{margin-top:34px}
.excerpts>h3{font-size:var(--step-1);margin:0 0 14px}
.excerpt{margin:0 0 18px;padding:16px 18px;background:var(--sunken);border-radius:var(--radius)}
.excerpt:last-of-type{margin-bottom:14px}
.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)}

@media (max-width:720px){
  .variant-head{flex-wrap:wrap}
  .excerpt{padding:14px 15px}
  .excerpt blockquote p{font-size:var(--step-0)}
}
@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}