/* Owner dash. Same tokens as the brand kit; tighter section gap. */

:root {
  --bg: #080808;
  --panel: #111;
  --text: #d6a55a;
  --muted: #b8a078;
  --line: #3a3228;
  --gold: #d6a55a;
  --gold-bright: #f1cb84;
  --ink: #080808;
  --field-filled: rgb(250, 255, 189);
  --display: "Cinzel", Palatino, "Palatino Linotype", serif;
  --body: "Cormorant Garamond", Palatino, "Palatino Linotype", serif;
  --space-1: 0.5rem;
  --space-2: 1.5rem;
  --space-3: 2rem;
  --space-4: 3rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 8rem;
  --section-gap: var(--space-4);
  --hit: 2.75rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.69rem;
  font-weight: 500;
  line-height: 1.6;
  padding: var(--space-4) var(--space-4) var(--space-6);
}
.dash {
  max-width: 61rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  position: relative;
}
.dash-signout {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
.dash-signout button {
  width: auto;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}
.logo {
  width: 16rem;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto var(--space-3);
}
header { text-align: center; margin: 0; }
h1, h2, button, .order-list__head, .lines__head {
  font-family: var(--display);
}
h1 {
  margin: 0 0 var(--space-2);
  font-size: 2.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: var(--gold-bright);
}
.lede {
  margin: 0;
  color: var(--muted);
  font-style: italic;
  line-height: 1.6;
}
h2 {
  margin: 0 0 var(--space-2);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.note { margin: 0 0 var(--space-3); color: var(--muted); font-size: 1.5rem; line-height: 1.6; }
.notice { margin: 0; color: var(--gold-bright); font-style: italic; }
.back { margin: 0; }
.back a, a {
  color: var(--gold-bright);
  text-decoration: none;
}
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}
.quiet { color: var(--muted); font-size: 1.2rem; }

.dash-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
}
.dash-nav a {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.dash-nav a:hover,
.dash-nav a:focus-visible { color: var(--gold); text-decoration: none; }
.dash-nav a[aria-current="page"] {
  color: var(--gold-bright);
}

.errors {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
  color: var(--gold-bright);
}
.field .note { margin-top: var(--space-1); margin-bottom: 0; }

.catalog-board { display: flex; flex-direction: column; }
.catalog-list { display: flex; flex-direction: column; }
.catalog-list__head,
.catalog-card {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1.5fr) 8.75rem 7.5rem var(--hit) var(--hit);
  column-gap: var(--space-2);
  align-items: start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
.catalog-list__head {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright);
  align-items: end;
  padding-bottom: var(--space-1);
}
.catalog-read { display: contents; }
.catalog-card {
  font-size: 1.1rem;
}
.catalog-card.is-error { border-color: var(--gold-bright); }
.catalog-card.is-hidden { opacity: 0.55; }
.catalog-card.is-hidden:has(.catalog-disclose[open]) { opacity: 1; }
.catalog-card.is-dragging { opacity: 0.45; }
.catalog-card:has(.catalog-disclose[open]) .catalog-read,
.catalog-card:has(.catalog-disclose[open]) .catalog-read > * { display: none; }
.catalog-card:has(.catalog-disclose[open]) > .catalog-edit {
  display: grid;
  grid-column: 2 / 5;
  grid-row: 1;
}
.catalog-card:has(.catalog-disclose[open]) .catalog-disclose {
  grid-column: 5;
  grid-row: 1;
}
.catalog-card:has(.catalog-disclose[open]) .catalog-remove {
  grid-column: 6;
  grid-row: 1;
}
.catalog-card:has(.catalog-disclose[open]) .drag-handle {
  visibility: hidden;
  pointer-events: none;
}
.catalog-add {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.catalog-add > summary,
.catalog-disclose > summary {
  list-style: none;
  cursor: pointer;
}
.catalog-add > summary::-webkit-details-marker,
.catalog-disclose > summary::-webkit-details-marker { display: none; }
.catalog-add > summary {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  width: fit-content;
}
.catalog-add > summary:hover { color: var(--gold); }
.catalog-disclose { min-width: 0; }
.catalog-edit {
  display: grid;
  grid-template-columns: minmax(10rem, 1.5fr) 8.75rem minmax(7rem, auto);
  gap: var(--space-1) var(--space-2);
  align-items: start;
  margin-top: var(--space-1);
}
.catalog-card > .catalog-edit { display: none; margin-top: 0; }
.catalog-add .catalog-edit { margin-top: var(--space-2); }
.catalog-edit .errors {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.pactions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.pname, .pprice, .plisted { min-width: 0; }
.catalog-blurb { margin-top: 0.35rem; font-size: 1.05rem; }
.price-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.price-prefix { color: var(--muted); }
.price-wrap input { width: 5.5rem; }
.catalog-card .choice,
.catalog-add .choice { margin-top: 0; font-size: 1.05rem; }
.catalog-remove { margin: 0; }

.catalog-add .pactions button,
.catalog-add .pactions .btn-ghost,
.catalog-edit .pactions button,
.catalog-edit .pactions .btn-ghost {
  width: auto;
  margin-top: 0;
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.icon-btn {
  width: var(--hit);
  min-width: var(--hit);
  height: var(--hit);
  min-height: var(--hit);
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--gold);
  letter-spacing: 0;
  text-transform: none;
}
.icon-btn svg { width: 1.15rem; height: 1.15rem; display: block; }
button.icon-btn:hover:not(:disabled),
summary.icon-btn:hover,
.catalog-disclose[open] > summary.icon-btn {
  background: var(--panel);
  border-color: var(--gold);
  color: var(--gold-bright);
  transform: none;
}
button.icon-btn:active:not(:disabled) { transform: none; }

button.drag-handle {
  width: 2rem;
  min-width: 2rem;
  min-height: var(--hit);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
button.drag-handle:hover:not(:disabled),
button.drag-handle:active:not(:disabled) {
  background: transparent;
  border: 0;
  transform: none;
  color: var(--gold-bright);
}
button.drag-handle:active { cursor: grabbing; }
.drag-handle::before {
  content: "";
  display: block;
  width: 0.55rem;
  height: 0.95rem;
  margin: 0 auto;
  background-image: radial-gradient(circle, var(--gold) 1.15px, transparent 1.35px);
  background-size: 0.28rem 0.28rem;
}
.drag-handle--none { visibility: hidden; pointer-events: none; }

.catalog-add input[type="text"],
.catalog-card input[type="text"] {
  font-size: 1.2rem;
  min-height: var(--hit);
  padding: 0.35rem var(--space-1);
}

.gold-sep {
  --w: min(62%, 28rem);
  --h: 2px;
  display: block;
  width: var(--w);
  max-width: 100%;
  min-width: 0;
  height: var(--h);
  border: 0;
  margin-block: 0;
  margin-inline: auto;
  position: relative;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #3a2a12 8%,
    #6a4e24 22%,
    #c9a15a 42%,
    #e8c989 50%,
    #c9a15a 58%,
    #6a4e24 78%,
    #3a2a12 92%,
    transparent 100%
  );
  border-radius: 1px;
  box-shadow:
    0 0 6px 0 rgba(201, 161, 90, 0.18),
    0 0 18px 1px rgba(180, 130, 50, 0.12);
}
.gold-sep::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 236, 190, 0.15) 18%,
    rgba(255, 244, 214, 0.75) 50%,
    rgba(255, 236, 190, 0.15) 82%,
    transparent 100%
  );
  pointer-events: none;
}
.gold-sep::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.55) 50%, transparent);
  pointer-events: none;
}
.gold-sep--wide { --w: min(90%, 48rem); }
header .gold-sep { margin-block: 0 var(--space-3); }

