:root{
  --paper:#f9fafb;
  --sheet:#ffffff;
  --ink:#101828;
  --ink-2:#475467;
  --ink-3:#667085;
  --rule:#eaecf0;
  --rule-2:#f2f4f7;

  --primary:#0086c9;
  --primary-wash:#f5fbff;
  --gold:#ffc204;
  --navy:#0c111d;      /* holds in both themes, so gold pills keep their contrast */

  --action:#dc2626;    /* no dark variant on purpose, or the button flips to white */

  /* 700 step, not 600: 600 falls under 4.5:1 for body text on a pale ground */
  --ok:#067647;
  --warn:#b54708;
  --bad:#b42318;

  --card:"Archivo Narrow",system-ui,sans-serif;
  --body:"Archivo",system-ui,-apple-system,sans-serif;
  --mono:"Roboto Mono",ui-monospace,Menlo,monospace;

  --radius:5px;
  --radius-lg:9px;

  color-scheme:light dark;
}

/* Repeated below under [data-theme], so a stamped choice beats the OS setting. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0c111d; --sheet:#101828; --ink:#f9fafb; --ink-2:#98a2b3; --ink-3:#667085;
    --rule:#344054; --rule-2:#1d2939;
    --primary:#36bffa; --primary-wash:#062c41;
    --ok:#47cd89; --warn:#fdb022; --bad:#f97066;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0c111d; --sheet:#101828; --ink:#f9fafb; --ink-2:#98a2b3; --ink-3:#667085;
  --rule:#344054; --rule-2:#1d2939;
  --primary:#36bffa; --primary-wash:#062c41;
  --ok:#47cd89; --warn:#fdb022; --bad:#f97066;
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
html{scrollbar-gutter:stable}
/* Below a phone's width the layout has nowhere left to go, so scroll rather than squash. */
body{min-width:360px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.022em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.monospace{font-family:var(--mono);font-size:.86em;letter-spacing:.02em}

/* masthead */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead .bar{max-width:1180px;margin:0 auto;padding:16px 24px 0;display:flex;align-items:center;gap:16px}

.logo{display:inline-flex;align-items:center;gap:9px;line-height:0;color:var(--ink)}
.logo .mark{width:var(--logo,30px);height:var(--logo,30px);border-radius:25%;display:block}
.logo .wordmark{height:calc(var(--logo,30px) * .72);width:auto;display:block}
.gate .logo{--logo:38px}
.tagline{font-family:var(--card);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.masthead .tagline{align-self:center;padding-left:16px;border-left:1px solid var(--rule)}
@media (max-width:640px){ .masthead .tagline{display:none} }
.masthead .account{margin-left:auto;position:relative}
.account summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:4px 6px;border-radius:var(--radius)}
.account summary::-webkit-details-marker{display:none}
.account summary:hover,
.account[open] summary{background:var(--rule-2)}
.account .initials{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--ink);color:var(--paper);font-family:var(--card);font-weight:700;
  font-size:11px;letter-spacing:.06em}
.account .text{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.2}
.account .text .business{font-family:var(--card);font-weight:600;font-size:13.5px;letter-spacing:.04em}
.account .text .code{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.account .chevron{color:var(--ink-3);flex:none}
.account[open] .chevron{transform:rotate(180deg)}
.account .menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;z-index:20;
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:5px;
  box-shadow:0 10px 26px rgba(16,24,40,.16), 0 2px 6px rgba(16,24,40,.08)}
/* Sign out posts, so it is a button wearing the same clothes as the links. */
.account .menu a,
.account .menu button{display:flex;flex-direction:column;gap:2px;width:100%;padding:8px 10px;
  border:0;border-radius:var(--radius);background:none;text-align:left;
  font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--ink)}
.account .menu a:hover,
.account .menu button:hover{background:var(--rule-2)}
.account .menu a .count{font-size:11.5px;font-weight:400;color:var(--ink-3)}
.account .menu form{margin:0}
.account .menu .separator{height:1px;background:var(--rule);margin:4px 6px}
@media (max-width:640px){ .account .text{display:none} }

.theme{width:32px;height:32px;flex:none;display:grid;place-items:center;padding:0;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--sheet);color:var(--ink-2)}
.theme:hover{color:var(--ink);border-color:var(--ink-3)}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme .sun{display:block}
  :root:not([data-theme="light"]) .theme .moon{display:none}
}
.icon{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.masthead nav{max-width:1180px;margin:0 auto;padding:8px 24px 12px;display:flex;gap:4px}
.masthead nav a{display:inline-flex;align-items:center;gap:8px;font-family:var(--card);
  font-weight:600;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding:7px 12px;border-radius:var(--radius)}
.masthead nav .icon{width:15px;height:15px}
.masthead nav a:hover{color:var(--ink);background:var(--rule-2)}
.masthead nav a[aria-current="page"],
.masthead nav a[aria-current="page"]:hover{background:var(--gold);color:var(--navy);font-weight:700}

.sheet{max-width:1180px;margin:0 auto;padding:28px 24px 96px}
.head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.head h1{font-size:27px}
.head .subhead{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:5px}
.head .spacer{flex:1}
.head .actions{display:flex;gap:10px}

.eyebrow{font-family:var(--card);font-weight:700;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin:0}
.figure{font-size:44px;font-weight:700;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.figure-small{font-size:26px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* A figure has no spaces to break at, so a long one would run out of its card.
   Better a wrapped number than a broken layout. */
.figure,.figure-small,.line-total,.record-row .sum,.pair b{overflow-wrap:anywhere;min-width:0}

.rule-hard{height:2px;background:var(--ink);border:0;margin:0}
/* A card already has its own edge, so a full-strength rule inside one shouts
   over the row separators it sits above. */
.block .rule-hard{height:1px;background:var(--rule)}
.block{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius-lg)}
.padded{padding:20px 22px}
/* Identity, not activity: no card, so it reads as reference beside the record cards. */
.record{padding:2px}
.record .eyebrow{display:flex;align-items:center;gap:8px}
.record .eyebrow .icon{width:15px;height:15px}
.record .rule-hard{margin:10px 0 18px}
.columns{display:flex;gap:28px;align-items:flex-start}
.columns .grow{flex:1;min-width:0}
.rail{width:320px;flex:none}
/* The rail follows a long list down. A rail taller than the screen would pin its
   own foot out of reach, so it scrolls within itself at that point. */
.rail.sticks{position:sticky;top:16px;height:max-content;
  max-height:calc(100vh - 32px);overflow-y:auto}
.stack{display:flex;flex-direction:column;gap:14px}
.mobile-only{display:none}

/* account picker */
.pick{display:flex;flex-direction:column;gap:10px;max-width:560px}
.pick .row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:14px 16px;font:inherit;color:var(--ink)}
.pick .row:hover{border-color:var(--ink-3);background:var(--rule-2)}
.pick .row.current{border-color:var(--ink);cursor:default}
.pick .row.current:hover{background:var(--sheet)}
.pick .initials{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--ink);color:var(--paper);font-family:var(--card);font-weight:700;
  font-size:13px;letter-spacing:.06em}
