/* Cairn Lab, "PTT Sorting Office". Colours, type and space come from cairn-tokens.css (vendored
   verbatim). The CSP allows no inline styles, so every position and size lives here as a class. */
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/hanken-grotesk-normal-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/hanken-grotesk-italic-latin.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Tektur";src:url("/fonts/tektur-normal-latin.woff2") format("woff2");font-weight:400 900;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("/fonts/martian-mono-normal-latin.woff2") format("woff2");font-weight:400 600;font-stretch:75% 112.5%;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:var(--leading-body);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:break-word}
::selection{background:var(--selection);color:var(--ink)}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
code,.mono{font-family:var(--font-mono);font-stretch:var(--mono-stretch);font-size:.82em;font-weight:400}
h1,h2,h3{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);line-height:var(--leading-tight);text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,1.4rem + 2.2vw,2.8rem)}
h2{font-size:var(--step-2);margin:0 0 var(--space-3)}
/* Tektur only at 20px and up; smaller headings use the body face. */
h3{font-family:var(--font-body);font-size:var(--step-0);font-weight:700;line-height:1.35}
p{margin:0 0 var(--space-3)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.wrap{max-width:var(--page-max);margin:0 auto;padding-inline:var(--space-5)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--panel);color:var(--ink);padding:8px 12px;border:2px solid var(--ink)}
.skip:focus{left:16px}
.muted,.timestamp,.revision{color:var(--ink-3);font-size:var(--step--1)}

/* ---------- Masthead: the Fodor ground, orange with pink dots ---------- */
.mast{background-color:var(--lab-mast);background-image:var(--lab-img);background-size:var(--dot-cell) var(--dot-cell);color:var(--lab-mast-ink);border-bottom:2px solid var(--lab-mast-ink)}
.mast a{color:var(--lab-mast-ink)}
.mast-top{display:flex;align-items:center;gap:var(--space-4) var(--space-5);min-height:72px;flex-wrap:wrap;padding-block:var(--space-3)}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}
.gw{display:block;flex:none}
.lab-tag{display:inline-flex;align-items:center;padding:4px 5px;border:2px solid currentColor;border-radius:2px;background:var(--lab-mast)}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav a,.nav button{text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 12px;border-radius:var(--radius);color:var(--lab-mast-ink-2);background:transparent;border:0;cursor:pointer;line-height:1.4}
.nav a:hover,.nav button:hover{background:rgb(0 0 0 / .08);color:var(--lab-mast-ink)}
.nav a[aria-current="page"]{background:var(--lab-mast-ink);color:var(--lab-mast)}
.nav-access{display:contents}
.theme-btn{background:var(--lab-mast);border:1.5px solid var(--lab-mast-ink);color:var(--lab-mast-ink);font-weight:600;font-size:.88rem;border-radius:var(--radius);padding:7px 10px;cursor:pointer}
.page-head{padding-block:var(--space-2) var(--space-6)}
.page-head h1,.task-head h1{color:var(--lab-mast-ink)}
.crumb{font-weight:600;font-size:.95rem;color:var(--lab-mast-ink-2)}
.crumb a{color:var(--lab-mast-ink)}
.lede{max-width:var(--measure);color:var(--lab-mast-ink-2);font-size:1.05rem;margin:var(--space-3) 0 0}
.crumb,.lede{display:table;background:var(--lab-mast);padding:0 4px;margin-left:-4px}
.crumb{margin-bottom:var(--space-2)}

main{padding:var(--space-5) 0 var(--space-7)}
#detail:focus{outline:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.95rem;padding:10px 16px;border-radius:var(--radius);text-decoration:none;border:1px solid var(--rule-strong);background:var(--panel);color:var(--ink);cursor:pointer;white-space:nowrap;line-height:1.3}
.btn:hover{border-color:var(--ink)}
.btn:disabled{opacity:.6;cursor:progress}
.btn.primary{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.btn.primary:hover{background:var(--btn-hover)}
.task-head .btn{border-color:var(--lab-mast-ink);color:var(--ink)}
.task-head .btn.primary{background:var(--lab-mast-ink);color:var(--lab-mast);border-color:var(--lab-mast-ink)}
.text-button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;min-width:0;max-width:100%;overflow-wrap:anywhere}

