/* Components. One class per component; values come from tokens.css only. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font: var(--fw-normal) var(--fs-base) / var(--lh-body) var(--font-body);
}

h1, h2, h3 { line-height: var(--lh-heading); font-weight: var(--fw-semi); margin: 0; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--s-4); }
a  { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }

code { font-family: var(--font-mono); font-size: .9em; }

:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 10;
  background: var(--bg); color: var(--text);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--s-2); }

/* ---------- shell ---------- */

.shell { max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--s-4); }

/*
 * The region band. The one deliberately loud element: which region an operator is acting
 * on is the fact that must never be misread, so it is a full-width bar in the region's
 * own hue, carrying a text label as well as the colour (never colour alone).
 */
.region-band {
  background: var(--region);
  color: var(--text-on-region);
}
.region-band__inner {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 36px; padding-block: var(--s-2);
  font-size: var(--fs-sm);
}
.region-band__name { font-weight: var(--fw-semi); }
.region-band__scope { opacity: .85; }

.topbar { background: var(--bg); border-bottom: 1px solid var(--border); }
.topbar__inner {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: 60px; flex-wrap: wrap;
}
.topbar__brand {
  font-weight: var(--fw-semi); font-size: var(--fs-lg);
  color: var(--text); text-decoration: none;
}
.topbar__nav { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; flex: 1; flex-wrap: wrap; }
.topbar__link {
  display: inline-flex; align-items: center; min-height: var(--control-h-desktop);
  padding: 0 var(--s-3); border-radius: var(--radius-sm);
  color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm);
}
.topbar__link:hover { background: var(--surface); color: var(--text); }
.topbar__link[aria-current="page"] { background: var(--surface); color: var(--text); font-weight: var(--fw-semi); }
.topbar__account { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-muted); }

main { padding-block: var(--s-8) var(--s-16); }

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.page-header__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.page-header__sub { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--s-1) 0 0; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0 0 var(--s-4); padding: 0; font-size: var(--fs-sm); }
.breadcrumb li + li::before { content: "/"; color: var(--text-muted); margin-right: var(--s-2); }
.breadcrumb [aria-current] { color: var(--text-muted); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--control-h); padding: 0 var(--s-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: var(--fw-semi) var(--fs-sm) / 1 var(--font-body);
  cursor: pointer; text-decoration: none;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
@media (min-width: 768px) { .btn { min-height: var(--control-h-desktop); } }

.btn--primary { background: var(--primary); color: var(--text-on-primary); }
.btn--primary:hover { background: var(--primary-hover); color: var(--text-on-primary); }

.btn--secondary { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface); color: var(--text); }

.btn--ghost { background: transparent; color: var(--primary); padding-inline: var(--s-2); }
.btn--ghost:hover { background: var(--primary-subtle); }

.btn--danger { background: var(--danger); color: var(--text-on-primary); }
.btn--danger:hover { background: #8f1e17; color: var(--text-on-primary); }

.btn--sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Actions sit at least 8px apart; destructive never abuts primary. */
.actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.actions--spread { justify-content: space-between; }
.actions form { margin: 0; }

/* ---------- panels and tiles ---------- */

.panel {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.panel__body { padding: var(--s-6); }
.panel__head {
  padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}

.tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--s-8); }
.tile { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--s-4); }
.tile__label { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 var(--s-1); }
.tile__value { font-size: var(--fs-3xl); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.tile__value--success { color: var(--success); }
.tile__value--warning { color: var(--warning); }
.tile__note { color: var(--text-muted); font-size: var(--fs-xs); margin: var(--s-1) 0 0; }

/* A tile that opens the list behind its number. The underlined label says so without hover. */
.tile--link { display: block; color: var(--text); text-decoration: none; transition: border-color var(--t-fast) var(--ease-out); }
.tile--link .tile__label { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.tile--link:hover { color: var(--text); border-color: var(--primary); }
.tile--link:hover .tile__label { color: var(--primary-hover); }

/* ---------- data table ---------- */

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--border); }
.table thead th {
  position: sticky; top: 0; background: var(--surface);
  font-weight: var(--fw-semi); color: var(--text-muted); white-space: nowrap;
}
.table tbody tr:hover { background: var(--surface); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .col-actions { text-align: right; white-space: nowrap; }
.table__primary { font-weight: var(--fw-semi); }

.dl { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: var(--s-3) var(--s-4); margin: 0; }
.dl dt { color: var(--text-muted); font-size: var(--fs-sm); }
.dl dd { margin: 0; }
@media (max-width: 640px) { .dl { grid-template-columns: 1fr; gap: var(--s-1); } .dl dd { margin-bottom: var(--s-3); } }

/* ---------- badges ---------- */

.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 2px var(--s-2); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
}
.badge--success { background: var(--success-subtle); color: var(--success); border-color: transparent; }
.badge--warning { background: var(--warning-subtle); color: var(--warning); border-color: transparent; }
.badge--danger  { background: var(--danger-subtle);  color: var(--danger);  border-color: transparent; }
.badge--region  { background: var(--region); color: var(--text-on-region); border-color: transparent; }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* ---------- forms ---------- */

.form { display: grid; gap: var(--s-4); }

