/* Mad Italian Bread — one stylesheet for the storefront, the order form and the
   console. Warm paper, dark crust, one accent. No framework: the whole site is
   a dozen components and they all live here.

   The palette is committed to a single warm light theme rather than following
   the system. A bakery has a look, and "the same bread photographed on charcoal
   at night" is a different shop. */

:root {
  --paper:      #fbf7f0;
  --paper-2:    #f4ece0;
  --paper-3:    #ede2d2;
  --cream:      #fffdf9;
  --ink:        #23190f;
  --ink-2:      #47382a;
  --muted:      #7c6a58;
  --faint:      #a3907c;
  --line:       #e6dac7;
  --line-2:     #d8c8ae;

  --crust:      #b0501c;
  --crust-deep: #8a3c11;
  --crust-soft: #f6e6d8;
  --ember:      #d3861f;
  --olive:      #5c6b3c;
  --olive-soft: #e9edde;

  --espresso:   #1d1611;
  --espresso-2: #2a201a;

  --ok:         #4e6b34;
  --ok-soft:    #e8efdd;
  --warn:       #9a6512;
  --warn-soft:  #fbeed6;
  --gone:       #9c3a2c;
  --gone-soft:  #f8e3de;

  --radius:     14px;
  --radius-sm:  9px;
  --radius-lg:  22px;
  --shadow:     0 1px 2px rgba(35, 25, 15, .05), 0 8px 24px rgba(35, 25, 15, .07);
  --shadow-lift:0 2px 6px rgba(35, 25, 15, .08), 0 18px 44px rgba(35, 25, 15, .14);

  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1140px;
}

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