/* ---------- Queue chrome ---------- */
.tabs{display:flex;gap:var(--space-1);border-bottom:2px solid var(--ink);margin-bottom:var(--space-5);overflow-x:auto;scrollbar-width:none}
.tabs button{flex:none;background:none;border:0;border-bottom:4px solid transparent;margin-bottom:-2px;padding:10px 14px;font-weight:600;color:var(--ink-2);cursor:pointer}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--open)}
.toolbar{display:flex;gap:var(--space-3) var(--space-4);align-items:end;flex-wrap:wrap;margin-bottom:var(--space-3)}
.toolbar>*{min-width:0}
/* Subsystem, scope and refresh: always shown on wider screens, a disclosure on a phone. */
.filters>summary{display:none}
.filter-fields{display:flex;gap:var(--space-3) var(--space-4);align-items:end;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.9rem;color:var(--ink-2)}
.field.search{flex:1 1 320px}
.field input,.field select,.field textarea{font-size:1rem;font-weight:400;padding:10px 12px;border:1px solid var(--rule-strong);background:var(--panel);color:var(--ink);border-radius:var(--radius);min-width:0}
.field input::placeholder{color:var(--ink-3)}
.field textarea{min-height:6rem;resize:vertical}
.status{font-size:var(--step--1);color:var(--ink-3);margin:0 0 var(--space-3)}
.status:empty{display:none}
/* A notice is a slip: a full rule all round and a dotted orange head naming the problem. */
.alert{border:1px solid var(--open);background:var(--panel);color:var(--ink);border-radius:var(--radius);margin-bottom:var(--space-4);overflow:hidden}
.alert-head{margin:0;padding:8px var(--space-4);background-color:var(--lab-mast);background-image:var(--lab-img);background-size:var(--dot-cell) var(--dot-cell);color:var(--lab-mast-ink);font-weight:700;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--lab-mast-ink)}
.alert-head span{background:var(--lab-mast);padding:1px 6px}
.alert-body{margin:0;padding:var(--space-3) var(--space-4);max-width:var(--measure)}
.howto{border:1px solid var(--rule);border-radius:var(--radius);background:var(--panel);margin-bottom:var(--space-5)}
.howto summary{cursor:pointer;padding:10px 16px;font-weight:600}
.howto ul{margin:0;padding:0 var(--space-5) var(--space-4) 2.2em;color:var(--ink-2)}
.howto li{margin-bottom:6px}