label { display: block; font-weight: 600; }
.field label { margin: 0 0 var(--space-1); }
.field + .field { margin-top: var(--space-3); }
input, textarea, select { font: inherit; font-size: 1.69rem; line-height: 1.6; }
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"] {
  width: 100%;
  min-height: var(--hit);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  color: var(--gold-bright);
  caret-color: var(--gold-bright);
}
input[type="text"]:not(:placeholder-shown),
input[type="tel"]:not(:placeholder-shown),
input[type="email"]:not(:placeholder-shown),
input[type="number"]:not(:placeholder-shown) {
  background: var(--field-filled);
  color: var(--ink);
  caret-color: var(--ink);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--field-filled);
}
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button,
input::-webkit-credit-card-auto-fill-button {
  background-color: var(--gold-bright);
}
input::-webkit-contacts-auto-fill-button:hover,
input::-webkit-credentials-auto-fill-button:hover,
input::-webkit-credit-card-auto-fill-button:hover {
  background-color: var(--gold);
}
input:hover:not(:disabled) { border-color: var(--gold); }
input:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-color: var(--gold);
}

button,
.btn-ghost {
  display: inline-block;
  margin-top: var(--space-3);
  width: 100%;
  min-height: var(--hit);
  padding: var(--space-3);
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
button:hover:not(:disabled) {
  background-color: var(--gold-bright);
  border-color: var(--gold-bright);
}
button:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--gold) 82%, black);
  border-color: color-mix(in srgb, var(--gold) 82%, black);
  transform: translateY(1px);
}
button:focus-visible,
.btn-ghost:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}
.btn-ghost {
  background: transparent;
  color: var(--gold);
}
.btn-ghost:hover:not(:disabled) {
  background-color: var(--panel);
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.btn-ghost:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--panel) 82%, black);
  color: var(--gold-bright);
  border-color: color-mix(in srgb, var(--gold) 82%, black);
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  button, .btn-ghost { transition: none; }
  button:active:not(:disabled),
  .btn-ghost:active:not(:disabled) { transform: none; }
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8rem;
  min-height: var(--hit);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.chip:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }
