/* ---- Wrenfield design system ----
   The chrome around the specimens, and nothing the site itself uses. Every
   value here comes from tokens.css, so the documentation is subject to the
   same palette it documents: switch the appearance and the docs switch too.
   A specimen is never styled from this file. If a component looks right here
   it is because wrenfield.css made it look right. */

/* ---- shell ---- */
.dsbody{background:var(--bg);color:var(--text)}
.dsshell{display:grid;grid-template-columns:1fr;gap:0;max-width:100rem;margin:0 auto}
@media (min-width:64rem){.dsshell{grid-template-columns:16.5rem minmax(0,1fr)}}

/* ---- the bar ---- */
/* the site's own bar height, so the two products feel like one firm */
.dsbar{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--rule)}
.dsbar-in{display:flex;align-items:center;gap:1rem;max-width:100rem;margin:0 auto;padding:0 1.5rem;min-height:var(--bar)}
.dsbar .mark::before{display:none}
/* the kicker sits beside the wordmark, not under its baseline. The wordmark is
   an SVG, so its baseline is the bottom of its box and aligning to it drops the
   mono a full descender low. Both are centred instead, the divider is given the
   wordmark's own height so it reads as a rule rather than as a tick, and the
   kicker is lifted the 1px that separates the wordmark's optical centre from
   its box centre: the italic f descends, the caps do not, so the mass of the
   word sits above the middle of the 28 unit viewBox. */
.dsbar-name{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--text)}
.dsbar-name .wordmark{display:block;height:26px}
.dskicker{display:flex;align-items:center;align-self:stretch;min-height:26px;
  font-family:var(--mono);font-size:.8125rem;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap;padding-left:.9rem;border-left:1px solid var(--rule);transform:translateY(-1px)}
.dsbar-tools{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.dsbar-back{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--accent-text);text-decoration:none;white-space:nowrap}
/* the brand control is the site's own, borrowed. It arrives sized for the
   firm's bar, so it is brought down to the height the catalogue's controls
   keep, and its auto margin is dropped because here it is not the last thing
   in the row. */
.dsbrandslot{display:contents}
.dsbar-tools .brandctl{margin-left:0}
.dsbar-tools .brandbtn{min-height:38px;padding:.3rem .75rem;font-size:.875rem;border-radius:var(--radius-chip);border-color:var(--rule);color:var(--muted)}
.dsbar-tools .brandbtn:hover{color:var(--text)}
.dsbar-tools .brandbtn::before{width:13px;height:13px}
@media (max-width:64rem){.dsbar-tools .brandbtn{font-size:0;padding:0;width:38px;justify-content:center}}
.dsbar-back:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:52rem){.dsbar-back,.dskicker{display:none}}

/* ---- the appearance switcher ---- */
/* three states rather than two: a system setting is a real answer, and a design
   system is the one place someone needs to see both on purpose. The control is
   a radio group in fact as well as in feel, so a keyboard walks it with arrows. */
