/* The parts every page is built from. */
.card{display:block;width:100%;margin:0 0 12px;border:0;border-radius:12px;background:var(--card);box-shadow:var(--ring);text-align:left}
.pad{padding:14px 16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 4px}
.card-head h2,.h2{font-size:13px;line-height:20px;font-weight:650;color:var(--ink)}
.sub{font-size:12px;color:var(--t2)}
.faint{color:var(--t3)}
.lede{margin:0 0 12px;color:var(--t2)}
.section{margin:20px 0 8px;font-size:13px;font-weight:650;color:var(--ink)}
.section small{margin-left:6px;font-size:12px;font-weight:450;color:var(--t2)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid2>.card{margin:0}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px;margin-bottom:12px}
.row2>.card{margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:8px;
  background:var(--pill);box-shadow:var(--ring);font-weight:550;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .15s}
.btn:hover{background:var(--btn-hover)}
/* One step darker than the brand green: white 13px text on #4E8A00 was 4.23:1. */
.btn.primary{background:#467C00;color:#fff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 rgba(0,0,0,.08)}
.btn.primary:hover{background:#3F7000}
.btn[disabled]{opacity:.55;cursor:default}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.seg{display:inline-flex;gap:4px;flex-wrap:wrap}
.seg button,.seg a{height:28px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--t2);font-weight:550;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.seg button:hover,.seg a:hover{background:var(--hover);color:var(--t1)}
/* The chosen one keeps its white under the pointer: the press that chose it leaves the pointer on it. */
.seg [aria-pressed="true"],.seg [aria-current="page"],.seg [aria-pressed="true"]:hover,.seg [aria-current="page"]:hover{background:var(--pill);color:var(--ink);box-shadow:var(--ring)}
.seg.small button{height:24px;padding:0 8px;font-size:12px}

/* Numbers with their interval across the top of one card; each picks the chart. A tile stacks from
   its top, so the names and numbers of a row stay on one line whatever wraps under one of them. */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));box-shadow:inset 0 -1px 0 var(--hair)}
.kpis button{display:grid;align-content:start;padding:12px 16px;border:0;border-left:1px solid var(--hair);background:none;text-align:left;transition:background .15s}
.kpis button:first-child{border-left:0;border-radius:12px 0 0 0}
.kpis button:last-child{border-radius:0 12px 0 0}
.kpis button:hover{background:var(--soft)}
.kpis button[aria-pressed="true"]{background:var(--soft)}
.kpis span{font-size:12.5px;font-weight:550;color:var(--t1)}
.kpis b,.big{display:block;margin-top:4px;font-size:22px;line-height:28px;font-weight:650;letter-spacing:-.3px;color:var(--ink)}
.big small,.kpis b small{margin-left:6px;font-size:12px;font-weight:450;letter-spacing:0;color:var(--t3)}
.kpis b.faint{font-size:13px;font-weight:450;letter-spacing:0;color:var(--t3)}
/* A rate's range and count, and the pooled checks under Kept every rule, each on a line of its own. */
.kpis button>small{display:block;font-size:12px;color:var(--t2)}
.kpis em,.move{display:block;margin-top:2px;font-style:normal;font-size:12px;color:var(--t2)}
.up{color:var(--up)!important;font-weight:550}
/* Worse is ink and heavier, never a grey that reads as no change; red stays for blocked. */
.down{color:var(--ink)!important;font-weight:650}

