/* THE DEALER CENTER'S LOOK -- the frame, the type, and every shared piece
   (buttons, cards, form boxes, chips, tabs, pills, tables, pop-ups, toasts).

   Black and gold: a black frame (the header with its faint grid, the side
   menu, the phone menu) with gold for what is picked, what to tap first
   and the small marks (step numbers, card icons); warm off-white pages and
   white cards. Oswald capitals for headings, IBM Plex Sans for writing.
   The Dealer Center keeps this look for every business; a business's own
   colors are for its customers' 3D designer (Settings), and its logo shows
   in the header here. Gold is a fill or a line on white; text in gold on
   white is the deep gold (--gold-deep), which is dark enough to read.

   Phone first: under 760 px wide the side menu becomes a bar at the bottom.
   Screens add their own pieces in crm.css (customers, orders, Today),
   owner.css (price list, lots, team, settings) and help.css (Help). No
   inline styles anywhere (the page's security policy forbids them). */

@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url(/fonts/oswald-latin.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url(/fonts/ibm-plex-sans-latin.woff2) format("woff2"); }

:root {
  color-scheme: light;
  /* black and gold */
  --brand-header: #16130E;     /* black: header, side menu, headings, main buttons */
  --brand-primary: #2E2920;    /* black, a shade lighter: hover */
  --brand-accent: #C9A227;     /* gold: what is picked, the first thing to tap */
  --gold-bright: #E2BE4E;      /* gold on black */
  --gold-deep: #85660F;        /* gold text on white (links) */
  --gold-soft: #F6EED6;        /* a gold tint behind things */
  --gold-line: #E4D29B;
  --cream: #F6EED6;
  --kraft: #C9A227;
  --ink: #1D1A15;
  --muted: #635D52;
  --faint: #918A7D;
  --line: #E5E0D5;
  --line-strong: #CFC7B7;
  --bg: #F4F2ED;
  --card: #FFFFFF;
  --hover: #FAF8F2;
  --focus: #A67C00;
  --side-text: #BDB5A5;
  --good: #2E7D32;
  --good-bg: #E4F2E5;
  --warn: #8F5300;
  --warn-bg: #FCF0D9;
  --bad: #B3261E;
  --bad-bg: #FBE7E5;
  --radius: 10px;
  --radius-small: 7px;
  --shadow: 0 1px 2px rgba(22, 19, 14, .06), 0 3px 10px rgba(22, 19, 14, .05);
  --shadow-up: 0 10px 30px rgba(22, 19, 14, .22);
  --side: 224px;
  --top: 60px;
  --head: "Oswald", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* where a customer is in the sale */
  --stage-new: #1F5FA8;        --stage-new-bg: #E2EDF9;
  --stage-contacted: #0F7A7F;  --stage-contacted-bg: #DCF1F0;
  --stage-quoted: #8F5300;     --stage-quoted-bg: #FCEFD6;
  --stage-sold: #2E7D32;       --stage-sold-bg: #E3F2E4;
  --stage-delivered: #2E2920;  --stage-delivered-bg: #E8E4DB;
  --stage-lost: #6F685C;       --stage-lost-bg: #ECE8DF;
}


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.5 var(--body);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--gold-deep); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
.noscript { padding: 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; border-radius: 6px; }
.skip:focus { left: 8px; }

