/* RYKER OS components: the shell, cards, buttons, fields, tables, status labels, dialogs, banners
   and charts. Each section of a screen sits in one card: no card per row, no card in a card, no
   gradients. Muted gold is the one accent. */

/* ---------------------------------------------------------------- Tones
   A tone names one muted data colour. Pills, row icons and charts read --tone and --tone-soft. */
[data-tone="gold"] { --tone: var(--c-gold); --tone-soft: var(--c-gold-soft); }
[data-tone="teal"] { --tone: var(--c-teal); --tone-soft: var(--c-teal-soft); }
[data-tone="amber"] { --tone: var(--c-amber); --tone-soft: var(--c-amber-soft); }
[data-tone="violet"] { --tone: var(--c-violet); --tone-soft: var(--c-violet-soft); }
[data-tone="sky"] { --tone: var(--c-sky); --tone-soft: var(--c-sky-soft); }
[data-tone="green"] { --tone: var(--c-green); --tone-soft: var(--c-green-soft); }
[data-tone="rose"] { --tone: var(--c-rose); --tone-soft: var(--c-rose-soft); }
[data-tone="slate"] { --tone: var(--c-slate); --tone-soft: var(--c-slate-soft); }

/* ---------------------------------------------------------------- Environment strip */
.env-strip {
  background: var(--strip-bg);
  color: var(--strip-fg);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-4);
  text-align: center;
  border-bottom: var(--border-w) solid var(--line);
}

/* ---------------------------------------------------------------- Shell */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--bar-h) 1fr;
  min-height: 100vh;
}
.status-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--bar-h);
  padding: 0 var(--space-4);
  background: var(--bar-bg);
  border-bottom: var(--border-w) solid var(--line);
}
.wordmark {
  font-family: var(--font-brand);
  font-size: var(--text-brand);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .amp { color: var(--gold); }
.wordmark:hover { color: var(--text); text-decoration: none; }
.menu-button { display: inline-flex; padding: 0; width: var(--control-small); }

/* When the bar is short of room only the current page shortens, with an ellipsis; the pages above
   it keep their names. If even they cannot fit, the trail is cut at its own edge rather than run
   under the finder; the padding keeps a focused link's outline inside that edge. */
.crumbs {
  display: none;
  min-width: 0;
  margin: calc(-1 * (var(--focus-w) + var(--focus-offset)));
  padding: calc(var(--focus-w) + var(--focus-offset));
  overflow: hidden;
  font-size: var(--text-table);
  color: var(--text-3);
}
.crumbs ol { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.crumbs li:last-child { flex: 0 1 auto; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs a { color: var(--text-2); }
.crumbs [aria-current="page"] { color: var(--text); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; }

/* The finder takes the room the breadcrumbs leave, from the width that still shows its placeholder
   whole up to 20rem, so the breadcrumbs shorten only once the finder is at its narrowest. */
.finder { display: none; position: relative; flex: 1 1 0; min-width: 9rem; max-width: 20rem; margin-left: auto; }
.finder-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  width: var(--icon-small);
  height: var(--icon-small);
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.finder input {
  width: 100%;
  height: var(--control-small);
  padding: 0 var(--space-3) 0 2.375rem;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-table);
}
.finder input::placeholder { color: var(--text-3); }
.finder input:hover { border-color: var(--edge); }

.live-state {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 11rem;
  font-size: var(--text-meta);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-state:empty { display: none; }
.live-state::before {
  content: "";
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--radius-full);
  background: var(--c-green);
  animation: live-ring var(--dur-live) ease-out infinite;
}
.live-state[data-state="paused"]::before { background: var(--c-amber); animation: none; }
.live-state[data-state="delayed"], .live-state[data-state="offline"] { color: var(--c-rose); }
.live-state[data-state="delayed"]::before, .live-state[data-state="offline"]::before { background: var(--c-rose); animation: none; }
.live-state .btn--link { font-size: var(--text-meta); }
@keyframes live-ring {
  0% { box-shadow: 0 0 0 0 var(--live-ring); }
  70%, 100% { box-shadow: 0 0 0 6px var(--live-ring-0); }
}

/* Header buttons: notifications and the profile menu. */
.bar-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--control-small);
  height: var(--control-small);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}
.bar-button:hover { border-color: var(--edge); color: var(--text); }
.bar-button .dot-count {
  position: absolute;
  top: -.375rem;
  right: -.375rem;
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  border-radius: var(--radius-full);
  background: var(--c-rose);
  color: var(--on-rose);
  font-size: var(--text-tiny);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.bar-button .dot-count:empty { display: none; }

/* The profile button. Its classes are scoped to the bar, so a page may use "who" for its own words. */
.status-bar .who { display: inline-flex; flex: none; }
.status-bar .who-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
}
.status-bar .who-button:hover .who-name { color: var(--gold-strong); }
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: var(--radius-full);
  background: var(--gold);
  color: var(--on-gold);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
}
.status-bar .who-text { display: none; line-height: 1.15; }
.status-bar .who-name { display: block; font-size: var(--text-table); font-weight: var(--weight-semibold); color: var(--text); }
.status-bar .who-role { display: block; font-size: var(--text-tiny); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); font-weight: var(--weight-semibold); }

/* Popovers from the header: notifications and the profile menu (the browser's popover). */
.popover {
  position: fixed;
  inset: auto;
  top: calc(var(--bar-h) - var(--space-1));
  right: var(--space-4);
  width: min(var(--popover-w), calc(100vw - 2 * var(--space-4)));
  max-height: min(32rem, calc(100vh - var(--bar-h) - var(--space-6)));
  margin: 0;
  padding: var(--space-3);
  overflow-y: auto;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
}
.popover-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-3); }
.popover-title { font-size: var(--text-table); font-weight: var(--weight-semibold); }
.popover .meta { padding: 0 var(--space-2); }
.popover-menu { display: grid; gap: 2px; }
.popover-menu a, .popover-menu button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-2);
  font-size: var(--text-table);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.popover-menu a:hover, .popover-menu button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.popover-menu .sign-out, .popover-menu .sign-out .icon { color: var(--c-rose); }

/* The rail: a drawer below 1024px, a fixed column above. */
.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-menu);
  width: min(var(--rail-w), 86vw);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  background: var(--bg-rail);
  border-right: var(--border-w) solid var(--line);
  box-shadow: 0 0 0 100vmax var(--color-backdrop);
}
.rail[data-open="false"] { display: none; }
.rail-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-2) var(--space-4);
  border-bottom: var(--border-w) solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.rail-brand:hover { text-decoration: none; color: var(--text); }