.chart{position:relative;padding:14px 16px 10px}
.plot{position:relative;margin-left:36px}
.plot svg{display:block;width:100%;height:150px;overflow:visible;cursor:crosshair}
.grid{stroke:var(--grid);stroke-width:1;stroke-dasharray:1 5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pt{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1.6px var(--series);pointer-events:none}
.l{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.l.now{stroke:var(--series);stroke-width:2}
.l.prev{stroke:var(--prev);stroke-width:2;stroke-dasharray:.1 4}
.marker{position:absolute;top:0;bottom:0;left:var(--x);width:1px;text-decoration:none}
.marker::before{content:'';position:absolute;top:0;bottom:0;left:0;border-left:1px dashed var(--t3)}
.marker span{position:absolute;top:-6px;left:5px;padding:0 6px;border-radius:5px;background:var(--pill);box-shadow:var(--ring);font-size:11px;line-height:17px;color:var(--t2);white-space:nowrap}
.marker:hover span{color:var(--ink)}
.marker.flip span{left:auto;right:5px}
/* Each label centred on the gridline it names. Spread apart, the 0 stood 11px above the zero line and
   a day with one conversation read as none. */
.scale{position:absolute;left:-36px;top:0;bottom:0;font-size:11px;line-height:1;color:var(--axis);pointer-events:none}
.scale span{position:absolute;top:0;left:0;transform:translateY(-50%)}
.scale span:nth-child(2){top:50%}
.scale span:nth-child(3){top:100%}
.axis{display:flex;justify-content:space-between;margin:8px 0 0 36px;font-size:11px;color:var(--axis)}
.legend{display:flex;gap:16px;padding:0 16px 12px;font-size:12px;color:var(--t2)}
.legend i{display:inline-block;width:14px;height:0;margin-right:6px;vertical-align:middle;border-top:2px solid var(--series)}
.legend i.prev{border-top:2px dotted var(--prev)}
.tip{position:absolute;z-index:5;min-width:200px;padding:12px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:0 2px 4px rgba(0,0,0,.1);font-size:12px;line-height:16px;pointer-events:none}
.tip b{display:block;margin-bottom:8px;font-size:13px;font-weight:650;color:var(--ink)}
.tip span{display:flex;justify-content:space-between;gap:16px;color:var(--ink);font-weight:550}
.tip span+span{margin-top:4px}
.tip em{font-style:normal;font-weight:450;color:var(--t2)}
.tip .was{color:var(--t2)}
.hair{position:absolute;width:1px;background:var(--crosshair);pointer-events:none}
.dotx{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 2px var(--card);pointer-events:none}

/* Bars, worst first, each a bar of its own rate, in the run page's shape: the name over a track
   filled to its share, its number beside the track. */
.bars{display:grid;gap:14px;padding:6px 16px 16px}
.barrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:-4px -6px;padding:4px 6px;border:0;border-radius:6px;background:none;text-align:left;text-decoration:none}
a.barrow:hover,button.barrow:hover{background:var(--soft)}
.barrow span{flex:0 0 100%;font-size:12px;line-height:16px;color:var(--t2);overflow-wrap:anywhere}
/* The bar itself, the way Shopify's analytics draw one: thin, no track behind it, round at its end,
   its number right after it. Its length is its share of the room beside the widest number. A share
   of none draws no bar, never a tick. */
.barrow i,.live-bars .bar i{display:block;flex:none;width:max(4px,calc((100% - var(--room,15em)) * var(--f,0)));height:12px;border-radius:2px 4px 4px 2px;background:var(--fill,var(--series-across));transition:width .5s}
.barrow.grey i{background:var(--down)}
.barrow b{font-size:13px;line-height:20px;font-weight:650;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.barrow b small{margin-left:6px;font-size:12px;font-weight:450;color:var(--t2)}
/* The group served worst is named by a word, never by a grey bar that reads as not read. */
.barrow b em{margin-right:6px;font-style:normal;font-size:12px;font-weight:650;color:var(--ink)}
.split-none{padding:4px 16px 14px;color:var(--t2)}

/* Production's ring (app/field/overview.ts donut): its count in the middle, its parts listed under it
   in the part colours, grey for the rest. */
.donut-wrap{display:grid;gap:16px;margin-top:12px}
.donut-ring{position:relative;justify-self:center;width:148px;height:148px}
.donut{display:block;width:148px;height:148px;transform:rotate(-90deg)}
.donut-ring p{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;margin:0}
.donut-ring b{font-size:20px;line-height:24px;font-weight:650;color:var(--ink)}
.donut-ring span{font-size:11px;line-height:14px;color:var(--t2)}
.d0{stroke:#13ACF0;background:#13ACF0}.d1{stroke:#6A42E9;background:#6A42E9}.d2{stroke:#D147AC;background:#D147AC}.d3{stroke:var(--o-unread);background:var(--o-unread)}
.legend2{list-style:none;padding:0;display:grid;gap:4px}
.legend2 .leg-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto 3em;align-items:center;gap:10px;margin:0 -6px;padding:3px 6px;border-radius:6px;font-size:13px;line-height:20px;color:var(--ink);text-decoration:none}
a.leg-row:hover{background:var(--soft)}
.legend2 .leg-row>span{overflow-wrap:anywhere}
.legend2 i{width:12px;height:12px;border-radius:2px}
.legend2 b{font-weight:650;color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.legend2 small{font-size:12px;color:var(--t2);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* A list of rows inside one card, divided by hairlines. The facts column is as wide as its words up to
   a third, so a long one wraps instead of squeezing the row's own words to a word a line. */
.list{list-style:none;padding:0}
.list>li{border-top:1px solid var(--hair)}
.list>li:first-child{border-top:0}
.item{display:grid;grid-template-columns:minmax(0,1fr) fit-content(32%);align-items:center;gap:4px 16px;width:100%;padding:11px 16px;border:0;background:none;text-align:left;text-decoration:none}
a.item:hover,button.item:hover{background:var(--soft)}
.list>li:first-child .item{border-radius:12px 12px 0 0}
.list>li:last-child .item{border-radius:0 0 12px 12px}
.list>li:only-child .item{border-radius:12px}
.item .what{min-width:0}
.item>:only-child{grid-column:1 / -1}
.item .what b{display:block;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
/* A row that opens its subject in one press may stop at two lines; the press shows the rest. */
a.item .what b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .what span{display:block;font-size:12px;color:var(--t2)}
.item .num{text-align:right;color:var(--t2);font-size:12px;overflow-wrap:anywhere}
.item .num b{display:block;font-size:14px;font-weight:650;color:var(--ink)}
/* A long list's own row: View all at its foot; opened, the range with Newer, Older and Show fewer
   above and below its rows. */
.pager{display:flex;align-items:center;gap:8px;padding:6px 16px;font-size:12px;color:var(--t2)}
/* Production's conversations as the run page lists its own: a head row, the opening and who, the
   rules broken, the ending as a chip, and when. Every row shares the list's columns. */
.convs{display:grid;grid-template-columns:minmax(0,1fr) fit-content(34%) auto auto;column-gap:24px;overflow:hidden}
.convs>li,.convs .item.conv{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center}
.convs>li.pager{display:flex}
.convs>.conv-head{height:36px;padding:0 16px;border-top:0;background:var(--soft);box-shadow:inset 0 -1px 0 var(--hair);font-size:12px;font-weight:550;color:var(--t2)}
.convs>.conv-head+li{border-top:0}
.convs>.conv-head span:nth-child(n+3){text-align:right}
.convs .item.conv{padding:10px 16px;border-radius:0}
.convs .item.conv .what b{font-weight:450}
.conv-rules{font-size:12px;line-height:17px;color:var(--t2);overflow-wrap:anywhere}
.chip{justify-self:end;display:inline-flex;align-items:center;padding:2px 8px;border-radius:8px;font-size:12px;line-height:16px;font-weight:550;white-space:nowrap}
.conv-when{text-align:right;font-size:12px;color:var(--t2);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:760px){.convs{grid-template-columns:minmax(0,1fr) auto}.convs>.conv-head span:nth-child(2),.convs>.conv-head span:nth-child(4),.conv-rules,.conv-when{display:none}}
.pager span{margin-left:auto}
.pager .btn{height:28px}
.pager .linkish{padding:6px 0;color:var(--ink)}
.pager .linkish:hover{text-decoration:underline;text-underline-offset:3px}

.state{display:grid;justify-items:start;gap:8px;padding:22px 20px}
.state h2{font-size:15px;font-weight:650;color:var(--ink)}
.state p{max-width:56ch;color:var(--t2)}
/* An empty page to the measure of Shopify's own (Polaris EmptyState): 20px over the drawing, 64px
   under the button, the words no wider than 400px, everything down the middle. The drawing is
   drawn in the Live globe's material (app/art/) on a grid of 50, so its dots land whole. */
.empty{display:grid;justify-items:center;padding:20px 24px 64px;text-align:center}
.empty .art{display:block;width:200px;height:200px;margin:8px 0 14px}
.empty h2{font-size:14px;line-height:20px;font-weight:650;color:var(--ink)}
.empty p{max-width:400px;margin-top:6px;color:var(--t2)}
.empty .btn{margin-top:16px}
.skel{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--skel) 0%,var(--skel-hi) 50%,var(--skel) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips span{padding:1px 8px;border-radius:6px;background:var(--soft);font-size:12px;color:var(--t2)}
.quote{padding:8px 10px;border-radius:8px;background:var(--ground);color:var(--ink)}
.quote .who{display:block;font-size:12px;color:var(--t3)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.steps li{padding-top:8px;border-top:1px solid var(--hair);font-size:12px;color:var(--t2)}
.steps li.done b{color:var(--acc-ink)}
.steps li.done b::before{content:'✓ '}
.steps b{display:block;font-size:13px;font-weight:650;color:var(--ink)}
.steps .btn{margin-top:6px;height:28px}
.progress{height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.progress i{display:block;height:100%;width:var(--v);background:var(--acc);border-radius:4px;transition:width .4s ease-out}
.note{font-size:12px;color:var(--t3)}
.toast{position:fixed;left:50%;bottom:24px;z-index:20;transform:translateX(-50%);padding:8px 14px;border-radius:10px;background:var(--tip);color:var(--on-tip);font-weight:550}

@media (max-width:760px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis button{padding:10px 12px;border-radius:0!important}
  .kpis button:nth-child(3){border-left:0}
  .kpis button:nth-child(n+3){border-top:1px solid var(--hair)}
  .kpis b{font-size:19px;line-height:24px}
  .plot svg{height:110px}
  .grid2,.row2,.steps{grid-template-columns:minmax(0,1fr)}
  .bars{grid-template-columns:minmax(0,1fr) auto}
  .barrow{gap:2px 10px}
  .item{grid-template-columns:minmax(0,1fr)}
  .item .num{text-align:left}
  .item .num b{display:inline;margin-right:6px}
}

.open-issue{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:center;text-decoration:none;color:var(--t2);transition:background .15s}
/* The card keeps its ring under the pointer: a hover shadow in its place lost the card's edge in dark. */
.open-issue:hover{background:var(--soft)}
.open-issue b{display:block;font-weight:650;color:var(--ink)}
.move-big{text-align:right;font-size:12px}
.move-big b{font-size:22px;line-height:28px;letter-spacing:-.3px}
.move-big small{margin-left:6px;font-size:12px;font-weight:450;color:var(--t3)}
@media (max-width:760px){.open-issue{grid-template-columns:minmax(0,1fr)}.move-big{text-align:left}}

.profile{display:flex;flex-direction:column;gap:8px}
.prof-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.prof-head b{font-size:14px;font-weight:650;color:var(--ink)}
.prof-head span{flex:none;font-size:12px;color:var(--t3)}
.prof-does{color:var(--t2)}
.prof-got{margin-top:auto;padding-top:10px;border-top:1px solid var(--hair);color:var(--t2)}
.prof-got b{font-size:20px;font-weight:700;letter-spacing:-.2px;color:var(--ink)}
.prof-got span{display:block;font-size:12px;color:var(--t2)}
.prof-does b{font-weight:600;color:var(--ink)}
/* The profile served worst is named in words on its own white card: a grey ground read as switched off. */
.prof-worst{font-size:12px;font-weight:650;color:var(--ink)}
.metric{overflow:hidden}
.what-it-is{margin-top:6px;color:var(--t3)}
.list.rules{border-top:1px solid var(--hair)}
.list.rules>li:first-child .item{border-radius:0}

.inv-rule{color:var(--ink);font-size:14px;line-height:21px}
.inv-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:14px 0 4px;border-radius:10px;overflow:hidden;background:var(--hair)}
.inv-nums p{padding:10px 12px;background:var(--soft);font-size:12px;color:var(--t2)}
.inv-nums b{display:block;font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.2px;color:var(--ink)}
.inv-nums p:last-child b{font-size:15px;line-height:21px;padding:3px 0 4px;font-weight:650}
.inv-nums span{display:block}
.inv-from{margin-top:2px;font-size:12px;color:var(--t2);overflow-wrap:anywhere}
.inv-from code{color:var(--t2)}
/* Each example opens its conversation at the reply that broke the rule. */
.convo{display:block;margin-top:6px;padding:8px 12px;border-radius:8px;background:var(--ground);color:inherit;text-decoration:none;overflow-wrap:anywhere;transition:background .15s}
.convo:hover{background:var(--soft)}
.convo p{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:8px}
.inv-all{margin:8px -16px 0;border-block:1px solid var(--hair)}
.list.inv-all>li .item{border-radius:0}
.lede.gone{color:var(--ink)}
.convo p span{color:var(--t3)}
.convo .note{display:block;margin-top:2px}
.inv .section{margin-top:18px}
@media (max-width:760px){.inv-nums{grid-template-columns:minmax(0,1fr)}.convo p{grid-template-columns:minmax(0,1fr);gap:0}}
.no-curve{margin:14px 16px;padding:10px 12px;border-radius:8px;background:var(--soft);font-size:12px;color:var(--t2)}

/* A reply's markdown, in the run's drawer and on a production conversation: the lists and the
   paragraphs keep their own markers and spacing under any reset around them. */
.reply-md>*+*{margin-top:6px}
.reply-md ul{list-style:disc;padding-left:1.25em}
.reply-md ol{list-style:decimal;padding-left:1.5em}
.reply-md strong{font-weight:650}
.reply-md code,.reply-md pre{font-family:var(--mono);font-size:12px}
.reply-md pre{white-space:pre-wrap;overflow-wrap:anywhere}
.reply-md hr{border:0;border-top:1px solid var(--hair)}
/* The Lab: a run, its report, and every run kept. */
.connect .cmd{display:flex;align-items:center;gap:8px;width:100%;max-width:640px;padding:6px 6px 6px 12px;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--hair)}
.connect .cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap}

.run-head{overflow:hidden}
.kpis.static div{padding:12px 16px;border-left:1px solid var(--hair)}
.kpis.static div:first-child{border-left:0}
.run-foot{padding:10px 16px;font-size:12px;color:var(--t2)}
.tabs{margin:4px 0 12px}

.finding{display:grid;gap:6px;justify-items:start}
.finding-head{display:flex;justify-content:space-between;gap:12px;width:100%}
.finding-head b{font-size:14px;font-weight:650;color:var(--ink)}
.finding-head span{flex:none;font-size:12px;color:var(--t3)}
.finding-why{color:var(--t2)}
.finding .convo{width:100%}
.finding .btn{margin-top:4px}

.verdict{font-weight:650;color:var(--t2)}
.verdict.held{color:var(--acc-ink)}
.verdict.failed{color:var(--ink)}
.item[aria-expanded="true"]{background:var(--soft)}
.transcript{display:grid;gap:4px;padding:6px 16px 14px;background:var(--soft)}
.transcript p{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:8px;white-space:pre-line}
.transcript p span{color:var(--t3)}
.transcript .note{display:block}
.list>li:last-child .transcript{border-radius:0 0 12px 12px}

.live{display:grid;gap:10px}
.live-head{display:flex;justify-content:space-between;gap:12px}
.live-head b{font-size:16px;font-weight:650;color:var(--ink)}
.live-head span{font-size:12px;color:var(--t3)}

/* Two runs side by side: the verdict first, then each measure with its range beside its name. The
   value columns are as wide as their range line, which no fixed width held at four-digit counts. */
.cmp-verdict{padding:0 16px 4px;color:var(--t2)}
.cmp-body{display:grid;grid-template-columns:minmax(0,16em) auto auto minmax(0,1fr);column-gap:24px;padding:4px 16px 10px}
.cmp-row{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:start;padding:8px 0;border-top:1px solid var(--hair)}
.cmp-row .cell{text-align:right;font-size:12px;color:var(--t2);white-space:nowrap}
.cmp-row .cell b{display:block;font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp-row .cell span{display:block}
.cmp-row small,.runs .num small{font-size:12px;font-weight:450;color:var(--t2)}
.cmp-top{border-top:0;padding:4px 0;font-size:12px;color:var(--t2)}
.cmp-top span:nth-child(2),.cmp-top span:nth-child(3){text-align:right}
/* Every run: one grid, so the numbers and the Compare buttons line up down the list. A row lights
   whole under the pointer, though only its link opens the run. */
.runs{display:grid;grid-template-columns:minmax(0,1fr) auto}
.runs>li{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center}
.runs>li:has(>a.item:hover){background:var(--soft)}
.runs a.item:hover{background:none}
.runs>li:first-child{border-radius:12px 12px 0 0}
.runs>li:last-child{border-radius:0 0 12px 12px}
.runs>li:only-child{border-radius:12px}
.runs .item{align-items:start}
.runs .num{font-variant-numeric:tabular-nums}
.runs .num b{white-space:nowrap}
.runs .pick{padding-right:16px}
.runs .pick:empty{padding:0}
.runs .pick .btn{height:28px}
/* The run being compared stays pressed in, so the list says which one the card above is showing. */
.runs .pick .btn[aria-pressed="true"],.runs .pick .btn[aria-pressed="true"]:hover{background:var(--press);box-shadow:none}
.runs .fix .item{padding-left:32px}

@media (max-width:760px){
  .kpis.static div:nth-child(3){border-left:0}
  .kpis.static div:nth-child(n+3){border-top:1px solid var(--hair)}
  .transcript p{grid-template-columns:minmax(0,1fr);gap:0}
}
.prod-gap{text-decoration:none;color:var(--ink);font-weight:550}
.prod-gap:hover{background:var(--soft)}
.prod-gap{display:grid;gap:4px}
.prod-gap a{color:var(--ink);font-weight:450;text-decoration:underline dotted var(--faint);text-underline-offset:4px}
.prod-gap a b{font-weight:700}
.prod-gap a:hover{text-decoration:underline}
.verdict.held.partial{color:var(--t2)}
.times{font-weight:450;color:var(--t3)}
.kpis.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.verdict.partial{color:var(--t2)}
@media (max-width:760px){.kpis.five{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis.five div:nth-child(odd){border-left:0}.kpis.five div:nth-child(even){border-left:1px solid var(--hair)}}

/* After a run: what the coding agent is doing at the left, the one thing to press at the right. */
.next-agent{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 16px;margin-bottom:10px}
.next-agent b{font-size:13px;font-weight:650;color:var(--ink)}
.next-agent p{color:var(--t2)}
/* Intelligence, while the run plays: not a notice but the step after this one, so it is headed,
   it is the app's black card, and nothing closes it. The blue line going round its edge says it is
   a thing to press. */
.next-prod{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;margin-bottom:12px;padding:12px 14px;border-radius:12px;background:var(--tip);color:var(--on-tip)}
.next-prod-head{grid-column:1;margin:0;font-size:12px;line-height:18px;font-weight:600;color:var(--on-tip);opacity:.55}
.next-prod-line{grid-column:1;margin:0;font-size:13px;line-height:20px;color:var(--on-tip)}
.next-prod .btn{grid-column:2;grid-row:1/3;height:32px;white-space:nowrap;text-decoration:none;background:var(--on-tip);color:var(--tip);font-weight:600;box-shadow:none}
.next-prod .btn:hover{opacity:.88}
.next-prod::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--turn,0deg),transparent 0 68%,var(--o-full) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:turn 3.2s linear infinite}
@property --turn{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes turn{to{--turn:360deg}}
@media (prefers-reduced-motion:reduce){.next-prod::before{animation:none;background:conic-gradient(var(--o-full) 0 100%);opacity:.5}}
@media (max-width:560px){.next-prod{grid-template-columns:minmax(0,1fr)}.next-prod .btn{grid-column:1;grid-row:auto;margin-top:8px;justify-self:start}}
.next-again{margin:-4px 0 12px;font-size:12px;color:var(--t2)}

/* The setup guide: the one card before the first run. Connect, then two steps whose rows change in place. */
.guide{position:relative;overflow:hidden}
/* The card's head from the copy press to Run and on through the run: the coding agent's own mark in
   its own colour, with nothing around it, and the one sentence that says where things stand. The
   ring turns only while work is under way. */
.act-head{display:flex;align-items:center;gap:10px;padding:16px 16px 12px}
.act-mark{flex:none;display:block;width:20px;height:20px}
.act-mark[hidden]{display:none}
.act-mark svg{display:block;width:20px;height:20px;fill:currentColor}
.act-said{flex:1;min-width:0;font-size:14px;line-height:20px;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.act-head .spin{flex:none;color:var(--t1)}
.guide-body.act-body{padding-left:16px}
.act-body .act-now{max-width:760px}
.act-connect,.act-after{display:grid;gap:10px;min-width:0}
.act-connect[hidden],.act-after[hidden],.act-foot[hidden]{display:none}
/* Run and what it costs stand on one line, and come and go together. */
.act-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.act-cost{color:var(--ink)}
/* On the run's page the same card goes on: a count and a bar that move as conversations finish. */
/* Stopping a run, beside its count: a word, then the two presses it takes. */
.act-stop{flex:none;font-size:12px;color:var(--t2)}
.act-stop:hover{color:var(--danger)}
.act-stop-ask{flex:none;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--t2)}
.act-stop-ask b{font-weight:600;color:var(--ink)}
.act-stop-ask .linkish:first-of-type{color:var(--danger);font-weight:600}
.act-stop-said{flex:none;font-size:12px;color:var(--t2)}
.act-count{flex:none;display:flex;align-items:center;gap:8px;min-height:20px;font-size:12px;font-weight:400;color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* The bar is the run's status and the way into its steps: pressable, a little taller under the
   pointer, and it keeps the shape of a bar. */
.act-bar{display:block;width:100%;padding:0;border:0;height:6px;overflow:hidden;border-radius:999px;background:var(--hair);cursor:pointer;transition:height .12s ease}
.act-bar:hover,.act-bar:focus-visible{height:10px}
.run-steps{display:grid;gap:0;margin-top:2px}
.run-steps>.reveal{padding:4px 0 2px}
.act-bar i{display:block;height:100%;border-radius:999px;transition:width .5s ease}
.run-ui>.card.guide{margin:0}
/* What a run that started early says of itself: plain sentences, in order, under Details. */
.act-notices{margin:0;gap:6px;font-size:13px;line-height:19px}
@media (prefers-reduced-motion:reduce){.act-bar i{transition:none}}
.guide-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px 8px}
.guide-head h2{font-size:14px;font-weight:650;color:var(--ink)}
.guide-head span{font-size:12px;color:var(--t2)}
.guide-bar i{transition:width .6s ease}
.guide-bar{margin:0 16px 6px}
.guide-steps{list-style:none;padding:0 0 4px}
/* A line between steps, none above the first: the head and the first step read as one. */
.guide-steps>li+li{border-top:1px solid var(--hair)}
.guide-row{display:flex;align-items:center;gap:10px;padding:11px 16px;color:var(--t2)}
.guide-row b{font-weight:550;color:var(--ink)}
.guide-steps>li.open .guide-row b{font-weight:650}
/* The task check, in our green: the dashed ring, the fill, the tick; the strike rides on the text. */
.tk{flex:none;width:20px;height:20px;overflow:visible}
.tk .ring{fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round}
.guide-steps>li.open .tk .ring{stroke:var(--t2)}
.tk .fill{fill:var(--acc);transform-box:view-box;transform-origin:12px 12px;transform:scale(0)}
.tk .tick{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.guide-row b{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 52%;background-size:0% 1.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.guide-steps>li.done .tk .ring{opacity:0}
.guide-steps>li.done .tk .fill{transform:scale(1)}
.guide-steps>li.done .tk .tick{stroke-dashoffset:0;opacity:1}
.guide-steps>li.done .guide-row b{background-size:100% 1.5px;color:var(--t2)}
/* A step that says what it did ("Reviewed your code") is not struck through: the words changed. */
.guide-steps.said>li.done .guide-row b,.guide-steps.said>li.ticking .guide-row b{background-size:0;animation:none}
/* A step under way turns its ring: work is happening on their machine and on ours. */
.guide-steps>li.busy:not(.done) .tk .ring{stroke:var(--t1);transform-box:view-box;transform-origin:12px 12px;animation:tk-turn 2.4s linear infinite}
@keyframes tk-turn{to{transform:rotate(360deg)}}
/* Ticked while watched: fill and pop, the tick draws, then the strike, then the nudge. */
.guide-steps>li.ticking .tk{animation:tk-pop .34s cubic-bezier(.22,1,.36,1) both}
.guide-steps>li.ticking .tk .ring{animation:tk-fade .24s cubic-bezier(.22,1,.36,1) both}
.guide-steps>li.ticking .tk .fill{animation:tk-fill .24s cubic-bezier(.22,1,.36,1) both}
.guide-steps>li.ticking .tk .tick{animation:tk-draw .22s cubic-bezier(.22,1,.36,1) .06s both}
.guide-steps>li.ticking .guide-row b{animation:tk-strike .38s cubic-bezier(.65,0,.35,1) .3s both}
.guide-steps>li.ticking .guide-row{animation:tk-nudge .3s cubic-bezier(.22,1,.36,1) .7s both}
@keyframes tk-pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes tk-fade{from{opacity:1}to{opacity:0}}
@keyframes tk-fill{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes tk-draw{from{stroke-dashoffset:1;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes tk-strike{from{background-size:0% 1.5px;color:var(--ink)}to{background-size:100% 1.5px;color:var(--t2)}}
@keyframes tk-nudge{0%{transform:none}35%{transform:translateX(8px)}70%{transform:translateX(-2px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.guide-steps>li.busy .tk .ring,.spin{animation:none}}
@media (prefers-reduced-motion:reduce){.guide-steps>li.ticking .tk,.guide-steps>li.ticking .tk *,.guide-steps>li.ticking .guide-row,.guide-steps>li.ticking .guide-row b{animation:none}}
.guide-body{display:grid;gap:10px;padding:2px 16px 16px 42px;max-width:720px}
/* What the product's own steps are doing, under their name: grey, one line, never a body. */
.guide-sub{margin:-6px 0 0;padding:0 16px 11px 46px;font-size:12px;line-height:18px;color:var(--t2)}
.guide-steps>li.done .guide-sub{color:var(--t2)}
.guide-body>p{color:var(--t2)}
/* A button in the card wraps rather than run past its edge: a yes that named three hosts was cut
   mid-word by the card. */
.guide-body .btn{white-space:normal;height:auto;min-height:32px;padding-block:6px;text-align:left}
.guide-body .cmd{display:flex;align-items:center;gap:8px;width:100%;padding:6px 6px 6px 12px;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--hair)}
.guide-body .cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap}
.guide-body .cmd[hidden]{display:none}
.hand-row{display:flex;flex-wrap:wrap;gap:8px}
.hand-row .btn svg{width:15px;height:15px;fill:currentColor;stroke:none}
.guide-body .list{margin:0}
.item.proof{align-items:start}
.item.proof .what span{white-space:normal}
.item.proof .problem{color:var(--ink)}
.held{display:block;color:var(--ink)}
/* The first run card's rows: a name at the left, a value at the right that changes in place. */
.guide-lede{padding:0 16px 10px;color:var(--t2)}
.guide-count{color:var(--ink);font-weight:550}
.guide-rows{list-style:none;margin:0;padding:0;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hair)}
.guide-rows[hidden],.guide-rows>li[hidden]{display:none}
.guide-rows>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:baseline;gap:4px 16px;padding:9px 12px}
.guide-rows>li+li{border-top:1px solid var(--hair)}
.guide-rows .k{min-width:0;color:var(--ink);font-weight:550;overflow-wrap:anywhere}
.guide-rows .k code{font-weight:500}
.guide-rows .v{min-width:0;color:var(--t2);overflow-wrap:anywhere}
.guide-rows .v b{font-weight:650;color:var(--ink)}
.guide-rows .v.good,.guide-rows .v.bad{color:var(--ink)}
.guide-rows .v .reveal{display:block;margin-top:4px}
/* The file, the line and the problem used to run together on one 12px line, so three of them read
   as a paragraph with code in it. Separated the way the rows above are separated, by a hairline and
   the space either side of it: this list sits inside a row inside a ringed card, and a border of its
   own would be the third box around one sentence. */
/* A row carrying a list stacks: the label is one or two words and was holding two fifths of the
   width empty beside a paragraph that had to wrap inside the rest. */
.guide-rows>li:has(.guide-problems){grid-template-columns:minmax(0,1fr)}
.guide-problems{list-style:none;margin:6px 0 0;padding:0;color:var(--ink)}
.guide-problems>li{padding:7px 0}
.guide-problems>li+li{border-top:1px solid var(--hair)}
.guide-problems .t{display:block;font-size:12.5px;line-height:1.5}
/* How bad it is, in the word and in our red, never in the colour alone. Only the reading of their
   prompts grades severity; a code miss carries none and shows none rather than a made-up one. */
.guide-problems em{margin-right:7px;font:600 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
                   color:var(--t3);vertical-align:1.5px;font-style:normal}
.guide-problems>li.s-critical em,.guide-problems>li.s-high em{color:var(--danger)}
.guide-problems>li.s-critical .t,.guide-problems>li.s-high .t{color:var(--ink)}
.guide-problems code{display:block;margin-top:3px;color:var(--t3);font-size:10.5px;overflow-wrap:anywhere}
.guide-problems[hidden]{display:none}
.guide-rows>li.folded{display:none}
/* What the first run tests: one row per AI feature with its switch, its route under its name, and what
   Cortad's test message met there. The switch and the dot are drawn here in the card's own colours;
   a native checkbox beside a code path read as a form, not as the card. The dot fills when the work
   finished, our green for an answer and red for the app's own error; a ring is a wait. */
.walk-rows>li.t-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;padding:8px 12px}
.t-what{display:grid;gap:1px;min-width:0}
.t-what b{font-size:13px;line-height:18px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.t-what code{font-size:11px;line-height:14px;color:var(--t3);overflow-wrap:anywhere}
.t-state{display:flex;align-items:flex-start;justify-content:flex-end;gap:7px;width:max-content;max-width:260px;font-size:12px;line-height:16px;color:var(--t2);text-align:right}
.t-dot{flex:none;width:8px;height:8px;margin-top:4px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--faint)}
.t-answered .t-dot{background:var(--acc);box-shadow:none}
.t-signin .t-dot{box-shadow:inset 0 0 0 1.5px var(--ink)}
.t-signin .t-state,.t-theirs .t-state{color:var(--ink)}
.t-theirs .t-dot{background:var(--danger);box-shadow:none}
.t-left .t-what b,.t-left .t-what code,.t-left .t-state{color:var(--t3)}
.t-left .t-dot{box-shadow:inset 0 0 0 1.5px var(--hair)}
.tog{position:relative;display:block;width:28px;height:16px;cursor:pointer}
.tog input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.tog i{position:absolute;inset:0;border-radius:999px;background:var(--track);transition:background-color .15s ease}
.tog i::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s ease}
.tog input:checked+i{background:var(--acc)}
.tog input:checked+i::after{transform:translateX(12px)}
.tog input:focus-visible+i{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--acc)}
.tog input:disabled+i{opacity:.6}
@media (prefers-reduced-motion:reduce){.tog i,.tog i::after{transition:none}}
@media (max-width:760px){.walk-rows>li.t-row{grid-template-columns:auto minmax(0,1fr)}.t-state{grid-column:2;justify-content:start;max-width:none;text-align:left}}
/* The head stands only for what the steps cannot say; hidden, the steps take its room. */
.act-head[hidden]{display:none}
.act-head[hidden]+.guide-body{padding-top:14px}
/* One thing the person is asked: a sentence and its one button on the same dark line, the way
   connecting production is asked on the run page. Each ask is a line of its own, never a table row. */
.guide-rows.asks{display:grid;gap:8px;box-shadow:none}
.guide-rows.asks>li{border:0;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hair)}
/* The turning ring inside a button whose press is being answered. */
.spin{flex:none;width:13px;height:13px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:tk-turn .7s linear infinite}
.spin[hidden]{display:none}
.leaving{opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease}
.quote-line{color:var(--ink)}
/* The portal from the connect screen, the one piece of art on the card: forty frames of a spiral on
   one strip, turned one way and then back, so it never jumps to its first frame. */
.portal{--size:72px;width:var(--size);height:var(--size);pointer-events:none;align-self:start;margin-top:2px;
  background:url(/assets/portal.png) 0 0 no-repeat;background-size:calc(var(--size) * 40) var(--size);image-rendering:pixelated;
  animation:swirl 4s steps(40) infinite alternate}
/* The open step with its art: the portal at the left, the words beside it, the way a step is read. */
/* One width for the words whatever stands under them: a grid item that may not grow past its
   column, and a command row that scrolls inside it. */
.guide-body.with-art{grid-template-columns:72px minmax(0,1fr);gap:0 18px;padding-left:42px;max-width:760px}
.guide-text{display:grid;gap:10px;min-width:0}
.guide-text>*{min-width:0;max-width:100%}
.guide-text>p{color:var(--t2)}
@keyframes swirl{to{background-position-x:calc(var(--size) * -40)}}
/* Arrival: a marked node is invisible until its turn, then lifts in. Reduced motion lifts at once.
   On a page coming in, the card takes its turn after the title above it, never beside it. */
.veil{opacity:0;transform:translateY(8px)}
.veil.in{opacity:1;transform:none}
.veil.in.arriving{transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.entering .veil.in.arriving{transition-delay:.18s}
/* The card rises whole; its steps follow it up a beat apart. */
.arriving .guide-steps>li{animation:rise .42s cubic-bezier(.16,1,.3,1) both}
.arriving .guide-steps>li:nth-child(1){animation-delay:0ms}
.arriving .guide-steps>li:nth-child(2){animation-delay:35ms}
.arriving .guide-steps>li:nth-child(3){animation-delay:70ms}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
/* Every page comes in from the top down: each piece rises a moment after the one above it. A run's
   page is one piece of many rows, so its rows take the turns. */
.entering>:where(:not(.veil):not(.run-ui)),.entering>.run-ui>*{animation:rise .36s cubic-bezier(.16,1,.3,1) backwards}
.entering>:nth-child(2),.entering>.run-ui>:nth-child(2){animation-delay:45ms}
.entering>:nth-child(3),.entering>.run-ui>:nth-child(3){animation-delay:90ms}
.entering>:nth-child(4),.entering>.run-ui>:nth-child(4){animation-delay:135ms}
.entering>:nth-child(5),.entering>.run-ui>:nth-child(5){animation-delay:180ms}
.entering>:nth-child(n+6),.entering>.run-ui>:nth-child(n+6){animation-delay:225ms}
@media (prefers-reduced-motion:reduce){.veil{transform:none}.veil.in.arriving{transition:none}.arriving .guide-steps>li{animation:none}.portal{animation:none}.entering>*,.entering>.run-ui>*{animation:none!important}}
@media (max-width:760px){.guide-body{padding-left:16px}.guide-body.with-art{grid-template-columns:minmax(0,1fr);padding-left:16px}.portal{display:none}}


.choice{font-size:12px;font-weight:550;color:var(--t2)}
/* The line a copy press fills keeps its room while empty: appearing, it pushed the rest of the card down. */
.copied{min-height:18px;font-size:12px;line-height:18px;color:var(--ink)}
/* Copy and Copied are one width, so the press moves nothing beside it. */
.btn.copy{min-width:72px}
.reveal{padding:0;border:0;background:none;text-align:left;font-size:12px;font-weight:550;color:var(--t2);cursor:pointer}
.reveal:hover{color:var(--ink)}
.reveal::before{content:'›';display:inline-block;margin-right:6px;transition:transform .15s}
.reveal[aria-expanded="true"]::before{transform:rotate(90deg)}
.hand-row .btn svg.tick{fill:none;stroke:var(--acc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* The world page: the drawing beside the head, three tiles, then the rows. */
.world{display:grid;gap:12px}
.world-head{display:flex;align-items:center;gap:20px}
.world-head .art{width:120px;height:120px;flex:none}
.world-head h2{margin:0 0 6px;font-size:16px;font-weight:650;color:var(--ink)}
.world-head p{margin:0;color:var(--t2)}
.world-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.world-tile{display:grid;gap:2px}
.world-tile b{font-size:20px;font-weight:650;color:var(--ink)}
.world-tile span{font-size:13px;font-weight:550;color:var(--ink)}
.world-tile small{font-size:12px;color:var(--t2)}
.world h3{margin:0 0 10px;font-size:13px;font-weight:650;color:var(--ink)}
.world .guide-rows small{display:block;font-weight:400;color:var(--t2)}
.world-note{margin:10px 0 0;font-size:12px;color:var(--t2)}
/* The switch between the two kinds of test, Run and World: two pills, the page's own marked. */
.world-switch{display:inline-flex;gap:4px;padding:3px;border-radius:10px;background:var(--press);margin-bottom:12px}
.world-switch a{padding:4px 12px;border-radius:8px;font-size:13px;font-weight:550;color:var(--t2);text-decoration:none}
.world-switch a[aria-current="page"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.world-switch a.off{color:var(--t3);pointer-events:none}
.world .guide-rows>li.off .k{color:var(--ink)}

/* The connect box: one sentence, the coding agents as tiles in their makers' colours, the command
   under a fold, and the steps the wait will take, drawn before it starts. */
.agent-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tile{display:grid;justify-items:start;gap:2px;padding:12px 12px 10px;border:0;border-radius:12px;background:var(--card);box-shadow:var(--ring);text-align:left;font:inherit;color:var(--ink);cursor:pointer;transition:background-color .15s ease,transform .15s ease}
.tile:hover{background:var(--soft)}
.tile:active{transform:translateY(1px)}
.tile[disabled]{opacity:.55;cursor:default}
.tile .tile-mark{display:grid;place-items:center;width:28px;height:28px;margin-bottom:6px;border-radius:8px;background:var(--soft)}
.tile .tile-mark svg{width:18px;height:18px;fill:currentColor}
.tile .tile-mark svg.tick{fill:none;stroke:var(--acc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tile b{font-size:13px;font-weight:650}
.tile .tile-sub{font-size:12px;line-height:16px;color:var(--acc-ink)}
.tile .tile-sub[hidden]{display:none}
.tile.on{background:var(--acc-soft)}
.tile.on .tile-mark{background:var(--card)}
.tile.on .tile-sub{color:var(--acc-ink)}
@media (max-width:760px){.agent-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The steps a person imagines their app's way in as: one line for the step at work, and the whole
   list under it when the line is pressed. Who does a step stands at its left: Cortad by its flask,
   the coding agent by its own mark, the person by a figure. A done step's mark wears a blue tick,
   the step at work a blue ring, the ones to come are dimmed, and a rail joins the marks. Nothing turns. */
.walk{list-style:none;margin:0;padding:0;display:grid;gap:0}
.walk-step{position:relative;display:flex;align-items:flex-start;gap:12px;padding:5px 0 9px;color:var(--ink)}
.walk-step[hidden]{display:none}
.walk-step:not(:last-child)::before{content:"";position:absolute;left:11px;top:32px;bottom:0;width:2px;border-radius:1px;background:var(--hair)}
/* A step with no mark (the person's own, or an agent not yet named) keeps the mark's room, so the rail runs beside its words and never through them (2026-10-25). */
.walk-step>.walk-body:first-child{margin-left:36px}
.walk-by{position:relative;flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1.5px var(--hair);color:var(--ink);transition:box-shadow .2s ease,opacity .2s ease}
.walk-mark{display:block;width:14px;height:14px;fill:currentColor}
img.walk-mark{width:16px;height:16px;image-rendering:pixelated}
.walk-ok{position:absolute;right:-4px;bottom:-3px;width:12px;height:12px;transform:scale(0);transform-origin:center;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.walk-ok circle{fill:var(--o-full);stroke:var(--card);stroke-width:1.5}
.walk-ok path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.walk-step.done .walk-ok{transform:scale(1)}
.walk-step.busy .walk-by{box-shadow:0 0 0 1.5px var(--o-full)}
.walk-step.held .walk-by{box-shadow:0 0 0 1.5px var(--ink)}
.walk-step.next .walk-by{opacity:.45}
.walk-body{display:grid;gap:1px;min-width:0;flex:1;padding-top:2px}
.walk-body b{font-size:13px;line-height:20px;font-weight:600;color:var(--ink)}
.walk-body span{font-size:12px;line-height:17px;color:var(--t2);overflow-wrap:anywhere}
.walk-step.next .walk-body b{color:var(--t2);font-weight:550}
.walk-step.held .walk-body span{color:var(--ink)}
/* What a step found, under its button: the card's rows, inside the step's own column. */
.walk-body .reveal{margin-top:3px}
.walk-rows{margin:6px 0 4px}
.walk-rows>li{padding:8px 10px;font-size:12px;line-height:17px}
.walk-rows[hidden]{display:none}
/* A new step slides up into the line the old one held. */
.act-now{font-size:13px;line-height:20px;font-weight:550;color:var(--ink)}
.act-now[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.walk-by,.walk-ok{transition:none}}
/* Three facts beside Run, each with what it means on a press or a focus: never a sentence that
   needs a second read. */
.facts{display:inline-flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;line-height:18px;color:var(--t1)}
.fact{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.fact .i{position:relative;display:inline-block;width:14px;height:14px;padding:0;border:1.5px solid var(--t3);border-radius:50%;background:var(--card);color:var(--t3);cursor:pointer}
.fact .i::before,.fact .i::after{content:'';position:absolute;left:50%;width:2px;margin-left:-1px;border-radius:1px;background:currentColor}
.fact .i::before{top:2px;height:2px}
.fact .i::after{top:5px;height:4.5px}
.fact .i:hover,.fact .i:focus-visible{border-color:var(--t2);color:var(--ink);outline:none}
.fact .say{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:30;visibility:hidden;width:260px;padding:10px 12px;border-radius:8px;transform:translateX(-50%);background:var(--tip);color:var(--on-tip);font-size:12px;line-height:17px;font-weight:400;text-align:left;white-space:normal;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.fact .i:hover .say,.fact .i:focus-visible .say{visibility:visible}

/* The run playing somewhere else in the app: a pill under the mark, one press back. */
.runpill{display:flex;align-items:center;gap:8px;margin:8px 0 2px;padding:8px 10px;border-radius:10px;background:var(--pill);box-shadow:var(--ring);color:var(--ink);text-decoration:none}
.runpill:hover{background:var(--soft)}
/* The flask with something brewing in it: bubbles rising inside the bowl, in our green. */
.brewing{position:relative;flex:none;display:grid;place-items:center;width:20px;height:20px}
.brewing img{width:18px;height:18px;image-rendering:pixelated}
.brewing i{position:absolute;left:50%;bottom:3px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--acc);opacity:0;animation:brew 1.9s ease-in infinite}
.brewing i:nth-child(3){margin-left:-5px;animation-delay:.55s}
.brewing i:nth-child(4){margin-left:2px;animation-delay:1.15s}
@keyframes brew{0%{transform:translateY(0) scale(.6);opacity:0}25%{opacity:.95}70%{opacity:.5}100%{transform:translateY(-9px) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.brewing i{animation:none;opacity:.8;transform:translateY(-4px)}}
.runpill-body{display:grid;min-width:0;line-height:16px}
.runpill-body b{font-size:12px;font-weight:650;white-space:nowrap}
.runpill-body span{font-size:11px;color:var(--t2);white-space:nowrap}
:root[data-nav="folded"] .runpill{justify-content:center;padding:8px 0;margin-left:2px;width:36px}
:root[data-nav="folded"] .runpill .brewing{width:22px;height:22px}
:root[data-nav="folded"] .runpill-body{display:none}
/* GitHub's ink is the night ground's own colour: on it Copilot's mark takes the page's ink instead. */
:root[data-theme="dark"] .tile[data-who="Copilot"] .tile-mark,:root[data-theme="dark"] .act-mark svg[aria-label="Copilot"]{color:var(--ink)}
/* The plans inside the app: the pricing page's three cards in the app's own look, and the buy line
   the next steps and the production guide share. */
.plans-app{display:grid;gap:12px}
.plans-bar{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.plan-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.plan-row .plan{margin:0;padding:20px}
.plan-row .plan.pick{box-shadow:var(--ring),0 0 0 2px var(--acc)}
.plan h2{font-size:15px;line-height:22px;font-weight:650;color:var(--ink)}
.plan .price{display:flex;align-items:baseline;gap:4px;margin-top:8px}
.plan .price b{font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.6px;color:var(--ink);font-variant-numeric:tabular-nums}
.plan .price span,.plan .use{color:var(--t2)}
.plan .btn.wide{width:100%;height:36px;margin-top:16px}
/* The plan they hold stands where the others' buttons are, as a fact and not a control. */
.plan .btn.yours{background:var(--acc-soft);color:var(--acc-ink);box-shadow:none}
.plan .said{margin-top:6px;min-height:18px;font-size:12px;line-height:18px;color:var(--t2)}
.plan .sec{margin:18px 0 6px;font-size:12px;font-weight:650;color:var(--ink)}
.plan .facts{display:grid;gap:6px}
.plan .facts div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.plan .facts dt{color:var(--t1)}
/* Every card gives its values the same width, so a label that wraps wraps in all three and the
   rows stay level across the cards. */
.plan .facts dd{min-width:84px;margin:0;text-align:right;font-weight:650;color:var(--ink);white-space:nowrap}
.plan .inc{list-style:none;padding:0;display:grid;gap:6px}
.plan .inc li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;align-items:start;color:var(--t1)}
.plan .inc li::before{content:'';width:16px;height:16px;margin-top:2px;background:var(--acc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.plan .inc li.off{color:var(--t2)}
.plan .inc li.off::before{-webkit-mask:none;mask:none;width:8px;height:2px;margin:9px 0 0 4px;border-radius:1px;background:var(--faint)}
.refund{font-weight:550;color:var(--ink)}
.ent,.paid{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0}
.ent b,.paid b{margin-right:6px;color:var(--ink)}
.paid p{color:var(--t1)}

/* The eye: one sentence behind one line, the pricing page's, in the app's colours. */
.plans-app .i{position:relative;display:inline-block;width:14px;height:14px;padding:0;border:1.5px solid var(--t3);border-radius:50%;background:var(--card);color:var(--t3);vertical-align:-2px;cursor:pointer}
.plans-app .i::before,.plans-app .i::after{content:'';position:absolute;left:50%;width:2px;margin-left:-1px;border-radius:1px;background:currentColor}
.plans-app .i::before{top:2px;height:2px}
.plans-app .i::after{top:5px;height:4.5px}
.plans-app .i:hover,.plans-app .i:focus-visible{border-color:var(--t2);color:var(--ink)}
.plans-app .i .say{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:30;visibility:hidden;width:260px;padding:10px 12px;border-radius:8px;transform:translateX(-50%);
  background:var(--tip);color:var(--on-tip);font-size:12px;line-height:17px;font-weight:450;text-align:left;white-space:normal;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.plans-app .nb{white-space:nowrap}
.plans-app .i:hover .say,.plans-app .i:focus-visible .say{visibility:visible}
/* Laid out while hidden, so the page can measure a tip before it shows and open it below its line
   where the window's top would cut it. */
.plans-app .i.below .say{top:calc(100% + 8px);bottom:auto}
/* A tip at the page's right edge opens leftwards, so it is never cut. */
.plans-bar .i .say,.plan-row .plan:last-child .i .say{left:auto;right:-10px;transform:none}

/* A step that asks for a plan: the button and the refund promise beside it. */
.guide-body .linkish,.guide-sub .linkish{font-size:12px}

@media (max-width:900px){.plan-row{grid-template-columns:minmax(0,1fr)}.ent,.paid{flex-wrap:wrap}}
/* Production, live: the day's numbers down the left, the globe beside them, then how the day is
   going for the people in it. A dot, a mark and a bar wear the ending's colour from the outcome
   table; grey is a conversation with no reading. */
.live-top{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:12px;margin-bottom:12px;align-items:stretch}
/* Before the first conversation: the connect steps and the globe stand as one pair, the same height. */
.live-top.waiting{grid-template-columns:minmax(0,440px) minmax(0,1fr)}
.live-top.waiting>[data-guide]{display:grid}
.live-top .card{margin:0}
.live-stats{display:grid;grid-auto-rows:1fr;height:100%}
.stat{padding:14px 16px;border-top:1px solid var(--hair)}
.stat:first-child{border-top:0}
.stat span{font-size:13px;line-height:20px;font-weight:650;color:var(--ink)}
.stat b{display:block;margin-top:6px;font-size:20px;line-height:24px;font-weight:650;color:var(--ink)}
.stat b.faint{font-size:13px;font-weight:450;letter-spacing:0;color:var(--t3)}
.stat em{display:block;font-style:normal;font-size:12px;color:var(--t2)}
.live-globe{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto auto;min-height:480px}
.live-globe canvas{display:block;width:100%;height:100%;min-height:420px;cursor:grab;touch-action:none}
.live-globe canvas:active{cursor:grabbing}
.globe-key{display:flex;justify-content:center;gap:16px;padding:0 16px 12px;font-size:12px;color:var(--t2)}
.globe-key i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;vertical-align:0}
.globe-note{margin:0 16px 14px;padding:8px 12px;border-radius:8px;background:var(--soft);font-size:12px;color:var(--t2)}
.globe-note .btn{height:28px;margin-left:8px}
.globe-note .linkish{font-size:12px;color:var(--ink);text-decoration:underline var(--faint);text-underline-offset:3px}
/* Three cards across; five stand three over two and four two over two, so no corner is left empty. */
.live-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.live-grid>.card{grid-column:span 2;margin:0}
.live-grid>.card:nth-child(4):nth-last-child(2),.live-grid>.card:nth-child(5):last-child,
.live-grid>.card:first-child:nth-last-child(4),.live-grid>.card:first-child:nth-last-child(4)~.card{grid-column:span 3}
.live-bars{padding:16px}
.live-bars ul{display:grid;gap:14px;margin-top:16px;padding:0;list-style:none}
/* The run page's bar: the name over a thin bar, the count right after the bar's end. */
.live-bars .bar{--room:4em;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
a.bar{margin:-4px -6px;padding:4px 6px;border-radius:6px;color:inherit;text-decoration:none}
a.bar:hover{background:var(--soft)}
.live-bars .bar span{flex:0 0 100%;font-size:12px;line-height:16px;color:var(--t2);overflow-wrap:anywhere}
.live-bars .bar b{font-size:13px;line-height:20px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
/* The rows past five, folded into one that opens them where they stand. */
.live-bars .bar-more{margin:-4px -8px;padding:4px 8px;border:0;border-radius:6px;background:none;color:var(--ink);font-weight:550;text-align:left}
.live-bars .bar-more:hover{background:var(--soft)}

@media (max-width:760px){
  .live-top,.live-top.waiting,.live-grid{grid-template-columns:minmax(0,1fr)}
  .live-grid>.card{grid-column:auto!important}
  .live-globe{min-height:340px}
  .live-globe canvas{min-height:300px}
}
/* The one connect step: its three parts, each a label and what to do. */
.prod-part{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--hair)}
.prod-part>b{font-weight:650;color:var(--ink)}
.prod-part .seg{margin-top:2px}
.one-press{margin-top:2px}

/* Earlier conversations brought in: a bar while they are read, then one line. A day with nobody in
   it says which period the board is drawn over. */
.brought{padding:12px 16px}
.brought p{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px}
.brought p b{font-weight:650;color:var(--ink)}
.brought p span{font-size:12px;color:var(--t2)}
.live-span,.brought-done{margin:0 0 10px}

/* The incident: the one sentence, and the two ways on. */
.card.state.incident h2{color:var(--bad,#B42318)}
.incident-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.incident-actions .linkish{color:var(--t2)}
/* The graph of what is held: a filled dot holds something, a solid line joins two that do. Drawn by app/field/graph.ts, in the app and in the admin. */
.graph{display:block;width:100%;height:auto;padding:6px 12px 14px}
.g-edge{fill:none;stroke:var(--faint);stroke-width:1.2;stroke-dasharray:.012 .016;animation:g-fade .5s ease both calc(var(--d) * 90ms + 150ms)}
.g-edge.live{stroke:var(--brand);stroke-opacity:.6;stroke-dasharray:1;stroke-dashoffset:1;animation:g-draw .6s ease forwards calc(var(--d) * 90ms + 150ms)}
.g-node{cursor:pointer;animation:g-fade .4s ease both calc(var(--d) * 90ms)}
.g-node circle{fill:var(--card);stroke:var(--faint);stroke-width:1.5;transition:stroke-width .15s}
.g-node.held circle{fill:var(--brand);stroke:var(--brand)}
.g-node:hover circle,.g-node:focus-visible circle{stroke-width:5;stroke-opacity:.45}
.g-node:focus-visible{outline:none}
.g-count{font:600 13px var(--sans);fill:var(--ink);text-anchor:middle}
.g-node:not(.held) .g-count{fill:var(--t3)}
.g-name{font:450 11.5px var(--sans);fill:var(--t2);text-anchor:middle}
@keyframes g-fade{from{opacity:0}}
@keyframes g-draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){.g-edge,.g-node{animation:none}.g-edge.live{stroke-dashoffset:0}}
.g-count,.g-name{paint-order:stroke;stroke:var(--card);stroke-width:5px;stroke-linejoin:round}
.rows small.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nil-word{color:var(--t3)}
.facts dd .source{margin:4px 0 0}

/* Lanes: one row a company or a part of one, read left to right. */
.graph.lanes .g-head{font:550 11.5px var(--sans);fill:var(--t2);text-anchor:middle}
.graph.lanes .g-lane{font:600 12.5px var(--sans);fill:var(--ink)}
.g-lane-link:hover .g-lane{fill:var(--link)}
.graph.lanes .g-count{font:500 11.5px var(--sans)}
/* The menu's foot: Settings as a row of the menu with the light and dark switch beside it, then the
   person, whose initials sit on the icons' line (22px in) whether the menu is open or folded. */
.side-foot{margin-top:auto;display:grid;gap:4px}
/* The switch is placed in the row, not flowed, so it can slide from the row's end to under
   Settings as the menu folds. */
.setrow{position:relative;display:flex;align-items:flex-start;height:36px;padding-right:40px}
.setrow .grow{flex:1;min-width:0}
/* Open, Settings wears the open place's white pill, as Shopify marks it at the foot of its menu. */
.setrow .grow.on{background:var(--pill);box-shadow:var(--ring)}
.themebtn{position:absolute;top:0;left:calc(100% - 36px);width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--t1)}
.themebtn:hover{background:var(--hover);color:var(--ink)}
.me{display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 6px;border:0;border-radius:8px;background:none;text-align:left;overflow:hidden}
.me:hover,.me:has(+ .memenu:popover-open){background:var(--hover)}
.avatar{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#467C00;color:#fff;font-size:11px;font-weight:650;letter-spacing:.2px}
/* Until the session answers there are no initials, and an empty green disc is not a person. */
.me .avatar:empty{visibility:hidden}
.me .gname,.mehead{display:grid;min-width:0}
.me b,.mehead b{font-weight:600;color:var(--ink)}
.me small,.mehead small{font-size:12px;line-height:16px;color:var(--t2)}
/* The foot keeps one line and its hint says the rest; the account menu is where a person checks
   which account they are in, so there the name and address stand whole. */
.me b,.me small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mehead b,.mehead small{overflow-wrap:anywhere}
.me .gname:empty{display:none}
/* Folded, the foot keeps the rail's square tiles and its step: Settings, the theme switch under it,
   then the person, each icon over the ones above. */
:root[data-nav="folded"] .side-foot{gap:14px}
/* The person's tile is 8px shorter folded; held 4px off the foot, their mark never moves. */
:root[data-nav="folded"] .me{width:36px;height:36px;margin:0 0 4px 2px;padding:0 4px}
/* Folded, the theme switch stands under Settings on the rail, where it can still be seen and pressed. */
:root[data-nav="folded"] .setrow{height:86px;padding-right:0}
:root[data-nav="folded"] .setrow .grow{flex:none}
:root[data-nav="folded"] .themebtn{top:50px;left:2px}
:root.nav-anim .me{transition:width .32s cubic-bezier(.22,1,.36,1),height .32s cubic-bezier(.22,1,.36,1),margin .32s cubic-bezier(.22,1,.36,1),padding .32s cubic-bezier(.22,1,.36,1)}
:root.nav-anim .setrow{transition:height .32s cubic-bezier(.22,1,.36,1),padding .32s cubic-bezier(.22,1,.36,1)}
:root.nav-anim .themebtn{transition:top .32s cubic-bezier(.22,1,.36,1),left .32s cubic-bezier(.22,1,.36,1)}

/* The person's menu: a card over the page above the foot, as Shopify's account menu opens. */
.memenu{position:fixed;inset:auto auto 64px 12px;margin:0;width:248px;padding:6px;border:0;border-radius:12px;background:var(--card);color:var(--t1);
  box-shadow:var(--ring),0 8px 24px rgba(0,0,0,.14);opacity:0;transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease,display .15s allow-discrete,overlay .15s allow-discrete}
.memenu:popover-open{opacity:1;transform:none}
@starting-style{.memenu:popover-open{opacity:0;transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.memenu{transition:none}}
.mehead{padding:6px 8px 8px;margin-bottom:4px;border-bottom:1px solid var(--hair)}
.mehead:empty{display:none}
.memenu a,.memenu button{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--ink);font-weight:450;text-align:left;text-decoration:none}
.memenu a:hover,.memenu button:hover{background:var(--hover)}
.memenu .ico{color:var(--t1)}

/* Settings: the sections down the left, the open one's cards on the right. */
.settings{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start;max-width:920px}
.snav{position:sticky;top:16px;display:grid;gap:2px}
.snav a{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:8px;color:var(--t1);font-weight:500;text-decoration:none}
.snav a:hover{background:var(--hover);color:var(--ink)}
.snav a[aria-current="page"]{background:var(--pill);box-shadow:var(--ring);color:var(--ink);font-weight:600}
.snav .ico{color:var(--t2)}
.snav a[aria-current="page"] .ico{color:var(--ink)}
.scard{padding:16px}
.scard h2{font-size:14px;line-height:20px;font-weight:650;color:var(--ink)}
.sline{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sline .sub a{color:var(--t1);text-underline-offset:3px}
.sline .sub a:hover{color:var(--ink)}
.slist{margin:8px 0 0}
.srow{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid var(--hair)}
.srow dt{color:var(--t2)}
.srow dd{margin:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.stiles{display:grid;gap:8px;margin-top:12px}
.stiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stile{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:0;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair);color:var(--t1);text-align:left;transition:box-shadow .15s,background .15s}
.stile:hover{background:var(--soft)}
.stile[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--acc)}
.stile .dot{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--faint);transition:box-shadow .15s}
.stile[aria-checked="true"] .dot{box-shadow:inset 0 0 0 5px var(--acc)}
.stile b{font-weight:600;color:var(--ink)}
.stile .sub{display:block;margin-top:2px}
.rec{display:inline-block;padding:0 6px;border-radius:6px;background:var(--acc-soft);color:var(--acc-ink);font-size:11px;line-height:18px;font-weight:600;vertical-align:1px}
.serr{margin-top:8px;color:var(--danger);font-size:12px}
.serr[hidden]{display:none}

/* A theme tile shows the room it opens: the menu's frame, the sheet on it and a card, in that room's colours. */
.stile.theme{flex-direction:column;gap:10px}
.peek{position:relative;display:grid;grid-template-columns:28% 1fr;width:100%;height:76px;border-radius:8px;overflow:hidden;background:#EBEBEB;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.peek i:nth-child(2){margin-top:10px;border-radius:6px 0 0 0;background:#F1F1F1}
.peek i:nth-child(3){position:absolute;left:36%;top:24px;width:52%;height:34px;border-radius:5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.peek.dark{background:#1e1e23;box-shadow:inset 0 0 0 1px #3b3b45}
.peek.dark i:nth-child(2){background:#19191d}
.peek.dark i:nth-child(3){background:#1e1e23;box-shadow:0 0 0 1px #3b3b45}
/* A reply to their feedback waits inside the person's menu: the dot shows on the initials too. */
.me:has(+ .memenu [data-feedback-mount][data-unread]) .avatar{position:relative}
.me:has(+ .memenu [data-feedback-mount][data-unread]) .avatar::after{content:"";position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--frame)}
.pair-words{margin:14px 0;font:600 28px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.3em;color:var(--ink)}

/* A switch tile: the words on the left, the knob on the right, saved as it is pressed. */
.stile.switch{width:100%;justify-content:space-between;align-items:center}
.stile.switch small{display:block;margin-top:2px;font-size:12px;line-height:18px;color:var(--t2)}
.stile.switch i{flex:none;position:relative;width:36px;height:20px;border-radius:10px;background:var(--hair);transition:background .15s}
.stile.switch i::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.stile.switch[aria-checked="true"]{box-shadow:inset 0 0 0 1px var(--hair)}
.stile.switch[aria-checked="true"] i{background:var(--acc)}
.stile.switch[aria-checked="true"] i::after{left:18px}
.srow dd textarea,.srow dd input{width:100%;max-width:420px;font:inherit;padding:6px 8px;border:1px solid var(--hair);border-radius:6px;background:var(--card);color:var(--t1)}
.srow dd small{display:block;margin-top:4px;font-size:12px;line-height:18px;color:var(--t2)}
.srow dd code{font-size:12px}
/* The intro: on every load of the app the name is spelled a letter at a time as tall as the window,
   the flask lands in the middle, the name sets beside it, and the veil goes by itself. nav-state.js
   marks the document before the first paint. Nothing moves before .go, which waits for the letters'
   face (app/intro.ts). */
.intro{display:none}
/* A veil, not a wall: the app draws behind it as it loads. */
:root[data-intro] .intro{display:block;position:fixed;inset:0;z-index:2147483647;overflow:hidden;background:color-mix(in srgb,var(--frame) 32%,transparent);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--ink);line-height:1;user-select:none}
.intro>*{visibility:hidden;margin:0}
.intro.go>*{visibility:visible}
.intro i{display:inline-block;font-style:normal}
.intro i:nth-child(2){--i:1}
.intro i:nth-child(3){--i:2}
.intro i:nth-child(4){--i:3}
.intro i:nth-child(5){--i:4}
.intro i:nth-child(6){--i:5}
.intro-spell,.intro-word{font-family:'Jersey 10',var(--sans);font-weight:400}

/* Spelled: each letter cuts in ahead of the row as it slides past, then the row is gone. */
.intro-spell{position:absolute;top:50%;left:50%;margin-top:-.5em;font-size:min(96vh,70vw);white-space:nowrap;transform-origin:0 50%}
.intro-spell i{width:.46em;text-align:center}
.intro.go .intro-spell{animation:intro-pan 1.2s cubic-bezier(.3,0,.2,1) both,intro-off 1ms 1.2s forwards}
.intro.go .intro-spell i{animation:intro-on 1ms calc(var(--i,0)*.15s) backwards}
@keyframes intro-on{from{opacity:0}}
@keyframes intro-off{to{visibility:hidden}}
@keyframes intro-pan{from{transform:translateX(-.05em)}to{transform:translateX(-2.02em) scale(.8)}}

/* Landed: the flask comes down from ten times its size in the middle of the window, then the
   lockup grows and slides to the centre as the name's letters come in from the right. The origin
   is the flask's own centre, so growing never moves it. The flask is the landing page's, drawn by
   its film (scripts/home/logo-film.ts) in a slot the size of the mark, standing on the name's line. */
.intro-lockup{position:absolute;top:50%;left:50%;translate:-50% -50%;display:flex;align-items:baseline;gap:.2em;font-size:clamp(44px,6.4vw,104px);transform-origin:.5em 50%}
.intro-flask{position:relative;flex:none;width:1em;height:1em}
.intro-flask canvas{position:absolute;left:-.1em;top:50%;margin-top:-.7em;image-rendering:pixelated;pointer-events:none}
.intro-word{font-size:1.33em;letter-spacing:.01em}
.intro.go .intro-lockup{animation:intro-on 1ms 1.2s backwards,intro-glide .6s 1.5s cubic-bezier(.45,0,.55,1) backwards}
.intro.go .intro-flask{animation:intro-land .4s 1.2s cubic-bezier(.2,.7,.3,1) backwards}
.intro.go .intro-word i{animation:intro-slide .16s calc(var(--i,0)*.04s + 1.6s) cubic-bezier(.16,1,.3,1) backwards}
@keyframes intro-glide{from{transform:translateX(calc(50% - .5em)) scale(.72)}}
@keyframes intro-land{from{transform:scale(10)}}
@keyframes intro-slide{0%{opacity:0;transform:translateX(.5em)}1%{opacity:1}}