/* ─────────────────────────────────────────────────────────────────────────
   Ask Greg — the owner's screens, read-only demo.
   One stylesheet for the whole folder, the way the demo world does it.
   System fonts only: the folder fetches nothing, from anywhere.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-theme="light"]{
  --g0:#FAFBFD;--g1:#FFFFFF;--g2:#F0F3F8;--g3:#E6EBF2;
  --ink:#14171D;--mid:#444B59;--dim:#545B68;
  --line:rgba(20,23,29,.14);--soft:rgba(20,23,29,.07);
  --gilt:#5C4108;--giltline:rgba(111,78,8,.40);
  --shadow:0 1px 2px rgba(21,30,45,.05);
}
:root[data-theme="dark"]{
  --g0:#101318;--g1:#1A1D24;--g2:#222732;--g3:#2B313D;
  --ink:#F2F4F8;--mid:#BAC2CE;--dim:#A9B0BC;
  --line:rgba(242,244,248,.18);--soft:rgba(242,244,248,.09);
  --gilt:#D8B470;--giltline:rgba(216,180,112,.42);
  --shadow:none;
}
/* Greg's colour. It is the one the colour check offered him after it refused
   his van's green — see brand-refused.html. */
:root{--acc:#1F6B33;--acc-lift:#7FA98A;--acc-ink:var(--acc);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
:root[data-theme="dark"]{--acc-ink:var(--acc-lift)}

*{box-sizing:border-box}
html,body{margin:0;background:var(--g0);color:var(--ink)}
body{font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:700;letter-spacing:-.005em}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--gilt);outline-offset:2px;border-radius:5px}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── the bar that carries the posture, on every page ──────────────────── */
.bw-bar{position:sticky;top:0;z-index:60;background:var(--g1);border-bottom:1px solid var(--line)}
.bw-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:10px 12px;padding:9px 14px;flex-wrap:wrap}
.bw-lock{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-height:44px}
.bw-lock .m{width:22px;height:22px;border-radius:6px;background:var(--acc);display:grid;place-items:center;flex:none}
.bw-lock .m i{width:8px;height:8px;border-radius:3px;background:#fff;display:block;transform:translate(-2px,2px)}
.bw-lock b{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:-.005em}
.bw-ro{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;font-size:12px;font-weight:600;color:var(--ink);line-height:1.35}
/* ── the canonical top-level nav row ──────────────────────────────────
   Copied from the White label page, light-ground variant. Three states told by
   border STYLE and weight, never by hue. Every target is 44px.

   These pages are a child of White label, not the White label page itself, so
   the parent carries aria-current="true" — "the current item within a set" —
   and never "page", which would tell a screen-reader user they are on a page
   they are not on. Sighted readers get the section cue from the dashed edge.
   Do not collapse the two states into one.

   The font list keeps the original face first and adds this folder's stack
   behind it, because nothing here loads a webfont. */
.bnav{margin-left:auto;display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.bnav-a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border-radius:10px;
  text-decoration:none;color:var(--mid);border:1px solid transparent;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;white-space:nowrap}
.bnav-a:hover{color:var(--ink);background:var(--g2);border-color:var(--line)}
.bnav-a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}
.bnav-a[aria-current="true"]{color:var(--ink);border-style:dashed;border-color:var(--ink)}

/* the demo's own second row, under the site row: a different level, so a
   different line rather than one bar of eleven things */
.bw-sub{border-top:1px solid var(--soft);background:var(--g2)}
.bw-sub-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:4px;padding:2px 14px;flex-wrap:wrap}
.bw-sub-in a{display:inline-flex;align-items:center;min-height:40px;padding:6px 10px;border-radius:9px;
  border:1px solid transparent;color:var(--mid);font-size:13px;text-decoration:none}
.bw-sub-in a:hover{color:var(--ink);border-color:var(--line)}
.bw-sub-in button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-left:auto;
  padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:var(--g1);color:var(--ink);
  font:inherit;font-size:13px;cursor:pointer}
@media (max-width:640px){.bw-ro{font-size:11.5px;padding:4px 9px}.bw-lock b{font-size:16px}}

/* ── page furniture ───────────────────────────────────────────────────── */
.wrap{max-width:1180px;margin:0 auto;padding:22px 14px 0}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gilt);margin:0 0 5px}
h1.pt{font-size:clamp(23px,4.6vw,33px);line-height:1.1;margin:0 0 8px;text-wrap:balance}
.lede{color:var(--mid);font-size:16px;margin:0 0 6px;max-width:62ch}
.sub{color:var(--dim);font-size:14.5px;margin:0 0 4px;max-width:66ch}
.sub a,.lede a,.bw-foot a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--giltline)}