.pick .text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick .title{font-weight:600;font-size:15px;line-height:1.25}
.pick .subtitle{font-size:13px;color:var(--ink-2)}
.pick .code{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.pick .badge{margin-left:auto;flex:none;font-family:var(--card);font-weight:700;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:var(--radius);
  background:var(--gold);color:var(--navy)}
.pick .arrow{margin-left:auto;flex:none;color:var(--ink-3);display:grid;place-items:center}
.pick .row:hover .arrow{color:var(--ink)}

/* shop: the filter rail */
/* Desktop: a column of facets beside the results, always open. */
.facet-toggle{display:none}
.facet-list{display:flex;flex-direction:column;gap:22px}
.filters-rail{width:224px;flex:none;align-self:stretch;
  display:flex;flex-direction:column;gap:22px;
  position:sticky;top:16px;height:max-content}
.seek{display:flex;align-items:center;gap:10px;height:42px;padding:0 13px;
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius)}
.seek:focus-within{border-color:var(--ink)}
.seek .icon{width:16px;height:16px;flex:none;color:var(--ink-3)}
.seek input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);
  font:400 14px var(--body)}

.facet{display:flex;flex-wrap:wrap;gap:6px}
.facet .eyebrow{flex:0 0 100%;margin-bottom:2px}

.clear-filters{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:7px 11px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--sheet);color:var(--ink-3);font:600 12px var(--body)}
.clear-filters:hover{border-color:var(--ink-3);color:var(--ink)}
.clear-filters .icon{width:13px;height:13px}
.pill{padding:6px 11px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--sheet);color:var(--ink-2);
  font-family:var(--card);font-weight:600;font-size:11.5px;letter-spacing:.06em}