.themeset{display:inline-flex;align-items:center;padding:3px;background:var(--sunken);border:1px solid var(--rule);border-radius:var(--radius-chip)}
.themeset legend{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.themeopt{position:relative;display:inline-flex}
.themeopt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.themeopt span{display:inline-flex;align-items:center;gap:.4rem;min-height:38px;padding:0 .75rem;font-family:var(--sans);font-size:.875rem;font-weight:600;color:var(--muted);border-radius:calc(var(--radius-chip) - 1px);white-space:nowrap;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.themeopt svg{width:1.05em;height:1.05em;flex:none}
.themeopt input:hover + span{color:var(--text)}
.themeopt input:checked + span{color:var(--text);background:var(--bg);box-shadow:var(--shadow-card)}
.themeopt input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.themeopt span{transition:none}}
/* below the fold of a handset the words go and the marks stay */
@media (max-width:40rem){.themeopt span{padding:0 .6rem}.themeopt .t-word{display:none}}

/* ---- side by side ---- */
/* the one control that is genuinely a design system's own: put every stage in
   both appearances at once. Nested rather than global, which is why tokens.css
   answers to [data-theme="light"] as well as to :root. */
.dscompare{display:inline-flex;align-items:center;gap:.5rem;min-height:38px;padding:0 .8rem;font-family:var(--sans);font-size:.875rem;font-weight:600;color:var(--muted);background:transparent;border:1px solid var(--rule);border-radius:var(--radius-chip);cursor:pointer}
.dscompare:hover{color:var(--text);border-color:var(--accent-text)}
.dscompare[aria-pressed="true"]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.dscompare:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dscompare svg{width:1.05em;height:1.05em}
@media (max-width:52rem){.dscompare .t-word{display:none}.dscompare{padding:0 .6rem}}

/* ---- sidebar ---- */
.dsnav{border-bottom:1px solid var(--rule);padding:1.5rem 1.5rem 2rem}
@media (min-width:64rem){
  /* the bar is --bar tall plus its own hairline, so the sidebar clears both:
     sticking at --bar alone leaves a 1px slot for the page to show through */
  .dsnav{position:sticky;top:calc(var(--bar) + 1px);align-self:start;max-height:calc(100vh - var(--bar) - 1px);overflow-y:auto;
         border-bottom:0;border-right:1px solid var(--rule);padding:2.25rem 1.75rem 4rem;scrollbar-width:thin}
}
.dsnav-h{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0 0 .9rem}
.dsnav-h + .dsnav-h,.dsnav ul + .dsnav-h{margin-top:2rem}
.dsnav ul{list-style:none;margin:0;padding:0}
.dsnav-top li{border-top:1px solid var(--rule)}
.dsnav-top li:last-child{border-bottom:1px solid var(--rule)}
.dsnav-top a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:baseline;padding:.7rem .25rem;text-decoration:none;color:var(--text)}
.dsnav-top a:hover{color:var(--accent-text)}
.dsnav-n{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;color:var(--muted-2)}
.dsnav-l{font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.3}
.dsnav-top a[aria-current="page"]{color:var(--accent-text)}
.dsnav-top a[aria-current="page"] .dsnav-n{color:var(--accent-text)}
/* what is on the page being read, filled in by script from the page itself, so
   a new group of specimens appears here the moment it is written */
.dsnav-here{margin-top:.9rem;border-left:1px solid var(--rule)}
.dsnav-here li a{display:block;padding:.35rem 0 .35rem .85rem;font-family:var(--sans);font-size:.9375rem;line-height:1.35;color:var(--muted);text-decoration:none}
.dsnav-here li a:hover{color:var(--accent-text)}
.dsnav-here li a[data-active]{color:var(--accent-text);box-shadow:-1px 0 0 var(--accent-text)}
.dsnav-count{font-family:var(--mono);font-size:.75rem;color:var(--muted-2);margin:2rem 0 0;line-height:1.6}
.dsnav-count b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.5rem;color:var(--text)}

/* ---- page ---- */
.dsmain{min-width:0;padding:clamp(2.5rem,5vw,4rem) 1.5rem 6rem}
@media (min-width:64rem){.dsmain{padding:clamp(3rem,5vw,4.5rem) clamp(2rem,4vw,3.5rem) 8rem}}
.dshead{max-width:var(--measure);margin:0 0 clamp(3rem,6vw,4.5rem)}
.dshead h1{font-size:clamp(2.4rem,5.5vw,3.9rem);margin:0 0 1.1rem}
.dshead .lede{color:var(--muted);margin:0}
.dsmeta{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:1.75rem 0 0;padding:1rem 0 0;border-top:1px solid var(--rule)}
.dsmeta span{font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;color:var(--muted-2)}
.dsmeta b{font-weight:400;color:var(--text)}