.rail-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--border-w) solid var(--gold-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--gold);
  font-family: var(--font-brand);
  font-size: 1.375rem;
  line-height: 1;
}
.rail-name { display: block; font-family: var(--font-brand); font-size: var(--text-brand); line-height: 1.2; }
.rail-name .amp { color: var(--gold); }
.rail-sub { display: block; font-size: var(--text-tiny); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); font-weight: var(--weight-semibold); }
.rail-group { margin-top: var(--space-4); }
.rail-group:first-of-type { margin-top: 0; }
.rail-group-title {
  padding: 0 var(--space-3) var(--space-2);
  font-size: var(--text-tiny);
  line-height: var(--leading-tiny);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-3);
}
.rail ul { display: grid; gap: 2px; }
.rail a, .rail-foot button {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-2);
  font-size: var(--text-table);
  font-weight: var(--weight-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.rail a .icon, .rail-foot button .icon { color: var(--text-3); transition: color var(--dur-fast); }
.rail a:hover, .rail-foot button:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.rail a:hover .icon, .rail-foot button:hover .icon { color: var(--text-2); }
.rail a[aria-current="page"] { background: var(--surface-2); color: var(--text); font-weight: var(--weight-semibold); }
.rail a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: .625rem; bottom: .625rem; width: 2px; border-radius: 1px; background: var(--gold); }
.rail a[aria-current="page"] .icon { color: var(--gold); }
.rail .count {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.375rem;
  margin-left: auto;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--gold-soft);
  color: var(--gold-strong);
  font-size: var(--text-tiny);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.rail .count[data-tone="rose"] { background: var(--c-rose-soft); color: var(--c-rose); }
.rail .count:empty { display: none; }
.rail-foot { margin-top: auto; padding-top: var(--space-3); border-top: var(--border-w) solid var(--line); display: grid; gap: 2px; }
.rail-foot .sign-out, .rail-foot .sign-out .icon { color: var(--c-rose); }
.rail-foot .sign-out:hover { background: var(--c-rose-soft); color: var(--c-rose); }

.content {
  min-width: 0;
  padding: var(--space-5) var(--space-4) var(--space-7);
}
.content-inner { max-width: var(--content-max); margin-inline: auto; display: flex; flex-direction: column; gap: var(--gap); }

/* On a phone the live state takes a second line under the bar's buttons and may wrap there, so
   "Not updated since 14:32:05. Retrying in 60 s. Retry now" always fits at 320px (WCAG 1.4.10). */
@media (max-width: 479px) {
  .shell { grid-template-rows: auto 1fr; }
  .status-bar { flex-wrap: wrap; height: auto; min-height: var(--bar-h); row-gap: var(--space-1); padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .status-bar .bar-button, .status-bar .bar-button[hidden] + .who { margin-left: auto; }
  .live-state { order: 1; flex: 1 1 100%; max-width: none; margin-left: 0; white-space: normal; overflow: visible; }
}
/* The live state starts the bar's right-hand group. A screen with none (My account) starts it with
   the bell, or with the profile when the bell is hidden. */
@media (min-width: 480px) and (max-width: 1023px) {
  .live-state:empty ~ .bar-button, .live-state:empty ~ .bar-button[hidden] + .who { margin-left: auto; }
}
/* Pause shows at every width once a screen is live, because a screen that updates by itself must
   offer a way to stop it (WCAG 2.2.2). Below 360px the first line cannot hold the wordmark beside
   Pause, the bell and the profile, so the wordmark gives way on live screens; the menu's brand
   still leads home. */
@media (max-width: 359px) {
  .status-bar:has([data-pause]:not([hidden])) .wordmark { display: none; }
}
@media (min-width: 640px) {
  .status-bar .who-text { display: block; }
  .live-state { max-width: none; }
}
@media (min-width: 1024px) {
  .shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .status-bar { grid-column: 2; grid-row: 1; padding: 0 var(--space-6); gap: var(--space-4); }
  .rail, .rail[data-open="false"] {
    display: flex;
    position: sticky;
    top: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
    z-index: auto;
    height: 100vh;
    width: var(--rail-w);
    box-shadow: none;
  }
  .content { grid-column: 2; grid-row: 2; padding: var(--space-6) var(--space-6) var(--space-8); }
  .status-bar .menu-button, .status-bar .wordmark { display: none; }
  .crumbs { display: block; }
  .finder { display: block; }
  /* The finder starts the right-hand group here. The live state never gives way: its time tells
     the person the screen is current (D11). */
  .finder + .live-state { margin-left: 0; }
  .live-state { flex: none; }
}
/* With the rail beside it the bar is short of room until 1280px: the profile shows its initials
   only (its name and role are in the button's label and its menu), and a long live state, such as
   "Not updated since…", takes two lines rather than pushing the rest out. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .status-bar .who-text { display: none; }
  .live-state { max-width: 18rem; white-space: normal; }
}
@media (min-width: 1440px) {
  .content { padding: var(--space-6) var(--space-7) var(--space-8); }
}

/* ---------------------------------------------------------------- Cards
   .card, .panel and .page-header are the same surface. */
.card, .panel, .page-header {
  min-width: 0;
  padding: var(--pad-card);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-md);
}
@media (min-width: 768px) {
  .card, .panel, .page-header { padding: var(--pad-card-wide); }
}
/* The title and its sub keep their own width beside the actions; when the actions do not fit beside
   them, the actions take the next line instead of squeezing or covering the title. The title never
   claims more than the room beside its icon, so a long sub wraps there and never leaves the icon on
   a line of its own. */
.card-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.card-icon { display: inline-grid; place-items: center; flex: none; color: var(--gold); padding-top: 2px; }
.card-titles { flex: 1 1 auto; min-width: 0; }
.card-head:has(> .card-icon) > .card-titles { max-width: calc(100% - var(--icon) - var(--space-3)); }
.card-title { font-size: var(--text-card-title); line-height: var(--leading-card-title); font-weight: var(--weight-semibold); }
.card-sub { margin-top: 2px; font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--text-3); font-variant-numeric: tabular-nums; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-left: auto; }
/* On a phone, actions that took the next line start at the card's edge, as its body does. */
@media (max-width: 767px) {
  .card-actions { justify-content: flex-start; margin-left: 0; }
}
.card-body { min-width: 0; }
.card-foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-w) solid var(--line); font-size: var(--text-meta); color: var(--text-3); display: grid; gap: var(--space-1); }

/* A link that sits in a card's head, like "View audit log". */
.head-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--text-meta);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.head-link .icon { width: var(--icon-small); height: var(--icon-small); }
.head-link:hover { border-color: var(--gold-line); color: var(--gold-strong); text-decoration: none; }
@media (pointer: coarse) { .head-link { min-height: var(--tap); } }

/* "Live" beside a chart; it follows the page's live state. */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--c-green-soft);
  color: var(--c-green);
  font-size: var(--text-meta);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.live-badge::before { content: ""; width: .375rem; height: .375rem; border-radius: var(--radius-full); background: currentColor; }
.live-badge[data-state="paused"] { background: var(--c-amber-soft); color: var(--c-amber); }
.live-badge[data-state="delayed"], .live-badge[data-state="offline"] { background: var(--c-rose-soft); color: var(--c-rose); }

/* ---------------------------------------------------------------- Page header (every page) */
.page-header { display: grid; gap: var(--space-2); }
.trail { font-size: var(--text-meta); color: var(--text-3); }
.trail a { color: var(--text-2); }
/* Below 1024px the breadcrumbs are hidden, so on a phone the trail's link is the way back: on touch
   it reaches the smallest touch size, and its negative margins keep the line's height. */
@media (pointer: coarse) {
  .trail a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: calc((var(--leading-body) - var(--tap)) / 2); }
}
.page-header .title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.page-header .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
/* A reference as a page title (an order, a parcel): DM Serif Display never sets a number (8.10),
   so the reference is set in the body face with figures of equal width. */