.pill:hover{border-color:var(--ink-3);color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:#fff}
.pill[aria-pressed="true"]:hover{border-color:var(--action);color:#fff}

/* shop: results grouped by product */
.tally{margin:0 0 16px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.lineup{margin-bottom:30px}
.lineup-head{display:flex;align-items:baseline;gap:12px;
  padding-bottom:9px;border-bottom:2px solid var(--ink);margin-bottom:12px}
.lineup-head h2{font-family:var(--card);font-weight:700;font-size:15px;
  letter-spacing:.13em;text-transform:uppercase}
.lineup-head .detail{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.lineup-head .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:3px}
.colour-tile{position:relative;aspect-ratio:1;display:flex;flex-direction:column;
  justify-content:flex-end;gap:2px;padding:9px 10px;border:0;border-radius:2px;
  text-align:left;transition:transform .12s, box-shadow .12s}
.colour-tile:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(0,0,0,.3);z-index:2}
.colour-tile.on-dark{color:#fff}
.colour-tile.on-light{color:#101828}
.colour-tile .name{font-family:var(--card);font-weight:700;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.15}
.colour-tile .code{font-family:var(--mono);font-size:9.5px;opacity:.72}
/* Sold plain: a mark instead of a colour. */
.colour-tile.plain{background:var(--rule-2);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--rule);justify-content:space-between}
.colour-tile.plain .icon{width:20px;height:20px;opacity:.7}
.chip.plain{display:flex;flex-direction:column;justify-content:space-between;
  background:var(--rule-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule)}
.chip.plain .icon{width:24px;height:24px;opacity:.7}
.chip.plain .name{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .colour-tile{transition:none} .colour-tile:hover{transform:none}
  .viewer,.ask{animation:none}
}

/* shop: one item in the popup */
.viewer{width:min(430px,92vw);max-height:86vh;padding:0;border:0;color:var(--ink);
  background:var(--sheet);border-radius:var(--radius-lg);overflow:hidden}
.viewer::backdrop{background:rgba(6,10,20,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.viewer[open]{display:flex;flex-direction:column}
/* The column has to be the body: the content sits a level below the dialog. */
.sheet-body{flex:1;min-height:0;display:flex;flex-direction:column}
.sheet-body > *{flex:none}

.viewer .chip{aspect-ratio:auto;width:100%;height:120px;border-radius:0;padding:14px 20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.viewer .chip .name{font-size:17px}

.made{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 18px}
.made .title{display:flex;align-items:baseline;gap:12px;font-weight:600;font-size:15px}
.made .title .code{margin-left:auto;font-family:var(--mono);font-weight:400;
  font-size:11.5px;color:var(--ink-3)}
.made .detail{margin-top:2px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.made .sizes{margin-top:14px}

.viewer .chosen{margin:0;padding:14px 20px;border-top:1px solid var(--rule);background:var(--rule-2)}
.viewer .chosen .stock{white-space:nowrap}
.viewer .chosen .btn{margin-left:auto;height:34px;padding:0 16px}
.viewer .chosen .add-line.done{background:var(--ok);border-color:var(--ok);color:#06281a;opacity:1}

.shut{position:absolute;top:13px;right:13px;z-index:2;width:32px;height:32px;display:grid;
  place-items:center;padding:0;border:0;border-radius:50%;color:#fff;
  background:rgba(12,17,29,.5)}
.shut:hover{background:rgba(12,17,29,.78)}

/* shop: things with no colour */
.sundries{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule)}
.strip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.sundry{display:flex;flex-direction:column;gap:2px;padding:9px 13px;text-align:left;
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius)}
.sundry:hover{border-color:var(--ink-3)}
.sundry .title{font-weight:600;font-size:13px}
.sundry .detail{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}

.swatch-warning{margin:0 0 22px;max-width:640px}

/* shop: sizes, and what appears once one is picked */
.sizes{display:flex;gap:6px;margin-top:8px}
.size{padding:5px 10px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--sheet);color:var(--ink-2);font-family:var(--mono);font-size:11px}
.size:hover{border-color:var(--ink-3);color:var(--ink)}
.size[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chosen{display:flex;align-items:center;gap:9px;margin-top:9px}
[hidden]{display:none !important}
.chosen .price{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.chosen .stock{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}

/* the chip */
.chip{position:relative;display:block;aspect-ratio:1/1.16;padding:11px 12px;display:flex;flex-direction:column;justify-content:flex-end}
.chip .name{font-family:var(--card);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1.15}
.chip .code{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;opacity:.88;margin-top:3px}
.chip.on-dark{color:#fff}
.chip.on-light{color:#101828}
.chip.picked{outline:3px solid var(--gold);outline-offset:-3px}

/* the chart */
.chart-group{margin-bottom:30px}
.chart-group .group-head{display:flex;align-items:baseline;gap:12px;padding-bottom:9px;border-bottom:2px solid var(--ink);margin-bottom:14px}
.chart-group .group-head h2{font-family:var(--card);font-weight:700;font-size:15px;letter-spacing:.15em;text-transform:uppercase}
.chart-group .group-head .code{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.chart-group .group-head .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.card-item{display:flex;flex-direction:column}
.card-item .meta{padding:9px 1px 0}
.card-item .product{font-size:12.5px;font-weight:600;line-height:1.25}
.card-item .detail{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:2px}
.card-item .buy{display:flex;align-items:center;gap:9px;margin-top:8px}
.card-item .price{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.card-item .stock{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-left:auto}
.card-item .stock.low{color:var(--warn)}

.block-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.block-head .eyebrow{margin-right:auto}
.block-head + .figure{margin:6px 0 20px}

/* A reading, not a state, so it stays clear of the status pill's vocabulary. */
.usage{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.usage b{font-weight:500;font-size:15.5px;color:var(--primary);font-variant-numeric:tabular-nums}
.usage.warn b{color:var(--warn)}
.usage.bad b{color:var(--bad)}

/* last order */
.meta-line{margin:4px 0 0;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.strip{display:flex;align-items:center;gap:5px;margin-top:14px}
.strip .swatch{width:22px;height:22px;flex:none;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.14)}
.strip .count{margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.lines{margin:16px 0 18px;border-top:1px solid var(--rule)}
.lines .row{display:flex;align-items:center;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--rule-2)}
.lines .what .name{font-size:14px;font-weight:600;line-height:1.3}
.lines .what .detail{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.lines .quantity{margin-left:auto;flex:none;font-family:var(--mono);font-size:12px;
  color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.lines .more{margin:0;padding:11px 0 0;font-size:13px;color:var(--ink-3)}


/* the cart button in the masthead */
.cart-link{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--sheet);color:var(--ink-2)}
.cart-link:hover{color:var(--ink);border-color:var(--ink-3)}
.cart-link[aria-current="page"]{background:var(--gold);border-color:var(--gold);color:var(--navy)}
/* Shared with the shop's filter button: a count riding an icon button. */
.cart-link .count,
.facet-toggle .count{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:9px;background:var(--action);color:#fff;
  font-family:var(--mono);font-size:10px;line-height:1}

/* the order */
.order-group{margin-bottom:26px}
.order-line{display:grid;align-items:center;gap:0 14px;padding:10px 0;
  grid-template-columns:26px minmax(0,1fr) 112px 104px 112px 30px;
  border-bottom:1px solid var(--rule-2)}
.order-line:last-child{border-bottom:0}

.dab{width:26px;height:26px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(16,24,40,.14)}
.dab.plain{display:grid;place-items:center;background:var(--rule-2);color:var(--ink-3)}
.dab.plain .icon{width:15px;height:15px}

.order-line .what{display:flex;flex-direction:column;gap:1px;min-width:0}
.order-line .name{font-weight:600;font-size:14px;line-height:1.25}
.order-line .sub{font-size:11.5px;color:var(--ink-3)}
.order-line .each{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:right}
.order-line .line-total{font-weight:600;font-size:13.5px;text-align:right;
  font-variant-numeric:tabular-nums}

/* Width is set here, not left to the input: a text input's intrinsic size is 20
   characters, which stretches the control wherever the container is auto-width. */
.amount-picker{display:inline-flex;align-items:center;width:112px;height:32px;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--sheet);overflow:hidden}
.amount-picker:focus-within{border-color:var(--ink)}
.nudge{width:30px;height:100%;flex:none;padding:0;border:0;background:none;
  color:var(--ink-2);font-size:15px;font-weight:600;line-height:1}
.nudge:hover{background:var(--rule-2);color:var(--ink)}
.amount-input{flex:1;width:auto;min-width:0;height:100%;border:0;outline:0;background:none;
  text-align:center;color:var(--ink);font:500 13.5px var(--mono);
  border-left:1px solid var(--rule);border-right:1px solid var(--rule)}

.drop{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;
  border-radius:var(--radius);background:none;color:var(--ink-3)}
.drop:hover{background:var(--rule-2);color:var(--bad)}
.drop .icon{width:16px;height:16px}

/* quick add: a line without leaving the page */
.quick-add{position:sticky;top:0;z-index:20;display:grid;gap:10px;align-items:start;
  grid-template-columns:minmax(0,1fr) 112px auto;
  padding:14px 0 16px;margin-bottom:6px;background:var(--paper)}
.finder{position:relative;min-width:0}
.finder .seek{height:40px}
.clear-find{width:22px;height:22px;flex:none;display:grid;place-items:center;padding:0;
  border:0;background:none;color:var(--ink-3)}
.clear-find:hover{color:var(--ink)}
.clear-find .icon{width:14px;height:14px}
/* type="search" draws its own clear button, which would sit beside ours. */
.finder input[type="search"]::-webkit-search-cancel-button,
.finder input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;display:none}
.quick-add .btn{height:40px;padding:0 20px}
.quick-add .btn[disabled]{opacity:.45;cursor:default}
.quick-add .amount-picker{height:40px;width:112px}

.found{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;margin:0;padding:0;
  max-height:330px;overflow-y:auto;overflow-x:hidden;list-style:none;
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius-lg);
  box-shadow:0 14px 32px rgba(6,10,20,.34)}
/* A column each, because which field the dealer is matching on depends on what
   they typed: a code narrows to one product, a colour name narrows to none. */
.found li[role="option"]{display:grid;align-items:center;gap:0 14px;
  grid-template-columns:18px minmax(0,1.1fr) minmax(0,1.2fr) 74px 86px;
  padding:8px 10px;cursor:pointer}
.found li[role="option"]:nth-of-type(odd){background:color-mix(in srgb, var(--ink) 3.5%, transparent)}
.found li[role="option"]:hover,.found li.on{background:var(--primary-wash)}
.found .dab{width:18px;height:18px}
.found .dab.plain .icon{width:11px;height:11px}
.found .colour,.found .product,.found .unit{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.found .colour{font-size:13px;font-weight:600;color:var(--ink)}
.found .product{font-size:12px;color:var(--ink-3)}
/* Right-aligned so "Litres" stacks; the number is what varies in front of it. */
.found .unit{font-family:var(--mono);font-size:11px;color:var(--ink-2);text-align:right}
/* Left-aligned: a dealer scans a code from its prefix, not its tail. */
.found .sku{justify-self:start;padding:2px 6px;border-radius:3px;
  background:var(--rule-2);font-family:var(--mono);font-size:10.5px;color:var(--ink-2)}
.found .none{padding:9px;font-size:12px;color:var(--ink-3)}

@keyframes landed{ from{background:color-mix(in srgb, var(--gold) 26%, transparent)} }
.order-line.landed{animation:landed 1.4s ease-out}

/* the order: the summary rail */
/* A long order scrolls the Send button off the screen, so the total follows down. */
.order-summary{position:sticky;top:16px}
.indicative{margin-top:9px;font-size:12px;line-height:1.5}
.rail .rule-hard{margin:16px 0 14px}
.pair.strong{font-size:14.5px;font-weight:600;padding-top:12px}
.pair b{font-variant-numeric:tabular-nums}
.pair b.info{color:var(--ink)}
.pair b.warn{color:var(--warn)}
.pair b.bad{color:var(--bad)}
.pair b.pending{font-weight:400;font-style:italic;color:var(--ink-3)}
/* An arrow rather than a strikethrough: the rule runs straight through 8, 0 and
   6 and leaves the figure unreadable. */
.pair b .was{font-weight:400;color:var(--ink-3)}
.pair b .to{margin:0 5px;color:var(--ink-3)}
.meta-line.quiet{margin-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.save-draft{display:flex;flex-direction:column;gap:12px}
.note-field{margin:18px 0 14px}
.note-field textarea{width:100%;resize:vertical;padding:9px 11px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);font:400 13.5px var(--body)}
.note-field textarea:focus{outline:0;border-color:var(--ink)}
.btn.wide{width:100%}
.btn.wide + .btn.wide{margin-top:9px}
.fine{margin:9px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3);text-align:center}

.empty-order{display:flex;flex-direction:column;align-items:center;gap:14px;padding:52px 24px}
.empty-order .icon{width:30px;height:30px;color:var(--ink-3)}
.empty-order p{margin:0;color:var(--ink-2)}

.ask{width:min(420px,92vw);padding:24px;border:0;border-radius:var(--radius-lg);
  background:var(--sheet);color:var(--ink)}
.ask::backdrop{background:rgba(6,10,20,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ask h2{font-size:17px;margin-bottom:8px}
.ask .note{margin-bottom:20px}
.ask-actions{display:flex;flex-direction:column;gap:9px}
.ask-actions .btn{width:100%}
.ask #swap-off,.ask #clear-off,.ask #discard-off{display:block;margin:6px auto 0;border-bottom-color:var(--rule)}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:40px;padding:0 20px;
  border:2px solid var(--action);background:var(--action);color:#fff;
  font-family:var(--card);font-weight:700;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;border-radius:var(--radius);
  box-shadow:0 2px 10px color-mix(in srgb, var(--action) 24%, transparent);
  transition:box-shadow .15s, transform .15s}
.btn:hover{transform:translateY(-1px);
  box-shadow:0 5px 16px color-mix(in srgb, var(--action) 32%, transparent)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink-3);box-shadow:none}
.btn-outline:hover{transform:none;box-shadow:none;background:var(--rule-2);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}
.btn-link{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;font-family:var(--card);font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid var(--gold);height:auto}
.btn svg{flex:none}
.btn .icon{width:16px;height:16px}
/* Sized to the 11.5px label, not left at the 19px sprite default. */
.btn-link .icon{width:13px;height:13px}
.clear-link{border-bottom:0;color:var(--ink-3)}
.clear-link:hover{color:var(--bad)}

/* Cart header: title with Continue shopping on the top line, the counts with
   Clear all on the line below, each pair sharing the page's full width. */
.cart-head{display:grid;grid-template-columns:1fr auto;align-items:center;
  column-gap:18px;row-gap:6px;margin-bottom:22px;
  grid-template-areas:"title action" "meta clear"}
.cart-head h1{grid-area:title}
.cart-head .actions{grid-area:action;justify-self:end}
.cart-head .subhead{grid-area:meta;margin:0}
.cart-head .clear-link{grid-area:clear;justify-self:end}
/* Above the stack point the rail sits on the right. Continue shopping keeps the
   page edge, above the rail; Clear all pulls in by the rail width so it lines up
   with the items column instead (rail 320 + gap 28). */
@media (min-width:901px){ .cart-head .clear-link{margin-right:348px} }
/* On a phone: title alone, the counts and Clear all sharing a line, then
   Continue shopping full width below. */
@media (max-width:900px){
  .cart-head{grid-template-areas:"title title" "meta clear" "action action"}
  .cart-head .actions{justify-self:stretch;margin-top:8px}
  .cart-head .actions .btn{width:100%}
}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.filters + .filters{margin-top:-10px}
.filter{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--card);font-weight:600;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:7px 13px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);border-radius:var(--radius)}
.filter .icon{width:13px;height:13px;stroke-width:2.2}
.filter[aria-pressed="true"],
.filter.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* On a phone each filter is one swipeable row bleeding to the screen edges, with a
   fade on the right to say there is more. */
@media (max-width:640px){
  /* No padding on the right: a sticky offset is measured from the scrollport's
     padding box, so any right padding would sit the fade inside the page edge and
     leave a band of unfaded chip beyond it. */
  .filters{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;
    margin:0 -16px 14px;padding:0 0 4px 16px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  /* Not mask-image: a mask makes the row the containing block for the fixed-position
     date sheet inside it, which then renders clipped to the row. */
  /* margin-left:auto parks the fade past the last chip on a row that already fits, so
     it lands on bare background and dims nothing. A row that overflows has no free
     space, the margin collapses, and sticky pins the fade to the edge instead. */
  .filters::after{content:"";position:sticky;right:0;flex:none;width:40px;margin-left:auto;
    background:linear-gradient(to right, transparent, var(--paper));pointer-events:none}
  .filters + .filters{margin-top:-4px}
  .filter{flex:none;scroll-snap-align:start;padding:8px 13px}
}

/* the period filter: chips, and one calendar for the range they pick themselves */
.pick-dates{position:relative}
.pick-dates summary{display:inline-flex;cursor:pointer;list-style:none}
.pick-dates summary::-webkit-details-marker{display:none}
.pick-dates .panel{position:absolute;left:0;top:calc(100% + 6px);z-index:25;
  width:288px;max-width:calc(100vw - 32px);
  display:flex;flex-direction:column;gap:10px;padding:14px;
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius-lg);
  box-shadow:0 14px 34px rgba(16,24,40,.24), 0 2px 6px rgba(16,24,40,.10)}

/* The bar a thumb drags a sheet down by. Only a phone shows one. */
.pick-dates .grab{display:none}

.pick-dates .chosen{display:flex;flex-direction:column;gap:3px;
  padding-bottom:10px;border-bottom:1px solid var(--rule)}
.pick-dates .reads{font-family:var(--card);font-weight:600;font-size:14px;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pick-dates .hint{font-size:11.5px;color:var(--ink-3)}
.pick-dates .panel-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pick-dates .panel-foot .fine{margin:0;font-size:11px}
.pick-dates .panel-foot .btn{height:36px;padding:0 20px;margin-left:auto}

/* a calendar of our own, because the browser's own is not ours to style */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.cal-month{font-family:var(--card);font-weight:600;font-size:12.5px;letter-spacing:.03em}
.cal-step{width:28px;height:28px;flex:none;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--sheet);color:var(--ink);font-size:16px;line-height:1;cursor:pointer}
.cal-step:hover:not(:disabled){border-color:var(--ink-3)}
.cal-step:disabled{color:var(--ink-3);opacity:.4;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0}
.cal-day-name{display:grid;place-items:center;height:22px;font-family:var(--card);
  font-weight:700;font-size:9.5px;letter-spacing:.08em;color:var(--ink-3)}
.cal-day{height:34px;border:0;background:none;color:var(--ink);cursor:pointer;
  font:500 12.5px var(--mono);font-variant-numeric:tabular-nums;border-radius:0}
.cal-day:hover:not(:disabled):not(.edge){background:var(--rule-2)}
.cal-day:disabled{color:var(--ink-3);opacity:.3;cursor:default}
/* The run between the two ends is tinted flat, so the ends read as the handles. */
.cal-day.between{background:var(--rule-2)}
.cal-day.edge{background:var(--ink);color:var(--paper);font-weight:700}
.cal-day.opens{border-radius:var(--radius) 0 0 var(--radius)}
.cal-day.closes{border-radius:0 var(--radius) var(--radius) 0}
.cal-day.opens.closes{border-radius:var(--radius)}

/* On a phone the panel is a sheet off the bottom edge, not a popover pinned to a
   chip that may itself have wrapped halfway across the screen. */
@media (max-width:640px){
  .pick-dates[open]::before{content:"";position:fixed;inset:0;z-index:55;
    background:rgba(8,12,20,.55)}
  .pick-dates[open] .panel{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;
    width:auto;max-width:none;gap:12px;padding:10px 16px calc(20px + env(safe-area-inset-bottom));
    border-width:1px 0 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    animation:date-sheet-up .2s ease-out}
  .pick-dates .grab{display:block;width:38px;height:4px;margin:0 auto 2px;
    border-radius:999px;background:var(--rule)}
  .pick-dates .reads{font-size:15.5px}
  .cal-day{height:42px;font-size:14px}
  .cal-day-name{height:26px;font-size:10.5px}
  .pick-dates .panel-foot .btn{height:44px;flex:1;max-width:180px}
}
@keyframes date-sheet-up{ from{ transform:translateY(12px); opacity:.6 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){ .pick-dates[open] .panel{animation:none} }

/* The dates a summary card is totalling, under its label. */
.spanned{margin:6px 0 12px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* paging a long list */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pager .where{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.pager .steps{display:flex;align-items:center;gap:8px;margin-left:auto}
.pager .step,
.pager .number{font-family:var(--card);font-weight:600;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;border:1px solid var(--rule);background:var(--sheet);
  color:var(--ink);border-radius:var(--radius)}
.pager .step{padding:7px 13px}
.pager .step:hover,
.pager .number:hover{border-color:var(--ink-3)}
.pager .step.spent{color:var(--ink-3);border-color:var(--rule);pointer-events:none}

.pager .numbers{display:flex;align-items:center;gap:4px}
.pager .number{min-width:32px;padding:7px 6px;text-align:center;letter-spacing:0;
  font-variant-numeric:tabular-nums}
.pager .number.here{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pager .gap{padding:0 2px;color:var(--ink-3);font-family:var(--mono);font-size:12px}

.ledger-foot + .pager,
.record-row + .pager{margin-top:18px}
.pager + .ledger-head{margin-top:14px}

/* Numbers are the first thing to go when the row will not fit. */
@media (max-width:620px){
  .pager .numbers{display:none}
  .pager .steps{margin-left:0;width:100%;justify-content:space-between}
}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--card);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.input{height:46px;padding:0 14px;border:2px solid var(--ink);background:var(--sheet);color:var(--ink);font:500 16px var(--body);width:100%;border-radius:var(--radius)}
.input[aria-invalid="true"]{border-color:var(--bad)}
.field-problem{margin:0;font-size:12.5px;line-height:1.45;color:var(--bad)}

/* credit bar */
.meter{height:14px;background:var(--rule-2);display:flex;border:1px solid var(--rule);
  border-radius:2px;overflow:hidden}
.meter .fill{display:block;animation:meter-fill .9s cubic-bezier(.22,.8,.24,1) both}
.meter .fill.info{background:var(--primary)}
.meter .fill.warn{background:var(--warn)}
.meter .fill.bad{background:var(--bad)}
@keyframes meter-fill{from{width:0}}
@media (prefers-reduced-motion:reduce){ .meter .fill{animation:none} }
.meter-legend{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.meter-legend b{color:var(--ink);font-weight:500}

/* as-at stamp */
.as-at{margin:11px 0 0;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.as-at time{font-style:normal}
.as-at .relative{color:var(--ink-3)}

/* Bleeds to the card edges, so it reads as a band on the balance rather than a
   second card. The negative margins must match .padded exactly. */
.credit-note{display:flex;align-items:flex-start;gap:10px;
  margin:18px -22px -20px;padding:13px 22px;
  border-top:1px solid var(--rule);background:var(--rule-2);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.credit-note .icon{width:17px;height:17px;margin-top:2px;color:var(--ok)}
.credit-note b{font-weight:600;color:var(--ok)}

/* statement */
.standing{margin-bottom:22px}
.standing .figure{margin-top:5px}
.standing.ahead .figure{color:var(--ok)}
.standing .as-at{margin-top:8px}

.ledger-head,.ledger-foot{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding:11px 0;font-size:13.5px}
.ledger-head{border-bottom:2px solid var(--ink);color:var(--ink-2)}
.ledger-foot{border-top:2px solid var(--ink);margin-top:5px;font-weight:700}
.disclaimer{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--rule-2);
  font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.ledger-head .running,.ledger-foot .running{font-weight:600;font-variant-numeric:tabular-nums}

.ledger-month{margin:22px 0 0;font-family:var(--card);font-weight:700;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* Debit and credit never both appear on a row, so one signed column does the work
   of two and the colour carries the direction. */
.ledger-row{display:grid;align-items:center;gap:0 14px;padding:11px 0;
  grid-template-columns:58px minmax(0,1fr) 128px 128px;
  border-bottom:1px solid var(--rule-2)}
.ledger-row .when{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.ledger-row .what{display:flex;flex-direction:column;gap:1px;min-width:0}
.ledger-row .title{font-size:14px;font-weight:600;line-height:1.25}
.ledger-row .source{font-size:11.5px;color:var(--ink-3)}
.ledger-row .moved{text-align:right;font-weight:600;font-size:13.5px;
  font-variant-numeric:tabular-nums}
.ledger-row .moved.clears{color:var(--ok)}
.ledger-row .running{text-align:right;font-family:var(--mono);font-size:12px;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.ledger-more{margin-top:16px}

/* orders and payments share one row: a date, what it was, where it stands, and
   what can be done about it. */
.record-row{display:grid;align-items:center;gap:0 16px;padding:15px 0;
  grid-template-columns:52px minmax(0,1fr) auto;
  grid-template-areas:"when what standing" ". doing doing" ". why why";
  border-bottom:1px solid var(--rule-2)}
.record-row .when{grid-area:when;display:flex;flex-direction:column;align-items:center;
  font-family:var(--mono);line-height:1.1}
.record-row .when b{font-size:17px;font-weight:500;color:var(--ink)}
.record-row .when span{font-size:10px;color:var(--ink-3)}
.record-row .what{grid-area:what;display:flex;flex-direction:column;gap:2px;min-width:0}
.record-row .title{font-size:14.5px;font-weight:600;line-height:1.25}
.record-row .source{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.record-row .strip{display:flex;flex-wrap:wrap;gap:2px;margin-top:5px;max-width:100%}
.record-row .strip .dab{flex:none;width:15px;height:15px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.14)}

.record-row .standing{grid-area:standing;display:flex;flex-direction:column;
  align-items:flex-end;gap:5px;text-align:right}
.record-row .sum{font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
/* What we actually credited, when it differs from what was reported. */
.record-row .settled{font-family:var(--mono);font-size:10.5px;color:var(--ok)}
.record-row .title{color:var(--ink)}
.record-row a.title:hover{color:var(--primary)}
/* A gold underline is for the single emphasis link on a page, not for one on
   every line, so grouped actions sit on their own row underneath instead. */
.record-row .doing{grid-area:doing;display:flex;gap:20px;margin-top:11px}
/* border-bottom rather than text-decoration, so the rule runs under the icon too. */
/* Used on a button as well as a link, so the browser's own face and border go first. */
.act{display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;border-bottom:1px solid var(--rule);padding:0 0 3px;cursor:pointer;
  font-family:var(--card);font-weight:600;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.act .icon{width:13px;height:13px;color:var(--ink-3)}
.act:hover{color:var(--ink);border-bottom-color:var(--gold)}
.act:hover .icon{color:var(--ink)}
.record-row .why{grid-area:why;margin-top:10px;font-size:12.5px}
.banner{margin:0 0 20px}

/* forms */
.field select,.field input[type="text"],.field input[type="date"],.field input[type="file"]{
  width:100%;padding:9px 11px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);font:400 13.5px var(--body)}
.field select:focus,.field input:focus{outline:0;border-color:var(--ink)}
.field input[type="file"]{padding:8px 10px;font-size:12.5px;color:var(--ink-2)}

/* one order, read rather than edited */
.crumb{margin:0 0 6px;font-family:var(--card);font-weight:600;font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}
.order-line.reading{grid-template-columns:26px minmax(0,1fr) 72px 104px 112px}
.order-line .counted{text-align:right;font-family:var(--mono);font-size:13px;
  font-variant-numeric:tabular-nums}
.block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}

.verdict,.asked,.handing-over{margin-bottom:26px}

/* Sits under the line it belongs to, because a change and the line it changed
   are one fact. */
/* No bleed past the row: the band has to line up with the separators above and
   below it, or it reads as a card laid over the list. */
.order-line.adjusted{background:color-mix(in srgb, var(--warn) 8%, transparent)}
.order-line .changed{grid-column:2 / -1;margin-top:5px;font-size:12.5px;color:var(--warn)}
.order-group.added .lineup-head{border-bottom-color:var(--warn)}
.order-group.added .lineup-head h2{color:var(--warn)}
.verdict .eyebrow{color:var(--bad);margin-bottom:7px}
.verdict .said{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink)}
.verdict .who{margin:9px 0 0;font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* Stacked, not .pair: an address right-aligned against its label wraps badly. */
.facts{display:flex;flex-direction:column;gap:15px;margin-top:15px}
.fact .label{display:block;font-family:var(--card);font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.fact .value{display:block;font-size:13.5px;font-weight:500;line-height:1.4;overflow-wrap:break-word}

.pair{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-2);font-size:13.5px}
.pair:last-child{border-bottom:0}
.pair .key{color:var(--ink-3)}
.pair .value{font-weight:600;font-variant-numeric:tabular-nums}

.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--card);font-weight:700;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;border-radius:var(--radius)}
.tag-info{color:var(--primary)}.tag-ok{color:var(--ok)}.tag-warn{color:var(--warn)}.tag-bad{color:var(--bad)}
/* Not a state YSR has acted on, so it stays quiet beside the live ones. */
.tag-draft{color:var(--ink-3);border-style:dashed}

.note{font-size:13.5px;line-height:1.55;margin:0;color:var(--ink-2)}
/* Links are undecorated everywhere else, but inside a sentence one has to read as a link. */
.note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.note b{font-weight:600;color:var(--ink)}
.note-ok b{color:var(--ok)}
.note-warn b{color:var(--warn)}
.note-bad b{color:var(--bad)}
.note-muted b{color:var(--ink)}

/* the line a handler leaves behind */
.flash{margin:0 0 18px;padding:10px 13px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--rule-2);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.flash-ok{border-color:color-mix(in srgb,var(--ok) 38%,transparent);
  background:color-mix(in srgb,var(--ok) 9%,transparent);color:var(--ok)}
.flash-warn{border-color:color-mix(in srgb,var(--warn) 38%,transparent);
  background:color-mix(in srgb,var(--warn) 9%,transparent);color:var(--warn)}
.flash-bad{border-color:color-mix(in srgb,var(--bad) 38%,transparent);
  background:color-mix(in srgb,var(--bad) 9%,transparent);color:var(--bad)}

/* activity list */
.entries{border-top:1px solid var(--rule)}
.entry{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule-2)}
.entry .when{font-family:var(--mono);font-size:11px;color:var(--ink-3);width:84px;flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.entry .what .title{font-size:14px;font-weight:600;line-height:1.3}
.entry .what .subtitle{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.entry .amount{margin-left:auto;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.entry .amount .credit{color:var(--ok)}

/* sign in */
.gate{min-height:100vh;display:flex}
/* Decoration on a page nobody has signed in to: it takes no pointer, hands out no
   text, and offers no long-press menu to copy a code out of. */
.swatch-wall{pointer-events:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none}
.gate .swatch-wall{width:46%;max-width:620px;flex:none;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;
  gap:3px;padding:3px;background:var(--paper)}
.swatch-tile{perspective:800px}
.swatch-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.22,.8,.24,1)}
.swatch-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:10px 11px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-image:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%);
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.06)}
.swatch-back{transform:rotateY(180deg)}
.swatch-face.on-dark{color:#fff}
.swatch-face.on-light{color:#101828}
.swatch-name{font-family:var(--card);font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swatch-code{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;opacity:.8;margin-top:2px}
@media (prefers-reduced-motion:reduce){ .swatch-card{transition:none} }
.gate .form{flex:1;display:grid;place-items:center;padding:48px 40px;position:relative}
.gate .theme{position:absolute;top:18px;right:18px}
.gate .form .inner{width:100%;max-width:392px}
.gate .tagline{margin-top:10px}
.gate h1{font-size:31px;margin:38px 0 10px}
.gate .intro{margin:0 0 30px;color:var(--ink-2);font-size:15.5px}
.gate .stack{gap:18px}
.gate .btn{width:100%;height:48px}

.digits{display:flex;gap:8px}
.digits input{flex:1;min-width:0;height:58px;padding:0;text-align:center;
  border:2px solid var(--ink);border-radius:var(--radius);background:var(--sheet);color:var(--ink);
  font:500 26px/1 var(--mono)}
.gate .after{margin-top:26px;display:flex;flex-direction:column;gap:18px}
/* The driver's way out of a page built for customers. */
.gate .gate-handover{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule)}
.gate .secondary-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
/* Resending is a write, so its button lives in a form. The form itself is not a row. */
.gate .secondary-actions form{display:contents}
.callout{display:inline-block;margin:6px 0 10px;font-size:26px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;border-bottom:2px solid var(--gold)}
.callout:hover{color:var(--primary)}
.btn-link[disabled]{color:var(--ink-3);border-bottom-color:var(--rule);cursor:default}

.tabbar{display:none}

@media (max-width:900px){
  .masthead .bar{padding:12px 16px 12px}
  .masthead nav{display:none}
  .sheet{padding:18px 16px 92px}
  .columns{flex-direction:column;align-items:stretch;gap:20px}
  .rail{width:100%}
  .figure{font-size:34px}

  .head{gap:14px}
  .head h1{font-size:23px}
  .head .spacer{display:none}
  .head .actions{width:100%}
  .head .actions .btn{flex:1;padding:0 12px}

  /* Two long mono strings side by side do not fit a phone. */
  .meter-legend{flex-direction:column;gap:3px}
  .meter-legend span{display:flex;justify-content:space-between}

  /* A 17px-tall link is not a tap target. */
  .more .btn-link{display:inline-block;padding:9px 0}
  .desktop-only{display:none !important}
  .mobile-only{display:block}
  .chart{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}
  .gate{flex-direction:column;min-height:0}
  .gate .swatch-wall{width:100%;max-width:none;height:120px;grid-template-columns:repeat(8,1fr);gap:2px;padding:2px}
  .swatch-name,.swatch-code{display:none}
  .gate .form{padding:24px 16px}
  .digits{gap:6px}

  /* shop on a phone */
  /* The rail is a column here, where flex-basis governs height and beats the
     height property, so the field must not declare one. */
  .seek{flex:none;height:48px;padding:0 14px}
  /* Below 16px iOS zooms the whole page the moment the field is tapped. */
  .seek input{font-size:16px}
  .seek .icon{width:17px;height:17px}
  .swatches{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:2px}
  .colour-tile .name{font-size:9.5px}

  /* the detail lives in the sheet on a phone, so the rail is not needed */
  .columns .rail.follows{display:none}

  /* A pinned 224px rail would sit over the results and fill the screen before
     a single product, so on a phone it is full width and folds away. */
  /* A row that wraps, so search and filters share the first line and the facets
     drop to a full-width second one when opened. */
  .filters-rail{width:100%;position:static;flex-direction:row;flex-wrap:wrap;gap:10px}
  .seek{flex:1 1 auto;min-width:0;height:48px;padding:0 14px}
  .facet-toggle{position:relative;flex:none;width:48px;height:48px;padding:0;
    display:grid;place-items:center;border:1px solid var(--rule);
    border-radius:var(--radius);background:var(--sheet);color:var(--ink-2)}
  .facet-toggle .icon{width:19px;height:19px}
  .facet-toggle[aria-expanded="true"]{border-color:var(--ink);color:var(--ink)}
  .facet-list{display:none;flex:0 0 100%}
  .filters-rail.open .facet-list{display:flex}

  /* A one-line row wraps the product name into three lines at this width, so
     the name takes a line of its own and the two notes share the next. */
  .lineup-head{flex-wrap:wrap;gap:0 10px}
  .lineup-head h2{flex:0 0 100%;margin-bottom:4px;font-size:13.5px;letter-spacing:.1em}

  .sundries{margin-top:26px}

  /* Six columns will not fit, so the line folds. The right column stacks the
     bold total, the unit price directly under it, and the bin under that. The
     swatch and name fill the two rows beside them; the picker sits bottom left. */
  .order-line{gap:4px 10px;padding:12px 0;
    grid-template-columns:26px minmax(0,1fr) auto;
    grid-template-areas:"dab what total" "dab what each" "picker picker drop"}
  .order-line .dab{grid-area:dab;align-self:start}
  .order-line .what{grid-area:what}
  .order-line .amount-picker{grid-area:picker;width:108px;margin-top:6px}
  .order-line .each{grid-area:each}
  .order-line .line-total{grid-area:total;align-self:end}
  .order-line .drop{grid-area:drop;justify-self:end;margin-top:6px}

  .rail.stack{width:100%}
  /* Nothing to follow on a phone: the rail is the end of the page. */
  .order-summary{position:static}
  .rail.sticks{position:static;max-height:none;overflow-y:visible}

  .ledger-row{gap:4px 12px;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"what moved" "when running"}
  .ledger-row .when{grid-area:when}
  .ledger-row .what{grid-area:what}
  .ledger-row .moved{grid-area:moved}
  .ledger-row .running{grid-area:running}

  /* The actions move under the record rather than squeezing a fourth column. */
  .record-row{gap:8px 12px;grid-template-columns:44px minmax(0,1fr) auto}
  .record-row .doing{gap:16px;margin-top:4px}
  .record-row .why{margin-top:2px}

  .order-line .changed{grid-column:1 / -1}

  .quick-add{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"finder finder" "picker add";gap:8px}
  .finder{grid-area:finder}
  .quick-add .amount-picker{grid-area:picker}
  .quick-add .btn{grid-area:add}

  .order-line.reading{grid-template-columns:26px minmax(0,1fr) auto auto;
    grid-template-areas:"dab what what counted" "picker picker each total"}
  .order-line .counted{grid-area:counted}

  /* a bottom sheet, not a centred box */
  .viewer,.ask{width:100%;max-width:none;max-height:86vh;margin:auto auto 0;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    animation:sheet-up .24s cubic-bezier(.22,.8,.24,1)}
  .ask{padding:24px 20px calc(22px + env(safe-area-inset-bottom, 0px))}
  .viewer .chip{height:112px}
  .viewer::before{content:"";position:absolute;top:8px;left:50%;margin-left:-19px;z-index:2;
    width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.55)}
  @keyframes sheet-up{ from{transform:translateY(100%)} }

  /* The masthead menu duplicates the More sheet and sits where a thumb can't reach. */
  .masthead .account{display:none}
  /* It carried the auto margin, so without it the right-hand group falls back to the logo. */
  .masthead .cart-link{margin-left:auto}

  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);border-top:2px solid var(--ink)}

  /* On body, not inside the bar: a backdrop nested in .tabbar would paint over the
     bar's own background and blur the control you are using. */
  body:has(.tabbar .more[open])::after{
    content:"";position:fixed;inset:0;z-index:25;
    background:color-mix(in srgb, var(--paper) 45%, transparent);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  /* flex:1 belongs on the details element; the summary is not the bar's flex child. */
  .tabbar .more{flex:1;display:flex}
  .tabbar > a,
  .tabbar .more summary{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:8px 2px 11px;font-family:var(--card);font-weight:700;font-size:9.5px;
    letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
  .tabbar > a[aria-current="page"],
  .tabbar .more[data-current] summary{color:var(--navy);background:var(--gold)}

  .tabbar .more summary{list-style:none;cursor:pointer}
  .tabbar .more summary::-webkit-details-marker{display:none}
  .tabbar .more[open] summary{color:var(--ink);background:var(--rule-2)}

  /* No position on .more, so the panel sizes against the fixed bar and spans it. */
  .tabbar .more .panel{position:absolute;left:0;right:0;bottom:100%;z-index:30;
    background:var(--sheet);border-top:1px solid var(--rule);padding:6px;
    box-shadow:0 -12px 28px rgba(16,24,40,.18)}
  .tabbar .more .panel a,
  .tabbar .more .panel button{display:flex;align-items:center;gap:13px;flex:none;width:100%;text-align:left;
    padding:13px 14px;border:0;border-radius:var(--radius);background:none;font-family:var(--body);font-weight:600;
    font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}
  .tabbar .more .panel a:active,
  .tabbar .more .panel button:active{background:var(--rule-2)}
  .tabbar .more .panel a .icon,
  .tabbar .more .panel button .icon{color:var(--ink-3)}
  .tabbar .more .panel a .count{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--ink-3)}
  .tabbar .more .panel form{margin:0}
  .tabbar .more .panel .separator{height:1px;background:var(--rule);margin:5px 8px}
  .tabbar .more .whose{display:flex;align-items:center;gap:11px;padding:11px 14px 14px}
  .tabbar .more .whose .initials{width:36px;height:36px;flex:none;display:grid;place-items:center;
    border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--card);
    font-weight:700;font-size:12.5px;letter-spacing:.06em}
  .tabbar .more .whose .text{display:flex;flex-direction:column;gap:1px;min-width:0}
  .tabbar .more .whose .business{font-family:var(--card);font-weight:600;font-size:15px;letter-spacing:.03em}
  .tabbar .more .whose .code{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
}

/* Delivery handover. Read on a driver's phone at the customer's gate, so the
   targets are sized for a thumb in a hurry rather than a mouse. */
.handover{background:var(--paper)}
.handover-top{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--rule);background:var(--sheet)}
.handover-top .spacer{flex:1}
.handover-body{max-width:560px;margin:0 auto;padding:24px 18px 44px}

.handover-title{font-family:var(--card);font-size:26px;margin:0 0 8px}
.handover-body .intro{margin:0 0 20px;color:var(--ink-2);font-size:15px;line-height:1.55}
.handover-after{margin-top:22px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:14px}

.consignment{margin-bottom:20px}
.consignment .eyebrow{margin-bottom:6px}
.consignment h1{font-family:var(--card);font-size:26px;letter-spacing:.01em;margin:0 0 5px}
.consignment .where{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.consignment .carried{display:flex;align-items:center;gap:7px;margin:7px 0 0;
  color:var(--ink-2);font-size:14.5px;line-height:1.5}
.consignment .carried .icon{flex:none;width:17px;height:17px;color:var(--ink-3, var(--ink-2))}

.handover-brief{padding:14px 16px;margin-bottom:16px;background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--radius-lg)}
.handover-brief .lead{margin:0 0 4px;font-weight:600;font-size:15px}
.handover-brief .fine{margin:0;text-align:left}

.load{list-style:none;margin:0 0 22px;padding:0;background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden}
.load-line{border-bottom:1px solid var(--rule-2)}
.load-line:last-child{border-bottom:0}
/* Flat tint with no radius, so a short line reads as part of the list rather
   than a card dropped on top of it. */
.load-line.is-short{background:color-mix(in srgb, var(--warn) 8%, transparent)}

.took{display:grid;align-items:center;gap:0 12px;min-height:60px;padding:13px 14px;
  grid-template-columns:26px 26px minmax(0,1fr) auto;cursor:default}
.took input{position:absolute;width:1px;height:1px;opacity:0}
.took .box{width:26px;height:26px;display:grid;place-items:center;color:transparent;
  border:2px solid var(--ink-3);border-radius:var(--radius)}
.took .box .icon{width:16px;height:16px;stroke-width:3}
.took input:checked + .box,
.took .box.ticked{background:var(--ok);border-color:var(--ok);color:var(--sheet)}
.took input:focus-visible + .box{outline:2px solid var(--primary);outline-offset:2px}
.took .what{display:flex;flex-direction:column;gap:1px;min-width:0}
.took .name{font-weight:600;font-size:15px;line-height:1.25}
.took .sub{font-size:12px;color:var(--ink-3)}
.took .counted{font-family:var(--mono);font-size:16px;font-weight:500;
  font-variant-numeric:tabular-nums}

.short-entry{padding:0 14px 14px 78px}
.short-entry label{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2)}
/* .amount-input carries side borders for the nudge buttons it normally sits
   between; on its own it has to look like a field again. */
.short-entry .amount-input{flex:none;width:74px;height:40px;border:1px solid var(--rule);
  border-radius:var(--radius);background:var(--sheet);font-size:15px}
.short-entry .of{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}

.handover-foot .arrived{margin:0 0 13px;text-align:center;
  font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink)}
.handover-foot .arrived.short{color:var(--warn)}
.handover-foot .btn.wide{height:52px}
.handover-foot .fine{margin-top:11px}

.handover-body .field{margin-bottom:22px}
.told{margin-bottom:22px}
.told .said{margin:7px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink)}

.outcome{text-align:center;padding:14px 0 22px}
.outcome .icon{width:46px;height:46px;padding:10px;margin-bottom:15px;
  border-radius:50%;stroke-width:2.5}
.outcome.ok .icon{background:color-mix(in srgb, var(--ok) 14%, transparent);color:var(--ok)}
.outcome.bad .icon{background:color-mix(in srgb, var(--bad) 14%, transparent);color:var(--bad)}
.outcome h1{font-family:var(--card);font-size:27px;margin:0 0 9px}
.outcome p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}
.outcome .outcome-who{color:var(--ink);font-weight:600}

/* Live delivery on the customer's own order page. The lines repeated here are
   only the contested ones; the full list is already below. */
.handing-over .eyebrow{color:var(--primary)}
.handing-over .said{margin:7px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink)}
/* Two tracks rather than space-between: the count has to sit beside the name it
   belongs to, not at the far edge of a wide rail. */
.contested{list-style:none;margin:13px 0 0;padding:0;font-size:13.5px;
  display:grid;grid-template-columns:max-content max-content;gap:7px 22px;align-items:baseline}
.contested li{display:contents}
.contested .name{color:var(--ink)}
.contested .got{font-family:var(--mono);font-size:12px;color:var(--warn)}
.handing-over .rule-hard{margin:17px 0 15px}
.handover-code{margin:7px 0 0;font-family:var(--mono);font-size:30px;font-weight:500;
  letter-spacing:.14em;color:var(--ink)}
.handing-over .note{margin-top:11px}
.arrived-ask{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.arrived-ask .said{margin:7px 0 0;font-size:15px;font-weight:600;color:var(--ink)}

.timeline{list-style:none;margin:11px 0 0;padding:0}
.timeline li{position:relative;padding:0 0 17px 21px;display:flex;flex-direction:column;gap:2px}
.timeline li:last-child{padding-bottom:0}
/* The rail runs from each dot to the next, so the last item draws none. */
.timeline li::before{content:"";position:absolute;left:3px;top:14px;bottom:0;
  width:2px;background:var(--rule)}
.timeline li:last-child::before{display:none}
.timeline li::after{content:"";position:absolute;left:0;top:5px;width:8px;height:8px;
  border-radius:50%;background:var(--rule)}
.timeline li.done::after{background:var(--ok)}
.timeline li.now::after{background:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent)}
.timeline .what{font-weight:600;font-size:13.5px}
.timeline li.waiting .what{color:var(--ink-3)}
.timeline .when{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

.code-entry{display:flex;flex-direction:column;gap:12px;margin-bottom:4px}
.code-entry input{height:62px;padding:0 16px;text-align:center;text-transform:uppercase;
  border:2px solid var(--ink);border-radius:var(--radius);background:var(--sheet);color:var(--ink);
  font:500 27px/1 var(--mono);letter-spacing:.14em}
.code-entry input::placeholder{color:var(--ink-3);letter-spacing:.14em}
.code-entry .btn{height:52px}