/* ---- icons ------------------------------------------------------------------- */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the frame ---------------------------------------------------------------- */
#dealer-center { min-height: 100vh; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--top);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px 0 14px; color: #fff;
  background-color: var(--brand-header);
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: 0 1px 0 rgba(201, 162, 39, .55);
}
.brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; min-width: 0; }
.brand-initials, .brand-logo {
  width: 38px; height: 38px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--brand-accent); color: var(--brand-header); font: 600 17px/1 var(--head); letter-spacing: .04em;
}
.brand-logo { object-fit: contain; background: #fff; padding: 3px; }
.brand-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.brand-words strong { font: 600 18px/1.1 var(--head); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-words span { font-size: 12px; color: rgba(255, 255, 255, .7); letter-spacing: .03em; }
.topbar-tools { display: flex; align-items: center; gap: 10px; }
.lot-picker { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .8); }
.lot-select {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff;
  border-radius: 8px; padding: 6px 28px 6px 10px; min-height: 38px; max-width: 200px;
  appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px; background-size: 5px 5px; background-repeat: no-repeat;
}
.lot-select option { color: var(--ink); }
/* Help, at the top of every screen: a quiet outline on the black, gold on the Help screen */
.topbar-help {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; border-radius: 8px;
  color: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06);
  text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap;
}
.topbar-help .icon { width: 18px; height: 18px; }
.topbar-help:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.topbar-help.on { color: var(--gold-bright); border-color: rgba(201, 162, 39, .7); background: rgba(201, 162, 39, .14); }
.person { position: relative; }
.person-button { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; padding: 4px; cursor: pointer; border-radius: 30px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px var(--brand-accent); color: var(--gold-bright); font: 600 13px/1 var(--body); letter-spacing: .03em; }
.person-name { font-size: 14px; }
.person-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: #fff; color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-up); padding: 12px; display: grid; gap: 10px;
}
.person-menu-who { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.person-menu-who span { color: var(--muted); font-size: 14px; }
.person-menu-who .kept { font-size: 13.5px; }
.role-tag { font-size: 13px !important; color: var(--gold-deep) !important; font-weight: 600; }

.sidenav {
  position: fixed; top: var(--top); bottom: 0; left: 0; width: var(--side); padding: 18px 12px;
  background: var(--brand-header); border-right: 1px solid #2A251C; display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--side-text);
  text-decoration: none; font-weight: 500;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-item.on { background: rgba(201, 162, 39, .14); color: var(--gold-bright); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-accent); }
.main { margin-left: var(--side); padding: 26px clamp(16px, 3vw, 40px) 60px; max-width: calc(var(--side) + 1240px); outline: none; }
.tabbar, .more-sheet { display: none; }

@media (max-width: 760px) {
  :root { --top: 56px; }
  .sidenav { display: none; }
  .main { margin-left: 0; padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); }
  .brand-words span, .person-name, .new-customer span, .topbar-help span { display: none; }
  .lot-select { max-width: 130px; }
  .topbar-help { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--brand-header); border-top: 1px solid rgba(201, 162, 39, .55); padding-bottom: env(safe-area-inset-bottom);
  }
  .tab-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 7px; min-height: 58px;
    color: var(--side-text); text-decoration: none; font-size: 11.5px; background: none; border: 0; cursor: pointer;
  }
  .tab-item.on { color: var(--gold-bright); font-weight: 600; }
  .tab-item.on .icon { stroke: var(--gold-bright); }
  .more-sheet:not([hidden]) {
    display: grid; position: fixed; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 31;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-up); padding: 8px; min-width: 200px;
  }
  .more-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 0; background: none; text-decoration: none; color: var(--ink); text-align: left; border-radius: 8px; cursor: pointer; }
  .more-item.on { background: var(--gold-soft); }
}