.title-ref { font-family: var(--font-body); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.status-sentence { color: var(--text-2); }
.as-of { font-size: var(--text-meta); color: var(--text-3); font-variant-numeric: tabular-nums; }
/* "2 new orders. Show" (8.5.2): a line kept in the page header, its height held from the first
   draw, so when newer records arrive the rows below never move under the pointer. */
.new-lines { min-height: var(--leading-body); font-size: var(--text-table); line-height: var(--leading-body); color: var(--text); }
.new-lines .btn--link { margin-left: var(--space-2); font-size: inherit; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-5); }
.page-head .eyebrow { font-size: var(--text-tiny); line-height: var(--leading-tiny); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--gold); }
.page-head h1 { margin-top: var(--space-1); }
.page-head .summary { margin-top: var(--space-2); max-width: 48rem; color: var(--text-2); font-size: var(--text-table); }
.page-head .as-of { margin-top: var(--space-1); }

/* ---------------------------------------------------------------- The dashboard */
.dash { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dash > * { grid-column: 1 / -1; }
@media (min-width: 1180px) {
  .dash > .span-4 { grid-column: span 4; }
  .dash > .span-5 { grid-column: span 5; }
  .dash > .span-6 { grid-column: span 6; }
  .dash > .span-7 { grid-column: span 7; }
  .dash > .span-8 { grid-column: span 8; }
}
@media (min-width: 768px) and (max-width: 1179px) {
  .dash > .span-6 { grid-column: span 6; }
}
.dash > [data-alone="true"] { grid-column: 1 / -1; }
/* Cards in a row share a height; an empty card's message fills its card instead of floating. */
.dash > .card:not(.page-head) { display: flex; flex-direction: column; }
.dash > .card > .card-body { flex: 1; display: flex; flex-direction: column; }
.dash > .card > .card-body > .empty:only-child { flex: 1; display: grid; place-content: center; }

/* Period choice: underlined words. */
.periods { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.periods a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border-bottom: var(--rule-thick) solid transparent;
  font-size: var(--text-table);
  font-weight: var(--weight-medium);
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
}
.periods a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--line-strong); }
@media (pointer: coarse) { .periods a { min-height: var(--tap); } }
.periods a[aria-current="true"] { color: var(--text); border-bottom-color: var(--gold); font-weight: var(--weight-semibold); }

/* The figures: one card, each figure a cell with its definition. */
.metrics { display: grid; grid-template-columns: minmax(0, 1fr); }
.metric {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  border-top: var(--border-w) solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.metric:first-child { border-top: 0; padding-top: 0; }
a.metric:hover { text-decoration: none; color: var(--text); }
a.metric:hover .metric-label { color: var(--gold-strong); }
.metric-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-table); font-weight: var(--weight-medium); color: var(--text-2); }
.metric-label .icon { width: .875rem; height: .875rem; color: var(--text-3); opacity: 0; transition: opacity var(--dur-fast); }
a.metric:hover .metric-label .icon, a.metric:focus-visible .metric-label .icon { opacity: 1; }
.metric-value { font-family: var(--font-display); font-size: var(--text-figure); line-height: var(--leading-figure); color: var(--text); white-space: nowrap; }
.metric-value .unit { margin-left: var(--space-2); font-family: var(--font-body); font-size: var(--text-table); color: var(--text-3); }
.metric[data-key="revenue"] .metric-value { color: var(--text); }
.metric[data-attention="true"] .metric-value { color: var(--c-amber); }
.metric-def { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--text-3); }
@media (min-width: 600px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
  .metric:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
}
@media (min-width: 1180px) {
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .metric { padding: var(--space-1) var(--space-5); border-top: 0; border-left: var(--border-w) solid var(--line); }
  .metric:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
  .metric:nth-child(n + 5) { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-w) solid var(--line); }
}

/* Small words in a pill: "Simulated", a count. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  min-height: 1.375rem;
  border-radius: var(--radius-full);
  background: var(--tone-soft, var(--surface-3));
  color: var(--tone, var(--text-2));
  font-size: var(--text-tiny);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* Needs action: one row per thing to do. */
.need-list { display: grid; gap: var(--space-2); }
.need {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-3);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
a.need:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--text); text-decoration: none; }
.need-icon { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background: var(--tone-soft); color: var(--tone); }
.need-text { flex: 1; min-width: 0; }
.need-what { display: block; font-size: var(--text-table); font-weight: var(--weight-semibold); line-height: var(--leading-table); }
.need-detail {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  color: var(--text-3);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.need-count {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 1.75rem;
  height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--tone-soft);
  color: var(--tone);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.need .chev { flex: none; width: var(--icon-small); height: var(--icon-small); color: var(--text-3); }
.all-clear {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--c-green);
  font-size: var(--text-table);
  font-weight: var(--weight-semibold);
}
.all-clear .meta { color: var(--text-3); font-weight: var(--weight-regular); }

/* Quick links: the common tasks, as a grid of plain links. */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.quick a {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  min-height: 4.5rem;
  padding: var(--space-3);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}
.quick a:hover { background: var(--surface-2); border-color: var(--line-strong); text-decoration: none; color: var(--text); }
.quick .icon { color: var(--gold); }
.quick-name { font-size: var(--text-table); font-weight: var(--weight-semibold); }
.quick-what { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--text-3); }

/* Stock bars: available, then held for checkouts, against the largest on-hand count. */
.stockbar { position: relative; min-width: 5rem; height: .375rem; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.stockbar > span { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-full); }
.stockbar .available { left: 0; background: var(--c-gold); }
.stockbar .reserved { background: var(--c-amber); }
.stockbar-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); font-size: var(--text-meta); color: var(--text-3); }
.stockbar-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.stockbar-legend span::before { content: ""; width: .625rem; height: .375rem; border-radius: var(--radius-full); background: var(--tone); }

/* Bottles by fragrance: horizontal bars on one scale. */
.hbars { display: grid; gap: var(--space-3); }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); color: var(--text); text-decoration: none; }
a.hbar:hover { color: var(--text); text-decoration: none; }
a.hbar:hover .hbar-name { color: var(--text); }
.hbar-name { font-size: var(--text-table); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-n { font-size: var(--text-table); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.hbar-track { grid-column: 1 / -1; height: .375rem; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.hbar-fill { display: block; height: 100%; min-width: 2px; border-radius: var(--radius-full); background: var(--c-gold); }
/* On touch each bar is a full-size target, its name and bar kept together in the middle. */
@media (pointer: coarse) { a.hbar { min-height: var(--tap); align-content: center; } }

/* The last paid order, as steps down a line. */
.steps { display: grid; }
.step { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0 var(--space-3); padding-bottom: var(--space-4); }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: calc(.75rem - .5px); top: 1.625rem; bottom: .25rem; width: 1px; background: var(--line-strong); }
.step:last-child::before { display: none; }
.step-dot { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); border: var(--border-w) solid var(--tone); color: var(--tone); }
.step-dot .icon { width: .75rem; height: .75rem; }
.step-label { font-size: var(--text-tiny); line-height: var(--leading-tiny); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--text-3); padding-top: 2px; }
.step-value { margin-top: 2px; font-size: var(--text-table); line-height: var(--leading-table); color: var(--text); overflow-wrap: anywhere; }

