/* The design library, as a salesperson sees it.
   Quiet surfaces, one warm accent, photographs doing the talking. */

/* A warm, low-contrast palette. Someone entering two thousand pieces looks at this all
   day, so nothing is pure white, nothing is pure black, and the accent stays quiet. */
:root {
  color-scheme: light;      /* the paper theme, whatever the browser prefers */
  --bg: #F5F0E8;            /* the POS ivory, not white */
  --surface: #FBF8F3;
  --text: #1C1915;          /* the POS ink, easier at length than #000 */
  --muted: #6B6257;
  --line: #E3DACB;
  --accent: #8A6A2E;
  --accent-soft: #EFE6D3;
  --shadow: 0 1px 2px rgba(42, 37, 33, .05), 0 8px 24px rgba(42, 37, 33, .04);
  --radius: 14px;
  --topbar: 76px;           /* what the bar takes, so a full-height screen can subtract it */
  --on-accent: #FFFDF8;     /* what reads against the accent, whichever gold it is */
  /* The paper theme's own names, as the Office and the orders dashboard read them. */
  --paper: #F5F0E8;
  --ink: #1C1915;
  --quiet: #6B6257;
  --soft: #4A433B;
  --rule: #E3DACB;
  --gold: #8A6A2E;
  --gold-soft: #EFE6D3;
  --gold-deep: #6F5524;
  --gold-paper: #F7F2E6;
  --gold-rule: #E4D3A8;
  --now: #B3261E;
  --now-soft: #FBE9E7;
  --today: #D48A1E;
  --today-soft: #FDF0D5;
  --fine: #4E8A5A;
  --fine-soft: #EAF3EA;
  --font-family-primary: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;          /* a size that does not need leaning in */
  line-height: 1.65;        /* room between lines, for hours of reading */
  -webkit-font-smoothing: antialiased;
}

