/* Yard palette: spruce green signage, lichen ground, yellow marking paint for anything that needs a look. */
:root {
  --spruce: #1d4a3a; --spruce-deep: #133328; --ground: #eef1ec; --panel: #ffffff;
  --ink: #22211d; --soft: #5d655e; --line: #d3dad2; --paint: #f0b400; --paint-wash: #fff6d6;
  --red: #a8321c; --red-wash: #fbe9e4; --good-wash: #e2f1e6;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.5 var(--body); }
a { color: var(--spruce); }
h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.1; margin: 0; }
h1 { font-size: 2.1rem; letter-spacing: .01em; }
h2 { font-size: 1.35rem; margin-bottom: .6rem; }
p { margin: 0 0 .8rem; max-width: 68ch; }
.soft { color: var(--soft); }
.small { font-size: .875rem; }

.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--spruce); color: #fff; padding: 1.25rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: block; padding: 0 1.25rem 1.1rem; color: #fff; text-decoration: none; font: 600 1.5rem/1.05 var(--head); border-bottom: 1px solid rgba(255,255,255,.18); margin-bottom: .6rem; }
.brand span { display: block; font: 400 .85rem/1.4 var(--body); opacity: .75; margin-top: .25rem; }
.side nav a, .side button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: .55rem 1.25rem; color: #fff; text-decoration: none; background: none; border: 0; border-left: 5px solid transparent; font: 500 1rem var(--body); text-align: left; cursor: pointer; }
.side nav a:hover, .side button:hover { background: var(--spruce-deep); }
.side nav a.on { background: var(--spruce-deep); border-left-color: var(--paint); }
.side .gap { height: .9rem; }
.count { background: var(--paint); color: var(--ink); font-weight: 600; font-size: .8rem; border-radius: 99px; padding: 0 .5rem; }

main { padding: 1.75rem 2rem 4rem; min-width: 0; }
.top { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: end; justify-content: space-between; margin-bottom: 1.25rem; }
.top p { margin: .3rem 0 0; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.cols > .panel { margin: 0; }
.tally { display: flex; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 1.25rem; }
.tally a { flex: 1 1 150px; padding: .9rem 1.25rem; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line); }
.tally a:last-child { border-right: 0; }
.tally b { display: block; width: fit-content; font: 600 2rem/1 var(--head); color: var(--spruce); }
.tally a.marked b { color: var(--ink); box-shadow: inset 0 -.45em var(--paint); padding: 0 .15em; }