/* Activity lists: recent changes and shipment updates. */
.activity li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-w) solid var(--line); }
.activity li:first-child { padding-top: 0; }
.activity li:last-child { border-bottom: 0; padding-bottom: 0; }
.avatar--small { width: 2rem; height: 2rem; background: var(--surface-3); color: var(--text-2); font-size: var(--text-tiny); }
.activity-what { font-size: var(--text-table); line-height: var(--leading-table); overflow-wrap: anywhere; }
.activity-who { font-size: var(--text-meta); color: var(--text-3); }
.activity time { font-size: var(--text-meta); color: var(--text-3); white-space: nowrap; text-align: right; }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control);
  padding: 0 var(--space-4);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-table);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn:hover { border-color: var(--edge); background: var(--surface-3); color: var(--text); text-decoration: none; }
.btn--primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn--primary:hover { background: var(--gold-strong); border-color: var(--gold-strong); color: var(--on-gold); }
.btn--primary:active { background: var(--gold-pressed); }
.btn--small { min-height: var(--control-small); padding: 0 var(--space-3); font-size: var(--text-meta); }
.btn--link {
  min-height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font-weight: var(--weight-semibold);
}
.btn--link:hover { background: none; color: var(--gold-strong); text-decoration: underline; text-underline-offset: .2em; }
.btn--danger { background: var(--c-rose-soft); border-color: var(--c-rose-soft); color: var(--c-rose); }
.btn--danger:hover { background: var(--c-rose); border-color: var(--c-rose); color: var(--on-rose); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--color-disabled-bg);
  border-color: var(--line);
  color: var(--color-disabled-text);
  cursor: not-allowed;
}
@media (pointer: coarse) { .btn--small { min-height: var(--tap); } }

/* ---------------------------------------------------------------- Fields */
.field { display: grid; gap: var(--space-1); max-width: 28rem; }
.field label, .field .label { font-size: var(--text-table); font-weight: var(--weight-semibold); color: var(--text); }
.field .hint { font-size: var(--text-meta); color: var(--text-3); }
.field input, .field select, .field textarea {
  min-height: var(--control);
  padding: 0 var(--space-3);
  border: var(--border-w) solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color var(--dur-fast);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-3); }
.field textarea { padding: var(--space-2) var(--space-3); min-height: 5.5rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-color: var(--gold); }
.field .error { font-size: var(--text-table); color: var(--c-rose); }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: var(--c-rose); }
.form-stack { display: grid; gap: var(--space-4); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* ---------------------------------------------------------------- Filter bar: search and filters for a list, in its own card */
.filter-bar { display: grid; gap: var(--space-3) var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: end; }
.filter-bar .field { max-width: none; min-width: 0; }
.filter-bar input, .filter-bar select { width: 100%; min-width: 0; }
.filter-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Four to a line where the card is wide enough for them. From 1024px the rail takes 256px of the
   window, so between 1024 and 1179px the card is narrower than at 900px and the bar keeps two. */
@media (min-width: 900px) and (max-width: 1023px), (min-width: 1180px) {
  .filter-bar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- Panels: a card with a title row */
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.panel-head h2 { font-size: var(--text-card-title); line-height: var(--leading-card-title); }
.panel-head .link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin-left: auto;
  padding: 0 var(--space-3);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--text-meta);
  font-weight: var(--weight-semibold);
}
.panel-head .link:hover { border-color: var(--gold-line); color: var(--gold-strong); text-decoration: none; }
.panel-error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--c-rose-soft);
  color: var(--c-rose);
  font-size: var(--text-table);
}

/* ---------------------------------------------------------------- Needs action list (older screens) */
.action-list { display: grid; gap: var(--space-2); }
.action-list li { border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); }
.action-list a, .action-list .row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  min-height: var(--tap);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}
.action-list a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.action-list .count { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; text-align: right; color: var(--gold); }
.action-list .what { font-weight: var(--weight-semibold); }
.action-list .detail { grid-column: 2; font-size: var(--text-meta); color: var(--text-3); }
.action-list .problem .what, .action-list .problem .count { color: var(--c-rose); }
@media (min-width: 768px) {
  .action-list a, .action-list .row { grid-template-columns: 2.5rem 16rem 1fr; }
  .action-list .detail { grid-column: auto; }
}

/* ---------------------------------------------------------------- Figures (older screens) */
.figures { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 768px) { .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.figure .label { font-size: var(--text-table); color: var(--text-2); }
.figure .value {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-figure);
  line-height: var(--leading-figure);
  color: var(--text);
  text-decoration: none;
}
.figure a.value:hover { color: var(--gold-strong); }
.figure .dates { font-size: var(--text-meta); color: var(--text-3); font-variant-numeric: tabular-nums; }
.figure-notes { display: grid; gap: var(--space-1); font-size: var(--text-meta); color: var(--text-3); }

/* ---------------------------------------------------------------- Tables
   Inside a card a table runs to the card's edges; its outer cells keep the card's padding. */
.table-wrap { overflow-x: auto; }
.card .table-wrap, .panel .table-wrap { margin: 0 calc(-1 * var(--pad-card)); }
@media (min-width: 768px) {
  .card .table-wrap, .panel .table-wrap { margin: 0 calc(-1 * var(--pad-card-wide)); }
}
.books { font-size: var(--text-table); line-height: var(--leading-table); }
.books th {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-w) solid var(--line-strong);
  font-size: var(--text-tiny);
  line-height: var(--leading-tiny);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-3);
  text-align: left;
  white-space: nowrap;
}
.books td {
  height: var(--row-h);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-w) solid var(--line);
  vertical-align: middle;
}
.books th:first-child, .books td:first-child { padding-left: var(--pad-card); }
.books th:last-child, .books td:last-child { padding-right: var(--pad-card); }
@media (min-width: 768px) {
  .books th:first-child, .books td:first-child { padding-left: var(--pad-card-wide); }
  .books th:last-child, .books td:last-child { padding-right: var(--pad-card-wide); }
}
.books th.num, .books td.num { text-align: right; white-space: nowrap; }
.books td time { white-space: nowrap; }
/* A reference never breaks at its dashes in a table where there is room for it; on a phone it may,
   rather than push the table past its card. */
@media (min-width: 480px) { .books .ref { white-space: nowrap; } }
.books tbody tr:last-child td { border-bottom: 0; }
.books tfoot td { border-top: var(--border-w) solid var(--line-strong); border-bottom: 0; font-weight: var(--weight-semibold); }
.books tfoot tr.closing td { border-top: 0; border-bottom: 3px double var(--line-strong); }
.books a { color: var(--gold); font-weight: var(--weight-semibold); }
.books tbody tr { transition: background-color var(--dur-fast); }
.books tbody tr:hover td { background: var(--surface-2); }
@media (pointer: coarse) { .books td { height: var(--row-h-touch); } }
@media (max-width: 479px) {
  .books th, .books td { padding-left: var(--space-2); padding-right: var(--space-2); }
  .books th { white-space: normal; }
  .books .hide-narrow { display: none; }
}

/* A list drawn twice: a table on a desk (.only-wide) and rows on a phone (.only-narrow). fitLists
   in list.js marks a table too wide for its card, so its rows show instead: the same window leaves
   different room with the side rail shown or not. */