/* --- Top bar: designs/topbar.css, shared with the Office’s masters (the admin) --- */
:root { --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; }
.door-group { margin: 12px 0 4px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Plan a gift for anyone: one row of fields above the columns. */
.gift-plan { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.gift-plan .search { flex: 1; min-width: 12em; }
.back { color: var(--accent); text-decoration: none; font-size: .9rem; }
.back:hover { text-decoration: underline; }

/* --- Chips ---------------------------------------------------------------------- */
/* One tap, one answer, and the answer stays visible. Used by the counter, the entry
   screen and the session screens; the library has its own arrangement below, because a
   filter that says how much it would leave needs a row rather than a pill. */
.filters {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 12px 20px 14px;
}
.filters-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 4px 0;
}
.filters-top { gap: 12px; padding-bottom: 10px; }
.filter-label {
  width: 92px; flex-shrink: 0;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span, .chip-clear {
  display: inline-block; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .85rem; color: var(--text); white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover span { border-color: var(--accent); }
.chip input:checked + span {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:disabled + span { opacity: .4; cursor: not-allowed; border-style: dashed; }
.chip.chip-is-lead:hover span { border-color: var(--line); }
.chip-clear { text-decoration: none; color: var(--muted); }
.chip-staff span { border-style: dashed; color: var(--muted); }

/* --- The shop: filters down the left, the catalogue on the right ---------------- */
/* Amazon's arrangement, and for Amazon's reason: a person narrowing a search wants the
   ground they have covered to stay in view. A row of chips across the top scrolls away
   the moment they look at anything, and they lose their place. */
.shop {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

.rail {
  position: sticky; top: 72px;                /* below the bar, which is sticky too */
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 16px 18px 40px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
.rail-search { display: flex; gap: 6px; margin-bottom: 10px; }
/* Shared by every screen with a box to type in, which is most of them. */
.search {
  flex: 1 1 260px; max-width: 420px; min-height: 44px; box-sizing: border-box;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--text); font-size: .95rem;
}
.search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.rail-search .search { flex: 1 1 auto; min-width: 0; max-width: none; }
.go {
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--muted); font-size: .82rem; padding: 0 13px; cursor: pointer;
}
.go:hover { border-color: var(--accent); color: var(--accent); }

.stone-toggle {
  display: flex; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; margin-bottom: 14px;
}
.stone {
  flex: 1 1 0; border: 0; padding: 9px 4px; background: var(--surface);
  color: var(--muted); font-size: .84rem; cursor: pointer;
}
.stone.on { background: var(--accent); color: var(--on-accent); }

/* --- One group of filters ------------------------------------------------------- */
.facet { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 12px 0 4px; }
.facet legend {
  padding: 0; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.facet-options { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }

/* An option and the number it would leave. The number is the point of the screen, so it
   is always there — right-aligned, quiet, and never jumping about as the label grows. */
.opt {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; margin: 0 -8px; border-radius: 8px;
  cursor: pointer; font-size: .9rem; line-height: 1.35;
}
.opt:hover { background: var(--accent-soft); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-box {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--line); background: var(--bg);
  position: relative; transition: background .12s, border-color .12s;
}
.opt input[type=radio] + .opt-box { border-radius: 50%; }
.opt input:checked + .opt-box { background: var(--accent); border-color: var(--accent); }
.opt input:checked + .opt-box::after {
  content: ''; position: absolute; inset: 0;
  background: var(--on-accent);
  clip-path: polygon(20% 52%, 42% 72%, 80% 26%, 88% 35%, 43% 86%, 12% 60%);
}
.opt input[type=radio]:checked + .opt-box::after {
  clip-path: none; border-radius: 50%; inset: 4px;
}
.opt input:focus-visible + .opt-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt-name { flex: 1 1 auto; min-width: 0; }
.opt-left {
  flex: 0 0 auto; color: var(--muted); font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.opt input:checked ~ .opt-name { font-weight: 600; }

/* Nothing behind it. Still tappable — sometimes you want to see for yourself — but it
   no longer competes with the options that would show something. */
.opt-empty { opacity: .38; }
.opt-staff .opt-name { color: var(--muted); font-style: italic; }

/* At the top, where somebody who has narrowed too far is looking. At the bottom it is
   below six groups of options — which is to say, below exactly the mess it undoes. */
.clear-all {
  display: block; margin: 0 0 10px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--accent);
  font-size: .85rem; text-decoration: none; text-align: center;
}
.clear-all:hover { border-color: var(--accent); background: var(--accent-soft); }

.apply { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 0 18px;
         border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; }

/* --- All the filters, in place of the photographs -------------------------------- */
/* The checkbox is never seen; it holds the state so the sheet survives the reload that
   every tick causes. The same inputs are used open and closed — copies of them would be
   two sets of controls for one search, and they would drift apart within a week. */
.sheet-switch { position: absolute; opacity: 0; width: 0; height: 0; }

.sheet-open {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; margin-bottom: 4px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  font-size: .85rem; color: var(--text);
}
.sheet-open:hover { border-color: var(--accent); color: var(--accent); }
.sheet-count {
  background: var(--accent); color: var(--on-accent); border-radius: 999px;
  padding: 0 8px; font-size: .74rem; font-variant-numeric: tabular-nums;
}
.sheet-done { display: none; }

.facet-more { display: none; }              /* second thoughts live behind All filters */

.sheet-switch:checked ~ .rail {
  grid-column: 1 / -1;
  position: static; max-height: none; overflow: visible;
  border-right: 0; border-bottom: 1px solid var(--line);
  padding: 18px 24px 96px;
  display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 34px;
}
.sheet-switch:checked ~ .rail .rail-search,
.sheet-switch:checked ~ .rail .stone-toggle { grid-column: 1 / -1; max-width: 620px; }
/* The way in is not needed once you are in; the bar along the bottom is the way out. */
.sheet-switch:checked ~ .rail .sheet-open { display: none; }
.sheet-switch:checked ~ .rail .clear-all { grid-column: 1 / -1; margin-top: 22px; }
.sheet-switch:checked ~ .rail .facet-more { display: block; }
.sheet-switch:checked ~ .rail .facet { border-top: 0; }
.sheet-switch:checked ~ .rail .facet legend { padding-bottom: 2px; }
.sheet-switch:checked ~ .results { display: none; }

/* The way out, and the answer to the only question anyone has while filtering. */
.sheet-switch:checked ~ .sheet-done {
  display: block; position: sticky; bottom: 0; z-index: 10;
  grid-column: 1 / -1; margin: 0; padding: 14px 24px;
  background: var(--accent); color: var(--on-accent); text-align: center;
  font-size: .95rem; letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 -8px 24px rgba(42, 37, 33, .1);
}

.results { min-width: 0; }
.count { padding: 16px 20px 0; margin: 0; color: var(--muted); font-size: .88rem; }
.count strong { color: var(--text); font-size: 1rem; }
.count-styles, .count-filters { color: var(--muted); }

.empty { padding: 40px 20px; color: var(--muted); max-width: 40ch; }

/* On a narrow screen there is no room for a column beside the photographs, so the rail
   becomes the bar that opens them. An iPad in portrait still gets both. */
@media (max-width: 900px) {
  .shop { grid-template-columns: 1fr; }
  .rail {
    position: static; max-height: none; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px;
  }
  .rail .facet { display: none; }
  .sheet-switch:checked ~ .rail .facet { display: block; }
  .sheet-switch:checked ~ .rail .facet-more { display: block; }
}

/* --- The grid ------------------------------------------------------------------ */
.grid {
  display: grid; gap: 18px; padding: 16px 20px 40px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.card { text-decoration: none; color: inherit; display: block; }
.card-image {
  position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover .card-image { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,.1), 0 18px 40px rgba(0,0,0,.12); }
.card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.no-image {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--muted); font-size: .8rem; border: 1px dashed var(--line); border-radius: var(--radius);
}
.badge {
  position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px;
  font-size: .7rem; letter-spacing: .04em; background: var(--accent-soft); color: var(--accent);
}
.badge-amber { background: #FBF2E2; color: #8A5A14; }
/* Not ready for the floor: one amber line under the code, each lack a chip to its field. */
.not-ready-line { margin: 6px 0 10px; font-size: .82rem; color: #8A5A14; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chip-amber { padding: 3px 9px; font-size: .68rem; letter-spacing: .04em; text-transform: none; border-color: #C98A2E; color: #8A5A14; background: #FBF2E2; }
.chip-amber:hover { background: #C98A2E; color: #FFFDF8; }
.need-good { border-color: #2E7D4F; }
.need-good .need-line { color: #2E7D4F; font-weight: 600; }
.card-text { display: flex; flex-direction: column; padding: 9px 2px 0; }
/* A facet's rule, one sentence under its heading, the same on every screen. */
.facet-rule { display: block; font-size: .72rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--quiet); line-height: 1.35; margin-top: 2px; }
.card-family { font-size: .74rem; color: var(--accent); letter-spacing: .04em; }
.card-name { font-size: .92rem; font-weight: 550; }
.card-meta { font-size: .8rem; color: var(--muted); }

.pages { display: flex; gap: 18px; justify-content: center; align-items: center;
         padding: 0 20px 48px; color: var(--muted); font-size: .9rem; }
.pages a { color: var(--accent); text-decoration: none; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }

/* --- One piece ------------------------------------------------------------------ */
.detail {
  display: grid; gap: 28px; padding: 24px 20px 56px;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  max-width: 1200px; margin: 0 auto;
}
@media (max-width: 800px) { .detail { grid-template-columns: 1fr; } }

.detail-image {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.filmstrip { display: flex; gap: 10px; padding-top: 12px; overflow-x: auto; align-items: flex-start; }
.frame-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.frame-main, .frame-make-main {
  font-size: .64rem; letter-spacing: .04em; text-transform: uppercase;
  border: 0; background: none; padding: 0; font-family: inherit;
}
.frame-main { color: var(--accent); }
.frame-make-main { color: var(--muted); cursor: pointer; text-decoration: underline; }
.frame-make-main:hover { color: var(--accent); }
.frame {
  flex: 0 0 72px; height: 72px; padding: 0; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; background: var(--surface); cursor: pointer;
}
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-video {
  display: grid; place-items: center; text-decoration: none;
  color: var(--accent); font-size: .7rem; text-align: center; padding: 4px;
}
.detail-video { width: 100%; margin-top: 16px; border-radius: var(--radius); background: #000; }

.detail-facts h1 { font-size: 1.5rem; margin: 0 0 2px; font-weight: 600; }
.detail-code { margin: 0 0 20px; color: var(--muted); font-size: .85rem; letter-spacing: .06em; }
/* Keys — the selling prompts. Numbered, unexplained, meant to be asked about. */
.keys {
  margin: 0 0 22px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--accent-soft);
}
.keys-header {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
}
.keys-list { margin: 8px 0 0; padding-left: 1.3rem; }
.keys-list li { font-size: .95rem; margin-bottom: 3px; }
.keys-list li::marker { color: var(--accent); font-variant-numeric: tabular-nums; }

.detail-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 22px; }
.detail-facts dt { color: var(--muted); font-size: .8rem; }
.detail-facts dd { margin: 0; font-size: .92rem; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.tag-group {
  width: 92px; flex-shrink: 0;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.tag {
  padding: 4px 11px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-size: .8rem;
}

/* --- Completing a piece -----------------------------------------------------------
   This is where Chahat and Anu will spend weeks, so it is built for the twentieth hour
   rather than the first: quiet surfaces, wide spacing, targets big enough to hit without
   aiming, and one question at a time to think about. */

.review {
  display: grid; gap: 40px; padding: 28px 28px 120px;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.05fr);
  max-width: 1440px; margin: 0 auto; align-items: start;
}
@media (max-width: 1000px) {
  .review { grid-template-columns: 1fr; gap: 24px; padding: 20px 18px 120px; }
}

.review-media { position: sticky; top: 84px; }

.piece-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.piece-bar-code { color: var(--muted); font-size: .85rem; letter-spacing: .08em; }

/* Two small capitals. The same hands do this a few thousand times, so the controls stay
   quiet and even — read once, recognised by shape thereafter. */
.bar-action {
  border: 0; background: none; padding: 6px 2px; font-family: inherit; cursor: pointer;
  color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
  transition: color .12s;
}
.bar-action:hover { color: var(--accent); }
.bar-action-remove:hover { color: #b3261e; }
.remove-panel {
  border: 1px solid #e3c4c0; border-radius: var(--radius);
  background: var(--surface); padding: 18px 20px; margin-bottom: 14px;
}
.remove-panel .field > span { width: 150px; }
.remove-panel input[type="password"], .remove-panel input[type="text"] {
  flex: 1; min-width: 200px; min-height: 44px; padding: 10px 13px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: .95rem; font-family: inherit;
}
.remove-confirm { background: #b3261e; border-color: #b3261e; margin-top: 6px; }

.piece-bar-actions { display: flex; gap: 18px; }
.photo-panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 18px 20px; margin-bottom: 14px;
}
.photo-panel .field > span { width: 150px; }
.photo-panel input[type="file"] { flex: 1; min-width: 200px; font-size: .9rem; }
.photo-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.photo-thumb {
  width: 84px; padding: 0 0 6px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--muted); cursor: pointer; overflow: hidden;
  font-family: inherit; font-size: .7rem; text-align: center;
}
.photo-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; margin-bottom: 4px; }
.photo-thumb:hover { border-color: #b3261e; color: #b3261e; }
.ai-note {
  margin: 14px 0 0; padding: 14px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-size: .88rem; line-height: 1.65;
}

/* Each question in its own quiet card, with room to breathe between them. */
/* A long form filled a few thousand times. Each question is a card with air around it,
   and the cards are numbered, so the eye keeps its place between one piece and the next
   instead of re-reading the whole column each time. */
.review-fields { counter-reset: step; }
.review-fields section {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px 20px; margin-bottom: 20px; box-shadow: var(--shadow);
}
.review-fields h2 {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 16px; line-height: 1.6; letter-spacing: .12em;
}
.review-fields section > h2::before {
  counter-increment: step; content: counter(step);
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: .72rem; letter-spacing: 0; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

/* What is left, kept in view rather than delivered as a refusal at the end. */
.still-needed {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 14px 20px; margin-bottom: 20px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--accent-soft); line-height: 1.7;
}
.still-needed-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent); font-weight: 600;
}
.still-needed-list { font-size: .9rem; color: var(--text); opacity: .85; }
.still-needed-done { background: transparent; border-style: dashed; }
.still-needed-done .still-needed-label { color: #2e7d32; }
.waiting-on-head {
  flex-basis: 100%; font-size: .82rem; color: var(--muted); font-style: italic;
}
.review-fields .filters-row { gap: 10px; padding: 6px 0; line-height: 2; }
.review-fields .chip span { padding: 10px 17px; font-size: .92rem; line-height: 1.35; }
.review-fields .filter-label {
  width: 128px; font-size: .78rem; letter-spacing: .06em; line-height: 1.5; padding-top: 6px;
}

/* --- What a piece is made of ------------------------------------------------------ */
.spec { max-width: 940px; margin: 0 auto; padding: 24px 20px 60px; }
.spec h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 2px; }
.spec section { margin-bottom: 26px; }
.spec h2 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 600; margin: 0 0 10px;
}

.stones { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.stones th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; padding: 0 6px 6px 0;
}
.stones td { padding: 3px 6px 3px 0; }
.stones select, .stones input {
  width: 100%; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: .85rem; font-family: inherit;
}
.stones td:nth-child(3), .stones td:nth-child(4), .stones td:nth-child(5) { width: 84px; }

/* --- Repeated designs ------------------------------------------------------------ */
.dupes { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
.dupes h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 8px; }

.cluster {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin: 18px 0; background: var(--surface);
}
.cluster-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cluster-piece {
  width: 130px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer; font-size: .78rem;
  text-align: center; padding-bottom: 6px; position: relative;
}
.cluster-piece img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; margin-bottom: 5px; }
.cluster-piece input { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; }
.cluster-piece:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cluster-keeper { border-color: var(--accent); cursor: default; }
.cluster-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent);
}
.cluster-code { color: var(--muted); font-size: .72rem; }
.cluster-actions { display: flex; gap: 16px; align-items: center; margin-top: 14px; }
.cluster-choice, .similar-choice { display: flex; flex-direction: column; gap: 4px; }
.not-same {
  align-self: center; background: transparent; border: 1px solid var(--rule);
  border-radius: 999px; padding: 3px 11px; font-size: .72rem; letter-spacing: .04em;
  color: var(--muted); cursor: pointer;
}
.not-same:hover { color: var(--ink); border-color: var(--ink); }

.similar { margin-top: 18px; }
.similar h2 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 600; margin: 0 0 6px;
}
.similar-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.similar-piece {
  width: 86px; padding: 0 0 6px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); cursor: pointer; overflow: hidden;
  font-family: inherit; font-size: .72rem; text-align: center;
}
.similar-piece:hover { border-color: var(--accent); }
.similar-piece img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; margin-bottom: 4px; }

.review-fields h2 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); font-weight: 600;
}
.hint-inline { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .75; }
.hint { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }
.required { font-style: normal; color: var(--accent); }
.limit { font-style: normal; opacity: .8; }