/* ---------- Overview ---------- */
.observer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.observer-grid>*{min-width:0}
#overview section{margin-bottom:var(--space-6)}
.section-intro{font-size:.95rem;color:var(--ink-2);max-width:var(--measure)}
.slips{border-top:2px solid var(--ink)}
.ob-task{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--rule)}
.ob-task>*{grid-column:2;min-width:0}
.ob-task .tag{grid-column:1;grid-row:1 / span 3}
.prio{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.95rem;color:var(--ink-2)}
.prio::before{content:"";width:10px;height:10px;flex:none;border:2px solid currentColor}
.prio.p1{color:var(--open-text)}
/* Urgent gets the filled marker; High, Security and other triaged rank-1 tiers an outlined one. */
.prio.p1::before{border-color:var(--open)}
.prio.tier-urgent::before{background:var(--open)}
.kind{display:block;font-size:var(--step--1);font-weight:600;color:var(--ink-3);margin-top:2px}
.kind.pr{color:var(--pr-text)}
.kind.issue{color:var(--open-text)}
.ob-task .title{font-family:var(--font-body);font-size:1.06rem;font-weight:700;line-height:1.35;margin:0;min-width:0;overflow-wrap:anywhere;text-wrap:pretty}
.ob-task .short{color:var(--link)}
.ob-task .title .text-button:hover .short{text-decoration:underline}
/* Tier groups: one header per tier with a grid-built count, instead of a badge on every row. */
.tier-head{display:flex;align-items:flex-end;gap:10px;padding:var(--space-4) 0 var(--space-2);border-bottom:1px solid var(--rule-strong)}
.tier-head .prio{font-size:1rem;color:var(--ink)}
.tier-head .prio.p1{color:var(--open-text)}
.tier-count{display:inline-flex;align-items:flex-end;color:var(--ink-2);padding-bottom:3px}
.tier-group:first-child .tier-head{padding-top:var(--space-3)}
.ob-task .subtitle{font-weight:500;overflow-wrap:anywhere}
.why{color:var(--ink-2);font-size:.97rem;margin:2px 0 0;overflow-wrap:anywhere}
.facts{display:flex;gap:4px 14px;flex-wrap:wrap;font-size:var(--step--1);color:var(--ink-3);margin:6px 0 0}
.facts>*{min-width:0;overflow-wrap:anywhere}
/* GitHub changes: one line each; the title is clipped, the kind and time always show. */
.changes{list-style:none;margin:0;padding:0}
.changes{border-top:2px solid var(--ink)}
.changes .changes{border-top:0}
.change{display:flex;align-items:baseline;gap:6px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:.95rem;min-width:0}
.change-title{display:block;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.change-title .short{color:var(--link);font-weight:600}
.change-title:hover .short{text-decoration:underline}
.change-meta{display:flex;flex:0 1 auto;max-width:55%;gap:4px;color:var(--ink-3);font-size:var(--step--1);white-space:nowrap}
.change-what{min-width:0;overflow:hidden;text-overflow:ellipsis}
.change-run{border-bottom:1px solid var(--rule)}
.change-run summary{cursor:pointer;padding:9px 0;font-size:.95rem;font-weight:600;color:var(--link)}
.change-run .change:last-child{border-bottom:0}
.side-note{color:var(--ink-3);font-size:.95rem;border-top:2px solid var(--ink);padding-top:var(--space-3);margin:0}
.facts .here{color:var(--pr-text);font-weight:600}
.empty-state{padding:var(--space-5);border:1px dashed var(--rule-strong);border-radius:var(--radius);color:var(--ink-2);background:var(--panel)}
.more{margin-top:var(--space-4)}
.result{padding:var(--space-3) 0;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.result header{display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.result p{margin:4px 0 0;white-space:pre-wrap}
.attempt{border:1px dashed var(--attempt);border-radius:var(--radius);padding:var(--space-2) var(--space-3);margin:var(--space-3) 0;overflow-wrap:anywhere}
.attempt p{margin:4px 0 0;white-space:pre-wrap}
.presence{color:var(--ink-3);font-size:var(--step--1)}
.progress{font-size:.95rem}
.source-health{border:1px solid var(--open);background:var(--open-soft);padding:var(--space-2) var(--space-3);margin-top:var(--space-2);font-size:.92rem;border-radius:var(--radius);overflow-wrap:anywhere}
.source-health p{margin:2px 0 0}
.notice{font-weight:600}

/* ---------- Grid-built numerals and the stamp ---------- */
.step{display:flex;align-items:flex-end;gap:10px;font-size:var(--step-1);margin-bottom:var(--space-3)}
.stamp{display:inline-flex;align-items:flex-end;flex:none;padding:6px;background-color:var(--stamp-face);background-image:radial-gradient(circle,var(--stamp-dot) .85px,transparent 1px);background-size:3px 3px;background-position:1.5px 1.5px;border:2px solid var(--stamp-edge);color:var(--stamp-ink);border-radius:1px}

/* ---------- Task view ---------- */
main.task-open{padding-top:0}
.task-head{background-color:var(--lab-mast);background-image:var(--lab-img);background-size:var(--dot-cell) var(--dot-cell);color:var(--lab-mast-ink);border-bottom:2px solid var(--lab-mast-ink);padding-block:var(--space-3) var(--space-6)}
.task-head-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4) var(--space-6);align-items:end}
.task-head-grid>*{min-width:0}
.title-row{display:flex;gap:var(--space-4);align-items:center;min-width:0}
.title-row>div{min-width:0}
.task-head h1{overflow-wrap:anywhere}
.task-head h1,.task-head .sub{background:var(--lab-mast);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 4px;margin-left:-4px}
.task-head .sub{color:var(--lab-mast-ink-2);font-size:1.05rem;font-weight:500;line-height:1.7;overflow-wrap:anywhere}
.task-head .detail-error{color:var(--lab-mast-ink);background:var(--lab-mast);display:table;padding:0 4px;margin-left:-4px;font-weight:600}
/* The task head continues the masthead, so no seam between them, and agent sign-in lives in the head. */
body:has(main.task-open) .mast{border-bottom:0}
body:has(main.task-open) .nav a[href="/login"]{display:none}
.task-head .sub-wrap{margin:var(--space-2) 0 0}
.actions{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.back{display:inline-flex;align-items:center;gap:6px;background:var(--lab-mast);border:0;padding:4px 6px;margin:0 0 var(--space-3) -6px;font-weight:600;color:var(--lab-mast-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.task-body{padding-top:var(--space-6)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-6);align-items:start}
.layout>*{min-width:0}
.slipcard{background:var(--panel);border:1px solid var(--rule);border-radius:4px;overflow:hidden;margin-bottom:var(--space-6)}
.slip-head{display:flex;justify-content:space-between;gap:var(--space-1) var(--space-4);align-items:center;flex-wrap:wrap;padding:11px 20px;background-color:var(--lab-mast);background-image:var(--lab-img);background-size:var(--dot-cell) var(--dot-cell);color:var(--lab-mast-ink);font-weight:700;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--lab-mast-ink)}
.slip-head span{background:var(--lab-mast);padding:1px 6px}
.slip-head .narrow{display:none}
/* Both step numbers are rendered; the one matching the layout's reading order shows. */
.step .n-wide{display:inline-flex;align-items:flex-end}
.step .n-narrow{display:none;align-items:flex-end}
.slip-note{padding:20px;max-width:var(--measure)}
.slip-note .actions{margin-top:var(--space-3)}
.slip-rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr)}
.slip-rows>div{padding:20px;border-right:1px solid var(--rule);min-width:0}
.slip-rows>div:last-child{border-right:0}
.slip-rows p{margin-bottom:var(--space-2)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.box{width:16px;height:16px;border:2px solid var(--ink-2);border-radius:2px;margin-top:4px}
.verd{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.verd span{font-size:var(--step--1);font-weight:700;border:1px solid var(--rule-strong);padding:1px 8px;border-radius:2px;color:var(--ink-2)}
.hint{font-size:.95rem;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:10px;margin-top:12px}
.start{background:var(--start-bg);color:var(--start-ink)}
.start .step{color:var(--start-ink)}
.start p{color:var(--start-ink-2)}
.start a:not(.btn){color:var(--start-ink)}
.copyrow{display:flex;align-items:stretch;margin:14px 0;border:2px solid var(--start-ink);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.copyrow code{flex:1;min-width:0;padding:10px 12px;color:var(--ink);font-size:.8rem;overflow-wrap:anywhere;line-height:1.5}
.copyrow button{flex:none;font-weight:700;font-size:.95rem;background:var(--copy-btn);color:var(--copy-btn-ink);border:0;border-left:2px solid var(--start-ink);padding:0 16px;cursor:pointer}
.copyrow button:hover{filter:brightness(1.06)}
/* The row clips its corners, so the Copy ring sits inside the button, in ink on the orange face. */
.copyrow button:focus-visible{outline:3px solid var(--copy-btn-ink);outline-offset:-6px;border-radius:2px}
/* The default focus blue is too faint on the start panel in both themes. */
.start :focus-visible{outline-color:var(--start-ink)}
.start .btn.primary{background:var(--start-ink);color:var(--start-bg);border-color:var(--start-ink)}
.block{margin-bottom:var(--space-6)}
.h2n{font-family:var(--font-body);font-weight:600;font-size:1rem;color:var(--ink-3);margin-left:8px}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:18px}
.panel h2{font-size:var(--step-1);margin-bottom:var(--space-2)}
.panel>:last-child{margin-bottom:0}
.rail{display:flex;flex-direction:column;gap:18px}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:.95rem;margin:0}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.adds{color:var(--fix-text);font-weight:600}
.dels{color:var(--open-text);font-weight:600}
.connected{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:.95rem}
.connected b{display:block;font-weight:700;color:var(--ink)}
.connected p{margin:2px 0 0}
.boundary{font-size:.95rem;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:14px;margin:0}
.body-md{position:relative;overflow-wrap:anywhere}
.body-md.clip{max-height:32em;overflow:hidden}
.body-md.clip::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(transparent,var(--panel))}
.body-md h4{font-size:1.05rem;margin:18px 0 6px}
.body-md h4:first-child{margin-top:0}
.body-md pre{background:var(--sunk);border:1px solid var(--rule);border-radius:3px;padding:10px 12px;overflow-x:auto;white-space:pre}
.body-md pre code{font-size:.8rem}
.body-md ul,.body-md ol{padding-left:1.3em}
.body-md blockquote{margin:0 0 var(--space-3) var(--space-4);color:var(--ink-2);font-style:italic}
.toggle-body{margin-top:12px}
.comments{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.comments li{padding:12px 0;border-bottom:1px solid var(--rule)}
.comments .who{font-weight:600}
.comments p{margin:4px 0 0;color:var(--ink-2);font-size:.97rem;overflow-wrap:anywhere}
details.fold{border:1px solid var(--rule);border-radius:4px;background:var(--panel);margin-bottom:var(--space-3)}
details.fold>summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"Show";color:var(--link);font-weight:600}
details.fold[open]>summary::after{content:"Hide"}
details.fold .inner{padding:0 18px 16px;overflow-wrap:anywhere}
.task-context{border-top:1px solid var(--rule);padding:8px 0}
.task-context>summary{cursor:pointer;font-weight:600}
.source-entry{padding:8px 0;border-bottom:1px solid var(--rule)}
.source-entry p{white-space:pre-wrap;overflow-wrap:anywhere}
form .field{margin-bottom:var(--space-3)}
.loading{padding:var(--space-6) 0;color:var(--ink-2)}
.busy{padding-block:var(--space-7)}
.busy p{color:var(--ink-2);margin-top:var(--space-3)}
.foot{border-top:1px solid var(--rule);padding:var(--space-5) 0 var(--space-7);color:var(--ink-3);font-size:var(--step--1)}
.foot p{margin:0 0 4px}
#message{position:fixed;right:16px;bottom:16px;max-width:min(420px,calc(100vw - 32px));background:var(--ink);color:var(--ground);padding:12px 16px;border-radius:var(--radius);z-index:20}