.only-wide { display: none; }
.only-narrow { display: block; }
@media (min-width: 768px) {
  .only-wide { display: block; }
  .only-narrow { display: none; }
}
.table-wrap[data-fit="rows"] { display: none; }
.table-wrap[data-fit="rows"] + .only-narrow { display: block; }

/* ---------------------------------------------------------------- Numbered pages (list.js pager) */
.pages {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-table);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.pages a { color: var(--gold); }
.pages a[aria-current="page"] { color: var(--text); font-weight: var(--weight-semibold); text-decoration: none; }
@media (pointer: coarse) {
  .pages a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); }
}

/* ---------------------------------------------------------------- Status: a word with a shape, in a muted colour */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.5rem;
  padding: 0 var(--space-3) 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--tone-soft);
  color: var(--tone);
  font-size: var(--text-meta);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.status svg { width: .625rem; height: .625rem; flex: none; }
.status[data-category="action"] { --tone: var(--c-gold); --tone-soft: var(--c-gold-soft); }
.status[data-category="waiting"] { --tone: var(--c-sky); --tone-soft: var(--c-sky-soft); }
.status[data-category="done"] { --tone: var(--c-green); --tone-soft: var(--c-green-soft); }
.status[data-category="problem"] { --tone: var(--c-rose); --tone-soft: var(--c-rose-soft); }
.status[data-category="ended"] { --tone: var(--c-slate); --tone-soft: var(--c-slate-soft); }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  padding: 0 var(--space-2);
  border: var(--border-w) dashed var(--c-amber);
  border-radius: var(--radius-full);
  color: var(--c-amber);
  font-family: var(--font-body);
  font-size: var(--text-tiny);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Trace (the order's dated events) */
.trace { font-size: var(--text-table); }
.trace li { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-w) solid var(--line); }
.trace li:last-child { border-bottom: 0; }
.trace li > time { white-space: nowrap; color: var(--text-3); font-variant-numeric: tabular-nums; }
.trace li > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.trace li.future { color: var(--text-3); }
.trace .who-did { color: var(--text-3); text-align: right; }
@media (min-width: 768px) {
  .trace li { grid-template-columns: 9rem 1fr 11rem; }
  .trace li > :nth-child(2) { grid-column: auto; grid-row: auto; }
  .trace .who-did { text-align: left; }
}
.trace-day { padding-top: var(--space-3); font-size: var(--text-tiny); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--text-3); }

/* ---------------------------------------------------------------- Definition lists */
/* The value column may shrink, and a long reference breaks rather than widening the page. On a
   phone each label sits above its value, so nothing runs off a 320px screen (8.9). */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); font-size: var(--text-table); }
.facts dt { color: var(--text-3); }
.facts dd { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .facts { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .facts dt { margin-top: var(--space-3); }
  .facts dt:first-child { margin-top: 0; }
}

/* ---------------------------------------------------------------- Banners and messages */
.banner {
  padding: var(--space-3) var(--space-4);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-table);
  color: var(--text);
}
.banner--error { border-color: var(--c-rose-soft); background: var(--c-rose-soft); color: var(--c-rose); }
.banner--success { border-color: var(--c-green-soft); background: var(--c-green-soft); color: var(--c-green); }
.banner--warning { border-color: var(--c-amber-soft); background: var(--c-amber-soft); color: var(--c-amber); }
.empty {
  padding: var(--space-5) var(--space-4);
  border: var(--border-w) dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--text-table);
  text-align: center;
}
.empty a { font-weight: var(--weight-semibold); }

/* ---------------------------------------------------------------- Dialog */
dialog {
  width: min(var(--dialog-w), calc(100vw - 2 * var(--space-4)));
  padding: var(--space-5);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
}
dialog::backdrop { background: var(--color-backdrop); }
dialog h2 { margin-bottom: var(--space-3); }

