/* style.css: the Dodo Tools look, on top of Pico CSS (which styles forms, tables and buttons).
   Light and dark: base.html sets data-theme="light" or "dark" on <html> (the person's choice on the
   sidebar switch, otherwise the computer's setting); the colours below are set once per theme and
   handed to Pico through its --pico-* variables, so every page follows.
   Layout: a navy sidebar on the left (a bar on top on phones), the page on the right. */

/* ----- colours: light ----- */
:root:not([data-theme=dark]), [data-theme=light] {
  --bg: #f4f6fa; --surface: #ffffff; --surface-2: #f8fafc; --row-hover: #f5f8ff;
  --border: #e4e8ef; --border-strong: #cfd6e1;
  --text: #101828; --text-2: #344054; --muted: #667085;
  --accent: #2457d6; --accent-hover: #1c46b3; --link: #2457d6; --link-hover: #1c46b3; --focus: rgba(36, 87, 214, .25);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05); --shadow-raised: 0 4px 12px rgba(16, 24, 40, .08);
  --ok: #127a3e; --ok-bg: #e8f6ee; --warn: #9a5b00; --warn-bg: #fdf3e1; --bad: #b42318; --bad-bg: #fdecea;
  --info: #1c4fbf; --info-bg: #e9effd; --grey: #475467; --grey-bg: #eef1f5; --purple: #6b2bb3; --purple-bg: #f3ebfc;
  --nav-bg: #0f1b2d; --nav-border: #0f1b2d; --nav-text: #c3cddc; --nav-muted: #7d8aa0; --nav-hover: rgba(255, 255, 255, .06);
  --nav-active: rgba(255, 255, 255, .1); --nav-accent: #6b9bff;
}
/* ----- colours: dark ----- */
[data-theme=dark] {
  --bg: #0b1220; --surface: #121a2b; --surface-2: #172135; --row-hover: #1a2540;
  --border: #233049; --border-strong: #31405c;
  --text: #e6eaf2; --text-2: #c4ccda; --muted: #8e9ab0;
  --accent: #3b6ff0; --accent-hover: #5a87f5; --link: #8fb0ff; --link-hover: #b3caff; --focus: rgba(91, 135, 245, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-raised: 0 6px 16px rgba(0, 0, 0, .35);
  --ok: #4ade80; --ok-bg: rgba(34, 197, 94, .14); --warn: #fbbf24; --warn-bg: rgba(245, 158, 11, .14);
  --bad: #f87171; --bad-bg: rgba(239, 68, 68, .14); --info: #93b4ff; --info-bg: rgba(59, 111, 240, .18);
  --grey: #b4bfd0; --grey-bg: rgba(148, 163, 184, .14); --purple: #c4a3f5; --purple-bg: rgba(147, 87, 230, .18);
  --nav-bg: #080e1a; --nav-border: #1a2438; --nav-text: #b9c4d6; --nav-muted: #6f7d95; --nav-hover: rgba(255, 255, 255, .05);
  --nav-active: rgba(255, 255, 255, .09); --nav-accent: #6b9bff;
}
/* ----- the colours handed to Pico (both themes) ----- */
:root:not([data-theme=dark]), [data-theme=light], [data-theme=dark] {
  --pico-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pico-font-size: 93.75%;
  --pico-line-height: 1.5;
  --pico-border-radius: .5rem;
  --pico-font-weight: 500;
  --pico-form-element-spacing-vertical: .5rem;
  --pico-form-element-spacing-horizontal: .75rem;
  --pico-background-color: var(--bg);
  --pico-color: var(--text);
  --pico-muted-color: var(--muted);
  --pico-muted-border-color: var(--border);
  --pico-h1-color: var(--text); --pico-h2-color: var(--text); --pico-h3-color: var(--text);
  --pico-h4-color: var(--text); --pico-h5-color: var(--text); --pico-h6-color: var(--text);
  --pico-primary: var(--link);
  --pico-primary-underline: color-mix(in srgb, var(--link) 40%, transparent);
  --pico-primary-hover: var(--link-hover);
  --pico-primary-hover-underline: var(--link-hover);
  --pico-primary-background: var(--accent);
  --pico-primary-border: var(--accent);
  --pico-primary-hover-background: var(--accent-hover);
  --pico-primary-hover-border: var(--accent-hover);
  --pico-primary-focus: var(--focus);
  --pico-primary-inverse: #fff;
  --pico-secondary: var(--text-2);
  --pico-secondary-underline: var(--border-strong);
  --pico-secondary-hover: var(--text);
  --pico-secondary-background: var(--surface);
  --pico-secondary-border: var(--border-strong);
  --pico-secondary-hover-background: var(--surface-2);
  --pico-secondary-hover-border: var(--muted);
  --pico-secondary-focus: var(--focus);
  --pico-secondary-inverse: var(--text);
  --pico-card-background-color: var(--surface);
  --pico-card-sectioning-background-color: var(--surface-2);
  --pico-card-box-shadow: var(--shadow);
  --pico-form-element-background-color: var(--surface);
  --pico-form-element-active-background-color: var(--surface);
  --pico-form-element-border-color: var(--border-strong);
  --pico-form-element-active-border-color: var(--accent);
  --pico-form-element-focus-color: var(--focus);
  --pico-form-element-color: var(--text);
  --pico-form-element-placeholder-color: var(--muted);
  --pico-table-border-color: var(--border);
  --pico-table-row-stripped-background-color: var(--surface-2);
  --pico-code-background-color: var(--surface-2);
  --pico-dropdown-background-color: var(--surface);
  --sidebar: 15.5rem;
}
body { background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { letter-spacing: -.012em; font-weight: 650; }
h1 { font-size: 1.55rem; } h2 { font-size: 1.15rem; margin-bottom: .75rem; } h3 { font-size: 1rem; }
button, [role=button], input[type=submit] { font-weight: 600; }
::selection { background: var(--focus); }

/* ----- app shell ----- */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.1rem .85rem; background: var(--nav-bg); border-right: 1px solid var(--nav-border); color: var(--nav-text); }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff; font-size: 1.05rem; font-weight: 700; padding: 0 .35rem; }
.brand:hover { color: #fff; }
.brand .mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .55rem; flex: none;
  background: linear-gradient(135deg, #3b6ff0, #2142a8); color: #fff; font-size: .78rem; letter-spacing: .02em; }
.brand small { display: block; font-size: .72rem; font-weight: 500; color: var(--nav-muted); }
.sidebar nav { display: flex; flex-direction: column; gap: .1rem; }
.sidebar nav a { display: flex; align-items: center; gap: .65rem; padding: .48rem .65rem; border-radius: .45rem;
  text-decoration: none; color: var(--nav-text); font-size: .9rem; font-weight: 500; }
.sidebar nav a svg { width: 1.1rem; height: 1.1rem; flex: none; opacity: .8; }
.sidebar nav a:hover { background: var(--nav-hover); color: #fff; }
.sidebar nav a.active { background: var(--nav-active); color: #fff; box-shadow: inset 3px 0 0 var(--nav-accent); }
.sidebar nav a.active svg { opacity: 1; color: var(--nav-accent); }
.nav-head { display: block; margin: .9rem 0 .25rem; padding: 0 .65rem; font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--nav-muted); }
.sidebar .search { margin: 0; }
.sidebar .search input { margin: 0; padding: .45rem .7rem; height: auto; font-size: .88rem; background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .1); color: #fff; }
.sidebar .search input::placeholder { color: var(--nav-muted); }
.sidebar .search input:focus { border-color: var(--nav-accent); box-shadow: 0 0 0 3px rgba(107, 155, 255, .25); }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: .75rem; }
.theme-switch { display: flex; padding: 3px; gap: 2px; border-radius: .5rem; background: rgba(255, 255, 255, .06); }
.theme-switch button { flex: 1; margin: 0; padding: .3rem .55rem; font-size: .75rem; font-weight: 600; border: 0; border-radius: .38rem;
  background: transparent; color: var(--nav-muted); box-shadow: none; }
.theme-switch button:hover { color: #fff; }
.theme-switch button[aria-pressed=true] { background: rgba(255, 255, 255, .14); color: #fff; }
.sidebar .who { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .8rem; color: var(--nav-muted); word-break: break-all; padding: 0 .35rem; }
.sidebar .who button { margin: 0; padding: .25rem .6rem; font-size: .75rem; background: transparent; color: var(--nav-text);
  border: 1px solid rgba(255, 255, 255, .18); white-space: nowrap; }
.sidebar .who button:hover { background: var(--nav-hover); color: #fff; }
.content { padding: 1.75rem 2.25rem 4rem; max-width: 1280px; width: 100%; min-width: 0; }
@media (max-width: 900px) {
  .shell { display: block; }
  .sidebar { position: static; height: auto; overflow: visible; flex-direction: row; align-items: center; flex-wrap: wrap; padding: .6rem .85rem; gap: .5rem; border-right: 0; }
  .brand small { display: none; }
  .sidebar .search { flex: 1 1 8rem; }
  .sidebar nav { flex-direction: row; overflow-x: auto; flex: 1 1 100%; order: 3; scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .sidebar nav a { white-space: nowrap; padding: .35rem .6rem; }
  .nav-head { display: none; }
  .sidebar-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .sidebar .who span { display: none; }
  .content { padding: 1rem 1rem 3rem; }
}

/* ----- page pieces ----- */
.page-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between;
  margin-bottom: 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.page-head hgroup { margin: 0; }
.page-head h1 { margin-bottom: .25rem; }
.page-head hgroup p { margin: 0; color: var(--muted); font-size: .95rem; }
.page-head .actions, .actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.actions form { margin: 0; }
.actions button, .actions [role=button] { margin: 0; width: auto; }
.msg { padding: .65rem .9rem; border-radius: .5rem; background: var(--ok-bg); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); font-weight: 500; }
.problems { border-left: 4px solid var(--bad); }
.banner { padding: .7rem 1rem; border-radius: .5rem; background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  font-weight: 600; margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.banner form { margin: 0; }
.muted { color: var(--muted); }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.tabs a { padding: .55rem .9rem; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font-weight: 500; font-size: .92rem; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--link); border-bottom-color: var(--accent); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.kpi { padding: 1rem 1.15rem; border-radius: .75rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.kpi b { display: block; font-size: 1.75rem; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted); font-size: .83rem; }
.kpi.bad b { color: var(--bad); } .kpi.ok b { color: var(--ok); } .kpi.warn b { color: var(--warn); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.cards > article { margin: 0; }
section { margin-bottom: 2.5rem; }
article { border: 1px solid var(--border); border-radius: .75rem; }
article > header, article > footer { border-color: var(--border); }
article > header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
details > summary { font-weight: 600; }
form.inline { display: inline; margin: 0; }
form.inline button, button.small, [role=button].small { padding: .25rem .65rem; font-size: .82em; margin: 0; width: auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.toolbar h2 { margin: 0; }
.toolbar form { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.toolbar select, .toolbar button { width: auto; margin: 0; }
form.row { display: flex; gap: .5rem; align-items: center; margin: 0; }
form.row input[type=number] { width: 5.5rem; margin: 0; padding: .25rem .5rem; height: auto; }
form.row label { white-space: nowrap; margin: 0; font-size: .85em; }
fieldset legend { font-weight: 600; }
/* breathing room: a form's button after its fields, and buttons side by side */
fieldset { margin-bottom: 1.25rem; }
form > button:not(.small), form > [type=submit]:not(.small) { margin-top: .25rem; }
button + button, button + [role=button], [role=button] + [role=button], [role=button] + button { margin-left: .5rem; }
[role=group] > button, [role=group] > [type=submit] { margin: 0; flex: none; width: auto; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .9rem; font-size: .85rem; }
.chip { margin: 0; padding: .25rem .7rem; font-size: .8rem; font-weight: 600; border-radius: 999px; width: auto;
  background: var(--info-bg); color: var(--info); border: 1px solid transparent; }
.chip:hover { background: var(--accent); color: #fff; }
.code-pill { display: inline-block; vertical-align: middle; padding: .1rem .55rem; border-radius: .4rem; font-size: .72em; font-weight: 600;
  letter-spacing: .03em; background: var(--grey-bg); color: var(--text-2); font-family: var(--pico-font-family-monospace); }
.big-code { font-size: 1.5rem; font-weight: 700; letter-spacing: .03em; font-family: var(--pico-font-family-monospace); margin-bottom: .35rem; }
article.note { padding: .9rem 1.1rem; }
article.note > header { margin-bottom: .5rem; padding: .5rem 1.1rem; }
article.note p { margin: 0; }
label { font-weight: 500; font-size: .92rem; }

/* ----- tables: a white card with quiet column names ----- */
table { --pico-background-color: var(--surface); border: 1px solid var(--border); border-radius: .65rem; border-collapse: separate;
  border-spacing: 0; overflow: hidden; font-size: .9rem; box-shadow: var(--shadow); }
th, td { padding: .62rem .8rem; font-variant-numeric: tabular-nums; }
thead th { background: var(--surface-2); color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:hover > * { background: var(--row-hover); }
tbody tr:last-child > *, tfoot tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 600; color: var(--text-2); width: 1%; white-space: nowrap; }
.overflow-auto { margin-bottom: 1rem; }
.overflow-auto > table { margin-bottom: 0; }

/* ----- status pills: a soft tint with a darker word ----- */
.status { display: inline-flex; align-items: center; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
  line-height: 1.45; white-space: nowrap; background: var(--grey-bg); color: var(--grey); }
.status.suggested, .status.approved, .status.warn { background: var(--warn-bg); color: var(--warn); }
.status.ordered, .status.shipped, .status.printing, .status.queued, .status.info { background: var(--info-bg); color: var(--info); }
.status.delivered, .status.done, .status.in_store, .status.ok, .status.online { background: var(--ok-bg); color: var(--ok); }
.status.cancelled, .status.void, .status.bad, .status.offline { background: var(--bad-bg); color: var(--bad); }
.status.left_store { background: var(--purple-bg); color: var(--purple); }
.overdue { color: var(--bad); font-weight: 600; }
td.items { max-width: 22rem; }

/* ----- shipping quotes: the rep's price next to Priority1's ----- */
.compare { margin-bottom: .75rem; }
.compare .better { color: var(--ok); font-weight: 600; }
.compare .worse { color: var(--bad); font-weight: 600; }
fieldset.place { border: 1px solid var(--border); border-radius: .75rem; padding: .9rem 1.25rem .1rem; background: var(--surface);
  box-shadow: var(--shadow); margin-bottom: 1.25rem; }
fieldset.place legend { font-weight: 650; padding: 0 .4rem; margin-left: -.4rem; }
label.pickup { max-width: 16rem; }
.pallets td { padding: .35rem .45rem; }
.pallets input { margin: 0; padding: .35rem .5rem; min-width: 4.5rem; }
.pallets td.n { font-weight: 600; color: var(--muted); width: 1%; }
.pallets + .actions, .overflow-auto + template + .actions { margin-bottom: 1.25rem; }
.actions label { margin: 0; display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.actions label select { margin: 0; width: auto; }
.mono { font-family: var(--pico-font-family-monospace); font-size: .9em; }
.quote-form { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; margin: 0; }
.quote-form label { margin: 0; flex: 1 1 11rem; }
.quote-form input { margin: 0; }
.quote-form button { margin: 0; width: auto; }

/* ----- reader settings: sliders and presets ----- */
.slider { padding: 1rem 1.25rem; border-radius: .75rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); margin-bottom: 1rem; }
.slider header { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.slider header b { font-size: 1.05rem; }
.slider output { font-weight: 700; color: var(--link); }
.slider .ends { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: -.6rem; }
.slider p { margin: .4rem 0 0; font-size: .85rem; color: var(--muted); }
.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.presets button { text-align: left; height: 100%; margin: 0; }
.presets button small { display: block; font-weight: 400; opacity: .85; margin-top: .25rem; }
.bars { display: grid; grid-template-columns: 6rem 1fr 3rem; gap: .25rem .5rem; align-items: center; font-size: .85rem; }
.bar { height: .7rem; border-radius: .35rem; background: var(--accent); min-width: 2px; }
.bar.new { background: var(--warn); }

.signal { display: flex; align-items: flex-end; gap: 2px; height: 9rem; padding-bottom: 1.2rem; overflow-x: auto; }
.signal-col { position: relative; flex: 1 0 1.4rem; height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.signal-col > div { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.signal-col .other { background: #8a8f98; }
.signal-col .sold { background: var(--bad); }
.signal-col.below { opacity: .3; }
.signal-col small { position: absolute; bottom: -1.2rem; left: 0; font-size: .6rem; color: var(--muted); }

/* ----- test mode, people & access ----- */
.devbar { background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
  border-radius: .5rem; padding: .4rem .75rem; font-size: .85rem; }
.devbar a { color: inherit; font-weight: 600; }
.access { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin: 0; }
fieldset.access { margin-bottom: 1.25rem; }
.access select { width: auto; margin: 0; }
.access label { margin: 0; font-size: .9rem; }

/* ----- deleting a customer ----- */
.danger { border-left: 3px solid var(--bad, #d92d20); }

/* ----- the customer page ----- */
.customer-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; margin-bottom: 1.5rem; }
.customer-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .customer-top, .customer-grid { grid-template-columns: minmax(0, 1fr); } }
.customer-card .who-id { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .8rem; }
.customer-card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem; margin: 0 0 .8rem; }
.customer-card dt { color: var(--muted); font-size: .85rem; }
.customer-card dd { margin: 0; overflow-wrap: anywhere; }
.glance ul { list-style: none; padding: 0; margin: 0; }
.glance li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--pico-muted-border-color); list-style: none; }
.glance li > span:first-child { color: var(--muted); font-size: .85rem; }
.glance li a.small { margin-left: .4rem; font-size: .8rem; }
.facts { margin-top: 1rem; }
#remember textarea { min-height: 5.5rem; }

/* ----- what to remember about a customer ----- */
.fact { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.fact.pinned { font-weight: 600; }
.fact small { display: block; font-weight: normal; }
pre.chat { white-space: pre-wrap; max-height: 20rem; overflow: auto; font-size: .8rem; }

/* ----- live view ----- */
.kind { font-weight: 600; }
.kind.sitting-still { color: var(--muted); }
.kind.moving { color: var(--info); }
.kind.about-to-count-as-sold { color: var(--bad); }
.kind.too-weak { color: var(--muted); font-style: italic; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--bad); margin-right: .35rem; }
.dot.on { background: var(--ok); animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot.on { animation: none; } }

/* ----- floor plan ----- */
.zone-box { position: absolute; border: 2px solid var(--accent); background: rgba(36, 87, 214, .15); border-radius: 4px; }
.zone-box span { position: absolute; left: 2px; top: 1px; font-size: .75rem; font-weight: 700; background: rgba(255, 255, 255, .85); color: #222; padding: 0 .25rem; border-radius: 3px; }
.zone-box form { position: absolute; right: 1px; top: 1px; }
.zone-box form button { padding: 0 .35rem; line-height: 1.2; }
.zone-box.draft { border-style: dashed; pointer-events: none; }

/* ----- signed out (sign-in, errors) ----- */
.signed-out { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.signed-out article { box-shadow: var(--shadow-raised); }
.signin { max-width: 26rem; width: 100%; margin: 0 auto; padding: 2.25rem 2rem; text-align: center; }
.signin .mark { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .8rem; margin-bottom: 1rem;
  background: linear-gradient(135deg, #3b6ff0, #2142a8); color: #fff; font-weight: 700; }
.signin h1 { margin-bottom: .35rem; }

/* ----- misc ----- */
button.dictate { margin: -.5rem 0 1rem; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; }
.photos img { width: 100%; height: 8rem; object-fit: cover; border-radius: .5rem; }
.key { font-family: var(--pico-font-family-monospace); word-break: break-all; font-size: .85em; }
pre.po { max-height: 20rem; overflow: auto; font-size: .8em; }
.steps { counter-reset: step; }
.steps > article { position: relative; padding-left: 3.5rem; }
.steps > article::before { counter-increment: step; content: counter(step); position: absolute; left: 1rem; top: 1rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; }
.steps > article.done::before { content: '✓'; background: var(--ok); color: var(--surface); }