.msg { padding: .7rem 1rem; border-radius: 4px; margin-bottom: 1rem; border-left: 5px solid var(--spruce); background: var(--good-wash); }
.msg.bad { border-left-color: var(--red); background: var(--red-wash); }
.msg.warn { border-left-color: var(--paint); background: var(--paint-wash); }

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; font-size: .875rem; color: var(--soft); padding: .45rem .75rem .45rem 0; border-bottom: 2px solid var(--line); white-space: nowrap; }
td { padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.off td { color: var(--soft); }
td.num, th.num { text-align: right; padding-right: 0; white-space: nowrap; }
.empty { padding: 1rem 0; color: var(--soft); margin: 0; }

.tag { display: inline-block; padding: .05rem .55rem; border-radius: 3px; font-size: .85rem; font-weight: 500; background: var(--ground); border: 1px solid var(--line); white-space: nowrap; }
.tag.new, .tag.marked { background: var(--paint-wash); border-color: var(--paint); }
.tag.out_for_delivery, .tag.confirmed, .tag.ready, .tag.collected { background: var(--good-wash); border-color: #a9cdb3; }
.tag.cancelled, .tag.bad { background: var(--red-wash); border-color: #e5b3a6; }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.filters a { padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 3px; text-decoration: none; background: var(--panel); color: var(--ink); font-size: .9rem; }
.filters a.on { background: var(--spruce); border-color: var(--spruce); color: #fff; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem 1rem; }
.wide { grid-column: 1 / -1; }
label { display: block; font-weight: 500; font-size: .9rem; margin-bottom: .2rem; }
label .soft { font-weight: 400; }
input[type=text], input[type=url], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid #aab5aa; border-radius: 3px; background: #fff; color: var(--ink); font: 400 1rem var(--body); }
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.45; }
textarea.tall { min-height: 22rem; font-size: .95rem; }
input[type=range] { width: 100%; accent-color: var(--spruce); }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; font-size: 1rem; margin: 0; }
:focus-visible { outline: 3px solid var(--paint); outline-offset: 2px; }
.btn { display: inline-block; padding: .5rem 1rem; border: 1px solid var(--spruce); border-radius: 3px; background: var(--spruce); color: #fff; font: 500 1rem var(--body); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--spruce-deep); }
.btn.plain { background: #fff; color: var(--spruce); }
.btn.plain:hover { background: var(--ground); }
.btn.danger { background: #fff; color: var(--red); border-color: var(--red); }
.btn.sm { padding: .2rem .6rem; font-size: .875rem; }
.btn[disabled] { opacity: .5; cursor: default; }
.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
form.inline { display: inline; }

/* Call transcript: the one place the yellow paint does real work */
.script { list-style: none; margin: 0; padding: 0; }
.script li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0 .9rem; padding: .7rem .5rem .7rem .9rem; border-left: 5px solid transparent; border-bottom: 1px solid var(--line); scroll-margin-top: 1rem; }
.script li:last-child { border-bottom: 0; }
.script time { color: var(--soft); font-size: .85rem; padding-top: .15rem; }
.script .who { font-weight: 600; font-size: .9rem; }
.script .ai .who { color: var(--spruce); }
.script .said { margin: .1rem 0 0; max-width: 70ch; }
.script .tool { background: var(--ground); }
.script .tool pre { margin: .3rem 0 0; white-space: pre-wrap; word-break: break-word; font: .82rem/1.45 ui-monospace, Menlo, Consolas, monospace; color: var(--soft); }
.script .flagged { border-left-color: var(--paint); background: var(--paint-wash); }
.script details { margin-top: .4rem; }
.script summary { cursor: pointer; color: var(--spruce); font-size: .9rem; width: fit-content; }
.script details form { margin-top: .6rem; display: grid; gap: .6rem; max-width: 560px; }

.rule { border-left: 5px solid var(--spruce); padding: .2rem 0 .2rem .9rem; margin-bottom: 1.1rem; }
.rule.off { border-left-color: var(--line); color: var(--soft); }
.rule p { margin-bottom: .35rem; }

/* Test call */
.phone { max-width: 640px; }
.chat { min-height: 220px; max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; padding: .25rem 0 1rem; }
.bubble { max-width: 85%; padding: .55rem .8rem; border-radius: 4px; border: 1px solid var(--line); background: var(--ground); }
.bubble.me { align-self: flex-end; background: var(--spruce); border-color: var(--spruce); color: #fff; }
.bubble small { display: block; margin-top: .25rem; color: var(--soft); }
.bubble.err { background: var(--red-wash); border-color: #e5b3a6; }
.say { display: flex; gap: .5rem; }
.say input { flex: 1; min-width: 0; }

.login { max-width: 340px; margin: 12vh auto; padding: 0 1rem; }

@media (max-width: 820px) {
  .shell { display: block; }
  .side { position: static; height: auto; padding: .8rem 0 0; }
  .brand { border: 0; margin: 0; padding-bottom: .6rem; font-size: 1.3rem; }
  .brand span { display: none; }
  .side nav { display: flex; overflow-x: auto; white-space: nowrap; }
  .side nav a, .side button { width: auto; padding: .55rem .9rem; border-left: 0; border-bottom: 4px solid transparent; gap: .4rem; }
  .side nav a.on { border-bottom-color: var(--paint); }
  .side .gap { display: none; }
  main { padding: 1.1rem 1rem 3rem; }
  h1 { font-size: 1.75rem; }
  .script li { grid-template-columns: 1fr; }
}

/* Call page: conversation on one side, the caller's screen on the other */
.callpage { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 1.25rem; align-items: start; }
.callpage > .panel { margin: 0; }
.screen { min-height: 420px; }
.screen h2 { font-size: 1.6rem; margin-bottom: .9rem; }
.screen .hint { color: var(--soft); max-width: 46ch; }
.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.opt { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .2rem .9rem; align-items: center; width: 100%; text-align: left; padding: .8rem 1rem; background: #fff; border: 1px solid #aab5aa; border-radius: 4px; font: 400 1rem var(--body); color: var(--ink); cursor: pointer; }
.opt:hover { border-color: var(--spruce); background: var(--ground); }
.opt .n { font: 600 2rem/1 var(--head); color: var(--spruce); }
.opt .name { font-weight: 600; }
.opt .price { font: 600 1.35rem/1 var(--head); text-align: right; white-space: nowrap; }
.opt .price small, .big small { display: block; font: 400 .8rem var(--body); color: var(--soft); }
.opt .more { grid-column: 2 / -1; color: var(--soft); font-size: .9rem; }
.big { font: 600 2.2rem/1 var(--head); color: var(--spruce); margin: .2rem 0 .8rem; }
.map { width: 100%; height: 300px; border: 1px solid var(--line); border-radius: 4px; margin: .4rem 0 .9rem; display: block; }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; }
.choice .btn { padding: 1rem; font-size: 1.1rem; text-align: center; }
.basketbar { margin-top: 1.2rem; padding-top: .9rem; border-top: 2px solid var(--line); }
.basketbar h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.callpage .chat { max-height: 46vh; min-height: 160px; }
@media (max-width: 820px) {
  .callpage { grid-template-columns: 1fr; }
  .callpage .screen { order: -1; min-height: 0; }
  .opt { grid-template-columns: 2rem 1fr auto; padding: .7rem .8rem; }
}

/* Product pictures */
.thumb.none { border-style: dashed; }
.thumb { display: block; width: 56px; height: 42px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); background: var(--ground); }
.picrow { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.pic { flex: 0 0 240px; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--ground); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
input[type=file] { font: 400 .95rem var(--body); max-width: 100%; }

/* Caller's screen: pictures, facts, and the one bit of motion in the app.
   New content rises into place each time the screen changes, so the caller sees what moved. */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes unveil { from { opacity: 0; clip-path: inset(100% 0 0 0); transform: scale(1.05); } to { opacity: 1; clip-path: inset(0); transform: none; } }
.screen > * { animation: rise .42s cubic-bezier(.2, .7, .2, 1) both; }
.screen > :nth-child(2) { animation-delay: .06s; }
.screen > :nth-child(3) { animation-delay: .12s; }
.screen > :nth-child(n+4) { animation-delay: .18s; }
.opts li { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms + 80ms); }
.hero { aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--ground); margin-bottom: 1rem; }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; animation: unveil .7s cubic-bezier(.2, .7, .2, 1) both; }
.opt.pics { grid-template-columns: 2.2rem 84px 1fr auto; }
.opt .ph { grid-row: span 2; width: 84px; height: 63px; object-fit: cover; border-radius: 3px; background: var(--ground); border: 1px solid var(--line); display: block; }
.opt.pics .n { grid-row: span 2; }
.opt.pics .more { grid-column: 3 / -1; }
.pitch { font-size: 1.1rem; max-width: 52ch; }
.specs { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.1rem; margin: .9rem 0; }
.specs dt { color: var(--soft); font-size: .9rem; padding-top: .1rem; }
.specs dd { margin: 0; }
.bthumb { width: 44px; height: 33px; object-fit: cover; border-radius: 3px; vertical-align: middle; margin-right: .6rem; float: left; }
@media (max-width: 820px) {
  .opt.pics { grid-template-columns: 1.6rem 64px 1fr auto; }
  .opt .ph { width: 64px; height: 48px; }
  .specs { grid-template-columns: 1fr; gap: 0; }
  .specs dd { margin-bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .screen > *, .opts li, .hero img { animation: none; }
}

/* Call status: one glance tells you whose turn it is */
.status { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; margin-bottom: .7rem; border-radius: 4px; background: var(--ground); font-weight: 500; }
.status .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--soft); flex: none; }
.status[data-state=listening] { background: var(--good-wash); }
.status[data-state=listening] .dot { background: var(--spruce); animation: pulse 1.4s ease-in-out infinite; }
.status[data-state=thinking] .dot { background: var(--paint); animation: pulse .7s ease-in-out infinite; }
.status[data-state=speaking] { background: var(--paint-wash); }
.status[data-state=speaking] .dot { background: var(--paint); }
@keyframes pulse { 50% { transform: scale(1.7); opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .status .dot { animation: none !important; } }

/* Job plan: the blueprint and its materials list */
.blueprint { margin: 0 0 1rem; border-radius: 4px; overflow: hidden; animation: rise .45s ease-out both; }
.blueprint svg { display: block; width: 100%; height: auto; }
.planlist td .tag { margin-left: .4rem; }
.plannotes { margin: .8rem 0; padding-left: 1.1rem; max-width: 68ch; }
@media print {
  .side, .noprint, .msg, .basketbar { display: none !important; }
  .shell, .callpage { display: block; }
  main { padding: 0; }
  body { background: #fff; }
  .panel { border: 0; padding: 0; }
  .blueprint svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Plan controls and cutting list */
.plancontrols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem 1rem; align-items: end; padding: .9rem 1rem; margin-bottom: 1rem; background: var(--ground); border-radius: 4px; }
.plancontrols .check { padding-bottom: .5rem; }
.cutlist { margin: 1rem 0; }
.cutlist summary { cursor: pointer; font-weight: 600; color: var(--spruce); }
.cutlist p { margin: .7rem 0 .2rem; }
table.cuts { width: auto; }
table.cuts td { padding: .2rem 1rem .2rem 0; border: 0; }

/* Import page */
progress { width: 100%; height: 1rem; margin-top: .6rem; accent-color: var(--spruce); }
img.thumb, span.thumb { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 3px; background: var(--ground); }
#list td { vertical-align: middle; }
#list td:first-child { width: 2rem; }
#list td:nth-child(2) { width: 60px; }

/* Caller's screen: back / basket buttons, and the category menu */
.screennav { display: flex; gap: .5rem; margin-bottom: .8rem; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.cat { display: flex; flex-direction: column; gap: .15rem; text-align: left; padding: .9rem 1rem; background: #fff; border: 1px solid #aab5aa; border-left: 5px solid var(--spruce); border-radius: 4px; font: 400 1rem var(--body); color: var(--ink); cursor: pointer; animation: rise .35s ease-out both; }
.cat:hover { background: var(--ground); }
.cat .name { font: 600 1.2rem/1.15 var(--head); }

/* Product galleries and category pictures */
.gallery { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .6rem; }
.gallery .shot { display: flex; flex-direction: column; gap: .3rem; width: 130px; margin: 0; font-weight: 400; }
.gallery img { width: 130px; height: 130px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); }
.thumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.3rem 0 .9rem; }
.thumbbtn { padding: 0; width: 60px; height: 60px; border: 1px solid #aab5aa; border-radius: 3px; background: #fff; cursor: pointer; overflow: hidden; }
.thumbbtn:hover, .thumbbtn:focus-visible { border-color: var(--spruce); }
.thumbbtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat .catpic { width: 100%; height: 96px; object-fit: cover; border-radius: 3px; margin-bottom: .35rem; }

#list tr.grouphead td { background: var(--ground); padding: .5rem .6rem; border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------- Customer page (/talk) */
.talk { background: var(--ground); min-height: 100vh; display: flex; flex-direction: column; }
.tk-top { background: var(--spruce); color: #fff; padding: .7rem 1.75rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; }
.tk-brand { display: flex; align-items: baseline; gap: .9rem; }
.tk-name { font: 600 1.75rem/1.05 var(--head); }
.tk-tag { font-size: .95rem; }
.tk-acct { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tk-who { font-size: .95rem; }
.tk-ghost { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border: 1px solid #fff; border-radius: 4px; background: transparent; color: #fff; font: 500 1rem var(--body); cursor: pointer; }
.tk-ghost:hover { background: var(--spruce-deep); }
.tk-link { background: none; border: 0; color: #fff; text-decoration: underline; font: 400 .95rem var(--body); cursor: pointer; min-height: 44px; }
.tk-signin { max-width: 420px; margin: 6vh auto; padding: 0 1rem; display: flex; flex-direction: column; gap: .8rem; }
.tk-signin .panel { margin: 0; }
.tk-main { flex: 1; display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 1.5rem; padding: 1.5rem 1.75rem 2.5rem; align-items: start; }
.tk-voice { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1.1rem; display: flex; flex-direction: column; gap: .8rem; position: sticky; top: 1rem; }
.tk-voice .status { margin: 0; }
.tk-voice .chat { max-height: 46vh; min-height: 180px; padding: 0; }
.talk .bubble small { display: none; }                      /* timings and tool names are for staff */
.tk-controls { display: flex; gap: .6rem; }
.tk-start { flex: 1; min-height: 48px; font-size: 1.1rem; }
.tk-options summary { cursor: pointer; color: var(--soft); font-size: .9rem; }
.tk-options .check { margin-top: .5rem; font-size: .95rem; }
.tk-orb, .tk-caption, .tk-yousaid, .tk-bar { display: none; }
.tk-screen { margin: 0; min-height: 60vh; }

@media (max-width: 820px) {
  /* Voice first: a big microphone and the last thing said, with the screen underneath */
  .tk-top { padding: .6rem 1rem; }
  .tk-tag, .tk-who, .tk-top .tk-ghost { display: none; }
  .tk-name { font-size: 1.4rem; }
  .tk-main { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 5.5rem; }
  .tk-voice { position: static; background: var(--spruce); color: #fff; border: 0; border-radius: 0; align-items: center; text-align: center; padding: 1.2rem 1.2rem 1.4rem; gap: .7rem; }
  .tk-voice .status { background: transparent !important; color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; order: 2; padding: 0; }
  .tk-voice .status .dot { display: none; }
  .tk-orb { display: flex; order: 1; position: relative; width: 170px; height: 170px; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
  .tk-orb .ring { position: absolute; border: 2px solid #fff; border-radius: 50%; inset: 0; opacity: .18; }
  .tk-orb .r2 { inset: 17px; opacity: .35; }
  .tk-orb .r3 { inset: 34px; opacity: .6; }
  .tk-orb .core { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--paint); display: flex; align-items: center; justify-content: center; }
  .status[data-state=listening] ~ .tk-orb .ring { animation: tkpulse 1.8s ease-out infinite; }
  .status[data-state=listening] ~ .tk-orb .r2 { animation-delay: .25s; }
  .status[data-state=listening] ~ .tk-orb .r3 { animation-delay: .5s; }
  .status[data-state=muted] ~ .tk-orb .core, .status[data-state=idle] ~ .tk-orb .core { background: #fff; }
  .tk-caption { display: block; order: 3; margin: 0; font: 600 1.6rem/1.18 var(--head); max-width: 22ch; }
  .tk-yousaid { display: block; order: 4; margin: 0; font-size: .9rem; opacity: .9; min-height: 1.2em; }
  .tk-voice .chat, .tk-voice .say, .tk-options { display: none; order: 6; width: 100%; text-align: left; }
  .typing .tk-voice .chat { display: flex; max-height: 30vh; min-height: 0; }
  .typing .tk-voice .say { display: flex; }
  .typing .tk-options { display: block; color: #fff; }
  .tk-options summary { color: #fff; }
  .tk-voice .bubble { color: var(--ink); }
  .tk-voice .bubble.me { background: #fff; border-color: #fff; color: var(--ink); }
  .tk-voice #mic { display: none; }
  .tk-controls { order: 5; width: 100%; }
  .tk-controls #end { display: none; }
  .tk-start { background: var(--paint); border-color: var(--paint); color: var(--ink); }
  .tk-start:hover { background: #ffc61a; }
  .tk-screen { border: 0; border-radius: 0; min-height: 0; padding: 1.1rem 1rem; }
  .tk-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--spruce); padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom, 0px)); gap: .6rem; z-index: 5; }
  .tk-bar button { flex: 1; min-height: 48px; border: 1px solid #fff; border-radius: 4px; background: transparent; color: #fff; font: 500 1rem var(--body); cursor: pointer; }
}
@keyframes tkpulse { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) { .tk-orb .ring { animation: none !important; } }

/* Categories page */
.cattree { list-style: none; margin: 0; padding: 0; }
.cattree li { padding: .45rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 1rem; }
.cattree li:last-child { border-bottom: 0; }
.cattree li.main > .catrow b { font: 600 1.2rem/1.1 var(--head); }
.catrow { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.catrow .thumb, .cattree .check .thumb { width: 40px; height: 40px; }
.catedit { display: flex; flex-direction: column; gap: .6rem; margin: .7rem 0 .4rem; padding: .8rem 1rem; background: var(--ground); border-radius: 4px; }
.catedit label { margin: 0; }

/* ---------------------------------------------------------------- Customer page: everything fits the window */
.talk { height: 100vh; height: 100dvh; overflow: hidden; }
.talk:has(.tk-signin) { height: auto; overflow: auto; }
.tk-main { min-height: 0; align-items: stretch; padding-bottom: 1.5rem; grid-template-rows: minmax(0, 1fr); }
.tk-voice { position: static; min-height: 0; }
.tk-voice .chat { flex: 1; max-height: none; min-height: 0; overflow-y: auto; scrollbar-width: none; justify-content: flex-start; }
.tk-voice .chat::-webkit-scrollbar { display: none; }
.tk-voice .chat > :first-child { margin-top: auto; }                    /* newest at the bottom, even when there are few */
.tk-screen.fit { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .7rem; position: relative; padding: 1rem 1.2rem; }
.fit-head { display: flex; align-items: center; gap: .7rem; flex: none; }
.fit-head h2 { flex: 1; margin: 0; font-size: 1.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.fit .blueprint, .fit .cat { animation: none; }
.fit-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.fit-line { flex: none; margin: 0; }
.fit-pager { display: inline-flex; align-items: center; gap: .4rem; flex: none; }
.fit-arrow { width: 44px; height: 44px; flex: none; border: 1px solid var(--spruce); border-radius: 4px; background: #fff; color: var(--spruce); font: 600 1.5rem/1 var(--head); cursor: pointer; }
.fit-arrow:disabled { opacity: .35; cursor: default; }
.fit-arrow:not(:disabled):hover { background: var(--ground); }
.fit-grid { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: .7rem; }
.fit-grid li { min-height: 0; min-width: 0; }                                  /* a big picture must not widen its column */
.fit-card { width: 100%; max-width: 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: .45rem; text-align: left; padding: .7rem; background: #fff; border: 1px solid #aab5aa; border-radius: 4px; font: 400 .95rem var(--body); color: var(--ink); cursor: pointer; overflow: hidden; }
.fit-card:hover { border-color: var(--spruce); background: var(--ground); }
.fit-card .top { display: flex; gap: .6rem; flex: 1; min-height: 0; }
.fit-card .n { font: 600 1.9rem/.9 var(--head); color: var(--spruce); }
.fit-card .ph { flex: 1; min-width: 0; width: 0; max-width: 100%; min-height: 0; height: 100%; object-fit: cover; border-radius: 3px; background: var(--ground); display: block; }
.fit-card .txt { display: flex; flex-direction: column; gap: .35rem; flex: none; min-width: 0; }
.fit-card .name { font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
.fit-card .price { font: 600 1.4rem/1 var(--head); flex: none; }
.fit-card .price small { font: 400 .8rem var(--body); color: var(--soft); }
.fit-cats { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: .7rem; }
.fit-cats .cat { min-height: 0; overflow: hidden; justify-content: center; }
.fit-cats .catpic { flex: 1; min-height: 0; height: auto; }
.fit-detail { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; }
.fit-detail.nopic { grid-template-columns: 1fr; }
.fit-detail .pics { min-height: 0; display: flex; flex-direction: column; gap: .5rem; }
.fit-detail .hero { flex: 1; min-height: 0; width: 100%; max-width: 100%; object-fit: contain; background: var(--ground); border-radius: 4px; }
.fit-detail .pics { min-width: 0; }
.fit-detail .thumbs { margin: 0; flex: none; }
.fit-detail .facts { min-height: 0; overflow: hidden; }
.fit-detail .specs { margin: .4rem 0 .6rem; }
.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.clamp1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.fit-table td { padding: .45rem .75rem .45rem 0; }
.fit-total { font-size: 1rem; }
.fit-total b { font: 600 1.6rem/1 var(--head); margin-left: .3rem; }
.fit-total.wide { display: flex; justify-content: space-between; align-items: baseline; padding-top: .6rem; border-top: 2px solid var(--line); margin-top: auto; }
.fit-tabs { display: flex; gap: .4rem; flex: none; flex-wrap: wrap; }
.fit-tabs button { min-height: 44px; padding: 0 .9rem; border: 1px solid #aab5aa; border-radius: 4px; background: #fff; color: var(--ink); font: 500 .95rem var(--body); cursor: pointer; }
.fit-tabs button.on { background: var(--spruce); border-color: var(--spruce); color: #fff; }
.fit-plan { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr); gap: 1rem; }
.fit-plan .blueprint { margin: 0; min-height: 0; height: 100%; background: #13416b; }
.fit-plan .blueprint svg { width: 100%; height: 100%; }
.fit-plan .planside { min-height: 0; display: flex; flex-direction: column; gap: .7rem; overflow: hidden; }
.fit-sizes .fit-controls { grid-template-columns: repeat(3, 1fr); }
.fit .plannotes { color: var(--ink); font-size: .95rem; }
.fit .plannotes li { margin-bottom: .5rem; }
.fit-controls { grid-template-columns: 1fr 1fr; gap: .45rem .6rem; padding: .6rem .7rem; margin: 0; }
.fit-controls label { font-size: .8rem; }
.fit-controls input[type=number], .fit-controls select { padding: .35rem .45rem; min-height: 40px; }
.fit-plan .facts { display: flex; flex-direction: column; gap: .3rem; min-height: 0; overflow: hidden; }
.fit-plan .facts div { display: flex; gap: .6rem; align-items: baseline; }
.fit-plan .facts b { font: 600 1.4rem/1 var(--head); color: var(--spruce); min-width: 2rem; text-align: right; }
.fit-plan .facts span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-cuts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.fit-cuts p { margin: .2rem 0; }
.fit-go { flex: 1 1 200px; min-height: 48px; font-size: 1.05rem; }
.fit-pay { margin: auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.fit-pay .btn { padding: 1.4rem 1rem; font-size: 1.2rem; }
.fit-address .map, .fit .map { flex: 1; min-height: 0; height: auto; margin: 0; }
.fit-welcome { margin: auto 0; }
.fit-toast { position: absolute; left: 1.2rem; right: 1.2rem; top: 4.6rem; display: flex; flex-direction: column; padding: .7rem 1rem; background: var(--paint-wash); border: 1px solid var(--paint); border-radius: 4px; }

@media (max-width: 820px) {
  .tk-main { padding: 0 0 68px; flex: 1; }
  .tk-voice { flex: none; padding: .6rem 1rem .9rem; gap: .45rem; }
  .tk-orb { width: 96px; height: 96px; }
  .tk-orb .r2 { inset: 10px; } .tk-orb .r3 { inset: 20px; }
  .tk-orb .core { width: 52px; height: 52px; }
  .tk-orb .core svg { width: 26px; height: 26px; }
  .tk-caption { font-size: 1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: none; }
  .fit-foot .fit-pager .soft { display: none; }
  .fit-foot { flex-wrap: nowrap; }
  .fit-foot > .soft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .fit-go { flex: 1 1 auto; }
  .tk-yousaid { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .typing .tk-voice .chat { flex: none; max-height: 20vh; }
  .typing .tk-orb, .typing .tk-yousaid { display: none; }
  .tk-screen.fit { flex: 1; padding: .8rem .9rem; gap: .55rem; }
  .tk-bar { height: 68px; box-sizing: border-box; }
  .fit-head h2 { font-size: 1.35rem; }
  .fit-grid { grid-template-columns: 1fr; }
  .fit-card { flex-direction: row; align-items: center; gap: .7rem; padding: .5rem .7rem; }
  .fit-card .top { flex: 0 0 96px; height: 100%; align-items: center; }
  .fit-card .n { font-size: 1.6rem; }
  .fit-card .txt { flex: 1; gap: .2rem; }
  .fit-cats { grid-template-columns: 1fr 1fr; }
  .fit-detail { grid-template-columns: 1fr; grid-template-rows: minmax(0, 38%) minmax(0, 1fr); gap: .6rem; }
  .fit-detail .thumbs { display: none; }
  .fit-plan { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .fit-cuts { grid-template-columns: 1fr; }
  .fit-tabs { flex-wrap: nowrap; }
  .fit-pay { grid-template-columns: 1fr; }
  .fit-foot .btn.plain:not(.fit-go) { display: none; }
  .fit-tabs button { padding: 0 .3rem; font-size: .9rem; flex: 1 1 0; min-width: 0; }
}
@media (max-width: 820px) and (max-height: 720px) {
  .tk-orb { width: 84px; height: 84px; } .tk-orb .r2 { inset: 9px; } .tk-orb .r3 { inset: 18px; } .tk-orb .core { width: 46px; height: 46px; }
  .tk-caption { font-size: 1.15rem; -webkit-line-clamp: 2; }
}
@media print {
  .talk { height: auto; overflow: visible; }
  .talk .tk-main { display: block; padding: 0; }
  .talk .tk-screen { overflow: visible; }
}

/* ---------------------------------------------------------------- Customer page: how the screen changes
   Where the browser can do it (Chrome, Edge, Safari), the old screen and the new one are cross-faded and moved
   as two pictures, so nothing jumps. Elsewhere the new screen simply eases in. */
.tk-screen { view-transition-name: tkscreen; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(tkscreen) { animation-duration: .28s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(tkscreen) { animation: tk-out .2s ease-in both; }
::view-transition-new(tkscreen) { animation: tk-in .32s cubic-bezier(.2, .7, .2, 1) both; }
[data-motion=swap]::view-transition-old(tkscreen) { animation: tk-fade-out .16s ease both; }
[data-motion=swap]::view-transition-new(tkscreen) { animation: tk-fade-in .22s ease both; }
[data-motion=next]::view-transition-old(tkscreen) { animation: tk-out-left .2s ease-in both; }
[data-motion=next]::view-transition-new(tkscreen) { animation: tk-in-right .28s cubic-bezier(.2, .7, .2, 1) both; }
[data-motion=prev]::view-transition-old(tkscreen) { animation: tk-out-right .2s ease-in both; }
[data-motion=prev]::view-transition-new(tkscreen) { animation: tk-in-left .28s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tk-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes tk-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes tk-fade-out { to { opacity: 0; } }
@keyframes tk-fade-in { from { opacity: 0; } }
@keyframes tk-out-left { to { opacity: 0; transform: translateX(-28px); } }
@keyframes tk-in-right { from { opacity: 0; transform: translateX(28px); } }
@keyframes tk-out-right { to { opacity: 0; transform: translateX(28px); } }
@keyframes tk-in-left { from { opacity: 0; transform: translateX(-28px); } }
/* browsers without that: ease the new content in (added after it has been measured, so it can't upset the fit) */
.fit.m-enter > * { animation: tk-in .3s cubic-bezier(.2, .7, .2, 1) both; }
.fit.m-swap > .fit-body { animation: tk-fade-in .22s ease both; }
.fit.m-next > .fit-body { animation: tk-in-right .26s cubic-bezier(.2, .7, .2, 1) both; }
.fit.m-prev > .fit-body { animation: tk-in-left .26s cubic-bezier(.2, .7, .2, 1) both; }
.fit-toast { animation: tk-in .3s cubic-bezier(.2, .7, .2, 1) both; }
.bubble { animation: tk-in .25s ease-out both; }
.tk-caption { transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .fit > *, .fit-toast, .bubble { animation: none !important; }
}
/* basket pictures */
.fit-table td.pic { width: 56px; padding-right: .6rem; }
.fit-table .bpic { display: block; width: 52px; height: 52px; object-fit: cover; border-radius: 3px; background: var(--ground); }

/* Plan: other ways, the drawing pager, and saving */
.fit-others { display: flex; flex-direction: column; gap: .6rem; }
.fit-others .way { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 4px; }
.fit-others .saving { color: var(--spruce); font-weight: 600; }
.sheetname { font-weight: 500; }
.fit-foot .fit-pager { margin-left: auto; }
.fit-sizes .fit-controls { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) {
  .fit-foot .btn.plain.fit-print { display: none; }
  .fit-foot .btn.plain.fit-save { display: inline-block; padding: 0 .6rem; font-size: .85rem; min-height: 48px; }
  .fit-sizes .fit-controls { grid-template-columns: repeat(2, 1fr); }
  .fit-tabs button { font-size: .8rem; }
  .fit-foot .fit-pager .sheetname { display: none; }
}

.tk-photo { cursor: pointer; }
.tk-photo:has(input:disabled) { opacity: .5; cursor: default; }
@media (max-width: 820px) { .tk-bar { gap: .4rem; } }

/* Deliveries calendar */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; margin-bottom: 1rem; }
.week .day { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem .3rem; background: #fff; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--ink); }
.week .day b { font: 600 1.6rem/1 var(--head); }
.week .day.today { border-color: var(--paint); }
.week .day.on { background: var(--spruce); color: #fff; border-color: var(--spruce); }
.week .day.on .soft { color: #d8e4dc; }

.van { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.van:last-of-type { border-bottom: 0; }
.van.off { opacity: .6; }

/* A UK number plate, as printed: yellow rear plate, black Charles Wright-style lettering, blue band on the left */
.plate { display: inline-flex; align-items: center; height: 1.55em; padding: 0 .45em 0 0; border: 1px solid #333; border-radius: .22em; background: #ffd500; color: #000; font: 700 .95em/1 "Charles Wright", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; letter-spacing: .08em; white-space: nowrap; vertical-align: middle; box-shadow: inset 0 0 0 1px #e6bf00; }
.plate::before { content: "GB"; display: inline-flex; align-items: flex-end; justify-content: center; align-self: stretch; width: 1.15em; margin-right: .4em; border-radius: .18em 0 0 .18em; background: #003399; color: #fff; font-size: .55em; font-weight: 700; letter-spacing: 0; padding-bottom: .25em; }
.plate.front { background: #fff; box-shadow: inset 0 0 0 1px #ddd; }
.plate.big { font-size: 1.4rem; }

.addrow { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; }
.qtybox { width: 4.2rem; height: 44px; text-align: center; font: 600 1.1rem var(--body); }
.addrow .fit-go { flex: 1 1 140px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--spruce); text-decoration: underline; cursor: pointer; font: inherit; }
@media (max-width: 820px) { .addrow { flex-wrap: wrap; } .addrow .soft { display: none; } }

.status.talking .dot { background: var(--paint); animation: tkpulse .9s ease-in-out infinite; }
#text.hearing { color: var(--soft); font-style: italic; }

/* What you're saying, as you say it */
.bubble.me.live { background: var(--paint-wash); color: var(--ink); border: 2px solid var(--paint); font-size: 1.15rem; display: flex; gap: .6rem; align-items: flex-start; }
.bubble.me.live .livedot { flex: none; width: .8rem; height: .8rem; margin-top: .45rem; border-radius: 50%; background: var(--paint); animation: tkpulse .9s ease-in-out infinite; }
.bubble.me.live.working { border-style: dashed; }
.bubble.me.live.working .livedot { animation: none; background: var(--soft); }
.bubble.me.live.working .livetext::after { content: " (getting the words)"; color: var(--soft); font-size: .85rem; }
.tk-voice .bubble.me.live { color: var(--ink); }

.changelog h3 { margin: 1.1rem 0 .4rem; font-size: 1.15rem; }
.changelog h3:first-child { margin-top: 0; }
.changelog p { margin: .25rem 0; max-width: 80ch; }
.changelog p.li { padding-left: 1.1rem; position: relative; }
.changelog p.li::before { content: ""; position: absolute; left: .2rem; top: .6rem; width: .35rem; height: .35rem; border-radius: 50%; background: var(--spruce); }

/* Section tabs across the top of a page: the menu's groups hold several pages each */
nav.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin: 0 0 1.4rem; border-bottom: 2px solid var(--line); }
nav.tabs a { padding: .55rem 1rem; text-decoration: none; color: var(--soft); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 4px 4px 0 0; }
nav.tabs a:hover { color: var(--ink); background: #fff; }
nav.tabs a.on { color: var(--spruce); border-bottom-color: var(--spruce); background: #fff; }
nav.tabs .count { margin-left: .4rem; background: var(--paint); color: var(--ink); border-radius: 10px; padding: 0 .45rem; font-size: .8rem; }

nav.pager { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }

/* Picking and printing */
tr.zone th { background: var(--ground); font: 600 .85rem var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--soft); padding: .35rem .6rem; }
.pickcard input.pick { width: 1.5rem; height: 1.5rem; }
@media print {
  .side, .tabs, .noprint, .msg, nav { display: none !important; }
  .shell { display: block; } main { padding: 0; }
  .panel { border: 0; box-shadow: none; padding: 0 0 1rem; break-inside: avoid; }
  body { background: #fff; }
}

/* Weekly report */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.1rem; display: flex; flex-direction: column; }
.stat b { font: 600 2.4rem/1 var(--head); color: var(--spruce); }
.stat span { font-weight: 500; margin-top: .3rem; }
.stat small { color: var(--soft); }
.hours { display: flex; align-items: flex-end; gap: .35rem; height: 160px; }
.hours .hr { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .2rem; }
.hours .bar { width: 100%; min-height: 2px; background: var(--spruce); border-radius: 3px 3px 0 0; }
.hours small { color: var(--soft); font-size: .75rem; }

/* ============ Phone layout, second go: a slim voice strip, a screen that scrolls, proper cards ============ */
.fit-ideas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.2rem; max-width: 520px; }
.fit-ideas .idea { min-height: 56px; padding: .6rem .8rem; border: 1px solid var(--spruce); border-radius: 6px; background: #fff; color: var(--spruce); font: 500 1rem var(--body); text-align: left; cursor: pointer; }
.fit-ideas .idea:hover { background: var(--ground); }
@media (max-width: 820px) {
  /* the header: one tidy row */
  .tk-top { padding: .55rem .8rem; }
  .tk-top .tk-name { font-size: 1.25rem; } .tk-top .tk-tag { display: none; }
  .tk-acct { gap: .7rem; font-size: .9rem; }
  .tk-acct .tk-who { display: none; }
  /* the voice strip: the mic on the left, what was just said beside it. A grid, so nothing overlaps. */
  .tk-voice { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .1rem .75rem; align-items: start; text-align: left; padding: .55rem .8rem .65rem; }
  .tk-orb { grid-column: 1; grid-row: 1 / span 3; width: 52px; height: 52px; align-self: center; }
  .tk-orb .ring { display: none; } .tk-orb .r1 { display: block; inset: 0; opacity: .35; }
  .tk-orb .core { width: 42px; height: 42px; } .tk-orb .core svg { width: 22px; height: 22px; }
  .tk-voice .status { grid-column: 2; grid-row: 1; margin: 0; padding: 0; font-size: .7rem; letter-spacing: .07em; opacity: .85; justify-content: flex-start; }
  .tk-caption { grid-column: 2; grid-row: 2; margin: 0; font-size: 1.02rem; line-height: 1.3; font-weight: 500; -webkit-line-clamp: 3; text-align: left; }
  .tk-yousaid { grid-column: 2; grid-row: 3; margin: 0; font-size: .82rem; opacity: .8; text-align: left; }
  .tk-controls, .tk-voice .chat, .tk-voice .say, .tk-options { grid-column: 1 / -1; }
  .tk-controls .tk-start { width: 100%; min-height: 50px; margin-top: .4rem; }
  /* the screen scrolls */
  .talk { height: 100dvh; }
  .tk-screen.fit { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .8rem .8rem 1rem; }
  .tk-screen.fit .fit-body { flex: none; overflow: visible; min-height: 0; }
  .fit-head { position: sticky; top: -.8rem; background: #fff; z-index: 2; padding: .5rem 0; margin: -.5rem 0 0; }
  .fit-head h2 { font-size: 1.25rem; white-space: normal; }
  /* products: two to a row, picture on top, big enough to tap */
  .fit-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: .6rem; flex: none; }
  .fit-card { flex-direction: column; align-items: stretch; gap: .35rem; padding: .5rem; height: auto; }
  .fit-card .top { flex: none; height: auto; position: relative; display: block; }
  .fit-card .ph { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--ground); flex: none; }
  .fit-card span.ph.none { display: block; }
  .fit-card .n { position: absolute; left: .3rem; top: .3rem; z-index: 1; background: var(--spruce); color: #fff; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
  .fit-card .txt { gap: .15rem; }
  .fit-card .name { font-size: .92rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .fit-cats { grid-template-columns: 1fr 1fr; gap: .6rem; }
  /* one product: picture, price, the facts, and the buttons always in reach */
  .fit-detail { display: block; }
  .fit-detail .pics { display: block; }
  .fit-detail .hero { width: 100%; height: 220px; flex: none; object-fit: contain; }
  .fit-detail .thumbs { display: flex; gap: .4rem; overflow-x: auto; margin-top: .4rem; }
  .fit-detail .facts { overflow: visible; margin-top: .6rem; }
  .fit-detail .clamp { -webkit-line-clamp: unset !important; display: block; overflow: visible; }
  .fit-foot { position: sticky; bottom: -1rem; background: #fff; padding: .6rem 0 .2rem; margin-top: .6rem; border-top: 1px solid var(--line); flex-wrap: wrap; gap: .5rem; z-index: 2; }
  .addrow { flex-wrap: nowrap; width: 100%; gap: .4rem; }
  .addrow .fit-arrow { flex: none; width: 48px; height: 48px; font-size: 1.4rem; }
  .addrow .qtybox { flex: none; width: 3.6rem; height: 48px; }
  .addrow .fit-go { flex: 1 1 auto; min-height: 48px; }
  .fit-foot .fit-total, .fit-foot > .soft { flex: 1 1 100%; white-space: normal; }
  /* the plan and the basket */
  .fit-plan { display: block; }
  .fit-plan .blueprint, .fit-plan svg { width: 100%; height: auto; }
  .fit-table td.pic { width: 52px; }
  .fit-pay { grid-template-columns: 1fr; margin: .5rem 0; }
  .fit-address .map, .fit .map { height: 240px; flex: none; }
  .fit-ideas { grid-template-columns: 1fr; }
  .fit-welcome { margin: 0; }
  .fit-toast { position: fixed; left: .8rem; right: .8rem; top: auto; bottom: 78px; z-index: 6; }
  /* the bar at the bottom */
  .tk-bar { height: 62px; padding: .45rem .6rem calc(.45rem + env(safe-area-inset-bottom, 0px)); gap: .4rem; }
  .tk-bar button { min-height: 46px; font-size: .95rem; border-color: rgba(255,255,255,.6); }
  .tk-main { padding-bottom: 62px; }
}

/* The live map */
.trackwrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; margin-top: 1rem; }
.trackmap { height: 68vh; min-height: 420px; border: 1px solid var(--line); border-radius: 6px; background: #dfe6dc; }
.tracklist { display: flex; flex-direction: column; gap: .6rem; }
.trackvan { display: flex; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .7rem .8rem; }
.trackvan .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: .3rem; }
.vanpin { color: #fff; font: 600 12px var(--body); padding: 4px 8px; border-radius: 12px; white-space: nowrap; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
@media (max-width: 900px) { .trackwrap { grid-template-columns: 1fr; } }

/* Taking an order by hand */
.counter { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 1.2rem; align-items: start; }
.counter-side { position: sticky; top: 1rem; }
.results { display: grid; gap: .4rem; margin-top: .6rem; max-height: 52vh; overflow-y: auto; }
.result { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: .55rem .7rem; font: inherit; cursor: pointer; }
.result:hover { border-color: var(--spruce); }
.result.prod { display: grid; grid-template-columns: 44px 1fr 4.5rem auto; gap: .6rem; align-items: center; cursor: default; }
.result.prod img, .result.prod .noimg { width: 44px; height: 44px; object-fit: contain; background: var(--ground); border-radius: 3px; display: block; }
.result .short { color: #a13a2a; font-weight: 600; }
.oline { display: grid; grid-template-columns: 5.2rem auto 5.6rem 1fr 1.2rem; gap: .4rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.oline input { width: 100%; min-width: 0; padding: .35rem .45rem; text-align: right; }
.oline .nm { grid-column: 1 / -1; font-weight: 500; }
.oline b { text-align: right; }
.fulfil { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .8rem 0 .4rem; }
.totals { display: grid; gap: .2rem; margin: 1rem 0 .8rem; }
.totals span { display: flex; justify-content: space-between; }
.totals .grand { font-size: 1.25rem; border-top: 2px solid var(--ink); padding-top: .4rem; }
.btn.big { width: 100%; min-height: 54px; font: 600 1.1rem var(--body); color: #fff; margin: 0; justify-content: center; }
.btn.plain.big { color: var(--accent); }
.tag.bad { background: #fbe6e1; color: #a13a2a; }
@media (max-width: 1000px) { .counter { grid-template-columns: 1fr; } .counter-side { position: static; } }

/* Trips */
.stat.warnstat b { color: #c0392b; }
.stoppin { width: 26px; height: 26px; border-radius: 50%; background: #1d4a3a; color: #fff; font: 600 13px/26px var(--body); text-align: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.stoppin.un { background: #e67e22; }
.key { display: inline-block; width: 22px; height: 5px; border-radius: 3px; vertical-align: middle; }
.key.dash { background: repeating-linear-gradient(90deg, #555 0 6px, transparent 6px 12px); }
tr.jump { cursor: pointer; } tr.jump:hover td { background: var(--ground); }


/* ============================================================================================================
   The palette, 2026-10: one green, a dark ink sidebar, and a single warm colour kept for things that need
   attention. The older names (spruce, paint and so on) are pointed at the new ones so every page follows.
   ============================================================================================================ */
:root {
  --accent: #0F6B4F;        /* green: buttons, active tabs, route line */
  --accent-dark: #0B5A42;   /* hover / "Fits" chip text */
  --accent-tint: #DCEFE6;   /* chip and icon backgrounds */
  --accent-tint-2: #EAF0ED; /* list icon squares */
  --ink: #14201C;           /* headings, body text, sidebar */
  --muted: #4A5753;         /* secondary text, labels */
  --line: #D5DCD9;          /* borders, dividers */
  --ground: #F3F5F4;        /* page background */
  --surface: #FFFFFF;       /* cards */
  --track: #E3E8E6;         /* empty progress bar */
  --neutral-chip: #E6E9E8;  /* "Off today" chip, text #3C4744 */
  --warn: #A8470A;          /* overload / unassigned */
  --warn-tint: #FBE7D6;     /* warn chip background, text #7A3306 */

  --spruce: var(--accent); --spruce-deep: var(--accent-dark); --panel: var(--surface); --soft: var(--muted);
  --paint: var(--warn); --paint-wash: var(--warn-tint); --good-wash: var(--accent-tint);
}
/* the sidebar is ink, and the page you're on is the green */
.side { background: var(--ink); }
.side nav a:hover, .side button:hover { background: #22302b; }
.side nav a.on { background: var(--accent); border-left-color: var(--accent-tint); }
@media (max-width: 820px) { .side nav a.on { border-bottom-color: var(--accent-tint); } }
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.plain:hover { background: var(--accent-tint-2); color: var(--accent-dark); border-color: var(--accent); }
:focus-visible { outline-color: var(--accent); }
nav.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.stat b, .report b { color: var(--accent); }
/* counts and tags that want attention: the warm tint with dark text, never white on orange */
.count, nav.tabs .count { background: var(--warn-tint); color: #7A3306; }
.tag.new, .tag.marked { background: var(--warn-tint); border-color: transparent; color: #7A3306; }
.tag.delivered { background: var(--accent-tint); border-color: transparent; color: var(--accent-dark); }
.msg.warn { border-left-color: var(--warn); background: var(--warn-tint); color: #5c2705; }
.tally a.marked b { box-shadow: inset 0 -.45em var(--warn-tint); }
.week .day.today { border-color: var(--accent); }
.week .day.on { background: var(--accent); border-color: var(--accent); }
/* chips: Fits, Off today, and the warm one for overloads and orders with no van */
.chip { display: inline-flex; align-items: center; gap: .3rem; border-radius: 99px; padding: .1rem .6rem; font-size: .82rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.chip.fits { background: var(--accent-tint); color: var(--accent-dark); }
.chip.off { background: var(--neutral-chip); color: #3C4744; }
.chip.warn { background: var(--warn-tint); color: #7A3306; }
.loadbar { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; min-width: 120px; flex: 1 1 160px; max-width: 280px; }
.loadbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.loadbar.over i { background: var(--warn); }
.icon-sq { width: 2.2rem; height: 2.2rem; border-radius: 6px; background: var(--accent-tint-2); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* the customer's talking page: the mic and Start are the green now, with white on them */
.status[data-state=thinking] .dot, .status[data-state=speaking] .dot, .status.talking .dot { background: var(--accent); }
@media (max-width: 820px) {
  .tk-orb .core { background: var(--accent-tint); color: var(--accent-dark); }
  .tk-start { background: #fff; border-color: #fff; color: var(--accent-dark); }
}
.bubble.me.live { background: var(--accent-tint); border-color: var(--accent); }
.bubble.me.live .livedot { background: var(--accent); }
.fit-toast { background: var(--accent-tint); border-color: var(--accent); }
/* the live map, trips and counter screens */
.vanpin { background: var(--accent); }
.totals .grand { border-top-color: var(--ink); }
.stat.warnstat b { color: var(--warn); }
.result .short, .tag.bad { color: #7A3306; } .tag.bad { background: var(--warn-tint); }
/* The collections desk */
.colgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: .9rem; }
.colcard { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.colcard.ready { border-left-color: var(--accent); } .colcard.late { border-left-color: var(--warn); } .colcard.done { opacity: .75; }
.colcard .who { font: 700 1.4rem var(--head); } .colcard .mono { font-family: "DM Mono", monospace; color: var(--muted); text-decoration: none; }
.handover { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 1.4rem; align-items: start; max-width: 1200px; }
.handmain { display: flex; flex-direction: column; gap: 1rem; } .handside { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.handover .line { display: grid; grid-template-columns: 40px 56px 1fr; gap: .7rem; align-items: center; min-height: 56px; border: 1px solid var(--line); border-radius: 6px; padding: .4rem .7rem; margin-bottom: .5rem; cursor: pointer; }
.handover .line input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.handover .line .box { width: 32px; height: 32px; border: 3px solid var(--accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: transparent; font-weight: 700; }
.handover .line input:checked + .box { background: var(--accent); color: #fff; }
.handover .line .q { font: 700 1.6rem var(--head); text-align: right; } .handover .line .what small { display: block; color: var(--muted); font-size: .82rem; }
.handover .choices { display: grid; gap: .5rem; } .handover .choice { position: relative; } .handover .choice input { position: absolute; opacity: 0; }
.handover .choice span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--line); border-radius: 6px; font-weight: 500; cursor: pointer; }
.handover .choice input:checked + span { border: 3px solid var(--accent); background: var(--accent-tint); color: var(--accent-dark); font-weight: 700; }
.handover canvas.sig { width: 100%; height: 150px; border: 1px dashed var(--muted); border-radius: 6px; background: #fff; touch-action: none; display: block; }
@media (max-width: 1000px) { .handover { grid-template-columns: 1fr; } .handside { position: static; } }