/* ── the app frame ────────────────────────────────────────────────────── */
.stage{max-width:1180px;margin:18px auto 0;padding:0 14px}
.ag-frame{border:1px solid var(--line);border-radius:16px;background:var(--g1);overflow:hidden;
  box-shadow:var(--shadow)}
.ag-top{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--line);
  background:var(--g1);min-height:46px}
.ag-mark{width:24px;height:24px;border-radius:7px;background:var(--acc);display:grid;place-items:center;flex:none}
.ag-mark i{width:9px;height:9px;border-radius:3px;background:#fff;display:block;transform:translate(-2px,2px)}
.ag-name{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ag-where{margin-left:auto;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:48%}
.ag-back{padding:8px 12px;border-bottom:1px solid var(--line);background:var(--g2);font-size:12px}
.ag-back a{color:var(--dim);text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.ag-back a:hover{color:var(--ink);text-decoration:underline}
.ag-lookas{display:flex;gap:8px;align-items:center;padding:9px 12px;background:var(--ink);color:var(--g1);
  font-size:12px;line-height:1.4}
:root[data-theme="dark"] .ag-lookas{background:#000}
.ag-lookas a{margin-left:auto;color:inherit;border:1px solid rgba(255,255,255,.42);border-radius:8px;
  padding:4px 9px;text-decoration:none;white-space:nowrap;min-height:32px;display:inline-flex;align-items:center}

.ag-strip{display:flex;gap:3px;padding:7px 8px;border-bottom:1px solid var(--line);background:var(--g2);overflow-x:auto}
.ag-strip a{flex:1 0 auto;min-width:62px;text-align:center;padding:8px 6px;border-radius:9px;
  border:1px solid transparent;color:var(--dim);font-size:12.5px;text-decoration:none;min-height:38px;
  display:inline-flex;align-items:center;justify-content:center}
.ag-strip a:hover{border-color:var(--line);color:var(--ink)}
.ag-strip a[aria-current="page"]{color:var(--ink);font-weight:700;background:var(--g1);border-color:var(--line);
  box-shadow:inset 0 -2px 0 var(--ink)}

.ag-cols{display:block}
.ag-rail{display:none}
.ag-body{padding:14px;display:grid;gap:11px;background:var(--g0);align-content:start;font-size:14px;
  min-height:340px}
.ag-tabs{display:flex;border-top:1px solid var(--line);background:var(--g1)}
.ag-tabs span{flex:1;text-align:center;padding:9px 2px;font-size:10.5px;color:var(--dim);min-width:0}
.ag-tabs span em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink)}
.ag-tabs span.on{color:var(--ink);font-weight:700;box-shadow:inset 0 2px 0 var(--acc)}

/* on a laptop the bottom bar becomes the left rail, as it does everywhere else */
@media (min-width:900px){
  .ag-cols{display:grid;grid-template-columns:224px 1fr;align-items:stretch}
  .ag-rail{display:block;border-right:1px solid var(--line);background:var(--g1);padding:10px 9px}
  .ag-rail h2{font-size:11px;font-family:var(--mono);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--dim);margin:2px 0 8px;padding-left:6px}
  .ag-rail ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .ag-rail span.r{display:flex;gap:9px;align-items:center;padding:8px 7px;border-radius:9px;color:var(--dim);font-size:13px}
  .ag-rail span.r em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink);
    border:1px solid var(--line);border-radius:5px;padding:1px 4px;flex:none}
  .ag-rail span.r.on{color:var(--ink);font-weight:700;background:var(--g2)}
  .ag-tabs{display:none}
  .ag-body{min-height:460px;padding:16px}
}

/* ── the pieces on the screens ────────────────────────────────────────── */
.h{font-family:var(--serif);font-size:19px;margin:2px 0 0;line-height:1.2;font-weight:700}
.l{color:var(--dim);margin:0;font-size:13.5px;line-height:1.5}
.l b{color:var(--ink)}
.card{border:1px solid var(--line);border-radius:12px;background:var(--g1);padding:12px 13px}
.card.tight{padding:10px 12px}
.card.strong{border-color:var(--ink)}
.card>b{display:block;font-size:13.5px;margin-bottom:3px}
.row{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;
  background:var(--g1);padding:11px 12px}