/* Tabs that switch between lists of one thing, as links: each tab is its own address. */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); border-bottom: 1px solid var(--border); margin-bottom: var(--s-4); }
.tabs__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); margin-bottom: -1px;
  color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.tabs__link:hover { color: var(--text); }
.tabs__link[aria-current="page"] { color: var(--text); font-weight: var(--fw-semi); border-bottom-color: var(--primary); }

.report-toolbar { margin-bottom: var(--s-3); }
.report-toolbar p { margin: 0; }

/* Which brand a notification is for: decided before anything else, so set apart from the rest. */
.brand-picker { margin-bottom: var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid var(--border); }
.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--s-1); }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.field__optional { font-weight: var(--fw-normal); color: var(--text-muted); }
.field__control {
  width: 100%; min-height: var(--control-h); padding: 0 var(--s-3);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: var(--fw-normal) var(--fs-base) / var(--lh-body) var(--font-body);
}
.field__control:disabled { background: var(--surface); color: var(--text-muted); }
.field__help { font-size: var(--fs-sm); color: var(--text-muted); }
.field__error { font-size: var(--fs-sm); color: var(--danger); font-weight: var(--fw-semi); }
.field__error:empty { display: none; }
.field--invalid .field__control { border-color: var(--danger); }
.field__control[type="file"] { padding-block: var(--s-2); }

/* A notification picture at the 2:1 shape phones show it in; size comes from its width/height attributes. */
.thumb {
  display: block; max-width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.image-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.image-pick[hidden], .image-pick [hidden] { display: none; }

/* The brand's Firebase pictures, as radio choices. Scrolls within itself so a long list leaves the form usable. */
.picture-grid {
  display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  max-height: calc(var(--s-16) * 6); overflow-y: auto; padding: var(--s-1);
  border: 0; margin: 0; min-inline-size: 0;
}
.picture-grid--open { max-height: none; overflow: visible; }

/* An order's status changes, oldest first, one per line. */
.status-history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.picture-grid--open .picture-option { cursor: default; }
.picture-option {
  display: grid; gap: var(--s-1); align-content: start; padding: var(--s-2); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
}
.picture-option:has(input:checked) { border-color: var(--primary); background: var(--primary-subtle); }
.picture-option:focus-within { box-shadow: var(--focus-ring); }
.picture-option__choice { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); }
.picture-option__name { overflow-wrap: anywhere; }

/* Progressive disclosure for a less common way to fill a field. */
.disclosure > summary {
  display: flex; align-items: center; min-height: var(--control-h); width: fit-content;
  color: var(--primary); font-size: var(--fs-sm); font-weight: var(--fw-semi); cursor: pointer;
}
.disclosure > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.disclosure[open] > summary { margin-bottom: var(--s-2); }

.filters { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--s-4); }
.filters .field { flex: 1 1 200px; }

/* ---------- messages and states ---------- */

.notice {
  display: grid; gap: var(--s-1);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-raised);
  margin-bottom: var(--s-6); font-size: var(--fs-sm);
}
.notice--success { background: var(--success-subtle); border-color: transparent; color: var(--success); }
.notice--error   { background: var(--danger-subtle);  border-color: transparent; color: var(--danger); }
.notice--warning { background: var(--warning-subtle); border-color: transparent; color: var(--warning); }
.notice--info    { background: var(--info-subtle);    border-color: transparent; color: var(--info); }
.notice__title { font-weight: var(--fw-semi); }
.notice ul { margin: 0; padding-left: var(--s-4); }

.state {
  display: grid; gap: var(--s-3); justify-items: center; text-align: center;
  padding: var(--s-12) var(--s-6);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.state__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); margin: 0; }
.state__body { color: var(--text-muted); max-width: 46ch; margin: 0; }

/* Skeleton rows match the table they replace, so nothing shifts when data arrives. */
.skeleton { background: var(--surface); border-radius: var(--radius-sm); height: 1em; animation: pulse 1.4s var(--ease-out) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.auth { max-width: 420px; margin: var(--s-12) auto 0; }
.auth__head { margin-bottom: var(--s-6); }
.auth__foot { margin-top: var(--s-4); font-size: var(--fs-sm); }

.pager { margin-top: var(--s-4); }
.muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: var(--s-4); }
.actions--end { justify-content: flex-end; }
.section { margin-top: var(--s-8); }
.notice--info { background: var(--info-subtle); border-color: transparent; color: var(--info); }

/* Code blocks in the developer pages: scroll rather than widening the page. */
.code {
  background: var(--text);
  color: var(--bg);
  padding: var(--s-4);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.code code { font-family: var(--font-mono); }
.m-0 { margin: 0; }

/* ---------- copy to clipboard ---------- */

/* Wraps a value plus its copy button. The button is a real button at a real
   target size, not an icon glued to the corner of the text. */
.copyable { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.copyable > code,
.copyable > .copyable__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Over a code block the button sits in the corner, and the block reserves room
   so a long line never runs underneath it. */
.copyable--block { display: block; position: relative; }
.copyable--block .code { padding-right: 104px; }
.copyable--block .btn { position: absolute; top: var(--s-2); right: var(--s-2); }

.copy-status { color: var(--success); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.copy-status:empty { display: none; }