/* ---------------------------------------------------------------- Charts */
.chart { position: relative; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-2); }
.chart-head .btn--link { margin-left: auto; font-size: var(--text-meta); }
.chart-summary { font-size: var(--text-meta); color: var(--text-3); margin-bottom: var(--space-2); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .bar { fill: var(--gold); }
.chart a:focus-visible .bar, .chart a:hover .bar { fill: var(--gold-strong); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis-text { fill: var(--text-3); font-size: 12px; font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke: var(--tone); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area-fill { fill: var(--c-gold-fill); }
.chart .point { fill: var(--surface); stroke: var(--tone); stroke-width: 2; }
.chart a:hover .point, .chart a:focus-visible .point, .chart .point[data-active="true"] { fill: var(--tone); }
.chart a:focus-visible { outline: none; }
.chart .hit { fill: transparent; }
.chart .guide { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .table-wrap { margin-top: var(--space-2); }

.tip {
  position: absolute;
  z-index: var(--z-tip);
  min-width: 9rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  box-shadow: var(--shadow-tip);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  color: var(--text-2);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
}
.tip strong { display: block; font-size: var(--text-table); color: var(--text); font-variant-numeric: tabular-nums; }

/* The ring of order states, with its legend as the table of numbers. */
.donut-wrap { display: grid; gap: var(--space-4); justify-items: center; }
.donut { position: relative; width: 11rem; height: 11rem; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .track { fill: none; stroke: var(--surface-2); }
.donut .seg { fill: none; stroke: var(--tone); transition: opacity var(--dur-fast); }
.donut[data-focus] .seg { opacity: .3; }
.donut[data-focus] .seg[data-active="true"] { opacity: 1; }
.donut-centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-total { font-family: var(--font-display); font-size: var(--text-figure); line-height: var(--leading-figure); }
.donut-label { font-size: var(--text-meta); color: var(--text-3); }
.legend { display: grid; gap: 2px; width: 100%; }
.legend a, .legend .row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  color: var(--text-2);
  font-size: var(--text-meta);
  text-decoration: none;
}
.legend a:hover, .legend a:focus-visible { background: var(--surface-2); color: var(--text); text-decoration: none; }
@media (pointer: coarse) { .legend a { min-height: var(--tap); } }
.legend .swatch { flex: none; width: .625rem; height: .625rem; border-radius: 3px; background: var(--tone); }
.legend .n { margin-left: auto; color: var(--text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- First load placeholders: one pulse, never on refresh */
.placeholder {
  display: block;
  height: 1.25rem;
  margin: var(--space-2) 0;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}
.placeholder--tall { height: 7rem; }
@keyframes pulse { 50% { opacity: var(--placeholder-dim); } }

/* ---------------------------------------------------------------- Sign-in page: one card in the middle */
.sign-in-page { min-height: 100vh; }
.sign-in { display: grid; place-items: center; min-height: 100vh; padding: var(--space-6) var(--space-4); }
.sign-in-box { width: 100%; max-width: 25rem; }
.sign-in-brand { display: grid; justify-items: center; gap: var(--space-3); margin-bottom: var(--space-5); text-align: center; }
.sign-in-brand .rail-mark { width: 3.25rem; height: 3.25rem; font-size: 1.75rem; }
/* The Ryker & Co logo on its light tile, as the app icon. */
.rail-logo { display: block; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); }
.sign-in-brand .rail-logo { width: 4.5rem; height: 4.5rem; border-radius: var(--radius-md); }
.sign-in-brand .wordmark { font-size: 1.625rem; }
.sign-in-brand .rail-sub { margin-top: calc(-1 * var(--space-2)); }
.sign-in-card { padding: var(--space-6) var(--space-5); background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius-md); }
.sign-in-card h1 { font-size: var(--text-section); line-height: var(--leading-section); font-family: var(--font-body); font-weight: var(--weight-semibold); }
.sign-in-lede { margin: var(--space-1) 0 var(--space-5); color: var(--text-3); font-size: var(--text-table); }
.sign-in-card .field { max-width: none; }
.sign-in-card .btn--primary { width: 100%; }
.sign-in-foot { margin-top: var(--space-4); text-align: center; font-size: var(--text-meta); color: var(--text-3); }

/* ---------------------------------------------------------------- Mobile cards (lists on a phone) */
.cards li { border-bottom: var(--border-w) solid var(--line); }
.cards li:last-child { border-bottom: 0; }
.cards a { display: grid; gap: var(--space-1); min-height: 3rem; padding: var(--space-3) 0; color: var(--text); text-decoration: none; }
.cards a:hover .card-title { color: var(--gold-strong); }
.card-title { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Print
   tokens.css turns the theme to dark ink on white for paper. The bar and the rail are controls for
   the screen, so a printed page is its content; its header carries the as-of time. Words drawn in
   a muted colour on a tint print in ink, keeping their shape. */
/* The attendance report (staff-report.html): one page to print or save as PDF. */
.report-card { padding: var(--space-4); }
.report-table td, .report-table th { white-space: nowrap; }
.report-total td { font-weight: var(--weight-semibold); border-top: var(--border-w) solid var(--line-strong); }
.report-person { margin-top: var(--space-4); }
.report-person h3 { font-size: var(--text-table); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.report-sign { display: grid; gap: var(--space-6); margin-top: var(--space-6); }

@media print {
  .skip-link, .status-bar, .rail, .rail[data-open] { display: none; }
  .no-print, .page-header .no-print, .title-row .no-print, .toasts { display: none; }
  .report-card { border: 0; padding: 0; }
  .report-person { break-inside: avoid; }
  .report-table td, .report-table th { white-space: normal; }
  .shell { display: block; min-height: 0; }
  .content { padding: 0; }
  .env-strip { background: none; color: var(--text); }
  .status { padding-left: 0; background: none; color: var(--text); }
  .tag { border-color: var(--text-3); color: var(--text); }
  .chip, .need-count, .live-badge { background: none; color: var(--text); }
  .metric[data-attention="true"] .metric-value { color: var(--text); }
}

@media (forced-colors: active) {
  .btn--primary { border: var(--border-w) solid ButtonText; }
  .rail a[aria-current="page"] { outline: 2px solid Highlight; }
  .card, .panel, .page-header { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------- Bars: orders by hour */
.bars { display: block; width: 100%; height: auto; }
.bars .bar { fill: var(--tone); opacity: .85; }
.bars .bar[data-tone="gold"] { opacity: 1; }
.bars .bar-label { fill: var(--text-3); font-size: 10px; }
.hbar[data-tone] .hbar-fill { background: var(--tone); }

/* ---------------------------------------------------------------- Columns: days of stock left */
.columns { display: block; width: 100%; height: auto; }
.columns .column { fill: var(--tone); opacity: .9; }
.columns a:hover .column, .columns a:focus .column { opacity: 1; }
.columns .column-value { fill: var(--text); font-size: 12px; font-weight: 600; }
.columns .guide { stroke: var(--tone); stroke-dasharray: 4 4; opacity: .7; }
.columns .guide-label { fill: var(--tone); font-size: 10px; }
.columns .axis { stroke: var(--line-strong); }
.columns .bar-label { fill: var(--text-3); font-size: 10px; }

/* ---------------------------------------------------------------- Compact lists (one card: toolbar, table, footer) */
.page-header--plain { padding: 0 0 var(--space-2); border: 0; background: none; box-shadow: none; }
.page-header--plain .title-row { align-items: center; }
.page-header--plain .status-sentence { font-size: var(--text-table); color: var(--text-2); margin: var(--space-1) 0 0; }
.page-header--plain .as-of { margin: 0; }
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); border-bottom: var(--border-w) solid var(--line); }
.list-toolbar .periods { margin: 0; }
.toolbar-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
.toolbar-form select, .toolbar-search input { min-height: 34px; padding: 0 var(--space-3); font-size: var(--text-table);
  border: var(--border-w) solid var(--edge); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }
.toolbar-search input { width: 15rem; max-width: 100%; }
.toolbar-form .filter-more { flex-basis: 100%; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  padding: var(--space-3); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); }
.toolbar-form .filter-more[hidden] { display: none; }
.books th { font-size: var(--text-tiny); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); }
.books td, .books th { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.books tbody tr:hover { background: var(--surface-2); }
.books .action-col { text-align: right; white-space: nowrap; }
.pages-count { color: var(--text-3); }
@media (max-width: 767px) {
  .toolbar-form { margin-left: 0; width: 100%; }
  .toolbar-search, .toolbar-search input { width: 100%; }
}
.page-header--plain .title-row { justify-content: space-between; }
.list-card .books { font-size: 13px; }
.list-card .books td { vertical-align: middle; }
.list-card .books time span { white-space: nowrap; }
.list-card .books .cell-stack { gap: 4px; }
.list-card .books .status { font-size: 12px; }
.list-card .books .action-col .btn { min-height: 30px; padding: 0 var(--space-3); font-size: 12px; }
.list-card .card-head { padding-bottom: 0; }

/* ---------------------------------------------------------------- A friendlier dashboard */
.page-header--greeting h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.page-header--greeting .status-sentence { font-size: 1.02rem; color: var(--text); }
.metrics--friendly .metric-value { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.metrics--friendly .metric-label { font-size: .95rem; color: var(--text); font-weight: 600; }
.metrics--friendly .metric-def { font-size: .82rem; }
.metrics--friendly .metric[data-attention="true"] .metric-value { color: var(--c-rose); }

/* ---------------------------------------------------------------- Staff */
.books tr.muted td { color: var(--text-3); }

/* Filter fields in a list card's toolbar: one compact row, labels small above the controls. */
.list-toolbar--fields { display: block; }
.list-toolbar--fields .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin: 0; }
.list-toolbar--fields .field { margin: 0; min-width: 9rem; }
.list-toolbar--fields .field label { font-size: var(--text-tiny); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); }
.list-toolbar--fields input, .list-toolbar--fields select { min-height: 34px; font-size: var(--text-table); }
.list-toolbar--fields .filter-actions { display: flex; gap: var(--space-2); align-items: flex-end; }
.list-toolbar--fields > .card-head { display: none; }

/* Clock in: one card, readable at arm's length on a phone, one big button. */
.clock-card { max-width: 32rem; margin-inline: auto; display: grid; gap: var(--space-3); padding: var(--pad-card-wide); text-align: center; justify-items: center; }
.clock-day { margin: 0; color: var(--text-2); font-size: var(--text-table); }
.clock-now { margin: 0; font-family: var(--font-display); font-size: var(--text-figure); line-height: var(--leading-figure); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.clock-who { margin: var(--space-2) 0 0; font-size: var(--text-section); line-height: var(--leading-section); font-family: var(--font-body); font-weight: var(--weight-semibold); }
.clock-state { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.clock-card [role="status"] { width: 100%; text-align: left; }
.btn--clock { width: 100%; min-height: calc(var(--tap) * 1.5); font-size: var(--text-section); gap: var(--space-2); }
.btn--clock .icon { width: var(--icon); height: var(--icon); }
.clock-figures { width: 100%; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: var(--space-2); margin: var(--space-2) 0 0; }
.clock-figures > div { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-2); }
.clock-figures dt { color: var(--text-3); font-size: var(--text-tiny); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.clock-figures dd { margin: var(--space-1) 0 0; font-size: var(--text-section); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.clock-list { width: 100%; text-align: left; border-top: var(--border-w) solid var(--line); padding-top: var(--space-3); }
.clock-times { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.clock-times li { display: flex; gap: var(--space-3); align-items: baseline; }
.clock-time { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); min-width: 3.5rem; }
.clock-cam { width: 100%; display: grid; gap: var(--space-2); justify-items: center; }
.clock-cam[hidden] { display: none; }
.clock-cam-frame { width: min(100%, 18rem); aspect-ratio: 1; border-radius: var(--radius-md, 12px); overflow: hidden; background: var(--surface-2); border: var(--border-w) solid var(--line); }
.clock-cam-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.clock-cam .btn { width: 100%; }
.action-col .btn + .btn { margin-left: var(--space-2); }
.staff-photo { display: inline-block; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-sm); overflow: hidden; border: var(--border-w) solid var(--line); vertical-align: middle; }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clock-help { max-width: 32rem; margin: var(--space-3) auto 0; text-align: center; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Phones: two figures a row so the four that need action fit on the first screen, a shorter
   greeting, and period and view tabs on one line that scrolls sideways instead of wrapping. */
@media (max-width: 599px) {
  .metrics--friendly { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .metrics--friendly .metric { padding: var(--space-3) 0; }
  .metrics--friendly .metric:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
  .metrics--friendly .metric-value { font-size: var(--text-title); line-height: var(--leading-title); }
  .metrics--friendly .metric-value .unit { margin-left: var(--space-1); }
  .metrics--friendly .metric-label { font-size: var(--text-table); }
  .page-header--greeting h1 { font-size: var(--text-section); line-height: var(--leading-section); }
  .page-header--greeting .status-sentence { font-size: var(--text-table); line-height: var(--leading-table); }
  .periods { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .periods::-webkit-scrollbar { display: none; }
  .periods a { white-space: nowrap; flex: none; }
}
.clock-figures[data-count="2"] { --n: 2; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* A table whose rows become small cards on a phone: the first cell is the title, the others
   carry their column name, and the buttons sit at the bottom. */
@media (max-width: 599px) {
  .books--stack thead { display: none; }
  .books--stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-top: var(--border-w) solid var(--line); }
  .books.books--stack td, .books.books--stack td.num, .books.books--stack td.action-col { display: block; padding: 0; border: 0; text-align: left; }
  .books--stack td:first-child, .books--stack td.action-col { grid-column: 1 / -1; }
  .books--stack td:empty, .books--stack td.action-col:not(:has(*)) { display: none; }
  .books--stack td:not(:first-child):not(.action-col)[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block; font-size: var(--text-tiny); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3);
  }
  .books--stack .row-actions { justify-content: flex-start; }
}

/* The rail with a mouse: 36px rows so every group fits a laptop screen; 44px stays on touch. */
@media (pointer: fine) {
  .rail a { min-height: var(--control-small); }
}
.field-row { align-items: end; }

/* ---------------------------------------------------------------- Glass
   Frosted glass on the layers that float: the top bar (the page scrolls under it), menus, dialogs,
   the phone menu and pop-up messages. Cards and tables stay solid so every figure keeps its full
   contrast. Without backdrop-filter, or with reduced transparency asked for, they stay solid. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .status-bar { background: var(--glass-bar); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom-color: var(--glass-edge); }
  .popover, dialog, .toasts .toast {
    background: var(--glass-float);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: var(--glass-edge);
    box-shadow: var(--shadow-overlay), var(--glass-shine);
  }
  dialog::backdrop { -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); }
}

/* ---------------------------------------------------------------- Pop-up messages
   New things that need action pop up at the bottom right (at the bottom on a phone) for a few
   seconds; the bell keeps them. Pausing on hover or focus; Dismiss closes one. */
.toasts {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-2);
  width: min(var(--toast-w), calc(100vw - 2 * var(--space-4)));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
  animation: toast-in var(--dur-toast) ease-out;
}
.toast[data-leaving] { opacity: 0; transform: translateY(var(--space-2)); transition: opacity var(--dur-toast), transform var(--dur-toast); }
.toast .need-icon { margin-top: var(--space-1); }
.toast-text { display: grid; gap: var(--space-1); min-width: 0; }
.toast-title { font-weight: var(--weight-semibold); font-size: var(--text-table); line-height: var(--leading-table); }
.toast-detail { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--text-2); }
.toast-text a { font-size: var(--text-meta); font-weight: var(--weight-semibold); }
.toast-close { min-width: var(--control-small); min-height: var(--control-small); display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-3); cursor: pointer; }
.toast-close:hover { background: var(--surface-3); color: var(--text); }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: 1; transform: none; } }
@media (max-width: 479px) {
  .toasts { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: auto; }
}

/* Team today on the dashboard: one chip per person, who is in first. */
/* Team today: a timeline of the working day. One row per person, a bar from first clock-in to going
   home (or to now), the start time and now drawn across every row. */
.timeline { display: grid; gap: var(--space-2); }
.tl-axis, .tl-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 9.5rem; align-items: center; gap: var(--space-4); }
.tl-ticks { position: relative; height: 1.25rem; }
.tl-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--text-tiny); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-tick:first-child { transform: none; }
.tl-tick:last-child { transform: translateX(-100%); }
.tl-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.tl-row { min-height: 2.5rem; border-top: var(--border-w) solid var(--line); }
.tl-name { font-size: var(--text-table); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-row[data-state="not_in"] .tl-name, .tl-row[data-state="leave"] .tl-name { color: var(--text-2); font-weight: var(--weight-medium); }
.tl-track { position: relative; height: 2.5rem; }
.tl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.tl-start, .tl-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line-strong); }
.tl-now { border-left: 1.5px solid var(--gold); }
.tl-bar { position: absolute; top: calc(50% - .4375rem); height: .875rem; border-radius: 2px; }
.tl-bar--in { background: var(--c-green); }
.tl-bar--out { background: var(--line-strong); }
.tl-bar--late { box-shadow: inset 3px 0 0 var(--c-rose); }
.tl-note { position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding-right: var(--space-2); background: var(--surface); font-size: var(--text-meta); color: var(--text-3); }
.tl-row[data-state="leave"] .tl-note { color: var(--c-sky); }
.tl-when { font-size: var(--text-meta); color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tl-late { color: var(--c-rose); font-weight: var(--weight-semibold); }
.tl-key { display: flex; gap: var(--space-5); margin: var(--space-1) 0 0; font-size: var(--text-tiny); color: var(--text-3); }
.tl-key-start::before, .tl-key-now::before { content: ""; display: inline-block; width: 0; height: .75rem; margin-right: var(--space-2); vertical-align: -2px; border-left: 1px dashed var(--line-strong); }
.tl-key-now::before { border-left: 1.5px solid var(--gold); }
/* On a phone the name and times sit above each bar. */
@media (max-width: 40rem) {
  .tl-axis, .tl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); }
  .tl-axis > span { display: none; }
  .tl-ticks { grid-column: 1 / -1; }
  .tl-row { padding-top: var(--space-2); }
  .tl-track { grid-column: 1 / -1; grid-row: 2; height: 1.75rem; }
  .tl-row[data-state="not_in"] .tl-track, .tl-row[data-state="leave"] .tl-track { height: 1.25rem; }
}