/* The UA's `[hidden] { display: none }` loses to any author rule that sets a
   display, so a `.sum-total` or a `.stepblock` stayed on screen with the
   attribute set. Restating it as author CSS puts `hidden` back in charge — it
   is the mechanism half this app's show-and-hide runs on. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
h1 { font-size: clamp(38px, 6.2vw, 68px); }
h2 { font-size: clamp(28px, 3.6vw, 42px); }
h3 { font-size: clamp(20px, 2.1vw, 25px); }
p { margin: 0 0 1em; }
a { color: var(--crust-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 40px, 780px); margin-inline: auto; }

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-tight { padding: clamp(40px, 5vw, 64px) 0; }
.section-paper { background: var(--paper-2); }
.section-dark { background: var(--espresso); color: #f0e6d8; }
.section-dark h2, .section-dark h3 { color: #fdf6ea; }
.section-dark a { color: var(--ember); }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crust);
  margin: 0 0 14px;
}
.section-dark .eyebrow { color: var(--ember); }

.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 62ch; }
.section-dark .lede { color: #d9c9b4; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.tabular { font-variant-numeric: tabular-nums; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--crust);
  color: #fff;
  font: inherit;
  font-weight: 650;
  font-size: 15.5px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .16s ease, transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--crust-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--line-2); color: #fffdf9; cursor: not-allowed; transform: none; opacity: .8;
}
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--paper-3); color: var(--ink); }
.btn-light { background: #fff8ee; color: var(--espresso); }
.btn-light:hover { background: #fff; }
.btn-sm { padding: 8px 15px; font-size: 13.5px; }
.btn-lg { padding: 16px 32px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-danger { background: var(--gone); }
.btn-danger:hover { background: #7e2c20; }

/* --------------------------------------------------------------------- chips */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
}
.pill-ok    { background: var(--ok-soft);    color: var(--ok); }
.pill-warn  { background: var(--warn-soft);  color: var(--warn); }
.pill-gone  { background: var(--gone-soft);  color: var(--gone); }
.pill-crust { background: var(--crust-soft); color: var(--crust-deep); }
.pill-olive { background: var(--olive-soft); color: var(--olive); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 247, 240, .88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 66px;
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand small {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--crust);
}
.topbar-spacer { flex: 1 1 auto; }
.navlinks { display: flex; align-items: center; gap: 22px; }
.navlinks a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
}
.navlinks a:hover { color: var(--crust-deep); }
@media (max-width: 860px) { .navlinks { display: none; } }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: min(78vh, 680px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--espresso);
  overflow: hidden;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The photograph is the warm part; the page behind it is not. Nudging it
     darker and warmer lets white text sit on it without a heavy scrim. */
  filter: saturate(1.05) brightness(.82);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(20, 14, 10, .93) 0%, rgba(20, 14, 10, .55) 42%, rgba(20, 14, 10, .18) 100%),
    linear-gradient(to right, rgba(20, 14, 10, .6), transparent 62%);
}
.hero-body { position: relative; z-index: 1; padding: clamp(40px, 7vw, 84px) 0 clamp(36px, 5vw, 62px); }
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.hero .lede { color: #ecdfcd; max-width: 52ch; font-size: clamp(17px, 1.8vw, 21px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-note { margin-top: 22px; color: #cbb9a3; font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------- next bake bar */

.nextbake {
  background: var(--espresso-2);
  color: #ecdfcd;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
/* Grid rather than a wrapping flex row. The pills are the variable-width part,
   so they get the `1fr` cell and wrap inside it, which keeps the day, the count
   and the call to action on one line instead of the whole strip folding the
   moment the loaf names run long. */
.nextbake-inner {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
  padding: 20px 0;
}
@media (max-width: 900px) {
  .nextbake-inner { grid-template-columns: auto auto; row-gap: 18px; }
  .nextbake-left, .nextbake-cta { grid-column: 1 / -1; }
}
.nextbake .k {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ember);
}
.nextbake .v { font-family: var(--display); font-size: 21px; font-weight: 600; color: #fdf6ea; }
.nextbake-left { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* The call to action sits at the far end on a wide screen and folds under the
   rest on a narrow one — `margin-left: auto` does both, where a flex spacer
   element grew and pushed the button onto its own line at every width. */
.nextbake-cta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-self: end; }
@media (max-width: 900px) { .nextbake-cta { justify-self: start; } }

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 22px; }

.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

/* Loaf cards ---------------------------------------------------------------- */

.loaf {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.loaf:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.loaf-photo { position: relative; aspect-ratio: 4 / 3; background: var(--paper-3); overflow: hidden; }
.loaf-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.loaf:hover .loaf-photo img { transform: scale(1.04); }
.loaf-price {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(29, 22, 17, .82);
  color: #fff8ee;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}
.loaf-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.loaf-body h3 { margin: 0; }
.loaf-blurb { color: var(--ink-2); margin: 0; font-size: 15px; }
.loaf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }

details.more > summary {
  cursor: pointer;
  color: var(--crust-deep);
  font-size: 13.5px;
  font-weight: 650;
  list-style: none;
  padding: 4px 0;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "＋ "; font-weight: 700; }
details.more[open] > summary::before { content: "－ "; }
details.more p { font-size: 14.5px; color: var(--ink-2); margin: 6px 0 0; }

/* ------------------------------------------------------------------ figures */

.split { display: grid; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split-wide { grid-template-columns: 1.1fr .9fr; } }
.figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
/* `height: auto` is doing real work. The <img> carries width and height
   attributes so the browser can reserve space before the photo loads, and those
   map to CSS width/height as presentational hints — which makes the box a
   definite size and makes `aspect-ratio` inert. Releasing the height hands the
   ratio back its job. */
.figure img { width: 100%; height: auto; aspect-ratio: 7 / 5; object-fit: cover; }

.steps { display: grid; gap: 22px; counter-reset: step; }
@media (min-width: 760px) { .steps-3 { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 18px; border-top: 2px solid var(--line-2); }
.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--crust);
  display: block;
  margin-bottom: 6px;
  letter-spacing: .1em;
}
.step h3 { font-size: 21px; margin-bottom: 6px; }
.step p { color: var(--ink-2); font-size: 15px; margin: 0; }
.section-dark .step { border-color: rgba(255, 255, 255, .16); }
.section-dark .step p { color: #cdbca6; }

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

.field { display: block; margin-bottom: 16px; }
.field > .label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.field .hint { font-size: 13px; color: var(--muted); margin-top: 5px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="date"], input[type="datetime-local"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--crust);
  box-shadow: 0 0 0 3px var(--crust-soft);
}
input[aria-invalid="true"] { border-color: var(--gone); }
textarea { min-height: 88px; resize: vertical; }
.row { display: grid; gap: 14px; }
@media (min-width: 620px) { .row-2 { grid-template-columns: 1fr 1fr; } .row-3 { grid-template-columns: 2fr 1fr 1fr; } }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.check input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--crust); }

/* Segmented choice (pickup / delivery) -------------------------------------- */