/* ---- a group of specimens ---- */
.dsgroup{margin:0 0 clamp(3.5rem,7vw,5.5rem);scroll-margin-top:calc(var(--bar) + 2rem)}
.dsgroup-head{max-width:var(--measure);margin:0 0 1.75rem;padding-top:1.25rem;border-top:2px solid var(--text)}
.dsgroup-h{font-size:clamp(1.7rem,3vw,2.2rem);margin:0 0 .5rem}
.dsgroup-note{font-size:1.05rem;line-height:1.55;color:var(--muted);margin:0}

/* ---- a specimen ---- */
/* framed rather than floated: the docs are a printed catalogue of parts, and a
   part sits in its frame with its name beside it. */
.spec{margin:0 0 1.75rem;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--bg);scroll-margin-top:calc(var(--bar) + 2rem)}
.spec:target{border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-soft)}
.spec-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.75rem 1.5rem;padding:1.1rem 1.25rem;border-bottom:1px solid var(--rule)}
.spec-id{min-width:0;flex:1 1 16rem}
.spec-name{font-family:var(--sans);font-style:normal;font-size:1.05rem;font-weight:600;letter-spacing:0;line-height:1.3;margin:0}
.spec-name a{color:var(--text);text-decoration:none}
.spec-name a:hover{color:var(--accent-text)}
.spec-note{font-size:.9375rem;line-height:1.5;color:var(--muted);margin:.3rem 0 0;max-width:52ch}
.spec-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-left:auto}
.spec-uses{font-family:var(--mono);font-size:.8125rem;color:var(--muted-2);margin:0 .35rem 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22rem}
.spec-btn{min-height:34px;padding:0 .75rem;font-family:var(--sans);font-size:.8125rem;font-weight:600;color:var(--muted);background:transparent;border:1px solid var(--rule);border-radius:var(--radius-xs);cursor:pointer;white-space:nowrap}
.spec-btn:hover{color:var(--text);border-color:var(--accent-text)}
.spec-btn[aria-expanded="true"]{color:var(--accent-text);border-color:var(--accent-text);background:var(--accent-soft)}
.spec-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* the stage. Its ground is the page's ground, because that is where the
   component will actually stand. */
.spec-stage{padding:clamp(1.5rem,3vw,2.25rem);background:var(--bg);border-radius:0 0 var(--radius-md) var(--radius-md)}
.spec-stage.is-flush{padding:0;overflow:hidden}
.spec-stage.is-tight{max-width:34rem}
.spec-stage.is-dark{background:var(--panel)}
/* a component that expects the site's ground gets it, not the frame's */
.spec-stage > .band,.spec-stage > .section{border-bottom:0}
.spec-stage .wrap{padding-left:0;padding-right:0}
.spec-stage.is-flush .wrap{padding-left:1.75rem;padding-right:1.75rem}
/* a row of one thing repeated: buttons, chips, swatches side by side */
.specrow{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.specrow.is-loose{gap:1.5rem 2rem}
.speccol{display:grid;gap:1.25rem}
/* the caption under a variant inside a stage */
.speclab{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:0 0 .6rem}
.specnote{font-size:.9375rem;line-height:1.55;color:var(--muted);margin:1.25rem 0 0;max-width:var(--measure)}
.specnote:first-child{margin-top:0}

/* ---- the markup ---- */
.spec-code{border-top:1px solid var(--rule);background:var(--sunken);border-radius:0 0 var(--radius-md) var(--radius-md)}
.spec-code[hidden]{display:none}
.spec-code pre{margin:0;padding:1.15rem 1.25rem;overflow-x:auto}
.spec-code code{font-family:var(--mono);font-size:.8125rem;line-height:1.7;color:var(--ink-2);white-space:pre;-moz-tab-size:2;tab-size:2}

/* ---- side by side, applied ---- */
/* the two panes are two islands of appearance on one page. Each carries its own
   data-theme, which is why the light values had to stop being :root only. */
.spec-stage[data-pair]{display:grid;grid-template-columns:1fr;gap:1px;padding:0;background:var(--rule)}
@media (min-width:52rem){.spec-stage[data-pair]{grid-template-columns:1fr 1fr}}
.spec-pane{position:relative;padding:clamp(1.5rem,3vw,2.25rem);background:var(--bg);color:var(--text)}
.spec-stage.is-flush .spec-pane{padding:0}
.spec-stage.is-dark .spec-pane{background:var(--panel)}
.spec-pane::after{content:attr(data-pane);position:absolute;right:.6rem;top:.5rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);pointer-events:none}
.spec-stage.is-dark .spec-pane::after{color:var(--panel-muted)}