.name-options { gap: 8px; margin-bottom: 10px; }
.chip-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; box-sizing: border-box;
  padding: 0 16px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent-soft); color: var(--accent);
  font-size: .9rem; cursor: pointer; font-family: inherit;
}
.chip-button:hover { background: var(--accent); color: #fff; }
.refresh-names { margin-top: 14px; }
.refresh-names > span { width: auto; }
.refresh-names select { flex: 0 1 260px; min-width: 200px; }

.chip-button.proposed { background: var(--surface); border-color: var(--line); color: var(--text); }
.chip-button.proposed em {
  font-style: normal; color: var(--muted); font-size: .8rem; margin-left: 7px;
}
.chip-button.proposed:hover { border-color: var(--accent); background: var(--accent-soft); }
.search.wide { max-width: none; width: 100%; }

.field {
  display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.field > span { width: 190px; flex-shrink: 0; font-size: .92rem; color: var(--text); font-weight: 700; }
.field select, .field input[type="text"] {
  flex: 1; min-width: 220px; min-height: 46px; padding: 11px 14px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: .98rem; font-family: inherit;
}
.field select:focus, .field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Follow-up questions: they appear under the answer that asked for them, indented, so
   the eye reads them as belonging to it rather than as two more fields to fill. */
.vendor-block, .cad-priority, .cad-call {
  margin: 12px 0 4px; padding: 14px 16px 2px;
  border-left: 3px solid var(--accent-soft); background: var(--surface);
  border-radius: 0 10px 10px 0;
}
.cad-priority, .cad-call { padding-bottom: 12px; }
.field-pair { display: flex; gap: 18px; flex-wrap: wrap; }
.field-pair .field { flex: 1 1 280px; margin-bottom: 10px; }
.field-pair .field > span { width: auto; min-width: 74px; }
.field-check { flex: 0 1 auto; align-items: center; gap: 8px; }
.field-check input { width: auto; margin: 0; }
.field-check > span { min-width: 0; }

.field input[type="date"] {
  min-height: 46px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: .98rem; font-family: inherit;
}
.date-field > span { width: auto; }
.chip-standalone { margin-top: 12px; }

/* Save follows you down the page — no hunting for it at the bottom of a long form. */
.review-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 16px; align-items: center; justify-content: flex-end;
  padding: 14px 28px; background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, .06);
}
.review-actions .apply { padding: 13px 26px; font-size: .98rem; border-radius: 10px; }
.review-progress {
  margin-right: auto; color: var(--muted); font-size: .92rem;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.review-progress strong { color: var(--text); font-weight: 600; letter-spacing: .04em; }
.review-progress em { font-style: normal; opacity: .7; font-size: .85rem; }
.approve { background: #2e7d32; border-color: #2e7d32; }

.flashes { padding: 12px 20px 0; max-width: 1280px; margin: 0 auto; }
.flash {
  margin: 0 0 8px; padding: 9px 14px; border-radius: 8px; font-size: .88rem;
  background: var(--accent-soft); color: var(--text);
}
.flash-warning { background: #fdf0d5; color: #7a4b00; }

/* --- Uploading a folder ---------------------------------------------------------- */
.upload { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; }
.upload h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 18px; }
.how { padding-left: 1.2rem; margin: 0 0 14px; }
.how li { margin-bottom: 6px; }
.upload code {
  padding: 2px 7px; border-radius: 5px; background: var(--accent-soft);
  color: var(--accent); font-size: .85em;
}
.examples { border-collapse: collapse; margin: 14px 0 16px; }
.examples td { padding: 5px 16px 5px 0; vertical-align: middle; }
.examples td:last-child { color: var(--muted); font-size: .85rem; }

.upload-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 22px 0; }
.apply:disabled { opacity: .5; cursor: default; }

.upload-summary { padding: 16px 0; display: flex; gap: 16px; align-items: center; }
.upload-summary p { margin: 0; }

.bar {
  height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 10px;
}
.bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .2s ease; }