.choice { display: grid; gap: 12px; }
@media (min-width: 620px) { .choice-2 { grid-template-columns: 1fr 1fr; } }
.choice label {
  display: block;
  position: relative;
  padding: 16px 18px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--cream);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.choice label:hover { border-color: var(--line-2); background: var(--paper-2); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice input:checked + .choice-body { color: var(--ink); }
.choice label:has(input:checked) {
  border-color: var(--crust);
  background: var(--crust-soft);
  box-shadow: 0 0 0 3px rgba(176, 80, 28, .12);
}
.choice label:has(input:focus-visible) { outline: 3px solid var(--ember); outline-offset: 2px; }
.choice-title { font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.choice-note { font-size: 13.5px; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------- day pickers */

.days { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.day {
  position: relative;
  text-align: left;
  padding: 15px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--cream);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.day:hover:not([disabled]) { border-color: var(--crust); transform: translateY(-2px); }
.day[aria-pressed="true"] { border-color: var(--crust); background: var(--crust-soft); box-shadow: 0 0 0 3px rgba(176, 80, 28, .12); }
.day[disabled] { opacity: .55; cursor: not-allowed; background: var(--paper-2); }
.day-dow, .day-date, .day-meta { display: block; }
.day-dow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--crust); }
.day[disabled] .day-dow { color: var(--muted); }
.day-date { font-family: var(--display); font-size: 22px; font-weight: 600; margin: 2px 0 4px; }
.day-meta { font-size: 13px; color: var(--muted); }

/* ----------------------------------------------------------- order lines */

.pick {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.pick:last-child { border-bottom: none; }
.pick-thumb { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; flex: none; background: var(--paper-3); }
.pick-main { flex: 1 1 auto; min-width: 0; }
.pick-name { font-weight: 650; font-size: 15.5px; }
.pick-meta { font-size: 13px; color: var(--muted); }
.pick-sold { color: var(--gone); font-weight: 650; }

.stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.stepper button {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--cream);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.stepper button:hover:not([disabled]) { background: var(--crust-soft); border-color: var(--crust); }
.stepper button[disabled] { opacity: .4; cursor: not-allowed; }
.stepper .qty {
  min-width: 34px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
}

/* On a phone the thumbnail, the name and the stepper will not share a line
   without shredding the loaf name into four words on four rows. The stepper
   takes its own row instead, right-aligned under the name it belongs to. */
@media (max-width: 560px) {
  .pick { flex-wrap: wrap; row-gap: 10px; }
  .pick-thumb { width: 56px; height: 56px; }
  /* basis 0, not auto: with `auto` a two-line loaf name is wider than the space
     left beside the thumbnail, so that row alone drops below it and the list
     stops lining up. */
  .pick-main { flex: 1 1 0; min-width: 0; }
  .stepper { flex: 1 0 100%; justify-content: flex-end; }
}

/* Sticky basket -------------------------------------------------------------- */

.summary { position: sticky; top: 88px; }
.sum-line { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px; }
.sum-line .n { font-variant-numeric: tabular-nums; }
.sum-total {
  display: flex; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px;
  font-family: var(--display); font-size: 24px; font-weight: 650;
}
.sum-empty { color: var(--muted); font-size: 14.5px; }

/* ------------------------------------------------------------------- alerts */

.note {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: var(--paper-2);
  font-size: 14.5px;
  margin-bottom: 16px;
}
.note-bad  { background: var(--gone-soft); border-color: #e9c3ba; color: #6f2a1e; }
.note-good { background: var(--ok-soft);   border-color: #cbd9b6; color: #3b5327; }
.note-warn { background: var(--warn-soft); border-color: #eed7ab; color: #7a4f0c; }

.empty { text-align: center; color: var(--muted); padding: 44px 20px; }

/* --------------------------------------------------------------- receipt */

.code {
  font-family: var(--mono);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--crust-deep);
}

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--line-2); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--line-2);
}
.timeline li.on::before { background: var(--crust); border-color: var(--crust); }
.timeline .t { font-weight: 650; font-size: 15px; }
.timeline .d { font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------- footer */

.footer { background: var(--espresso); color: #bfae98; padding: 56px 0 40px; font-size: 14.5px; }
.footer h4 { color: #fdf6ea; font-family: var(--display); font-size: 17px; margin: 0 0 10px; }
.footer a { color: #ddccb5; text-decoration: none; }
.footer a:hover { color: var(--ember); text-decoration: underline; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.footer-base {
  margin-top: 38px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: #8c7c69; font-size: 13px;
}

/* ---------------------------------------------------------------- console */

.console { background: var(--paper-2); min-height: 100vh; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); margin-bottom: 24px; }
.tab {
  border: none; background: none; font: inherit; font-weight: 650; font-size: 14.5px;
  padding: 11px 16px; cursor: pointer; color: var(--muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--crust-deep); border-bottom-color: var(--crust); }

.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); margin-bottom: 26px; }
.stat { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; }
.stat .k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.stat .v { font-family: var(--display); font-size: 29px; font-weight: 650; margin-top: 3px; font-variant-numeric: tabular-nums; }

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--cream); }
.table th {
  text-align: left; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--paper-2); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.toolbar input, .toolbar select { width: auto; min-width: 150px; }
.toolbar-spacer { flex: 1 1 auto; }

.drawer-back {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(29, 22, 17, .45);
  display: flex; justify-content: flex-end;
}
.drawer {
  width: min(100%, 560px);
  background: var(--paper);
  height: 100%;
  overflow-y: auto;
  padding: 26px;
  box-shadow: var(--shadow-lift);
}

/* ----------------------------------------------------------------- toasts */

.toast-host { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--espresso); color: #fdf6ea;
  padding: 11px 18px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600;
  box-shadow: var(--shadow-lift);
  animation: rise .22s ease;
  max-width: min(92vw, 460px);
  text-align: center;
}
.toast-error { background: #7e2c20; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.skip {
  position: absolute; left: -9999px;
  background: var(--crust); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media print {
  .topbar, .footer, .hero, .btn, .toast-host { display: none !important; }
  body { background: #fff; }
}