/* ---- tokens ---- */
.tokgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.tok{display:grid;grid-template-rows:auto auto;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-sm);overflow:hidden}
/* the chip is painted with the token, so it is the value and not a picture of it */
.tok-chip{height:4.5rem;background:var(--tok);border-bottom:1px solid var(--rule)}
/* a token that is a shadow shows the shadow rather than a colour */
.tok-chip.is-shadow{display:flex;align-items:center;justify-content:center;background:var(--sunken)}
.tok-chip.is-shadow i{display:block;width:60%;height:2.25rem;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-sm);box-shadow:var(--tok)}
.tok-chip.is-radius{display:flex;align-items:center;justify-content:center;background:var(--sunken)}
.tok-chip.is-radius i{display:block;width:3.5rem;height:2.5rem;background:var(--accent);border-radius:var(--tok)}
.tok-chip.is-text{display:flex;align-items:center;justify-content:center;background:var(--sunken);font-family:var(--tok);font-size:1.5rem;color:var(--text)}
.tok-body{padding:.7rem .8rem .8rem}
.tok-name{display:block;font-family:var(--mono);font-size:.8125rem;color:var(--text);word-break:break-all}
.tok-val{display:block;font-family:var(--mono);font-size:.75rem;color:var(--muted-2);margin-top:.2rem;word-break:break-all}
.tok-alias{display:inline-block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-soft);padding:.05rem .35rem;border-radius:var(--radius-xs);margin-top:.4rem}
/* what script measured, once the page is standing: the resolved value and, on a
   colour, its contrast against the ground it is written on */
.tok-live{display:flex;flex-wrap:wrap;gap:.35rem .6rem;margin-top:.45rem;font-family:var(--mono);font-size:.75rem;color:var(--muted-2)}
.tok-ratio{display:inline-flex;align-items:center;gap:.3rem}
.tok-ratio::before{content:"";width:.5rem;height:.5rem;border-radius:var(--radius-pill);background:var(--muted-2)}
.tok-ratio[data-pass="AAA"]::before,.tok-ratio[data-pass="AA"]::before{background:var(--accent)}
/* amber is not in the palette, and deliberately so: a warning is not a brand
   colour, and the one thing it must never do is move when the seed does. */