/* ---------- Shared sign-in ---------- */
.login-card{max-width:560px;margin:var(--space-7) auto}
.login-card form{display:grid;gap:var(--space-3);margin:var(--space-5) 0}
.login-card .btn{justify-self:start}

@media (max-width:1000px){
 .layout,.observer-grid{grid-template-columns:1fr}
 .slip-rows{grid-template-columns:1fr}
 .slip-rows>div{border-right:0;border-bottom:1px solid var(--rule)}
 .slip-rows>.start{order:-1}
 .step .n-wide{display:none}
 .step .n-narrow{display:inline-flex}
 .task-head-grid{grid-template-columns:1fr}
 /* One column: the slip, then the rail, then the long reading. */
 .layout{display:flex;flex-direction:column;align-items:stretch}
 .layout>div:first-child{display:contents}
 .layout>div:first-child>*{order:2;min-width:0}
 .layout>div:first-child>.slipcard{order:0}
 .rail{order:1;margin-bottom:var(--space-6)}
}
@media (max-width:640px){
 body{font-size:16px}
 .wrap{padding-inline:var(--space-4)}
 .mast-top{gap:var(--space-2) var(--space-3)}
 .nav{order:3;margin-left:0;width:100%}
 .nav a,.nav button{padding:6px 8px;font-size:.9rem;white-space:nowrap}
 .theme-btn{margin-left:auto;padding:5px 8px}
 .page-head{padding-bottom:var(--space-5)}
 h1{font-size:1.85rem}
 .stamp{background-image:none}
 .ob-task{grid-template-columns:1fr}
 .ob-task>*,.ob-task .tag{grid-column:1;grid-row:auto}
 .ob-task .tag{display:flex;gap:10px;align-items:baseline}
 .kind{margin:0}
 /* The first task sits close to the top: filters fold away, tabs wrap, the reading guide moves below the list. */
 #queue{display:flex;flex-direction:column}
 #queue>.howto{order:1;margin:var(--space-5) 0 0}
 .tabs{flex-wrap:wrap;overflow:visible;margin-bottom:var(--space-4)}
 .tabs button{padding:8px 10px}
 .toolbar .field.search{flex-basis:100%}
 .filters{flex-basis:100%}
 .filters>summary{display:list-item;cursor:pointer;font-weight:600;font-size:.95rem;color:var(--ink-2);padding:6px 0}
 .filter-fields{margin-top:var(--space-2)}
 .filter-fields .field{flex:1 1 140px}
 .title-row{align-items:flex-start;flex-direction:column;gap:var(--space-3)}
 .slip-rows>div{padding:16px}
 /* One plate on one line: "Routing slip · PR review · Gateway", clipped rather than wrapped. */
 .slip-head{display:block;padding:10px 16px;font-size:.78rem;letter-spacing:.09em}
 .slip-head .wide{display:none}
 .slip-head .narrow{display:inline-block;max-width:100%;vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .slip-note{padding:16px}
 .copyrow code{font-size:.75rem}
}
/* The default focus colour is too faint on the orange mast and task head. */
.mast :focus-visible,.task-head :focus-visible{outline-color:var(--lab-mast-ink)}