.row .who{flex:1;min-width:0}
.row b{display:block;font-size:13.5px}
.row i{font-style:normal;color:var(--dim);display:block;font-size:12.5px;line-height:1.45}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:9px 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--g1);font:inherit;font-size:13.5px;
  font-weight:600;color:var(--ink)}
.btn.p{background:var(--acc);border-color:var(--acc);color:#fff;width:100%}
.btn.wide{width:100%}
.btn.sm{min-height:34px;padding:6px 10px;font-size:12.5px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;
  padding:4px 10px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--g1);color:var(--ink)}
.chip.acc{border-color:var(--acc-ink);color:var(--acc-ink)}
.fence{border:1px dashed var(--line);border-radius:12px;background:var(--g2);padding:11px 12px;color:var(--dim)}
.fence b{color:var(--ink);font-size:13px;display:block}
.fence .lb{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-bottom:6px}
.code{font-family:var(--mono);font-size:12px;background:var(--g2);border:1px solid var(--line);border-radius:8px;
  padding:9px 10px;overflow-x:auto;white-space:nowrap;color:var(--ink)}
label.fl{display:block;font-size:12.5px;font-weight:600;margin:0 0 5px}
input[type=text],input[type=email]{width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;
  background:var(--g2);color:var(--dim);padding:9px 11px;font:inherit;font-size:14.5px}
.pips{display:flex;gap:5px;margin:7px 0 5px;flex-wrap:wrap}
.pips i{width:14px;height:17px;border-radius:3px;border:1px solid var(--ink);display:block}
.pips i.full{background:var(--ink)}
.stat{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px}
.stat .g{width:15px;flex:none;text-align:center}
.stat .w{font-weight:600}
.stat .t{color:var(--dim);margin-left:auto;font-size:12px;text-align:right}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:620px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{border:1px solid var(--line);border-radius:11px;padding:10px 11px;background:var(--g1);min-height:70px}
.door.on{border-color:var(--acc);box-shadow:inset 3px 0 0 var(--acc)}
.door.locked{background:var(--g2)}
.door b{display:block;font-size:13px}
.door i{font-style:normal;display:block;color:var(--dim);font-size:11.5px;line-height:1.4}
.door .st{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase}
.sw{display:flex;gap:8px;flex-wrap:wrap}
.sw i{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);display:block}
.sw i.sel{outline:2px solid var(--ink);outline-offset:2px}
.tri{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 4px}
.tri i{display:grid;place-items:center;width:62px;height:40px;border-radius:9px;color:#fff;font-size:10.5px;
  font-style:normal;text-align:center;line-height:1.15}
.trail{display:grid;gap:8px}
.tr{border:1px solid var(--line);border-radius:12px;background:var(--g1);padding:11px 12px}
.tr .s{font-size:13.5px;display:block;margin-bottom:4px}
.tr .m{font-size:12px;color:var(--dim);display:block}
.mini-tabs{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:7px}
.mini-tabs span{flex:1;text-align:center;padding:8px 2px;font-size:10.5px;color:var(--dim)}
.mini-tabs span em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink)}
.mini-tabs span.on{color:var(--ink);font-weight:700;box-shadow:inset 0 2px 0 var(--acc)}
.note{border:1px solid var(--line);border-left:3px solid var(--giltline);background:var(--g1);border-radius:12px;
  padding:13px 15px;margin:16px 0 0;font-size:14px;color:var(--mid);max-width:74ch}
.note b{color:var(--ink)}
.note p{margin:0 0 8px}.note p:last-child{margin:0}

/* ── index (all screens) ──────────────────────────────────────────────── */
.grp{max-width:1180px;margin:0 auto;padding:22px 14px 0}
.grp h2{font-size:19px;margin:0 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.grp h2 span{font-family:var(--sans);font-size:13.5px;font-weight:400;color:var(--dim);letter-spacing:0}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
.grid a{display:block;border:1px solid var(--line);border-radius:13px;background:var(--g1);padding:13px 14px;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);min-height:44px}
.grid a:hover{border-color:var(--ink)}
.grid b{display:block;font-size:14.5px;margin-bottom:3px}
.grid span{display:block;color:var(--dim);font-size:13px;line-height:1.45}

/* ── foot ─────────────────────────────────────────────────────────────── */
.bw-foot{max-width:1180px;margin:26px auto 0;padding:22px 14px 56px;color:var(--dim);font-size:13.5px;
  line-height:1.6;border-top:1px solid var(--line)}
.bw-foot h2{font-size:14.5px;color:var(--ink);margin:0 0 8px;font-family:var(--sans)}
.bw-foot p{max-width:74ch}
.bw-foot b{color:var(--ink)}