.chip.on,
.chip[aria-current="page"] {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: var(--panel);
}

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

.order-list,
.lines {
  display: flex;
  flex-direction: column;
}
.order-list__head,
.order-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line);
}
.lines__head,
.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem 7rem;
  column-gap: var(--space-2);
  align-items: start;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line);
}
.order-card {
  position: relative;
  font-size: 1.1rem;
}
.order-card:hover,
.line:hover {
  background: var(--panel);
}
.order-card__hit {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.order-card__hit:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}
.order-card a.quiet {
  position: relative;
  z-index: 1;
  display: block;
}
.order-list__head,
.lines__head {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.order-list__head { align-items: flex-end; }
.lines__head { align-items: end; }
.order-list__head > *,
.order-cell,
.lines__head > *,
.line > * {
  min-width: 0;
}
.order-list__head > :nth-child(1),
.order-card .when { flex: 1.3; }
.order-list__head > :nth-child(2),
.order-card .who { flex: 1.6; }
.order-list__head > :nth-child(3),
.order-card .items { flex: 1.3; }
.order-list__head > :nth-child(4),
.order-card .total { flex: 0.95; text-align: right; }
.order-list__head > :nth-child(5),
.order-card .status-cell { flex: 0.85; }
.order-card .when,
.who-name {
  white-space: nowrap;
}
.order-card .items {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who-name { display: block; }
.line__name { grid-column: 1; }
.line__amount { grid-column: 2; }
.line__price { grid-column: 3; }
.line--total {
  border-top: 1px solid var(--gold);
  border-bottom: 0;
  color: var(--gold-bright);
  font-weight: 600;
}
.line--total .line__price { grid-column: 3; }
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

dl { margin: 0; }
dl > div { margin: 0 0 var(--space-3); }
dt {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 var(--space-1);
}
dd { margin: 0; }

.price-tax {
  font-family: var(--body);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--muted);
  text-transform: none;
  white-space: nowrap;
}

.sign-in-link { text-align: center; }
.cancel { margin-top: var(--space-4); }
form > .choice { margin-top: var(--space-3); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit);
  margin: 0;
  cursor: pointer;
  font-weight: 600;
}
.check {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  position: relative;
}
.check:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.check:checked::after {
  content: "";
  position: absolute;
  left: 0.34rem;
  top: 0.08rem;
  width: 0.32rem;
  height: 0.7rem;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

@media (max-width: 40rem) {
  body {
    padding-inline: calc(var(--space-4) / 2);
  }
  .order-list__head,
  .lines__head { display: none; }
  .order-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-3) 0;
  }
  .order-card .when,
  .who-name,
  .order-card .items {
    white-space: normal;
  }
  .catalog-list__head { display: none; }
  .catalog-card {
    grid-template-columns: 2rem minmax(0, 1fr) var(--hit) var(--hit);
    padding: var(--space-3) 0;
  }
  .catalog-read {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    gap: 0.2rem;
  }
  .catalog-card:has(.catalog-disclose[open]) {
    grid-template-columns: 1fr var(--hit) var(--hit);
  }
  .catalog-card:has(.catalog-disclose[open]) .catalog-read,
  .catalog-card:has(.catalog-disclose[open]) .catalog-read > * { display: none; }
  .catalog-card:has(.catalog-disclose[open]) .drag-handle { display: none; }
  .catalog-card:has(.catalog-disclose[open]) .catalog-disclose {
    grid-column: 2;
    grid-row: 1;
  }
  .catalog-card:has(.catalog-disclose[open]) .catalog-remove {
    grid-column: 3;
    grid-row: 1;
  }
  .catalog-card:has(.catalog-disclose[open]) > .catalog-edit {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .catalog-edit { grid-template-columns: 1fr; }
  .catalog-card .pprice { text-align: unset; }
  .order-cell {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    flex: none;
  }
  .order-cell__label.visually-hidden {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    font-family: var(--display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-bright);
    flex: 0 0 auto;
  }
  .order-cell__value {
    text-align: right;
    min-width: 0;
  }
  .order-card .total { text-align: unset; }
  .line {
    display: flex;
    flex-wrap: wrap;
    padding: var(--space-3) 0;
    column-gap: var(--space-2);
  }
  .line__name { flex: 1 1 100%; grid-column: auto; }
  .line__amount { flex: 1 1 auto; grid-column: auto; text-align: left; }
  .line__price { flex: 0 0 auto; grid-column: auto; margin-inline-start: auto; }
  .line--total {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .line--total .line__price { flex: 0 0 auto; }
}

@media (max-width: 32rem) {
  h1 { font-size: 2.22rem; letter-spacing: 0.04em; }
  .dash-signout { position: static; text-align: right; }
}

/* One-order ticket: 20% smaller type and a tighter stack than the public kit. */
body:has(.dash--ticket) {
  --ticket-type: 0.8;
  font-size: calc(1.69rem * var(--ticket-type));
  line-height: 1.35;
  padding-block: var(--space-2) var(--space-4);
}
.dash--ticket {
  gap: var(--space-2);
}
.dash--ticket h1 {
  font-size: calc(2.78rem * var(--ticket-type));
  margin-bottom: var(--space-1);
  line-height: 1.1;
}
.dash--ticket .lede {
  line-height: 1.35;
}
.dash--ticket .note {
  font-size: calc(1.5rem * var(--ticket-type));
  margin-bottom: var(--space-1);
  line-height: 1.35;
}
.dash--ticket .dash-signout button {
  font-size: calc(0.85rem * var(--ticket-type));
  padding: 0.35rem var(--space-1);
}
.dash--ticket .lines__head,
.dash--ticket .line {
  padding: 0.15rem 0;
  gap: var(--space-1);
}
.dash--ticket .lines__head,
.dash--ticket dt {
  font-size: calc(0.7rem * var(--ticket-type));
}
.dash--ticket dt {
  margin-bottom: 0.1rem;
}
.dash--ticket dl > div {
  margin-bottom: var(--space-1);
}
.dash--ticket .status {
  font-size: calc(0.75rem * var(--ticket-type));
}
.dash--ticket .price-tax {
  font-size: calc(1.2rem * var(--ticket-type));
}
.dash--ticket .field + .field {
  margin-top: var(--space-1);
}
.dash--ticket .field label {
  margin-bottom: 0.2rem;
}
.dash--ticket input,
.dash--ticket textarea,
.dash--ticket select {
  font-size: calc(1.69rem * var(--ticket-type));
  line-height: 1.35;
}
.dash--ticket button,
.dash--ticket .btn-ghost {
  font-size: calc(1.28rem * var(--ticket-type));
  margin-top: var(--space-2);
  padding: var(--space-2);
}
.dash--ticket .cancel {
  margin-top: var(--space-2);
}
.dash--ticket header .gold-sep {
  margin-block: 0 var(--space-1);
}
.dash--ticket .choice {
  gap: var(--space-1);
}
@media (max-width: 40rem) {
  .dash--ticket .line {
    padding: 0.35rem 0;
  }
}
@media (max-width: 32rem) {
  .dash--ticket h1 {
    font-size: calc(2.22rem * var(--ticket-type));
  }
}