.place-list { list-style: none; margin: 0; padding: 0 var(--pad-card); display: grid; gap: var(--space-2); }
.place-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--border-w) solid var(--line); }

/* Dashboard on a desk (wave 1): the first row of figures (what needs action) at full size, the
   counts under it smaller, so the eye lands on the four that matter. The greeting is a plain
   header, like every other page. */
@media (min-width: 1180px) {
  .metrics--friendly .metric:nth-child(n + 5) .metric-value { font-size: var(--text-title); line-height: var(--leading-title); }
  .metrics--friendly .metric:nth-child(n + 5) .metric-label { color: var(--text-2); font-weight: var(--weight-medium); }
}
.page-header--plain.page-header--greeting .periods { margin-top: var(--space-2); }

/* ------------------------------------------------------------------------------------------------
   Ryker & Co's packaging as the shell (8 Nov 2026)
   ------------------------------------------------------------------------------------------------ */

/* The browser's own surfaces follow the palette. */
::selection { background: var(--gold); color: var(--on-gold); }
html { accent-color: var(--gold); caret-color: var(--gold); scrollbar-color: var(--line-strong) transparent; }
body { font-feature-settings: "tnum" 1, "lnum" 1; }

/* The rail is the oxblood sleeve: its own cream inks, set once here so every link and count follows. */
.rail {
  --text: var(--rail-ink);
  --text-2: var(--rail-ink-2);
  --text-3: var(--rail-ink-3);
  --surface: var(--rail-hover);
  --surface-2: var(--rail-current);
  --line: var(--rail-line);
  --gold: var(--rail-ink);
  --c-rose: var(--rail-rose);
  --c-rose-soft: var(--rail-hover);
  color: var(--text);
  border-right: 0;
}
.rail .count { background: var(--surface-2); color: var(--text); }
.rail a[aria-current="page"]::before { background: var(--gold); }
.rail :focus-visible { outline-color: var(--gold); }