/* ---- page parts ------------------------------------------------------------------ */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-titles { min-width: 0; }
.page-head h1, .h1 { font: 500 clamp(26px, 3vw, 34px)/1.15 var(--head); letter-spacing: .02em; color: var(--brand-header); }
.page-head p { color: var(--muted); margin-top: 4px; max-width: 70ch; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: 14px; margin-bottom: 8px; }
.back:hover { color: var(--ink); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions.end { justify-content: flex-end; }
.actions.center { justify-content: center; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; align-items: start; }
.stack { display: grid; gap: 18px; align-content: start; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; flex-wrap: wrap; }
.banner > span { flex: 1 1 260px; }
.banner.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid #F1D29A; }
.banner.info { background: var(--gold-soft); color: #5E480C; border: 1px solid var(--gold-line); }
.banner.good { background: var(--good-bg); color: var(--good); border: 1px solid #BFDFC0; }
/* on a phone the buttons in a banner (the visit's Done and Look at the
   preview, the owner's Turn off, the closed banner's links) are full
   touch size */
@media (max-width: 760px) {
  .banner .btn { min-height: 44px; }
}

/* ---- cards ---------------------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; min-width: 0; }
.card-title {
  font: 500 15px/1.2 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-header);
  margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
}
.card-title > .icon { color: var(--gold-deep); }
.card-title .step { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; background: var(--kraft); color: var(--brand-header); font-size: 13px; letter-spacing: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head .card-title { margin: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head { padding: 16px 20px 0; }

/* ---- buttons ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 16px;
  border-radius: 8px; border: 1px solid transparent; font-weight: 600; font-size: 15px; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn .icon { width: 18px; height: 18px; }
.btn-small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--brand-header); color: #fff; }
.btn-primary:hover { background: var(--brand-primary); }
.btn-accent { background: var(--brand-accent); color: var(--brand-header); }
.btn-accent:hover { background: var(--gold-bright); }
.btn-ghost { background: #fff; color: var(--brand-header); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand-header); }
.btn-quiet { background: transparent; color: var(--ink); }
.btn-quiet:hover { background: var(--bg); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-link { background: none; border: 0; color: var(--gold-deep); padding: 4px 2px; min-height: 0; text-decoration: underline; font-weight: 500; }
.btn:disabled { opacity: .55; cursor: wait; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); }

/* ---- form boxes ----------------------------------------------------------------------------- */
.form { display: grid; gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px 16px; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > label { font-weight: 600; font-size: 14px; }
.hint { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(201, 162, 39, .28); }
textarea { resize: vertical; min-height: 88px; line-height: 1.45; }
.money-input { position: relative; display: block; }
.money-input input { padding-left: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.money-sign { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand-header); flex: none; }
.check small { display: block; }
.form-status { min-height: 1.2em; font-size: 14.5px; color: var(--good); }
.form-status:empty { display: none; }
.form-status.error { color: var(--bad); white-space: pre-line; }
.search { position: relative; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.search input { padding-left: 40px !important; }
/* the clear (×) in a search box: the page's own muted color, not the browser's blue */
.search input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-left: 6px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635D52' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ---- chips, tabs, pills ----------------------------------------------------------------------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 13px; border-radius: 20px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 500;
}
.chip[aria-pressed=true] { background: var(--brand-header); border-color: var(--brand-header); color: #fff; }
.chip .count, .tab .count { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--bg); color: var(--muted); }
.chip[aria-pressed=true] .count { background: rgba(255, 255, 255, .2); color: #fff; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab[aria-selected=true] { color: var(--brand-header); border-bottom-color: var(--brand-accent); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 20px; font-size: 13px; font-weight: 600;
  white-space: nowrap; background: var(--bg); color: var(--muted);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.plain::before { display: none; }
.stage-new { color: var(--stage-new); background: var(--stage-new-bg); }
.stage-contacted { color: var(--stage-contacted); background: var(--stage-contacted-bg); }
.stage-quoted { color: var(--stage-quoted); background: var(--stage-quoted-bg); }
.stage-sold { color: var(--stage-sold); background: var(--stage-sold-bg); }
.stage-delivered { color: var(--stage-delivered); background: var(--stage-delivered-bg); }
.stage-lost { color: var(--stage-lost); background: var(--stage-lost-bg); }
.status-sold { color: var(--stage-sold); background: var(--stage-sold-bg); }
.status-sent { color: var(--stage-contacted); background: var(--stage-contacted-bg); }
.status-ready { color: var(--stage-quoted); background: var(--stage-quoted-bg); }
.status-delivered { color: var(--stage-delivered); background: var(--stage-delivered-bg); }
.status-cancelled { color: var(--stage-lost); background: var(--stage-lost-bg); }
.late { color: var(--bad); font-weight: 600; }
.due { color: var(--warn); font-weight: 600; }

/* ---- tables and lists ---------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font: 600 12.5px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.click { cursor: pointer; }
.table tbody tr.click:hover { background: var(--hover); }
.rows { display: grid; }
.row-link {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 13px 16px; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none; align-items: center;
}
.row-link:last-child { border-bottom: 0; }
.row-link:hover { background: var(--hover); }
.row-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { color: var(--muted); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-end { text-align: right; display: grid; gap: 4px; justify-items: end; }

/* ---- empty, loading ------------------------------------------------------------------------------- */
.empty { text-align: center; padding: 44px 20px; color: var(--muted); display: grid; justify-items: center; gap: 10px; }
.empty h2 { font: 500 22px/1.2 var(--head); color: var(--brand-header); }
.empty p { max-width: 52ch; }
.empty-icon { width: 46px; height: 46px; stroke-width: 1.3; color: var(--brand-accent); }
.loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 50px 20px; color: var(--muted); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand-accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.boot { min-height: 100vh; display: grid; place-items: center; }

/* ---- pop-ups, toasts ---------------------------------------------------------------------------- */
.dialog { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); box-shadow: var(--shadow-up); color: var(--ink); }
.dialog.wide { width: min(860px, calc(100vw - 24px)); }
.dialog::backdrop { background: rgba(22, 19, 14, .5); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 1; }
.dialog-head h2 { font: 500 21px/1.2 var(--head); color: var(--brand-header); }
.dialog-x { width: 40px; height: 40px; border-radius: 8px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--muted); }
.dialog-x:hover { background: var(--bg); color: var(--ink); }
.dialog-body { padding: 18px 20px 20px; display: grid; gap: 14px; }
@media (max-width: 760px) {
  .dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
}
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 60; display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); }
@media (max-width: 760px) { .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; background: var(--ink); color: #fff;
  box-shadow: var(--shadow-up); animation: rise .2s ease-out; font-size: 15px;
}
.toast .icon { color: #8FD694; }
.toast.error { background: var(--bad); }
.toast.error .icon { color: #fff; }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---- sign in ------------------------------------------------------------------------------------ */
.auth {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background-color: var(--brand-header);
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.auth-card { width: min(420px, 100%); background: #fff; border-radius: 16px; padding: 28px 26px; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); border-top: 4px solid var(--brand-accent); display: grid; gap: 16px; }
.auth-mark { width: 52px; height: 52px; border-radius: 12px; background: var(--brand-accent); color: var(--brand-header); display: grid; place-items: center; }
.auth-mark .icon { width: 30px; height: 30px; }
.auth-card h1 { font: 500 28px/1.15 var(--head); color: var(--brand-header); }
.auth-intro { color: var(--muted); }
.auth-note { background: var(--good-bg); color: var(--good); padding: 10px 12px; border-radius: 8px; font-size: 14.5px; }
/* why the last sign-in ended: plain words, not good news */
.auth-note.info { background: var(--gold-soft); color: var(--ink); border-left: 4px solid var(--brand-accent); }
/* "Keep me signed in on this device for 30 days": the whole row is the tap target */
.auth .check.keep { min-height: 44px; padding: 4px 0; align-items: flex-start; }
.auth .check.keep .hint { color: var(--muted); font-size: 14px; margin-top: 2px; }
.auth input[readonly] { background: var(--hover); color: var(--muted); }
.auth-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.people-pick { display: grid; gap: 8px; }
.person-pick {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: #fff; cursor: pointer; text-align: left;
}
.person-pick:hover { border-color: var(--brand-header); background: var(--hover); }
.person-pick span { color: var(--muted); font-size: 14px; }

/* ---- reduced motion -------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- the "try it" demo -------------------------------------------------------------------- */
.banner.demo { background: var(--brand-header); color: #EDE6D6; border: 1px solid rgba(201, 162, 39, .55); }
.banner.demo .icon { color: var(--gold-bright); }
.banner.demo .btn { flex: none; }

/* phones: a wide pop-up fills the width like any other (added by the price list screen) */
@media (max-width: 760px) {
  .dialog.wide { width: 100vw; max-width: 100vw; }
}

/* The same black and gold frame, with readable cards and fields at night. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #ECE6D9;
    --muted: #B5AC9B;
    --faint: #A19888;
    --line: #383228;
    --line-strong: #625747;
    --bg: #131210;
    --card: #1C1A16;
    --hover: #25221C;
    --gold-deep: #E2BE4E;
    --gold-soft: #2A2414;
    --gold-line: #5C4B1C;
    --focus: #E2BE4E;
    --good: #9ED2A5;
    --good-bg: #1D3223;
    --warn: #EDC27E;
    --warn-bg: #352B18;
    --bad: #FFAAA3;
    --bad-bg: #3D2523;
  }
  .main h1, .main h2, .main h3, .main .card-title,
  .main .tab[aria-selected=true], .auth h1 { color: var(--ink); }
  .main .btn-ghost, .main .icon-btn,
  input:not([type=checkbox]):not([type=radio]), select, textarea {
    background: var(--card);
    color: var(--ink);
  }
  .main .btn-ghost:hover { border-color: var(--gold-bright); }
  .main .confirm { background: var(--card); }
  /* Dark words on the light red, so Stop selling reads at night. */
  .btn-danger { color: #3A0D0A; }
}