.tallies { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tally {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  font-size: .82rem; color: var(--muted);
}
.tally b { color: var(--text); }
.tally-good { border-color: #2e7d32; }
.tally-warn { border-color: #b26500; }
.tally-bad { border-color: #b3261e; }

.upload-log { max-height: 320px; overflow-y: auto; margin-top: 12px; }
.log-line { margin: 0 0 4px; font-size: .82rem; color: var(--muted); }
.log-looks_alike { color: #b26500; }
.log-unreadable { color: #b3261e; }

/* --- The stock keeper's queue ------------------------------------------------------ */
/* One card per piece to be taken out, each carrying its own form, because the form is
   filled with the piece in hand and filing it is what takes the piece out of stock. */
.removals { max-width: 860px; margin: 0 auto; padding: 24px 20px 60px; }
.removals h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 6px; }
.removal-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin: 18px 0; box-shadow: var(--shadow);
}
.removal-piece { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.removal-piece img {
  width: 84px; height: 84px; object-fit: cover; border-radius: 10px; flex: 0 0 auto;
}
.removal-piece .hint { margin: 2px 0 0; }
.removals-past { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin: 32px 0 8px; }

.marks, .modify {
  margin-top: 22px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.modify .field > span { width: 92px; }
.modify .apply { margin-top: 8px; }

.year-read { margin-top: -4px; }
.year-disagrees { color: #7a4b00; }

/* A sealed name is read, not typed. The field behind it stays in the form so a
   deliberate rename needs one tick rather than a different screen. */
.sealed-name { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.5; }
.sealed-name .hint-inline { font-size: .78rem; margin-left: 10px; color: var(--muted); }
.sealed-field { display: none; }
input.sealed-field.revealed { display: block; margin-top: 12px; }
label.sealed-field.revealed { display: flex; margin-top: 12px; }
.variant-field { margin-top: 10px; }
.variant-field > span { width: auto; }
.variant-field input { max-width: 110px; min-width: 0; flex: 0 0 110px; }

/* The precis a client reads. Given room and a larger size than the facts below it,
   because it is the only part of this page written for them rather than about the piece. */
.detail-copy {
  margin: 14px 0 18px; font-size: 1.05rem; line-height: 1.7; color: var(--text);
  max-width: 46ch;
}
.copy-field > span { width: 190px; }
.copy-field textarea {
  flex: 1; min-width: 220px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font-size: .98rem; font-family: inherit; line-height: 1.6; resize: vertical;
}
.chip-button.proposed { text-align: left; line-height: 1.5; max-width: 100%; }

/* One slot per key, already filled. The label says how strongly it sells, not where it
   will appear — the piece arranges that itself. */
.key-slot { margin-bottom: 8px; }
.key-slot > span { width: 110px; font-size: .85rem; }
.key-slot select { max-width: 320px; flex: 0 1 320px; }

/* Descriptions to choose between, stacked so each is read rather than scanned. */
.copy-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.copy-options .chip-button { border-radius: 12px; padding: 10px 14px; line-height: 1.6; }
.sells-on { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); font-style: normal; }
.sells-on strong { color: var(--accent); }
.writing-now { border-left: 3px solid var(--accent); padding-left: 12px; }


/* --- The counter -------------------------------------------------------------------
   An iPad in landscape, held or lying between a salesperson and a client. Four
   photographs to a screen: the most that can be shown with each still large enough to be
   looked at rather than scanned past. A client shown twelve at once has been shown
   nothing.

   Everything internal is absent rather than hidden — no codes on the tiles, no vendors,
   no dates, no stock ages. The screen is turned around often enough that "they probably
   will not notice" is not a design. */
.counter {
  padding: 12px 18px 16px; max-width: 1500px; margin: 0 auto;
  /* A definite height, not a minimum. A minimum lets the grid inside grow past it —
     which is exactly the bug this is here to fix: two pieces on the screen, two below
     the fold, and a salesperson scrolling in front of a client. Given a real height,
     the grid divides what is left after the filters have taken their share. */
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--topbar));
  min-height: 460px;
}

.counter-narrow { margin-bottom: 14px; }
.counter-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.counter-search {
  flex: 1 1 320px; min-height: 52px; padding: 12px 18px; font-size: 1.02rem;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-family: inherit;
}
.counter-stone .stone { min-height: 52px; padding: 0 20px; font-size: .95rem; }
.counter-stone .stone-letter { min-width: 52px; padding: 0; font-weight: 700; letter-spacing: 0; }
/* One shape for every button on the bar, link or button: the same height, the same
   line, the same face. A bar that is not level looks broken before it is read. */
.counter-more {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 52px; padding: 0 22px; border-radius: 12px; cursor: pointer; line-height: 1;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: .95rem; text-decoration: none; white-space: nowrap;
}
.counter-more.counter-quiet { color: var(--muted); border-style: dashed; }
.counter-more:hover { border-color: var(--accent); color: var(--accent); }
.counter-left {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

/* The three opening answers, still working, on the screen where it matters. */
.she-said, .whose {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; font-size: .85rem;
}
.she-said-label {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.said {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--text);
}
.said strong { font-weight: 600; }
/* Every dropdown on the POS: the list in the field's own colours, never white on white. */
select option { background: var(--surface); color: var(--text); }

.said-pick { position: relative; }
.said-pick summary { list-style: none; cursor: pointer; }
.said-pick summary::-webkit-details-marker { display: none; }
.said-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.pick { position: relative; display: flex; align-items: center; padding: 9px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.pick:hover { background: var(--accent-soft); }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick span::before { content: ''; display: inline-block; width: 1.3em; color: var(--accent); }
.pick input:checked + span::before { content: '\2713'; }
.pick input:disabled + span { opacity: .4; }
.pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.said select {
  border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600;
  padding: 0 2px; cursor: pointer; max-width: 190px;
}
.said select:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.said-add { color: var(--muted); }
.said-drop {
  text-decoration: none; color: var(--muted); font-size: 1.05rem; line-height: 1;
  padding: 0 2px; background: none; border: 0; cursor: pointer; font-family: inherit;
}
.said-drop:hover { color: var(--accent); }

.who-now {
  padding: 5px 14px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.who-other {
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: .85rem; font-family: inherit;
}
.who-other:hover { border-color: var(--accent); color: var(--accent); }
.saw-move {
  margin-top: 6px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: .74rem; font-family: inherit;
}
.saw-move:hover { border-color: var(--accent); color: var(--accent); }
/* Four digits, typed across a counter. Big, spaced, and nothing like a password box. */
.code-box {
  font-size: 1.8rem; letter-spacing: .55em; text-align: center;
  width: 7ch; padding: 12px 10px 12px 18px; flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
/* Today's code and My signature: one card, four large digits, the state of the day in a line. */
.code-page { max-width: 720px; }
.code-head { margin-bottom: 22px; }
.code-kicker { margin: 0 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.code-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 2.6rem; line-height: 1; color: var(--ink); }
.code-what { margin: 12px 0 0; max-width: 560px; color: var(--quiet); line-height: 1.55; }
.code-card { padding: 26px 28px; border: 1px solid var(--rule); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.code-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 12px 16px; border-radius: 14px; background: var(--paper); margin-bottom: 22px; }
.code-state strong { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
.code-state.is-on strong { color: var(--gold-deep); } .code-state.is-done strong { color: #b26500; }
.code-state span { font-size: .9rem; color: var(--soft); }
.code-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 26px; }
.code-entry { display: grid; gap: 8px; }
.code-entry > span { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--quiet); }
.code-digits { width: 6.2em; padding: 14px 0 14px .45em; border: 1.5px solid var(--rule); border-radius: 18px; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 3rem; line-height: 1; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; }
.code-digits::placeholder { color: var(--rule); letter-spacing: .3em; }
.code-digits:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.code-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 6px; }
.code-go { min-height: 48px; padding: 0 22px; }
.code-rule { margin: 18px 0 0; font-size: .82rem; color: var(--quiet); line-height: 1.5; }
.code-uses { margin-top: 26px; }
.code-uses h2 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin: 0 0 8px; color: var(--ink); }
.code-uses ul { margin: 0; padding-left: 20px; color: var(--soft); line-height: 1.7; }
.suggested {
  margin: 10px 0 0; padding: 10px 14px; border-radius: 10px;
  background: var(--accent-soft); font-size: .92rem;
}
.suggested strong { font-size: 1.3rem; letter-spacing: .3em; }

.two-of-them { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 4px; }
.two-of-them .field { flex: 1 1 240px; }

/* --- The filters, sized for a thumb ----------------------------------------------- */
/* Size, budget and occasion get room, because they are what a client says out loud and
   they are tapped while somebody is talking rather than while somebody is reading. The
   rest wait behind one more press: a panel with sixty things on it is read by nobody,
   and a panel nobody reads is where a salesperson gives up and scrolls instead. */
.big-filter { margin-top: 14px; }
.big-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.big {
  position: relative; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 13px 20px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 1rem; line-height: 1.2;
  transition: background .12s, border-color .12s, color .12s;
}
.big input { position: absolute; opacity: 0; width: 0; height: 0; }
.big:hover { border-color: var(--accent); }
.big:has(input:checked) {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.big:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.big-left { font-size: .8rem; opacity: .6; font-variant-numeric: tabular-nums; }
/* Nothing behind it. Still tappable, because sometimes you want to see for yourself. */
.big-empty { opacity: .4; }
.big-small { padding: 9px 15px; font-size: .9rem; border-radius: 999px; }

.more-filters {
  display: inline-block; margin-top: 16px; cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
  border: 1px dashed var(--line); background: transparent; color: var(--muted);
  font-size: .85rem;
}
.more-filters:hover { border-color: var(--accent); color: var(--accent); }
.more-switch { position: absolute; opacity: 0; width: 0; height: 0; }
.rest-of-them { display: none; }
.more-switch:checked ~ .rest-of-them { display: block; }
.more-switch:checked ~ .rest-of-them + .filters-row { margin-top: 10px; }

.counter-filters {
  margin-top: 12px; padding: 16px 18px 10px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
}
.counter-filters .chip span { padding: 11px 18px; font-size: .95rem; }
.counter-filters .filter-label { width: 110px; font-size: .78rem; }

/* Two by two, filling the screen below the filter bar. */
/* Four at once, and the emphasis is on *at once*. Two on the screen and two below the
   fold is not four pieces, it is two pieces and a scroll — and a salesperson who scrolls
   in front of a client looks like somebody who does not know the stock. So the grid is
   told to fit the room it has rather than the shape it would like. */
.counter-grid {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.counter-tile {
  position: relative; display: block; text-decoration: none; color: inherit;
  border-radius: var(--radius); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); min-height: 0;
}
/* Contained, not cropped. These are studio photographs on white, and a wide tile that
   crops one takes the bangle's shoulder off — which is exactly the part being sold. */
.counter-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.counter-tile-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 14px;
  font-size: 1.05rem; letter-spacing: .02em; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}
.counter-tile:active { transform: scale(.995); }

@media (orientation: portrait) {
  /* One column reads better held upright, and the photographs get bigger rather than
     smaller — the point of the screen is the piece. */
  .counter-grid { grid-template-columns: 1fr; }
  .counter-tile { aspect-ratio: 3 / 2; }
}

.counter-paging {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 16px;
}
.counter-page {
  min-height: 54px; display: inline-flex; align-items: center; padding: 0 30px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); text-decoration: none; font-size: 1rem;
}
.counter-page:hover { border-color: var(--accent); color: var(--accent); }
.counter-count { color: var(--muted); font-size: .9rem; }
.counter-nothing { text-align: center; padding: 60px 20px; color: var(--muted); }

/* --- One piece, filling the screen ------------------------------------------------ */
.shown {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 28px; padding: 18px 22px 28px; max-width: 1500px; margin: 0 auto;
  align-items: start;
}
@media (orientation: portrait), (max-width: 900px) {
  .shown { grid-template-columns: 1fr; gap: 18px; }
}
.shown-image img {
  width: 100%; border-radius: var(--radius); display: block; background: var(--surface);
}
.shown-others { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.shown-other {
  width: 78px; height: 78px; padding: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.shown-other img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shown-words { padding-top: 6px; }
.shown-back { color: var(--muted); text-decoration: none; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .16em; }
.shown-back:hover { color: var(--accent); }
.shown-words h1 {
  font-size: 2.1rem; font-weight: 500; letter-spacing: .01em; margin: 14px 0 10px;
  line-height: 1.25;
}
.shown-copy { font-size: 1.12rem; line-height: 1.75; margin: 0 0 22px; max-width: 42ch; }

.shown-keys {
  list-style: none; padding: 0; margin: 0 0 22px; counter-reset: said;
  display: flex; flex-direction: column; gap: 8px;
}
.shown-keys li {
  counter-increment: said; display: flex; align-items: baseline; gap: 12px;
  font-size: 1.02rem; letter-spacing: .02em;
}
.shown-keys li::before {
  content: counter(said); flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-size: .72rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.shown-made { color: var(--muted); font-size: .95rem; margin: 0 0 20px; }

.shown-price-ask {
  min-height: 50px; padding: 0 26px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-family: inherit; font-size: .95rem; letter-spacing: .04em;
}
.shown-price-ask:hover { border-color: var(--accent); color: var(--accent); }
.shown-price { margin-top: 14px; }
.shown-price p { margin: 0 0 6px; font-size: 1.15rem; }
.shown-price span {
  display: inline-block; width: 110px; color: var(--muted); font-size: .85rem;
  text-transform: uppercase; letter-spacing: .1em;
}
.shown-video video { width: 100%; margin-top: 20px; border-radius: var(--radius); }


/* --- A session ---------------------------------------------------------------------
   The luxury-retail lesson worth taking is restraint: few things on a screen, each with
   room around it, and type that does not shout. Everything here is touched with a thumb
   on a tablet held between two people, so the targets are large and the page is calm. */
.intake { max-width: 900px; margin: 0 auto; padding: 32px 28px 60px; }
.intake-lead {
  font-size: 1.45rem; font-weight: 400; letter-spacing: .01em; line-height: 1.5;
  margin: 0 0 32px; color: var(--text);
}
.intake section { margin-bottom: 34px; }
/* A header stands above the fields under it: larger than a label, and bolder. A header
   smaller than the bold labels beneath it read as the least important line on the form. */
.intake h2 {
  font-size: 1.12rem; text-transform: none; letter-spacing: .01em;
  color: var(--text); font-weight: 700; margin: 0 0 12px;
}
/* What is mandatory says so: a star after the name, on the floor and in the Office alike. */
.is-required::after, .field:has([required]) > span::after, .rate-box:has([required]) .rate-karat::after,
.aligned label.required::after, .form-multiline .fieldBox label.required::after {
  content: ' *'; color: var(--accent); font-weight: 700;
}
.intake-optional, .intake-hint {
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted);
}
.intake-hint { font-size: .86rem; line-height: 1.5; margin: -4px 0 12px; }
/* An answer already given folds to one bar: the label, the words chosen in boxes, and
   "change" at the end. A tap opens the chips. Room for the rest comes from this. */
.answer { margin-bottom: 18px; }
.gender-row { margin-bottom: 12px; }
.gender-row .intake-chips { align-items: center; }
.answer-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--text); font: inherit; cursor: pointer;
}
.answer-bar:hover { border-color: var(--accent); }
.answer-label { min-width: 72px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.answer-box { padding: 5px 12px; border: 1px solid var(--accent); border-radius: 8px; font-size: .9rem; }
.answer-change { margin-left: auto; color: var(--accent); font-size: .85rem; }
/* The follow-through: a chain of visits and the calls owed after each, top to bottom,
   with the link it is stuck on lit. */
.flow-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -18px 0 22px; }
.flow-read { padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 26px; }
.flow-read h2 { margin-bottom: 4px; }
.flow-straightforward h2 { color: #3a8a4f; }
.flow-involved h2 { color: var(--accent); }
.flow-complicated h2 { color: #b3261e; }
.flow-stuck-line { margin: 8px 0 0; }
.flow { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 2px solid var(--line); }
.flow-step { position: relative; margin: 0 0 26px; }
.flow-step::before {
  content: ''; position: absolute; left: -34px; top: 10px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--line); border: 2px solid var(--bg, #201E1B);
}
.flow-step.is-live::before { background: var(--accent); }
.flow-step.is-stuck::before { background: #b3261e; box-shadow: 0 0 0 4px rgba(179, 38, 30, .25); }
.flow-node { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.flow-node h3 { margin: 2px 0 8px; font-size: 1.02rem; font-weight: 700; }
.flow-when { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.flow-live { color: var(--accent); font-size: .8rem; font-weight: 600; }
.flow-said { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.flow-words { margin: 6px 0; }
.flow-plan { margin: 6px 0 0; }
.flow-plan em { color: var(--muted); font-style: normal; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-right: 6px; }
.flow-calls { list-style: none; margin: 8px 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.flow-call { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--line); font-size: .9rem; }
.flow-call.call-done { color: var(--muted); }
.flow-call.call-late { border-color: #b3261e; }
.flow-call.is-stuck { border-style: solid; border-color: #b3261e; background: rgba(179, 38, 30, .08); }
.flow-call-what { font-weight: 600; }
.flow-call-who, .flow-call-when { color: var(--muted); }
.flow-stuck { margin-left: auto; color: #b3261e; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.flow-end { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.flow-end .intake-chips form { display: inline; }
.frozen-value { display: inline-block; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px; }
/* The cart: a pill with the count in the top bar, Add to cart on the piece, the list. */
.nav-cart { display: inline-flex; align-items: center; gap: 6px; padding-left: 12px; padding-right: 12px; }
.nav-cart .cart-count { min-width: 1.4em; padding: 0 5px; border-radius: 999px; background: var(--line); color: var(--text); text-align: center; font-size: .7rem; }
.nav-cart.has-some { border-color: var(--accent); color: var(--accent); }
.nav-cart.has-some .cart-count { background: var(--accent); color: var(--on-accent, #fff); }
.shown-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 18px; }
.cart-add { margin: 0; }
.shown-cart {
  display: inline-block; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent, #fff); font: inherit; font-size: .82rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.shown-cart.is-in, .shown-cart:disabled { background: transparent; color: var(--accent); cursor: default; opacity: 1; }
.cart-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cart-line { display: grid; grid-template-columns: 34px 88px 1fr auto 30px; gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cart-line.is-picked { border-color: var(--accent); }
.cart-pick { position: relative; cursor: pointer; }
.cart-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.cart-tick { display: inline-block; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 7px; }
.cart-pick input:checked + .cart-tick { background: var(--accent); border-color: var(--accent); }
.cart-pick input:checked + .cart-tick::after { content: '\2713'; color: var(--on-accent, #fff); display: block; text-align: center; line-height: 24px; font-size: .9rem; }
.cart-image img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; display: block; }
.cart-words { display: flex; flex-direction: column; gap: 3px; }
.cart-price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cart-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cart-total { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-total em { font-style: normal; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.cart-next { margin-left: auto; display: flex; gap: 10px; }
.cart-next .apply:disabled { opacity: .45; cursor: not-allowed; }
/* The piece screen: an answered section folds to one line; a frozen one is grey. */
/* The photograph, smaller: the answers are what the screen is for. */
.review .detail-image { max-height: 340px; width: auto; max-width: 100%; object-fit: contain; }
.bom-window { width: min(1180px, 96vw); height: 92vh; padding: 0; border: 1px solid var(--rule); border-radius: 18px; background: var(--paper); }
.bom-window::backdrop { background: rgba(28, 25, 21, .45); }
.bom-window-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-weight: 600; }
.bom-window-bar span { margin-right: auto; }
.bom-window iframe { width: 100%; height: calc(92vh - 58px); border: 0; }
.add-sku summary { list-style: none; display: inline-block; cursor: pointer; }
.add-sku[open] summary { display: none; }
.review section.is-folded > :not(h2) { display: none; }
.review section.is-folded > h2 { margin: 0; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.review section.is-folded > h2 .hint-inline { display: none; }
/* A refused pass-on marks the boxes it still lacks, and they stay open (Vikrant, 6 Oct 2026). */
.review section.is-lacking { outline: 2px solid var(--crimson, #B3261E); outline-offset: 6px; border-radius: 14px; }
.review section.is-lacking > h2::after { content: 'still needed'; margin-left: 12px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--crimson, #B3261E); }
.review section > h2 { cursor: pointer; }
.fold-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; }
.review section:not(.is-folded) .fold-summary { display: none; }
.review section.is-frozen { opacity: .72; }
.review section.is-frozen > h2 { color: var(--muted); }
.review section.is-frozen .answer-box { border-color: var(--line); color: var(--muted); }
.review section.is-frozen .answer-change { color: var(--muted); }
.picture-poor { color: var(--accent); font-weight: 600; }
.find-piece .field-pair { align-items: flex-end; }
.found-pieces { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.found-pieces li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.field-code { display: flex; gap: 8px; flex: 1; min-width: 220px; }
.field-code select { flex: 0 0 150px; min-width: 0; }
.field-code input { flex: 1; min-width: 0; }
/* The vault's header: three figures in a band, green above the line, red under it. */
.vault-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding: 20px 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 26px; }
.vault-figures { display: flex; flex-wrap: wrap; gap: 18px 40px; flex: 1; }
.vault-figure { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.vault-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); font-weight: 600; }
.vault-number { font-size: 1.7rem; font-weight: 700; color: var(--text); }
.vault-sub { font-size: .84rem; color: var(--muted); }
.vault-ok .vault-cover .vault-number { color: #2E7D32; }
.vault-short .vault-cover .vault-number, .vault-short .vault-cover .vault-sub { color: #D93025; }
.vault-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.royalty h2, .statement h2, .instalment h2 { margin: 22px 0 10px; }
.royalty-row { margin: 0 0 8px; font-size: .96rem; }
.royalty-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; }
.instalment-find { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.instalment-find .field { flex: 1 1 320px; margin: 0; }
.instalment-form { max-width: 560px; }
.receipt-paper { max-width: 560px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.receipt-line { display: flex; gap: 16px; margin: 0 0 8px; }
.receipt-label { width: 130px; flex-shrink: 0; font-size: .82rem; color: var(--muted); font-weight: 700; }
.receipt-text { font-size: 1rem; color: var(--text); }
.receipt-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
/* The Dummy bar: a thin line above the header, loud only when the visit is a dummy. */
.dummy-bar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 4px 16px; font-size: .8rem; }
.dummy-bar.is-dummy { background: #D93025; color: #fff; justify-content: center; padding: 8px 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dummy-button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .78rem; cursor: pointer; }
.dummy-bar.is-dummy .dummy-button { border-color: #fff; color: #fff; }
.dummy-delete { display: inline-flex; align-items: center; gap: 8px; }
.dummy-delete summary { list-style: none; }
.dummy-delete summary::-webkit-details-marker { display: none; }
.dummy-delete .dummy-code { display: inline-flex; align-items: center; gap: 6px; }
.dummy-delete .code-box { width: 7em; padding: 3px 8px; font-size: .8rem; }
/* The BON's own sheet is bon/static/bon/bon.css and the Quotations page's is stores/static/stores/quotations.css (16 Oct 2026). */
.chip-button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.shown-solitaire { margin-bottom: 10px; }
.shown-converted { margin: -6px 0 10px; font-size: .95rem; color: var(--muted); }
.dollar-change { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.dollar-change .field { margin: 0; flex: 1 1 200px; }
.history-row { margin-bottom: 10px; }
.history-row .adds-up th { text-align: left; }
.taste .royalty-row strong { color: var(--muted); font-weight: 600; margin-right: 4px; }
/* Who is on the sale: at the top of every screen of a visit, in the same column as the
   rest, so a thumb finds it on a tablet without scrolling to the foot. */
.team-fold { margin: 0 0 22px; padding: 10px 16px; border: 1px dashed var(--line); border-radius: 12px; }
.team-fold summary { cursor: pointer; list-style: none; }
.team-fold summary::-webkit-details-marker { display: none; }
.team-change { color: var(--accent); font-size: .85rem; }
.team-form { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); max-width: 720px; }
.intake-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.intake-chips .chip span {
  padding: 14px 22px; font-size: .98rem; border-radius: 999px; line-height: 1.3;
}
.intake-words {
  width: 100%; min-height: 56px; padding: 14px 18px; font-size: 1rem;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font-family: inherit; line-height: 1.7;
}
.intake-words.tall { min-height: 110px; resize: vertical; }
.intake-missing {
  padding: 14px 18px; border-radius: 12px; background: var(--accent-soft);
  color: var(--text); font-size: .95rem; line-height: 1.7; margin: 0 0 28px;
}
.intake-go {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--line);
}
.intake-who { color: var(--muted); font-size: .9rem; }
.intake-go .apply { padding: 16px 34px; font-size: 1rem; border-radius: 12px; }

/* What she saw, as small plates rather than a table. */
.saw { display: flex; flex-wrap: wrap; gap: 16px; }
.saw-piece { width: 132px; display: flex; flex-direction: column; gap: 4px; }
.saw-piece img {
  width: 132px; height: 132px; object-fit: cover; border-radius: 12px; display: block;
}
.saw-name { font-size: .92rem; line-height: 1.4; }
.saw-far { font-size: .78rem; color: var(--accent); letter-spacing: .04em; }

/* --- Follow-ups --------------------------------------------------------------------- */
.follow { max-width: 1000px; margin: 0 auto; padding: 26px 24px 60px; }
.follow-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.follow-head h1 { font-size: 1.5rem; font-weight: 600; margin: 0; }
.follow-when {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); margin: 28px 0 10px;
}
.follow-late { color: #b3261e; }
.follow-person { font-size: 1rem; font-weight: 600; margin: 14px 0 8px; }
.follow-when + .follow-person { margin-top: 0; }
.follow-dummy { margin-top: 6px; font-size: .78rem; color: var(--muted); }
.follow-dummy summary { cursor: pointer; }
.follow-dummy form { display: flex; gap: 6px; margin-top: 6px; }
.follow-dummy input { width: 7.5em; padding: 4px 8px; }
.is-sending { opacity: .55; cursor: progress; }
.follow-name { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--accent); }
.follow-name:hover { color: var(--accent); }
.follow-calls { display: flex; flex-direction: column; gap: 10px; grid-column: 2 / 4; }
.follow-call-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 16px; align-items: center; }
.follow-several .follow-call-row + .follow-call-row { padding-top: 10px; border-top: 1px dashed var(--line); }
.follow-count { display: block; font-size: .78rem; color: var(--accent); margin-top: 4px; }
.follow-row {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.4fr) auto;
  gap: 16px; align-items: center; padding: 16px 18px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
@media (max-width: 820px) { .follow-row { grid-template-columns: 1fr; } }
.follow-phone { display: block; color: var(--muted); font-size: .88rem; }
.follow-what { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.follow-kind { font-size: .85rem; color: var(--accent); letter-spacing: .04em; }
.follow-due { font-size: .85rem; color: var(--muted); }
.follow-note { font-size: .9rem; opacity: .85; }
.follow-owner {
  font-size: .78rem; color: var(--muted); border: 1px solid var(--line);
  padding: 2px 9px; border-radius: 999px;
}
.follow-did { display: flex; gap: 10px; align-items: center; }
.follow-did .apply { text-decoration: none; padding: 10px 18px; border-radius: 10px; }
.follow-owner em { font-style: normal; color: var(--muted); opacity: .8; margin-right: 3px; }
.follow-other { border-style: dashed; }
.follow-did .search { min-width: 190px; min-height: 46px; }

/* --- The price, on the selling screen -------------------------------------------- */
/* The number is the point of the page. Big, first, and the working folded under it. */
.shown-total { margin: 18px 0 6px; font-size: 1.05rem; }
.shown-total strong { display: block; font-size: 2.1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.shown-total span { color: var(--muted); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.shown-unpriced em { color: var(--muted); font-style: normal; font-size: .9rem; }
.shown-fold { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 8px; }
.shown-fold summary { cursor: pointer; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); list-style: none; }
.shown-fold summary::-webkit-details-marker { display: none; }
.shown-fold summary::after { content: ' ›'; }
.shown-fold[open] summary::after { content: ' ⌄'; }
.adds-up { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .92rem; }
.adds-up th { text-align: left; font-weight: 400; padding: 5px 0; color: var(--ink); }
.adds-up td { text-align: right; padding: 5px 0 5px 12px; white-space: nowrap; }
.adds-up thead th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.adds-up tbody td:not(:last-child) { text-align: left; color: var(--muted); }
.adds-up tr.sub th, .adds-up tr.sub td { border-top: 1px solid var(--rule); font-weight: 600; }
.shown-weights { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }

/* Pricing and the gold rate screens. */
.pricing .working .msp strong { font-size: 1.8rem; }
.pricing .adds-up td.how { text-align: left; color: var(--muted); }
.pricing .adds-up td.amt { text-align: right; }
.pricing .needs { color: #b26500; }
.pcts { display: flex; gap: 14px; flex-wrap: wrap; }
.pcts label { flex: 1 1 140px; }
.rate-group { margin-bottom: 22px; }
.rate-group h2 { margin: 0 0 10px; }
.rate-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 6px 0 6px; }
.rate-date { font-size: .74rem; letter-spacing: .04em; color: var(--text); }
.rate-stale .rate-date { color: #D93025; font-weight: 600; }
.rate-log { display: inline-block; margin-left: 16px; }
.rate-box {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--surface);
}
.rate-box input { width: 100%; font-size: 1.25rem; text-align: right; }
.rate-karat { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rate-standing { color: var(--text); font-size: 1.35rem; font-weight: 600; }
.rate-standing em { display: block; color: var(--muted); font-style: normal; font-size: .76rem; }
.rate-missing { border-color: #b26500; }
.rate-holds { display: block; margin-bottom: 18px; }
.pricing .actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

/* --- The front door ------------------------------------------------------------- */
/* A greeting in a serif, what needs you as numbers, your screens as buttons. Black on
   paper, hairlines, air — the way a good shop looks when it is not trying. */
.door { max-width: 1180px; margin: 0 auto; padding: 28px 28px 48px; }
.door-head { margin-bottom: 26px; }
.door-eyebrow { margin: 0 0 6px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.door-name { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 2.6rem; line-height: 1.1; letter-spacing: .01em; }
.door-standing { margin: 12px 0 0; color: var(--muted); font-size: .95rem; }
.door-line { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--text); max-width: 70ch; }
.door-label span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: .88rem; margin-left: 10px; }
/* A desk: the name big, the screens folded in the header until opened, the pending
   boxes open beneath it. What needs the person is the page; the rest is a tap away. */
.door-desk { margin-bottom: 16px; }
.desk-fold > summary { list-style: none; cursor: pointer; }
.desk-fold > summary::-webkit-details-marker { display: none; }
.desk-head {
  display: flex; align-items: baseline; gap: 14px; padding: 10px 0 8px; margin: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.desk-name { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; line-height: 1; letter-spacing: .01em; }
.desk-hint { font-size: .88rem; color: var(--muted); flex: 1; }
.desk-open {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
.desk-open::after { content: ' ›'; }
.desk-fold[open] .desk-open::after { content: ' ‹'; }
.desk-fold[open] .desk-open { background: var(--accent); color: var(--on-accent); }
.desk-fold .door-buttons { margin: 4px 0 14px; }
.door-desk .door-needs { margin-bottom: 4px; }
.door-section { margin-bottom: 40px; }
.door-label {
  margin: 0 0 14px; font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 14px;
}
.door-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.door-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.need {
  display: flex; flex-direction: column; gap: 2px; padding: 13px 15px 11px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: inherit; text-decoration: none; transition: border-color .12s, transform .12s;
}
.need:hover { border-color: var(--text); transform: translateY(-1px); }
.need-count { font-family: var(--serif); font-size: 1.7rem; line-height: 1; font-weight: 600; }
.need-line { font-size: .86rem; margin-top: 4px; line-height: 1.35; }
.need-verb { margin-top: 8px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }

.door-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.door-button {
  display: flex; flex-direction: column; gap: 4px; padding: 22px 22px 20px; min-height: 104px;
  border: 1px solid var(--text); border-radius: var(--radius); background: var(--surface);
  color: var(--text); text-decoration: none; transition: background .12s, color .12s, transform .12s;
}
.door-button-label { font-size: .84rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.door-button-hint { font-size: .86rem; color: var(--muted); line-height: 1.45; }
.door-button:hover { background: var(--text); color: var(--surface); transform: translateY(-1px); }
.door-button:hover .door-button-hint { color: var(--surface); opacity: .75; }
.door-button-main { background: var(--text); color: var(--surface); }
.door-button-main .door-button-hint { color: var(--surface); opacity: .7; }
.door-button-main:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.door-button-main:hover .door-button-hint { color: var(--on-accent); }

.door-divisions { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.division {
  display: flex; flex-direction: column; gap: 3px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none;
}
.division:hover { border-color: var(--text); }
.division-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.division-head { font-size: .9rem; }
.division-people { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.door-foot { display: flex; gap: 18px; align-items: center; margin-top: 40px; font-size: .82rem; color: var(--muted); }
.door-foot a { color: var(--muted); }
.door-out { display: inline; margin: 0; }
.door-out button { border: 0; background: none; padding: 0; color: var(--muted); font: inherit; cursor: pointer; text-decoration: underline; }
@media (max-width: 600px) { .door { padding: 28px 18px 60px; } .door-name { font-size: 2rem; } }

/* --- Orders at the POS ----------------------------------------------------------- */
.shown-order {
  display: inline-block; margin-top: 16px; padding: 10px 22px; border: 1px solid var(--text);
  border-radius: 999px; color: var(--text); text-decoration: none; font-size: .78rem;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.shown-order:hover { background: var(--text); color: var(--surface); }
.order-row { display: flex; gap: 14px; flex-wrap: wrap; }
.order-row label { flex: 1 1 160px; }
.order-piece { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.order-piece img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
.order-state { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.order-state-refused, .order-state-cancelled { background: #FBE9E7; color: #B3261E; }
.order-state-delivered { background: #EAF3EA; color: #2e7d32; }
.order-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 18px 0; }
.order-facts dt { color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.order-facts dd { margin: 0; }
.order-brief { font-size: 1.05rem; line-height: 1.7; max-width: 52ch; }
.order-note { color: var(--muted); }
.order-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.boxes-page .two-pane { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 16px; align-items: start; }
.boxes-page .pane-nav { display: flex; flex-direction: column; gap: 8px; }
.boxes-page .pane-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--text); font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; text-align: left; cursor: pointer;
}
.boxes-page .pane-tab.is-selected { background: var(--text); color: var(--surface); border-color: var(--text); }
.boxes-page .pane-tab-count { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .74rem; letter-spacing: 0; }
.boxes-page .pane { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.boxes-page .pane-title { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; display: flex; gap: 10px; align-items: center; }
.boxes-page .column-count { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .74rem; letter-spacing: 0; }
.boxes-page .cards { display: grid; gap: 12px; padding: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.boxes-page .cards-few { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.boxes-page .card { display: flex; flex-direction: column; gap: 3px; padding: 16px; border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: var(--radius); background: var(--bg); color: inherit; text-decoration: none; }
.boxes-page .card-fine { border-left-color: #4E8A5A; }
.boxes-page .card-today { border-left-color: #D48A1E; }
.boxes-page .card-now { border-left-color: #B3261E; }
.boxes-page .card-name { font-weight: 600; }
.boxes-page .card-line { color: var(--muted); font-size: .82rem; }
.boxes-page .card-reason { font-size: .8rem; font-weight: 600; }
.boxes-page .card-now .card-reason { color: #B3261E; }
.boxes-page .card-today .card-reason { color: #b26500; }
@media (max-width: 700px) { .boxes-page .two-pane { grid-template-columns: 1fr; } .boxes-page .pane-nav { flex-direction: row; flex-wrap: wrap; } .boxes-page .pane-tab { width: auto; } }

/* --- Lead heat ------------------------------------------------------------------- */
.heat-chips .chip-frigid:has(input:checked) { border-color: #6C8EBF; color: #6C8EBF; }
.heat-chips .chip-cold:has(input:checked) { border-color: #4E8A5A; color: #4E8A5A; }
.heat-chips .chip-warm:has(input:checked) { border-color: #D48A1E; color: #D48A1E; }
.heat-chips .chip-hot:has(input:checked) { border-color: #B3261E; color: #B3261E; }
.gift-card .search { margin-top: 8px; font-size: .85rem; }

/* --- Her card, at the counter --------------------------------------------------- */
.card-offer { border: 1px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; background: var(--accent-soft); }
.card-offer h2 { margin-top: 0; }
.card-on { color: var(--accent); font-weight: 600; }


/* --- Orders: the dashboard, the order, the batches -------------------------------------- */
.orders-batch h2 { font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
/* The dashboard, as redesigned on 29 Sep 2026 (docs/orders-redesign). The order page, the
   journey, the form, the batches and the lead-times rules follow it unchanged. */
/* The page is paper whatever the hour: the first Office page in the POS theme, so it does
   not follow the browser into the dark like the rest of the Office does. */
.intake.orders-page { display: grid; gap: 30px; max-width: 1240px; padding: 28px 32px 60px; border-radius: 24px; margin: 18px auto 40px;
  --muted: var(--quiet); --line: var(--rule); --accent: var(--gold); --accent-soft: var(--gold-soft);
  --shadow: 0 1px 2px rgba(42, 37, 33, .05), 0 8px 24px rgba(42, 37, 33, .04);
  background: var(--paper); color: var(--ink); }
.orders-page .chip-button { background: var(--surface); color: var(--gold-deep); border-color: var(--rule); }
.orders-page .chip-button:hover { background: var(--gold-soft); }
.orders-page .hint { color: var(--quiet); }
.orders-page .card { background: var(--surface); border-color: var(--rule); color: var(--ink); }
.orders-page .card-line { color: var(--soft); }
.orders-sect > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
.orders-sect > h2 .why { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .84rem; color: var(--quiet); }
.orders-sect > h2 .more { margin-left: auto; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .84rem; color: var(--gold-deep); text-decoration: none; }
.orders-sect .column-count.is-today { background: var(--today-soft); color: #9A5F0C; }
.orders-sect .column-count.is-now { background: var(--now-soft); color: var(--now); }

/* the head */
.orders-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.orders-head h1 { font-family: var(--serif); font-weight: 500; font-size: 2.6rem; line-height: 1; margin: 0; letter-spacing: -.01em; color: var(--ink); }
.orders-head h1 small { display: block; font-family: var(--font-family-primary); font-size: .82rem; color: var(--quiet); margin-top: 8px; letter-spacing: 0; }
.orders-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.orders-chips .chip-button.is-ink { background: var(--ink); color: #FFFDF8; border-color: var(--ink); }
.orders-chips .chip-button.is-ink:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

/* what the orders cards add to the house card */
.card-code { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); font-variant-numeric: tabular-nums; }
.card-code b { color: var(--ink); font-weight: 600; }
.orders-page .card-name { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.15; margin-top: 4px; }
.orders-page .cards-few .card-name { font-size: 1.7rem; }
.orders-page .card-line b { color: var(--ink); font-weight: 600; }
.card-reason { display: inline-block; margin-top: 8px; margin-right: 6px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--fine-soft); color: #2F6B3B; }
.card-today .card-reason { background: var(--today-soft); color: #9A5F0C; }
.card-now .card-reason { background: var(--now-soft); color: var(--now); }
.card-more { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); font-size: .8rem; color: var(--soft); }
.card-more p { margin: 2px 0; }
.card-more em { font-style: normal; color: var(--quiet); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.card:hover .card-more, .card:focus-within .card-more { display: block; }
.card-act { position: absolute; top: 16px; right: 16px; }
.card-act .chip-button { padding: 6px 12px; font-size: .78rem; }
.orders-page .cards-few .card { padding: 22px 20px 18px; }

/* her morning: one ledger */
.orders-ledger { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.orders-ledger .tile { display: block; padding: 22px 24px 20px; text-decoration: none; color: inherit; border-left: 1px solid var(--rule); min-width: 0; transition: background .12s; }
.orders-ledger .tile:first-child { border-left: 0; }
.orders-ledger .tile:hover { background: var(--paper); }
.tile-label { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
.tile-fig { display: block; font-family: var(--serif); font-size: 3rem; font-weight: 500; line-height: 1; margin-top: 10px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile-fig small { font-family: var(--font-family-primary); font-size: .82rem; color: var(--quiet); margin-left: 8px; font-weight: 400; }
.tile-line { display: block; margin-top: 8px; font-size: .84rem; color: var(--soft); }
.tile-line .late { color: var(--now); }
.tile.is-now .tile-fig { color: var(--now); }
.tile.is-today .tile-fig { color: #9A5F0C; }
.tile.gold { background: var(--gold-paper); }
.tile.gold.needs { background: var(--now-soft); }
.tile.gold .tile-fig { font-size: 4.2rem; color: var(--gold-deep); }
.tile.gold.needs .tile-fig { color: var(--now); }
.gold-lines { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 18px; margin-top: 14px; justify-content: start; }
.gold-lines span { display: block; font-size: .8rem; color: var(--soft); }
.gold-lines b { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.gold-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.gold-foot .hint { font-size: .78rem; color: var(--quiet); margin: 0; }
@media (max-width: 900px) {
  .orders-ledger { grid-template-columns: 1fr 1fr; }
  .orders-ledger .tile { border-left: 0; border-top: 1px solid var(--rule); }
  .orders-ledger .tile.gold { grid-column: 1 / -1; border-top: 0; }
  .orders-ledger .tile:nth-child(3) { border-left: 1px solid var(--rule); }
}
@media (max-width: 480px) { .orders-ledger { grid-template-columns: 1fr; } .orders-ledger .tile:nth-child(3) { border-left: 0; } }

/* the two houses */
.orders-houses { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.house { display: block; padding: 20px 22px 18px; border-radius: 16px; border: 1px solid var(--rule); background: var(--surface); text-decoration: none; color: inherit; box-shadow: var(--shadow); min-width: 0; }
.house.is-on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), var(--shadow); }
.house.together { background: var(--paper); }
.house-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
.house-name em { font-style: normal; font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--gold-deep); }
.house-fig { display: block; font-family: var(--serif); font-size: 2.3rem; font-weight: 500; line-height: 1; margin-top: 10px; color: var(--ink); font-variant-numeric: tabular-nums; }
.house-fig small { font-family: var(--font-family-primary); font-size: .8rem; color: var(--quiet); margin-left: 6px; font-weight: 400; }
.house-row { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: .84rem; color: var(--soft); }
.house-row b { color: var(--ink); font-weight: 600; }
.house-row .late { color: var(--now); font-weight: 600; }

/* the release */
.orders-release-form label.card { cursor: pointer; padding-right: 44px; }
.orders-release-form label.card input { position: absolute; top: 16px; right: 14px; width: 18px; height: 18px; accent-color: var(--gold); margin: 0; }
.orders-release-form label.card:has(input:checked) { outline: 2px solid var(--gold); outline-offset: -2px; background: var(--gold-soft); }
.release-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding: 12px 14px 12px 18px; border-radius: 16px; background: var(--ink); color: #FFFDF8; }
.release-bar label { color: inherit; font-size: .84rem; }
.release-bar .sum { font-family: var(--serif); font-size: 1.3rem; }
.release-bar .sum small { font-family: var(--font-family-primary); font-size: .8rem; opacity: .7; margin-left: 6px; }
.release-bar input { padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(255,253,248,.25); background: rgba(255,253,248,.08); color: inherit; font: inherit; }
.release-bar input::placeholder { color: rgba(255,253,248,.55); }
.release-bar .note { flex: 1 1 200px; min-width: 0; }
.release-bar .go { margin-left: auto; padding: 10px 18px; border-radius: 999px; background: var(--gold); color: #FFFDF8; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.release-bar .go:disabled { opacity: .45; cursor: default; }
.release-bar .go:not(:disabled):hover { background: var(--gold-deep); }
.orders-release .batches { margin-top: 12px; font-size: .8rem; color: var(--quiet); }
.orders-release .batches a { color: var(--gold-deep); text-decoration: none; }

/* the filters, as pills */
.orders-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.orders-filters select { appearance: none; -webkit-appearance: none; padding: 8px 30px 8px 14px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink); font: inherit; font-size: .84rem; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237E756A' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center; }
.orders-filters select.is-on { border-color: var(--gold); color: var(--gold-deep); }
.orders-tick { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); font-size: .84rem; color: var(--soft); cursor: pointer; }
.orders-tick input { accent-color: var(--gold); margin: 0; }
.orders-tick:has(input:checked) { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-soft); }
.orders-filters .chip-button { margin-left: auto; }

/* the columns: the house grammar, on paper */
.orders-page .columns.two-pane { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; }
.orders-page .pane-nav { display: flex; flex-direction: column; gap: 6px; }
.orders-page .pane-tab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--rule); background: var(--surface); font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); cursor: pointer; text-align: left; }
.orders-page .pane-tab:hover { background: var(--gold-soft); }
.orders-page .pane-tab.is-selected { background: var(--ink); color: #FFFDF8; border-color: var(--ink); }
.orders-page .pane-tab.is-empty { color: var(--quiet); font-weight: 500; }
.orders-page .pane-tab-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-deep); font-size: .74rem; letter-spacing: 0; }
.orders-page .pane-tab.is-selected .pane-tab-count { background: rgba(255,253,248,.16); color: #FFFDF8; }
.orders-page .pane-body { min-width: 0; }
.orders-page .pane { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 14px; }
.orders-page .pane-title { margin: 4px 2px 12px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); display: flex; align-items: baseline; gap: 10px; }
.orders-page .pane .cards { padding: 0; }
.orders-page .pane .card { background: var(--paper); }
@media (max-width: 760px) {
  .orders-page .columns.two-pane { grid-template-columns: 1fr; }
  .orders-page .pane-nav { flex-direction: row; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .orders-ledger .tile { transition: none; } }

.order-journey { display: flex; gap: 0; list-style: none; padding: 0; margin: 14px 0 22px; counter-reset: stage; }
.order-journey li { flex: 1; position: relative; text-align: center; font-size: .8rem; color: var(--muted); padding-top: 18px; }
.order-journey li span { position: absolute; top: 0; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #E6E2DA; }
.order-journey li::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: #E6E2DA; }
.order-journey li:first-child::before { left: 50%; }
.order-journey li:last-child::before { right: 50%; }
.order-journey li.is-done span, .order-journey li.is-here span { background: var(--accent); }
.order-journey li.is-done::before { background: var(--accent); }
.order-journey li.is-here { color: var(--accent); font-weight: 600; }
.order-form label, .order-wide { display: block; font-size: .86rem; color: var(--muted); }
.order-form input[type=text], .order-form input[type=number], .order-form input[type=date], .order-form select, .order-form textarea, .order-acts input[type=text], .order-acts input[type=date], .order-acts input[type=password], .order-acts select { display: block; width: 100%; padding: 8px 10px; margin-top: 4px; border-radius: 10px; border: 1px solid var(--line, #e6e2da); font: inherit; }
.order-wide { margin: 12px 0; }
.order-stones summary { cursor: pointer; margin: 10px 0; }
.order-stone-row { align-items: center; gap: 8px; margin-bottom: 6px; }
.order-stone-row select, .order-stone-row input[type=text] { width: auto; margin: 0; }
.order-stones-list { padding-left: 18px; }
.order-photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.order-photos img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.order-acts { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; padding: 14px 16px; border-radius: 14px; background: var(--paper, #F6F3EE); border: 1px solid var(--rule, #E4DED4); color: var(--ink, #2A2521); }
.order-acts .hint { color: #7E756A; }
.order-acts .order-actions input[type=text], .order-acts .order-actions select, .order-acts .order-actions input[type=date], .order-acts .order-actions input[type=password] { width: auto; display: inline-block; margin: 0; }
.order-cancel { border-top: 1px dashed var(--line, #e6e2da); padding-top: 10px; }
.order-timeline ul { list-style: none; padding: 0; }
.order-timeline li { padding: 6px 0; border-bottom: 1px solid var(--line, #e6e2da); font-size: .9rem; }
.orders-lead-times table { border-collapse: collapse; margin: 12px 0; }
.orders-lead-times th, .orders-lead-times td { padding: 6px 10px; border-bottom: 1px solid var(--line, #e6e2da); text-align: left; }
.orders-lead-times input { width: 3.5em; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line, #e6e2da); }
.order-acts label, .order-acts .orders-tick, .order-acts span { color: var(--ink, #2A2521); }

/* --- The order form: five headings down the left, the chosen one's fields on the right --- */
.order-place .intake-lead { margin-bottom: 18px; }
/* The kind comes first: two cards, one chosen; the fields follow it. */
/* Place an order in the client's words (14 Oct 2026): the four tiles, as on the tablet's Your orders. */
.order-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.order-kind { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 180px; padding: 24px 26px; border-radius: 18px; border: 1px solid var(--rule); background: var(--surface); text-decoration: none; color: var(--ink); }
.order-kind:hover { border-color: var(--wine); }
.order-kind b { font-family: var(--serif); font-weight: 500; font-size: 1.8rem; line-height: 1.1; }
.order-kind span { font-size: .92rem; color: var(--soft); line-height: 1.45; }
.order-menu-hint { margin: -8px 0 16px; }
@media (max-width: 720px) { .order-kinds { grid-template-columns: 1fr; } }
.of-start { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.of-kind, .order-form .of-kind { display: grid; gap: 3px; padding: 14px 18px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); cursor: pointer; min-width: 220px; flex: 1; }
.of-kind input { position: absolute; opacity: 0; width: 0; height: 0; }
.of-kind b { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; color: var(--ink); }
.of-kind small { font-size: .78rem; color: var(--quiet); }
.of-kind.is-on { background: var(--ink); border-color: var(--ink); }
.of-kind.is-on b { color: #FFFDF8; } .of-kind.is-on small { color: rgba(255,253,248,.7); }
.of-kind.is-fixed { cursor: default; }
.of-label { display: block; }
.of-style-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 5px; }
.of-style-pick input[type=text] { flex: 1; min-width: 14em; margin-top: 0; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--rule); background: var(--paper); font: inherit; color: var(--ink); }
.of-said { display: block; margin-top: 5px; font-size: .78rem; color: var(--quiet); }
.of-unlock { margin-left: 6px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); font: inherit; font-size: .74rem; color: var(--ink); cursor: pointer; }
.of-field input[readonly] { color: var(--quiet); background: var(--soft); }
.of { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.of-nav { display: flex; flex-direction: column; gap: 6px; position: sticky; top: calc(var(--topbar) + 14px); }
.of-tab { display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--rule); background: var(--surface); font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.of-tab small { grid-column: 2; display: block; font-weight: 400; font-size: .74rem; color: var(--quiet); }
.of-tab.is-on { background: var(--ink); color: #FFFDF8; border-color: var(--ink); }
.of-tab.is-on small { color: rgba(255,253,248,.7); }
.of-tick { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--rule); grid-row: span 2; }
.of-tab.is-done .of-tick { background: #4E8A5A; border-color: #4E8A5A; }
.of-tab.is-on .of-tick { border-color: rgba(255,253,248,.5); }
.of-panes { display: flex; flex-direction: column; gap: 16px; }                      /* one page, every heading in a scroll (14 Oct 2026) */
.of-pane { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 20px 22px; scroll-margin-top: calc(var(--topbar) + 14px); }
.of-head { margin: 0 0 14px; font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--ink); }
.of-head small { font-family: var(--sans, inherit); font-size: .78rem; color: var(--quiet); margin-left: 8px; }
.of-label.is-required { font-weight: 700; color: var(--ink); }                        /* a compulsory field's name is bold, with its star */
.of-missing { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--rose); border: 1px solid var(--rose-deep); font-size: .82rem; color: var(--wine-deep); }
.of-missing-word { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.of-missing-one { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--wine); background: var(--surface); color: var(--wine); font: inherit; font-size: .8rem; cursor: pointer; }
.of-missing-one:hover { background: var(--wine); color: var(--wine-on); }
.of-why { flex: 1; text-align: right; font-size: .84rem; color: var(--wine); }
.of-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.of-grid-3 { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
.of-field { display: block; font-size: .82rem; color: var(--quiet); }
.of-field input[type=text], .of-field input[type=number], .of-field input[type=date], .of-field select, .of-field textarea { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--rule); background: var(--paper); font: inherit; color: var(--ink); }
.of-field input[type=file] { display: block; margin-top: 6px; }
.of-wide { grid-column: 1 / -1; }
.of-tickline { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: .9rem; }
.of-tickline input { margin: 0; accent-color: var(--gold); }
.of-hint { margin: 12px 0 0; font-size: .82rem; color: var(--quiet); }
.of-sum { margin: 0; align-self: end; font-family: var(--serif); font-size: 1.3rem; color: var(--gold-deep); }
.of-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.of-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.of-line select, .of-line input[type=text] { padding: 7px 9px; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); font: inherit; font-size: .86rem; color: var(--ink); }
.of-line input[type=text] { width: 7.5em; }
.of-line input[readonly] { background: var(--gold-soft); color: var(--gold-deep); }
.of-cert { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--gold-deep); padding: 6px 10px; border-radius: 999px; background: var(--gold-soft); }
.of-single { display: inline-flex; gap: 6px; }
@media (max-width: 900px) { .of { grid-template-columns: 1fr; } .of-nav { position: static; flex-direction: row; flex-wrap: wrap; } .of-tab small { display: none; } .of-grid, .of-grid-3 { grid-template-columns: 1fr; } }
.of [hidden] { display: none !important; }
.order-form .of-line select, .order-form .of-line input[type=text] { width: auto; display: inline-block; margin: 0; }
.order-form .of-line select { max-width: 13em; }
.of-sum { white-space: nowrap; }

.of-tables { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.of-tables.is-two { grid-template-columns: 1fr 1fr; }
.of-table { min-width: 0; padding: 12px 14px; border: 1px dashed var(--rule, #E3DACB); border-radius: 14px; }
.of-table .of-lines { margin-top: 8px; }
.of-table .of-line input[type=text] { width: 5.5em; }

/* The Completing screen's marks (Shiv, 17 Oct 2026): a box still to fill has its heading in bold, every mandatory box
   carries a star, and the founder ticks the photographs Brand sent on. */
.review section.is-short > h2 { font-weight: 800; }
.review h2 .must { color: var(--crimson, #B3261E); margin-left: 3px; font-weight: 800; }
.review-pictures { margin: 14px 0 18px; }
.review-pictures h2 { font-size: .95rem; margin: 0 0 8px; }
.review-pictures .pix-row { display: flex; gap: 12px; flex-wrap: wrap; }
.review-pictures .pix-card { width: 132px; border: 1px solid var(--rule, #e3dacb); border-radius: 12px; padding: 8px; background: #fff; font-size: .72rem; }
.review-pictures .pix-card.is-lead { border-color: var(--gold, #8a6a2e); }
.review-pictures .pix-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 6px; }
.review-pictures .pix-card label { display: flex; align-items: center; gap: 6px; font-weight: 650; }
.review-pictures .pix-card input { width: auto; margin: 0; }
.review-pictures .pix-card small { display: block; opacity: .7; margin-top: 3px; }
.review-pictures .pix-card .pix-wait { color: var(--crimson, #B3261E); }