/* Panels: paper on paper, no decorative icon beside every title. */
.card-icon { display: none; }
.card { box-shadow: none; }

/* The bottle label: a cream panel with a thin oxblood frame set inside its edge, and the name in
   spaced capitals, as on the bottle. Used for fragrances only. */
.label {
  position: relative;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.label::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: var(--border-w) solid var(--gold-line);
  border-radius: 2px;
  pointer-events: none;
}
.label-name {
  display: block;
  font-size: var(--text-tiny);
  line-height: var(--leading-tiny);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
}

/* Today: the period's figures above the sales chart. */
.figure-strip { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); margin: 0 0 var(--space-4); }
.figure-strip dt { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--text-3); }
.figure-strip dd { margin: 0; font-size: var(--text-figure); line-height: var(--leading-figure); font-weight: var(--weight-bold); letter-spacing: -0.01em; }
.figure-strip dd a { color: var(--text); }
.figure-strip dd a:hover { color: var(--gold); text-decoration: none; }
.card-actions .periods { gap: var(--space-1) var(--space-3); font-size: var(--text-table); }
.dash-more { margin: 0; font-size: var(--text-table); color: var(--text-3); }

/* The shelf: one label per fragrance, set like the bottle's label: a single hairline frame inside a
   plain paper field, the name in spaced capitals, the bottles free, and a thin amber line for how much
   is left beside the best-stocked fragrance. */
.shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.25rem), 1fr)); }
.shelf-item.label { border-color: var(--line); background: var(--surface); }
.shelf-item.label::before { display: none; }
.shelf-item[data-low="true"] { border-color: var(--c-rose); }
.shelf-item { display: grid; align-content: start; gap: var(--space-2); height: 100%; padding: var(--space-4) var(--space-3); color: var(--text); }
.shelf-item:hover { text-decoration: none; background: var(--surface-2); }
.shelf-item .label-name { min-height: calc(var(--leading-tiny) * 2); }
.shelf-free { font-size: var(--text-table); color: var(--text-3); }
.shelf-free strong { font-size: var(--text-figure); line-height: var(--leading-figure); color: var(--text); font-weight: var(--weight-bold); letter-spacing: -0.01em; }
.shelf-bar { position: relative; display: block; height: 3px; background: var(--line); overflow: hidden; }
.shelf-level { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c-gold); }
.shelf-item[data-low="true"] .shelf-level { background: var(--c-rose); }
.shelf-lasts { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--text-3); }
.shelf-item[data-low="true"] .shelf-lasts { color: var(--c-rose); font-weight: var(--weight-semibold); }
.shelf-item[data-counted="false"] .shelf-bar { background: transparent; border-top: 1px dashed var(--line-strong); }
/* On a phone the labels stack as rows: name and how long it lasts on the left, what is free on the
   right, the line across the foot. */
@media (max-width: 40rem) {
  .shelf { grid-template-columns: 1fr; gap: var(--space-2); }
  .shelf-item { grid-template-columns: 1fr auto; grid-template-areas: "name free" "lasts free" "bar bar"; align-items: center; column-gap: var(--space-4); row-gap: var(--space-1); padding: var(--space-3) var(--space-4); }
  .shelf-item .label-name { grid-area: name; min-height: 0; }
  .shelf-item .shelf-lasts { grid-area: lasts; }
  .shelf-item .shelf-free { grid-area: free; }
  .shelf-item .shelf-free strong { font-size: var(--text-section); }
  .shelf-item .shelf-bar { grid-area: bar; margin-top: var(--space-1); }
}
/* A period list in a card head scrolls sideways on a phone rather than being cut. */
.card-actions .periods { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.hbar-detail { grid-column: 1 / -1; font-size: var(--text-meta); color: var(--text-3); }

/* Display text is the body face, heavier and a touch tighter: one family throughout. */
h1, .metric-value, .donut-total, .clock-now { font-weight: var(--weight-bold); letter-spacing: -0.015em; }
/* Every field's hint text is readable, wherever the field was built. */
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
/* The time a page was read lives in the top bar; the page body names only the day. */
body:not([data-page="dashboard"]) .page-header .as-of { display: none; }
.shelf-item .label-name { letter-spacing: .05em; font-size: .6875rem; }
/* "Ending" beside the periods: the last whole day counted, to line up with TikTok's report. */
.ends-field { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); color: var(--text-3); }
.ends-select { min-height: var(--control-small); padding: 0 var(--space-2); border: var(--border-w) solid var(--edge); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--text-table); }
/* Under the TikTok-style figures: what GMV includes, and the bottles. */
.figure-note { margin: calc(var(--space-2) * -1) 0 var(--space-4); }