.tok-ratio[data-pass="warn"]::before{background:#B26A00}
.tok-ratio[data-pass="warn"]{color:#8A5200}
.tok-ratio[data-pass="fail"]::before{background:#B3261E}
.tok-ratio[data-pass="fail"]{color:#B3261E}
[data-theme="dark"] .tok-ratio[data-pass="warn"]{color:#E0A458}
[data-theme="dark"] .tok-ratio[data-pass="warn"]::before{background:#E0A458}
[data-theme="dark"] .tok-ratio[data-pass="fail"]{color:#F2B8B5}
[data-theme="dark"] .tok-ratio[data-pass="fail"]::before{background:#F2B8B5}

/* ---- type scale ---- */
.scale{margin:0;border-top:1px solid var(--rule)}
.scale > div{display:grid;grid-template-columns:1fr;gap:.35rem;padding:1.25rem 0;border-bottom:1px solid var(--rule)}
@media (min-width:46rem){.scale > div{grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:0 2rem;align-items:baseline}}
.scale dt{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;color:var(--muted-2);line-height:1.6}
.scale dd{margin:0;min-width:0}
.scale dd > *{margin:0}

/* ---- spacing and layout rulers ---- */
.ruler{display:grid;gap:.5rem}
.ruler div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;align-items:center}
.ruler b{font-family:var(--mono);font-size:.8125rem;font-weight:400;color:var(--muted-2)}
.ruler i{display:block;height:1.25rem;background:var(--accent-soft);border-left:2px solid var(--accent)}

/* ---- the page frames ---- */
/* a compound is a whole page, so it is shown as one: the built page itself in a
   frame that can be narrowed to a handset. Same origin, same build, so what is
   in the frame is the site and not a picture of it. */
.frame{border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--sunken);overflow:hidden}
.frame-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.6rem .75rem;border-bottom:1px solid var(--rule);background:var(--bg)}
.frame-url{font-family:var(--mono);font-size:.8125rem;color:var(--muted-2);margin:0 auto 0 .35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-url a{color:var(--muted-2)}
.frame-hold{display:flex;justify-content:center;padding:1rem;background:var(--sunken)}
.frame iframe{display:block;width:100%;max-width:100%;height:min(78vh,44rem);border:0;background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius-sm);transition:width var(--dur-base) var(--ease)}
@media (prefers-reduced-motion:reduce){.frame iframe{transition:none}}

/* ---- the inventory table ---- */
.invent{width:100%;border-collapse:collapse;font-size:.9375rem}
.invent caption{text-align:left;font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;color:var(--muted-2);padding:0 0 .75rem}
.invent th,.invent td{text-align:left;padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.invent th{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.invent td code{font-family:var(--mono);font-size:.8125rem;color:var(--accent-text)}
.invent tr:hover td{background:var(--sunken)}

/* ---- overview cards ---- */
.dstiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.25rem;margin:0}
.dstile{display:flex;flex-direction:column;padding:1.5rem 1.4rem 1.6rem;background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--accent);border-radius:var(--radius-md);box-shadow:var(--shadow-card);text-decoration:none}
.dstile:hover{box-shadow:var(--shadow-card-hover);border-color:var(--accent-text);border-top-color:var(--accent)}
.dstile-n{font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em;color:var(--muted-2);margin:0 0 .5rem}
.dstile-h{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.2;color:var(--text);margin:0 0 .5rem}
.dstile:hover .dstile-h{color:var(--accent-text)}
.dstile p{font-size:1rem;line-height:1.5;color:var(--muted);margin:0}
.dstile-c{font-family:var(--mono);font-size:.8125rem;color:var(--muted-2);margin:auto 0 0;padding-top:1rem}

/* ---- rules of the house ---- */
.rules{list-style:none;margin:0;padding:0;counter-reset:r;border-top:1px solid var(--rule)}
.rules li{counter-increment:r;position:relative;padding:1.15rem 0 1.15rem 3.25rem;border-bottom:1px solid var(--rule)}
.rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:1.25rem;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;color:var(--accent-text)}
.rules b{display:block;font-family:var(--sans);font-size:1.05rem;font-weight:600;color:var(--text);margin:0 0 .3rem}
.rules p{font-size:1rem;line-height:1.55;color:var(--muted);margin:0;max-width:var(--measure)}

/* a do and a don't, side by side */
.judge{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:46rem){.judge{grid-template-columns:1fr 1fr}}
.judge > div{padding:1.25rem;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--card)}
.judge h4{font-family:var(--mono);font-size:.75rem;font-weight:500;font-style:normal;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .9rem}
.judge .is-do h4{color:var(--accent-text)}
.judge .is-dont h4{color:#B3261E}
.judge.is-do h4{color:var(--accent-text)}
.judge.is-dont h4{color:#B3261E}

/* ---- what got copied ---- */
.dstoast{position:fixed;left:50%;bottom:2rem;z-index:60;transform:translate(-50%,1rem);opacity:0;pointer-events:none;
  padding:.65rem 1.1rem;font-family:var(--sans);font-size:.9375rem;font-weight:600;color:var(--invert-fg);background:var(--invert-bg);
  border:1px solid var(--invert-rule);border-radius:var(--radius-chip);box-shadow:var(--shadow-card-hover);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.dstoast[data-on]{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.dstoast{transition:none}}