/* Bench & Counter — staff app */
:root {
  --bg: #f6f3ee;
  --surface: #ffffff;
  --ink: #1f2a2e;
  --ink-2: #3b4548;
  --muted: #6b7275;
  --line: #e4ded4;
  --gold: #a37b2c;
  --gold-ink: #7d5c1c;
  --gold-soft: #f3ead7;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --warn: #9a6400;
  --warn-soft: #fff1d6;
  --ok: #24704a;
  --ok-soft: #e3f3ea;
  --info: #2f4f7a;
  --info-soft: #e8eef7;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(31, 42, 46, .06), 0 2px 8px rgba(31, 42, 46, .05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--font); }
a { color: var(--gold-ink); }
h1, h2 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: .1px; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.15rem; margin-bottom: .75rem; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.pre { white-space: pre-wrap; }
.eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 42px; padding: .55rem 1rem; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; text-decoration: none;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: #cfc6b8; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: #2d3b40; border-color: #2d3b40; }
.btn-ghost { background: transparent; border-style: dashed; color: var(--ink-2); }
.btn-link { background: none; border: 0; color: var(--gold-ink); padding: .4rem .5rem; min-height: 0; font-weight: 600; }
.btn-link.danger { color: var(--danger); }
.btn-block { width: 100%; }
.btn-lg { min-height: 50px; padding: .7rem 1.4rem; font-size: 1.05rem; }
.btn-xl { min-height: 64px; width: 100%; font-size: 1.25rem; border-radius: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Layout */
.topbar { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); }
.topbar-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; max-width: 1400px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; }
.brand-mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: var(--gold); color: #fff; font: 700 .8rem/1 var(--serif); letter-spacing: .02em; flex: none;
}
.brand-mark.lg { width: 52px; height: 52px; font-size: 1.1rem; border-radius: 13px; }
.brand-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.quick-form { flex: 1; display: flex; }
.quick-find {
  width: 100%; max-width: 420px; margin-left: auto; min-height: 40px; border-radius: 10px; border: 0;
  padding: .5rem .8rem; font: inherit; background: rgba(255,255,255,.12); color: #fff;
}
.quick-find::placeholder { color: rgba(255,255,255,.65); }
.quick-find:focus { outline: 2px solid var(--gold); background: rgba(255,255,255,.18); }
.btn-new { background: var(--gold); border-color: var(--gold); }
.btn-new:hover { background: var(--gold-ink); border-color: var(--gold-ink); }
.nav { display: flex; align-items: center; gap: .25rem; padding: 0 1rem .4rem; max-width: 1400px; margin: 0 auto; overflow-x: auto; }
.nav-link { color: rgba(255,255,255,.75); text-decoration: none; padding: .45rem .75rem; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.nav-link.active { color: #fff; background: rgba(255,255,255,.12); }
.nav-spacer { flex: 1; }
.nav-user { color: rgba(255,255,255,.65); font-size: .85rem; white-space: nowrap; }
.nav .btn-link { color: #e6cf9c; }
/* Admins have four more tabs: tighter spacing, and the name moves to Sign out's tooltip, so every tab fits on a laptop. */
.nav-admin .nav-link { padding: .45rem .5rem; }
.nav-admin .nav-user { display: none; }
/* An admin has four more tabs: keep them all on one row on a laptop. */
.nav-admin { gap: .1rem; }
.nav-admin .nav-link { padding: .45rem .34rem; font-size: .94rem; }
@media (max-width: 1400px) {
  .nav-admin .nav-link { padding: .45rem .26rem; font-size: .9rem; }
  .nav-admin .nav-badge { margin-left: .2rem; padding: .05rem .3rem; }
  .nav-admin { padding-left: .75rem; padding-right: .75rem; }
  .nav:not(.nav-admin) .nav-link { padding: .45rem .5rem; }
}
.main { max-width: 1400px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.section-head h2 { margin-bottom: .5rem; }
.empty { text-align: center; padding: 2.5rem 1rem; }
.empty p { color: var(--muted); }
.loading { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 3rem 1rem; color: var(--muted); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Forms */
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; min-width: 0; }
.field-label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.hint { font-size: .8rem; color: var(--muted); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=search]:not(.quick-find), select, textarea {
  width: 100%; min-height: 44px; padding: .55rem .7rem; border: 1px solid #d6cfc3; border-radius: 10px;
  background: #fff; color: var(--ink); font: inherit;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 .75rem; }
.check { display: flex; align-items: center; gap: .55rem; margin: .5rem 0 1rem; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
.form-error { color: var(--danger); font-weight: 600; min-height: 1.2em; margin: .25rem 0 .75rem; }
.form-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.form-card h2 { margin-bottom: .9rem; }
.intake { max-width: 860px; }
.edit-wrap { margin-bottom: 1rem; }
.inline-field { display: flex; align-items: center; gap: .5rem; }
.inline-field select { width: auto; min-width: 190px; }

/* Chips */
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .35rem; margin-bottom: .9rem; scrollbar-width: thin; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .35rem .85rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-weight: 600; font-size: .92rem;
  cursor: pointer; white-space: nowrap;
}
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-n { font-size: .8rem; opacity: .75; }
.chip-late:not(.on) { color: var(--danger); border-color: #efc2bd; }

/* Board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 1rem; overflow-x: auto; align-items: start; padding-bottom: .5rem; }
.col { background: #efeae2; border-radius: var(--radius); padding: .75rem; min-height: 120px; }
.col-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font); font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: .1rem .2rem .7rem; }
.col-n { background: var(--surface); border-radius: 999px; padding: .05rem .55rem; font-size: .8rem; }
.col-empty { margin: .5rem .2rem; font-size: .9rem; }
.col-ready { background: var(--ok-soft); }
.col-awaiting_approval { background: var(--warn-soft); }
.col-late { background: var(--danger-soft); }
.rcard { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; margin-bottom: .6rem; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.rcard:hover { border-color: var(--gold); }
.rcard-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.rnum { font-weight: 700; font-variant-numeric: tabular-nums; }
.rcard-name { font-weight: 600; margin-top: .2rem; }
.rcard-item { color: var(--ink-2); font-size: .92rem; }
.rcard-work { font-size: .88rem; color: var(--muted); margin-top: .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard-foot { font-size: .78rem; margin-top: .35rem; }
.badge { font-size: .75rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: #eee9df; color: var(--ink-2); white-space: nowrap; }
.badge.soon { background: var(--warn-soft); color: var(--warn); }
.badge.late { background: var(--danger-soft); color: var(--danger); }
.closed-toggle { margin: 1rem 0; }
@media (max-width: 760px) {
  .board { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
}

/* Pills */
.pill { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 700; background: #eee9df; color: var(--ink-2); white-space: nowrap; }
.st-awaiting_approval { background: var(--warn-soft); color: var(--warn); }
.st-at_bench { background: #e6eef7; color: #24527a; }
.st-quality_check { background: #efe7f6; color: #5d3a7d; }
.st-ready { background: var(--ok-soft); color: var(--ok); }
.st-picked_up { background: #ececec; color: #555; }

/* Ticket */
.ticket { max-width: 980px; }
.ticket-head { align-items: flex-end; }
.head-badges { display: flex; gap: .5rem; align-items: center; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.actions .spacer { flex: 1; }
.callout { background: var(--gold-soft); border-color: #e7d6ae; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.scan-panel { border: 2px solid var(--ink); text-align: center; padding: 1.25rem; }
.scan-now { font-size: 1.3rem; margin: .4rem 0 1rem; }
.scan-panel.done { border-color: var(--ok); background: var(--ok-soft); }
.scan-big { font-size: 1.4rem; margin-bottom: .3rem; }
.scan-panel .btn-row { justify-content: center; margin-top: .5rem; }
.cust-line { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: baseline; margin-bottom: .8rem; }
.cust-line .big { font-size: 1.15rem; }
.dl { margin: 0; }
.dl-row { display: grid; grid-template-columns: 190px 1fr; gap: .75rem; padding: .5rem 0; border-top: 1px solid #f0ebe3; }
.dl-row:first-child { border-top: 0; }
.dl dt { color: var(--muted); font-size: .92rem; }
.dl dd { margin: 0; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin: .5rem 0 .8rem; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #eee9df; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.note-form { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .8rem; }
.note-form textarea { flex: 1; }
.timeline { list-style: none; margin: 0; padding: 0; }
.tl { padding: .55rem 0 .55rem 1.1rem; border-left: 2px solid var(--line); position: relative; }
.tl::before { content: ""; position: absolute; left: -6px; top: .85rem; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.tl-status::before { background: var(--gold); }
.tl-note::before { background: var(--ink-2); }
.tl-meta { margin-top: .1rem; }

/* Customer picker & lists */
.picker-results { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
.picker-row { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: .1rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; cursor: pointer; color: var(--ink); }
.picker-row:hover { border-color: var(--gold); }
.picked { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .85rem; border-radius: 10px; background: var(--gold-soft); }
.new-customer { margin-top: .6rem; }
.search-bar { margin-bottom: .8rem; max-width: 520px; }
.list-card { padding: .4rem .6rem; }
.list-label { padding: .4rem .5rem; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .75rem .5rem; border-top: 1px solid #f0ebe3; color: var(--ink); text-decoration: none; }
.list-row:first-of-type { border-top: 0; }
a.list-row:hover { background: #faf7f2; }
.list-row.inactive { opacity: .55; }
.list-row select { width: auto; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .5rem; border-bottom: 1px solid var(--line); }
.table td { padding: .6rem .5rem; border-bottom: 1px solid #f0ebe3; }
.row-link { cursor: pointer; }
.row-link:hover td { background: #faf7f2; }

/* Auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.auth-card { width: 100%; max-width: 420px; padding: 1.6rem; }
.auth-card h1 { font-size: 1.4rem; margin: 1.2rem 0 1rem; }
.auth-brand { display: flex; align-items: center; gap: .8rem; }
.auth-app { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: .75rem; }

/* Toasts */
#toasts { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.2); font-weight: 600; transition: opacity .4s, transform .4s; max-width: 92vw; }
.toast-err { background: var(--danger); }
.toast.out { opacity: 0; transform: translateY(8px); }

@media (max-width: 640px) {
  h1 { font-size: 1.45rem; }
  .brand-name { display: none; }
  .btn-new { padding: .5rem .75rem; }
  .row3 { grid-template-columns: 1fr 1fr; }
  .row3 > :last-child { grid-column: 1 / -1; }
  .dl-row { grid-template-columns: 1fr; gap: .1rem; }
  .nav-user { display: none; }
  .actions .btn, .actions .inline-field { flex: 1 1 auto; }
  .inline-field select { min-width: 0; flex: 1; }
}

/* Print views: customer card and bag labels. Everything is 4" x 6", one per page, with about 1/4" of
   blank border, so it prints the same on the laser printer (card stock) and the thermal label printer.
   Black on white only. The @page size is set by print.js while the print screen is open. */
.print-bar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding: 1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.print-bar .check { margin: 0; }
.print-help { flex-basis: 100%; }
.printer-badge { display: inline-flex; flex-direction: column; padding: .4rem .8rem; border-radius: 10px; font-weight: 800; line-height: 1.2; }
.printer-badge small { font-weight: 600; font-size: .8rem; }
.printer-card { background: #ece6f4; color: #4a3a63; border: 2px solid #4a3a63; }
.printer-labels { background: var(--gold-soft); color: var(--gold-ink); border: 2px solid var(--gold); }
.print-pieces { display: flex; gap: .3rem .8rem; flex-wrap: wrap; align-items: center; }
.print-pieces:empty { display: none; }
body.printing { background: #e9e6e1; }
.labels { display: flex; flex-wrap: wrap; gap: .35in; padding: .4in; align-items: flex-start; }
.lbl-page { flex: none; }
.lbl {
  /* A little under 4" x 6" so it still fits when a printer driver reserves a sliver at the edges;
     the padding keeps everything at least 1/4" from the edge of the stock. */
  width: 3.9in; height: 5.84in; box-sizing: border-box; padding: .2in; overflow: hidden;
  display: flex; flex-direction: column; background: #fff; color: #000;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12pt; line-height: 1.2;
  box-shadow: 0 1px 6px rgba(0,0,0,.18); -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.lbl-page.skip { opacity: .25; }
.lbl .qr svg { display: block; width: 100%; height: auto; }
.lbl-kind { font-size: .68em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lbl-num { font-size: 2.5em; font-weight: 900; line-height: 1; letter-spacing: -.01em; }
.lbl-piece { font-size: 1.05em; font-weight: 800; margin-top: .12em; }
.lbl-name { font-size: 1.25em; font-weight: 700; margin-top: .25em; overflow-wrap: anywhere; }
.lbl-line { margin-top: .15em; overflow-wrap: anywhere; }
.lbl-strong { font-weight: 700; }
.lbl-rule { border-top: 2pt solid #000; margin: .4em 0 .3em; }
.lbl-cap { font-size: .82em; font-weight: 700; text-align: center; margin-top: .25em; }
.lbl-small { font-size: .78em; }
/* Bag label */
.lbl.tag .qr { width: 2.1in; margin: auto auto 0; padding-top: .12in; }
/* Customer card */
.claim .cl-store { text-align: center; }
.claim .cl-store-name { font-family: Georgia, "Times New Roman", serif; font-size: 1.3em; font-weight: 700; letter-spacing: .02em; }
.claim .cl-store-sub { font-size: .76em; }
.claim .cl-head { text-align: center; margin-top: .35em; }
.claim .lbl-num { font-size: 2.2em; }
.claim .cl-qr { display: flex; gap: .16in; align-items: center; margin-top: auto; padding-top: .1in; }
.claim .cl-qr .qr { width: 1.6in; flex: none; }
.claim .cl-qr-text { font-size: .85em; font-weight: 700; line-height: 1.2; }
.claim .cl-qr-side { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.claim .cl-qr-side .cl-qr-text { margin-top: .25em; }
.claim .cl-policy { font-size: .64em; line-height: 1.22; margin-top: .6em; }
.cd-pieces { margin-top: .3em; border-top: .75pt solid #000; }
.cd-piece { display: flex; gap: .5em; align-items: flex-start; padding: .22em 0; border-bottom: .75pt solid #000; }
.cd-letter { flex: none; width: 1.45em; height: 1.45em; margin-top: .05em; border: 1.5pt solid #000; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .95em; }
.cd-body { flex: 1; min-width: 0; }
.cd-item { font-weight: 700; overflow-wrap: anywhere; }
.cd-work, .cd-meta { font-size: .84em; overflow-wrap: anywhere; }
.lbl.compact .cd-work { display: none; }
@media print {
  /* One label per page, no browser header/footer. Each label starts its own page. */
  @page { margin: 0; }
  html, body, body.printing { background: #fff; margin: 0; padding: 0; }
  .no-print, #toasts { display: none !important; }
  .labels { display: block; padding: 0; margin: 0; }
  .lbl-page { display: block; width: 4in; margin: 0; padding: .07in 0 0; break-inside: avoid; page-break-inside: avoid; }
  .lbl-page.new-page { break-before: page; page-break-before: always; }
  .lbl-page.skip { display: none !important; }
  .lbl { margin: 0 auto; box-shadow: none; }
}

/* Photo buttons & in-app camera */
.photo-btns { margin: .25rem 0 .75rem; }
.photo-btns svg { flex: none; }
.cam-overlay { position: fixed; inset: 0; z-index: 100; background: #0d1214; display: flex; flex-direction: column; }
.cam-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.cam-video { max-width: 100%; max-height: 100%; width: auto; height: auto; background: #000; }
.cam-msg { position: absolute; color: #fff; font-weight: 600; background: rgba(0,0,0,.5); padding: .6rem 1rem; border-radius: 10px; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: camflash .35s ease-out; }
@keyframes camflash { from { opacity: .85; } to { opacity: 0; } }
.cam-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); background: #161d20; }
.cam-left { min-width: 0; }
.cam-select { max-width: 280px; background: #222b2f; color: #fff; border-color: #3a464b; }
.cam-right { display: flex; justify-content: flex-end; align-items: center; gap: .9rem; }
.cam-count { color: rgba(255,255,255,.8); font-weight: 600; white-space: nowrap; }
.cam-shutter { width: 72px; height: 72px; border-radius: 50%; border: 5px solid #fff; background: var(--gold); cursor: pointer; box-shadow: 0 0 0 3px rgba(0,0,0,.4); }
.cam-shutter:active { transform: scale(.94); }
.cam-shutter:disabled { opacity: .4; cursor: default; }
.cam-shutter:focus-visible { outline: 3px solid #e6cf9c; outline-offset: 3px; }
.cam-bar .btn-primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.date-wrap { display: flex; flex-direction: column; gap: .3rem; }
.date-hint.bad { color: var(--danger); font-weight: 600; }
input.invalid { border-color: var(--danger); outline-color: var(--danger); }

/* Before / after photos & pickup confirmation */
.photo-stages { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.photo-stage { min-width: 0; }
.photo-stage-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.photo-stage h3 { margin: 0; font: 700 1rem/1.2 var(--font); display: flex; align-items: center; gap: .45rem; }
.photo-stage h3 .count { font-size: .75rem; font-weight: 700; background: #eee9df; border-radius: 999px; padding: .05rem .5rem; }
.stage-after h3 .count { background: var(--ok-soft); color: var(--ok); }
@media (max-width: 760px) { .photo-stages { grid-template-columns: 1fr; } }
.accept-box { margin-top: .8rem; padding: .65rem .85rem; border-radius: 10px; background: var(--warn-soft); color: var(--ink-2); }
.accept-box.ok { background: var(--ok-soft); color: var(--ok); }
.accept-actions { margin-top: .55rem; }

/* Custom jobs */
.btn-new .short { display: none; }
.btn-custom { background: #4a3a63; border-color: #4a3a63; }
.btn-custom:hover { background: #3a2d4f; border-color: #3a2d4f; }
@media (max-width: 640px) {
  .btn-new { padding: .5rem .6rem; }
  .btn-new .long { display: none; }
  .btn-new .short { display: inline; }
}
.board-custom { grid-auto-columns: minmax(230px, 1fr); }
.kind-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4a3a63; background: #ece6f4; border-radius: 999px; padding: .08rem .5rem; margin-left: .35rem; vertical-align: middle; }
.st-design, .st-order_stones, .st-wax { background: #ece6f4; color: #4a3a63; }
.st-investing, .st-casting, .st-cleanup { background: #fbe9dd; color: #8a4513; }
.st-stone_setting, .st-finishing { background: #e6eef7; color: #24527a; }
@media (max-width: 760px) {
  /* On phones, skip empty step columns so the list stays short. The chips still show every step. */
  .board .col.is-empty { display: none; }
}

/* Customer duplicates & record management */
.dup-warn { margin-top: .8rem; padding: .8rem .9rem; border-radius: 10px; background: var(--warn-soft); border: 1px solid #ecd39a; }
.dup-warn.strong { background: #fdecea; border-color: #efc2bd; }
.dup-list { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0 .3rem; }
.dup-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .55rem .4rem; border-top: 1px solid rgba(0,0,0,.06); }
.dup-row:first-child { border-top: 0; }
.dup-group { border: 1px solid var(--line); border-radius: 10px; padding: .4rem .7rem; margin: .5rem 0 .8rem; background: #fffdf9; }
.dup-group-head { padding: .3rem 0; }
.manage-card { border-style: dashed; }

/* Tickets with several pieces */
.piece-tag { display: inline-block; margin-left: .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: var(--gold-ink); background: var(--gold-soft); border: 1px solid #e7d6ae; border-radius: 999px; padding: .05rem .45rem; vertical-align: middle; white-space: nowrap; }
.head-badges .piece-tag { font-size: .85rem; padding: .2rem .6rem; margin: 0; }
.callout-text { flex: 1 1 320px; }
.pieces-card h2 .count, .pieces-card h2 + .count { font: 700 .75rem/1 var(--font); background: #eee9df; border-radius: 999px; padding: .15rem .5rem; margin-left: .45rem; vertical-align: middle; }
.piece-list { display: flex; flex-direction: column; gap: .35rem; }
.piece-row { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: 10px; padding: .35rem .6rem; background: #fff; }
.piece-row.current { border-color: var(--gold); background: #fffbf2; }
.piece-check { display: grid; place-items: center; width: 28px; flex: none; }
.piece-check input { width: 20px; height: 20px; accent-color: var(--ink); }
.piece-check-done { color: var(--ok); font-weight: 800; }
.piece-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; padding: .2rem 0; }
.piece-main:hover strong { text-decoration: underline; }
.piece-letter { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; }
.piece-desc { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; }
.piece-sub { flex-basis: 100%; }
.piece-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; }
.add-piece-list { display: flex; flex-direction: column; gap: .3rem; margin: .8rem 0 .4rem; }
.add-piece-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Staff page: editing a name */
.staff-edit { align-items: flex-start; background: #faf7f2; border-radius: 10px; }
.staff-edit-main { flex: 1 1 280px; min-width: 0; }
.staff-edit .field { margin-bottom: .35rem; max-width: 420px; }
.staff-edit .form-error { margin: .35rem 0 0; min-height: 0; }
.staff-edit > .btn-row { padding-top: 1.55rem; }
.td-act { text-align: right; width: 1%; white-space: nowrap; }
.td-act .btn { min-height: 0; padding: .2rem .4rem; }

/* Ticket history & data tools */
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #8f1e18; border-color: #8f1e18; }
.hist-filters { display: flex; flex-direction: column; gap: .7rem; }
.hist-search { max-width: 520px; }
.hist-row { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; }
.hist-row select, .hist-row input[type=date] { width: auto; min-width: 0; }
.hist-row .inline-field { gap: .35rem; }
.hist-summary { padding: .4rem .5rem .2rem; }
.hist-more { padding: .6rem .5rem; }
.table td.nowrap, .table .nowrap { white-space: nowrap; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table td:first-child, .data-table th:first-child { width: 1%; }
.data-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--danger); }
.data-table tr.picked-row td { background: var(--danger-soft); }
.data-actions { margin-top: .7rem; }
.num-input { width: 8rem !important; }
@media (max-width: 640px) {
  .hist-row select, .hist-row input[type=date] { flex: 1 1 45%; }
  .hist-row .inline-field { flex: 1 1 45%; }
}

/* Counter sign-up setup (Staff page) */
.kiosk-grid { display: grid; grid-template-columns: 180px 1fr; gap: 1.2rem; align-items: start; }
.kiosk-qr svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.kiosk-link { background: #faf7f2; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; margin: .4rem 0 .7rem; overflow-wrap: anywhere; }
.kiosk-link code { font-size: .85rem; }
.kiosk-tips { margin: .8rem 0 0; padding-left: 1.1rem; }
.kiosk-tips li { margin: .25rem 0; }
@media (max-width: 640px) { .kiosk-grid { grid-template-columns: 1fr; } .kiosk-qr { max-width: 200px; } }

/* Waiting at the counter */
.counter-queue { border: 2px solid var(--gold); background: #fffbf2; }
.counter-queue h2 .count { font: 700 .75rem/1 var(--font); background: var(--gold); color: #fff; border-radius: 999px; padding: .15rem .5rem; margin-left: .45rem; vertical-align: middle; }
.cq-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .55rem 0; border-top: 1px solid #f0e6cf; }
.cq-row:first-of-type { border-top: 0; }
.cq-main { min-width: 0; }
.counter-queue .dup-warn { margin: 0 0 .6rem; }
.nav-badge { display: inline-block; min-width: 1.3em; margin-left: .35rem; padding: .05rem .4rem; border-radius: 999px; background: var(--gold); color: #fff; font-size: .72rem; font-weight: 800; text-align: center; vertical-align: middle; }
.profile-details { border: 1px solid var(--line); border-radius: 10px; padding: .4rem .8rem; margin: .2rem 0 .9rem; background: #fffdf9; }
.profile-details summary { cursor: pointer; font-weight: 700; padding: .4rem 0; }
.profile-details[open] summary { margin-bottom: .6rem; }
.date-pick { display: flex; gap: .4rem; flex-wrap: wrap; }
.date-pick select { flex: 2 1 120px; width: auto; }
.date-pick select + select { flex: 1 1 80px; }
.date-pick input { flex: 1 1 110px; width: auto; }
.date-rows { display: flex; flex-direction: column; gap: .5rem; margin: .3rem 0 .5rem; }
.date-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.date-row > input { flex: 2 1 180px; width: auto; }
.date-row > .date-pick { flex: 3 1 240px; }

/* Upcoming dates */
.up-group { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); padding: .8rem .5rem .3rem; }
.up-row { display: grid; grid-template-columns: 130px 1fr auto; gap: .8rem; align-items: center; padding: .65rem .5rem; border-top: 1px solid #f0ebe3; }
.up-when { display: flex; flex-direction: column; }
.up-main { min-width: 0; }
.up-act { justify-content: flex-end; }
.up-noopt { white-space: nowrap; }
@media (max-width: 640px) {
  .up-row { grid-template-columns: 1fr; gap: .3rem; }
  .up-when { flex-direction: row; gap: .5rem; align-items: baseline; }
  .up-act { justify-content: flex-start; }
}
.partner-contact { display: flex; gap: .4rem 1rem; flex-wrap: wrap; margin-top: .15rem; }

/* Customer inspiration photos (custom jobs) */
.cust-inspo { margin-top: .4rem; display: flex; flex-direction: column; gap: .8rem; }
.cust-inspo-group { border-left: 3px solid var(--gold); padding-left: .7rem; }
.cust-inspo-head { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .35rem; }
.cust-inspo-note { margin: .3rem 0 0; font-style: italic; overflow-wrap: anywhere; }
.cust-inspo .thumbs { margin-bottom: 0; }
.thumb-tag { position: absolute; left: 4px; bottom: 4px; background: rgba(31,42,46,.78); color: #fff; font-size: .66rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; pointer-events: none; }
.thumb-missing { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: .4rem; font-size: .75rem; color: var(--muted); }
.new-pill { background: var(--gold); color: #fff; font-size: .7rem; font-weight: 800; border-radius: 999px; padding: .05rem .5rem; text-transform: uppercase; letter-spacing: .04em; }
.rcard.has-new { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(163,123,44,.25), var(--shadow); }
.rcard-new { margin-top: .3rem; display: inline-block; background: #f6ecd7; color: #6d4f12; font-size: .78rem; font-weight: 700; border-radius: 6px; padding: .12rem .45rem; }
.chip-new:not(.on) { color: #6d4f12; border-color: #e3cf9f; background: #fbf5e7; }
.tl-customer .tl-main { color: #6d4f12; }
.col-photos { background: #fbf5e7; }
.rcard-design { margin-top: .3rem; font-size: .78rem; font-weight: 700; border-radius: 6px; padding: .12rem .45rem; display: inline-block; }
.rcard-design.ok { background: var(--ok-soft); color: var(--ok); }
.rcard-design.changes { background: #fdecd2; color: #8a4b00; }
.rcard-design.changes.is-new { box-shadow: 0 0 0 2px #e9a54a; }
.rcard-design.waiting { background: #eef0f1; color: var(--muted); font-weight: 600; }
.rcard-new + .rcard-design { margin-left: .3rem; }

/* Design renders shared with the customer (custom jobs) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.design-card .btn-row { margin: .6rem 0 .2rem; }
.design-card label.btn { cursor: pointer; }
.design-pill.ok { background: var(--ok-soft); color: var(--ok); }
.design-pill.changes { background: #fdecd2; color: #8a4b00; }
.accept-box.design-changes { background: #fdf3e3; }
.accept-box.design-changes p { margin: .35rem 0; }
.upload-row { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; font-size: .9rem; }
.upload-row progress { flex: 1; max-width: 260px; height: 10px; accent-color: var(--gold); }
.render-list { display: flex; flex-direction: column; gap: .7rem; margin-top: .8rem; }
.render-item { position: relative; display: flex; gap: .8rem; align-items: flex-start; padding: .55rem; border: 1px solid var(--line); border-radius: 12px; }
.render-thumb { position: relative; flex: none; width: 168px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #f3f1ec; display: block; }
.render-thumb img, .render-thumb video { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.render-play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(31,42,46,.72); color: #fff; display: grid; place-items: center; font-size: 1rem; padding-left: 3px; }
.render-meta { display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding-right: 2rem; }
.render-meta strong { overflow-wrap: anywhere; }
.render-tag { align-self: flex-start; font-size: .74rem; font-weight: 700; background: #eee9df; color: var(--ink-2); border-radius: 999px; padding: .08rem .5rem; }
.render-tag.ok { background: var(--ok-soft); color: var(--ok); }
.render-x { top: 8px; right: 8px; }
.design-notes { margin-top: 1rem; }
.design-notes h3 { font: 700 .95rem/1.2 var(--font); margin: 0 0 .4rem; }
.design-note { border-left: 3px solid #e9c48a; padding-left: .6rem; margin-bottom: .5rem; }
.design-note p { margin: .15rem 0 0; }
.tl-render .tl-main { color: var(--ink-2); }
@media (max-width: 560px) { .render-thumb { width: 120px; } }
.design-card h2 .count { font: 700 .75rem/1 var(--font); background: #eee9df; border-radius: 999px; padding: .15rem .5rem; margin-left: .45rem; vertical-align: middle; }

/* QuickBooks card on a ticket, and Square Terminal charges */
.btn-sm { min-height: 34px; padding: .35rem .75rem; font-size: .9rem; }
.qbo-card h2 .qbo-job { font: 600 .8rem/1 var(--font); margin-left: .55rem; vertical-align: middle; }
.qbo-list { display: flex; flex-direction: column; gap: .7rem; }
.qbo-inv { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem; display: flex; flex-direction: column; gap: .35rem; }
.qbo-inv.qbo-paid { background: #fbfaf7; }
.qbo-inv-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.qbo-inv-head .pill { margin-left: auto; }
.pill.qbo-paid { background: var(--ok-soft); color: var(--ok); }
.pill.qbo-partial { background: var(--warn-soft); color: var(--warn); }
.pill.qbo-open { background: var(--gold-soft); color: var(--gold-ink); }
.qbo-amounts { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.qbo-due { font-size: 1.1rem; }
.qbo-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .3rem; }
.qbo-action { display: flex; gap: .45rem; align-items: center; flex: 1 1 260px; }
.qbo-action input[type=email] { flex: 1; min-width: 0; }
.money-wrap { position: relative; flex: 0 1 140px; }
.money-sign { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.money-wrap input.money-in { width: 100%; padding-left: 1.6rem; font-weight: 700; }
.qbo-note { padding: .35rem .55rem; border-radius: 8px; background: #f3f1ec; }
.qbo-note.ok { background: var(--ok-soft); color: var(--ok); }
.qbo-note.err { background: var(--danger-soft); color: var(--danger); }
.qbo-err { color: var(--danger); }
.qbo-checked { margin-top: .6rem; }
.qbo-history { margin-top: .9rem; }
.qbo-history ul { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.qbo-hist { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.charge-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  padding: .8rem .95rem; border-radius: 12px; margin-bottom: .8rem; border: 1px solid var(--line); }
.charge-panel .charge-main { display: flex; align-items: center; gap: .7rem; }
.charge-panel.wait { background: var(--gold-soft); border-color: #e7d6ae; }
.charge-panel.wait > .spinner + strong { margin-right: auto; }
.charge-panel.ok { background: var(--ok-soft); border-color: #b9dfc8; color: var(--ok); }
.charge-panel.off { background: #f1efea; color: var(--ink-2); }
.charge-panel.bad { background: var(--danger-soft); border-color: #efc2bd; color: var(--danger); }
.charge-panel .small { margin-top: .15rem; }
.tl-payment .tl-main, .tl-invoice .tl-main { color: var(--ink-2); }
@media (max-width: 640px) {
  .qbo-action { flex-basis: 100%; flex-wrap: wrap; }
  .qbo-action .btn { flex: 1 1 auto; }
  .qbo-action input[type=email] { flex: 1 1 100%; }
}

/* Payments setup page */
.payments-page { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; }
.payments-page .page-head { margin-bottom: 0; }
.pay-card .section-head h2 { margin-bottom: .3rem; }
.pay-card p { margin: .4rem 0 .7rem; }
.conn-line strong { color: var(--ok); }
.pill.env-live { background: var(--ok-soft); color: var(--ok); }
.pill.env-practice { background: #e8eef7; color: #2f4f7a; }
.callout-ok { background: var(--ok-soft); border-color: #b9dfc8; color: var(--ok); font-weight: 600; }
.callout-err { background: var(--danger-soft); border-color: #efc2bd; color: var(--danger); font-weight: 600; }
.callout-warn { background: var(--warn-soft); border-color: #ecd39a; color: var(--warn); font-weight: 600; }
.setup-notes { margin-top: .8rem; }
.setup-notes summary { cursor: pointer; color: var(--gold-ink); font-weight: 600; font-size: .9rem; }
.setup-notes code { overflow-wrap: anywhere; background: #f3f1ec; padding: .05rem .3rem; border-radius: 4px; }
.pair-box { border: 1px dashed #d6c79f; background: #fffcf4; border-radius: 12px; padding: .9rem 1rem; text-align: left; }
.pair-code { font: 800 2.2rem/1.1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .25em; margin: .2rem 0 .5rem; color: var(--ink); }
.pair-box ol { margin: .3rem 0 .6rem 1.1rem; padding: 0; }
.pair-box .spinner { display: inline-block; vertical-align: middle; width: 14px; height: 14px; }

/* Create QuickBooks invoice (ticket) and invoice settings (Payments) */
.qbo-plan { border: 1px dashed #d6c79f; background: #fffcf4; border-radius: 12px; padding: .7rem .85rem; margin-top: .4rem; display: flex; flex-direction: column; gap: .4rem; }
.qbo-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.qbo-plan li { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.qbo-plan-amt { white-space: nowrap; font-weight: 600; }
.qbo-plan-total { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1rem; border-top: 1px solid var(--line); padding-top: .35rem; }
.qbo-warn { color: var(--warn); }
.inv-settings { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.inv-settings h3 { font: 700 1rem/1.2 var(--font); margin: 0; }
.inv-settings p { margin: .1rem 0; }
.inv-row { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: .6rem; }
.inv-row select { width: 100%; }
.rate-wrap { display: inline-flex; align-items: center; gap: .35rem; }
.rate-wrap input { width: 90px; }
@media (max-width: 640px) { .inv-row { grid-template-columns: 1fr; gap: .2rem; } }
.qbo-part { margin-top: -.1rem; }

/* ── Appointments (Calendly) ───────────────────────────────── */
.appts-sync { margin: -.4rem 0 .9rem; }
.appt-filters { align-items: center; flex-wrap: wrap; overflow: visible; }
.check-inline { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--ink-2); margin-left: .25rem; white-space: nowrap; }
.appt-day { margin-bottom: 1.2rem; }
.appt-day-head { font-size: 1.05rem; margin: 0 0 .55rem; }
.appt-day-head .count { font: 700 .75rem/1 var(--font); background: var(--ink); color: #fff; border-radius: 999px; padding: .15rem .5rem; margin-left: .45rem; vertical-align: middle; }
.appt { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .35rem 1rem; margin-bottom: .6rem; }
.appt-time { display: flex; flex-direction: column; gap: .1rem; }
.appt-time strong { font-size: 1.05rem; }
.appt-main { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.appt-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.appt-what { font-size: 1rem; }
.appt-who { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: baseline; overflow-wrap: anywhere; }
.appt-row { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; }
.appt-row .btn-link { padding-left: 0; }
.appt-tickets { display: inline-flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; }
.appt-ticket { text-decoration: none; color: inherit; white-space: nowrap; }
.appt-ticket .pill { font-size: .75rem; padding: .15rem .5rem; }
.appt-warn { color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: .35rem .6rem; font-size: .9rem; font-weight: 600; }
/* Calendly questions can be long, so each answer goes under its question. */
.appt-answers { margin: .1rem 0 0; font-size: .9rem; }
.appt-answers dt { color: var(--muted); font-size: .82rem; margin-top: .4rem; }
.appt-answers dt:first-child { margin-top: 0; }
.appt-answers dd { margin: .05rem 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.appt-off { opacity: .62; }
.appt-off .appt-what { text-decoration: line-through; }
.appt-past { opacity: .8; }
.pill.appt-pill-off { background: var(--danger-soft); color: var(--danger); }
.pill.appt-pill-past { background: #eee9df; color: var(--muted); }
.pill.appt-pill-now { background: var(--ok-soft); color: var(--ok); }
.appt .dup-warn { margin: .2rem 0 0; }
.appt-lines { margin-top: .65rem; padding: .55rem .75rem; border-radius: 10px; background: #f7f4ee; display: flex; flex-direction: column; gap: .2rem; }
.appt-line-pickup strong { color: var(--ok); }
.appt-warn-inline { color: var(--warn); font-weight: 700; }
.appt-lines .appt-all { align-self: flex-start; padding: 0; min-height: 0; font-size: .85rem; }
.board-appt { display: inline-block; margin-top: .3rem; font-size: .78rem; font-weight: 700; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: .1rem .5rem; }
@media (max-width: 560px) {
  .appt { grid-template-columns: 1fr; }
  .appt-time { flex-direction: row; gap: .5rem; align-items: baseline; }
}

/* Receipts on the Square Terminal */
.receipt-line { margin-top: .3rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.receipt-setting { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.receipt-setting select { max-width: 100%; }
.qbo-hist .btn-sm { margin-left: .4rem; }
.receipt-setting .inline-field { flex-wrap: wrap; }
.receipt-setting .inline-field select { min-width: 0; flex: 1 1 260px; }

/* Quick sale */
.btn-sale { background: #2f5d50; border-color: #2f5d50; }
.btn-sale:hover { background: #244a40; border-color: #244a40; }
/* Phones: no room for a third button next to the search box (Sales is in the menu). */
@media (max-width: 640px) { .topbar .btn-sale { display: none; } }
.sale-page .page-head { margin-bottom: .75rem; }
.sale-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1rem; align-items: start; }
.sale-grid > .card { margin-bottom: 0; }
.sale-warn { background: var(--warn-soft); border-color: #ecd39a; color: var(--warn); font-weight: 600; }
.sale-tabs { margin-bottom: .8rem; }
.keypad { max-width: 420px; }
.keypad-display { font: 700 2.4rem/1.1 var(--font); font-variant-numeric: tabular-nums; text-align: right; padding: .6rem .9rem; border-radius: 12px; background: #f7f4ee; border: 1px solid var(--line); margin-bottom: .7rem; }
.keypad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .9rem; }
.keypad-key { min-height: 58px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: 600 1.4rem/1 var(--font); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.keypad-key:hover { border-color: var(--gold); }
.keypad-key:active { background: var(--gold-soft); }
.keypad-back { color: var(--ink-2); }
.sale-items { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0; max-height: 60vh; overflow-y: auto; }
.sale-item { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; text-align: left; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; color: var(--ink); }
button.sale-item { cursor: pointer; }
button.sale-item:hover { border-color: var(--gold); }
.sale-item-name { font-weight: 600; }
.sale-item-price { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sale-vars { display: flex; flex-wrap: wrap; gap: .35rem; }
.sale-cats { margin: .6rem 0 0; }
.sale-cat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
.sale-cat-foot .btn-link { padding: .2rem .3rem; }
.sale-empty { padding: 1.5rem .5rem; }
.sale-none { margin: .2rem 0 .8rem; }
.sale-lines { display: flex; flex-direction: column; }
.sale-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px auto; gap: .6rem; align-items: center; padding: .55rem 0; border-top: 1px solid #f0ebe3; }
.sale-line:first-child { border-top: 0; }
.sale-line-name { font-weight: 600; overflow-wrap: anywhere; }
.sale-line-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sale-price-in { flex: none; }
.sale-x { padding: .3rem .4rem; color: var(--muted); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qty-btn { width: 36px; height: 36px; border: 0; background: #faf8f4; font: 700 1.1rem/1 var(--font); color: var(--ink); cursor: pointer; }
.qty-btn:disabled { opacity: .4; cursor: default; }
.qty-n { min-width: 2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.sale-cust { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.sale-cust .field-label { display: block; margin-bottom: .25rem; }
.sale-cust-hint { margin-bottom: .4rem; }
.sale-cust-hint:empty { display: none; }
.sale-cust-hint.need { color: var(--warn); font-weight: 600; }
.sale-discount { margin-top: .6rem; }
.sale-disc-add { padding-left: 0; }
.sale-disc-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sale-disc-row select { width: auto; }
.sale-disc-in { width: 110px !important; }
.sale-totals { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.sale-totals:empty { display: none; }
.sale-total-row { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; font-variant-numeric: tabular-nums; }
.sale-total-row.grand { font-size: 1.3rem; font-weight: 700; padding-top: .35rem; }
.sale-pricing { margin-top: .2rem; }
.sale-pay { margin-top: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.sale-pay:empty { display: none; }
.sale-methods { margin-bottom: 0; }
.sale-problems { margin: 0; padding-left: 1.1rem; color: var(--warn); }
.sale-go { white-space: normal; }
.sale-cash-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .3rem; }
.sale-quick { display: flex; flex-wrap: wrap; gap: .35rem; }
.sale-change { margin-top: .5rem; font-size: 1.15rem; font-weight: 700; color: var(--ok); }
.sale-change.short { color: var(--warn); font-size: 1rem; }
.sale-check { margin-bottom: 0; }
.sale-done .sale-change-due { font-size: 1.6rem; font-weight: 800; margin: .3rem 0 .1rem; color: var(--ink); }
@media (max-width: 860px) {
  .sale-grid { grid-template-columns: 1fr; }
  .keypad { max-width: none; }
}
@media (max-width: 480px) {
  .sale-line { grid-template-columns: minmax(0, 1fr) auto auto; }
  .sale-line .sale-line-main { grid-column: 1 / -1; }
  .sale-line .qty { justify-self: start; }
  .sale-line .sale-line-amt, .sale-line .sale-price-in { justify-self: end; }
  .sale-price-in { width: 120px; }
}

/* Sales list */
.sales-page { max-width: 980px; }
.sales-nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.sales-nav input[type=date] { width: auto; }
.sales-day { margin: .4rem 0 .8rem; }
.sales-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.sales-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .65rem .8rem; box-shadow: var(--shadow); }
.sales-tile strong { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.sales-list { padding: .3rem .6rem; }
.sales-row { border-top: 1px solid #f0ebe3; }
.sales-row:first-child { border-top: 0; }
.sales-row.unpaid .sales-row-head { opacity: .7; }
.sales-row-head { width: 100%; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto 96px; gap: .6rem; align-items: center; padding: .7rem .3rem; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.sales-row-head:hover { background: #faf7f2; }
.sales-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9rem; }
.sales-main { display: flex; flex-direction: column; min-width: 0; }
.sales-main .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-amt { text-align: right; font-variant-numeric: tabular-nums; }
.sales-how { color: var(--ink-2); white-space: nowrap; }
.pill.sale-failed { background: var(--danger-soft); color: var(--danger); }
.sales-detail { padding: .2rem .3rem .9rem 5.1rem; }
.sales-lines { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: .4rem; }
.sales-lines td { padding: .2rem .3rem; border-top: 1px solid #f3efe8; }
.sales-lines td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sales-lines tr.sub td { color: var(--ink-2); }
.sales-lines tr.grand td { font-weight: 700; }
.sales-meta { margin: .3rem 0 .5rem; }
@media (max-width: 640px) {
  .sales-row-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main amt" "time pill" "how how"; gap: .2rem .6rem; }
  .sales-main { grid-area: main; }
  .sales-amt { grid-area: amt; }
  .sales-time { grid-area: time; }
  .sales-row-head .pill { grid-area: pill; justify-self: end; }
  .sales-how { grid-area: how; }
  .sales-how:empty { display: none; }
  .sales-detail { padding-left: .3rem; }
}

.receipt-wait { font-weight: 700; color: var(--ink); }

/* Drag render files onto a custom job's page (they go to Design for the customer) */
.page-drop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(31, 42, 46, .35); pointer-events: none; }
.page-drop-box { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 2.2rem 2.6rem;
  border: 3px dashed var(--gold); border-radius: 18px; background: var(--gold-soft); color: var(--gold-ink); box-shadow: var(--shadow); }
.page-drop-box strong { font-size: 1.35rem; }
.page-drop-box span { color: var(--ink-2); }
.drop-hint { align-self: center; }
@media (hover: none) { .drop-hint { display: none; } }

/* Help (the manual) */
.help-page .page-head { margin-bottom: .6rem; }
.help-searchbar { position: sticky; top: 104px; z-index: 5; background: var(--bg); padding: .4rem 0 .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.help-search { flex: 1 1 320px; max-width: 640px; font-size: 1.05rem; }
.help-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.help-side { position: sticky; top: 172px; max-height: calc(100vh - 190px); overflow-y: auto; }
.help-toc-box > summary { display: none; }
.help-toc-part { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: .9rem 0 .3rem; }
.help-toc-part:first-child { margin-top: 0; }
.help-toc ul { list-style: none; margin: 0; padding: 0; }
.help-toc-link { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: .92rem; color: var(--ink-2); padding: .3rem .5rem; border-radius: 8px; cursor: pointer; }
.help-toc-link:hover { background: #efeae2; }
.help-toc-link.hit { color: var(--ink); font-weight: 700; background: var(--gold-soft); }
.help-body { max-width: 860px; }
.help-section { padding: 1.1rem 1.3rem; }
.help-section h2 { font-size: 1.35rem; margin: .1rem 0 .7rem; }
.help-section h3 { font-family: var(--serif); font-size: 1.08rem; margin: 1.1rem 0 .4rem; }
.help-section p { margin: .55rem 0; }
.help-section ul, .help-section ol { margin: .45rem 0 .7rem; padding-left: 1.4rem; }
.help-section li { margin: .25rem 0; }
.help-section code { font: .88em/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f1ede6; border-radius: 5px; padding: .05rem .3rem; overflow-wrap: anywhere; }
.help-code { background: #1f2a2e; color: #f3efe7; border-radius: 10px; padding: .8rem 1rem; overflow-x: auto; font-size: .88rem; }
.help-code code { background: none; color: inherit; padding: 0; }
.help-tasks { list-style: none; padding-left: .2rem !important; }
.help-task input { margin-right: .3rem; vertical-align: -2px; }
.help-table-wrap { overflow-x: auto; margin: .6rem 0 .9rem; }
.help-table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.help-table th, .help-table td { text-align: left; vertical-align: top; padding: .45rem .6rem; border-bottom: 1px solid #ece6dc; }
.help-table th { font-size: .82rem; color: var(--muted); font-weight: 700; border-bottom-color: var(--line); }
.help-part:empty { display: none; }
.help-section mark { background: #ffe08a; color: inherit; border-radius: 3px; padding: 0 .08em; }
.help-diagram { margin: .8rem 0; }
.help-diagram svg { width: 100%; height: auto; display: block; font-family: var(--font); }
.help-diagram .hd-box { fill: #fff; stroke: #b9b2a6; stroke-width: 1.25; }
.help-diagram .hd-main { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 2; }
.help-diagram .hd-container { fill: #f7f4ee; stroke: #b9b2a6; stroke-width: 1.25; }
.help-diagram .hd-title { font-size: 15px; font-weight: 600; fill: var(--ink); }
.help-diagram .hd-name { font-size: 13px; font-weight: 600; fill: var(--ink); }
.help-diagram .hd-line { font-size: 11.5px; fill: var(--muted); }
.help-diagram .hd-line-main { fill: var(--ink-2); }
.help-diagram .hd-small { font-size: 10.5px; fill: var(--muted); }
.help-diagram .hd-links path { fill: none; stroke: #8f887d; stroke-width: 1.25; }
.help-diagram .hd-arrowhead { fill: #8f887d; }
@media (max-width: 860px) {
  .help-grid { grid-template-columns: 1fr; }
  .help-side { position: static; max-height: none; }
  .help-toc-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: .2rem; }
  .help-toc-box > summary { display: list-item; cursor: pointer; font-weight: 700; }
  .help-toc-box[open] > summary { margin-bottom: .5rem; }
  .help-searchbar { top: 96px; }
}
@media print {
  .help-side, .help-searchbar { display: none; }
}

/* Texts (Quo): conversations on tickets, customer records and the Messages tab */
.convo-list { display: flex; flex-direction: column; gap: .45rem; padding: .3rem 0 .5rem; }
.convo.full .convo-list { max-height: 58vh; overflow-y: auto; padding-right: .3rem; }
.convo-none { margin: .2rem 0; }
.convo-more { align-self: center; }
.bubble-row { display: flex; flex-direction: column; max-width: 78%; }
.bubble-row.in { align-self: flex-start; align-items: flex-start; }
.bubble-row.out { align-self: flex-end; align-items: flex-end; }
.bubble { padding: .5rem .75rem; border-radius: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.bubble.in { background: #efeae2; color: var(--ink); border-bottom-left-radius: 5px; }
.bubble.out { background: #2f5d50; color: #fff; border-bottom-right-radius: 5px; }
.bubble.bad { background: var(--danger-soft); color: var(--danger); border: 1px solid #efc2bd; }
.bubble-text { white-space: pre-wrap; }
.bubble-pic img { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; margin-top: .3rem; }
.bubble.out a { color: #fff; }
.bubble-meta { font-size: .75rem; margin-top: .15rem; padding: 0 .3rem; }
.convo-compose { display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; }
.convo-box { min-height: 0; resize: vertical; }
.convo-actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.convo-from { margin-top: .25rem; }
/* Held texts: the Send button in quiet hours ("Send at 9:00 AM"), Send now, Send later…, and a text waiting to go out */
.convo-actions { flex-wrap: wrap; }
.send-bar { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .15rem .6rem; }
.send-bar .btn-link { font-size: .9rem; }
.send-later { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.send-later[hidden], .send-hint[hidden], .send-now[hidden] { display: none; }
.send-later-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.send-later input[type="date"], .send-later input[type="time"] { width: auto; min-height: 38px; padding: .3rem .5rem; }
.send-later-note { margin-top: .3rem; }
.send-hint { margin-top: .3rem; padding: .4rem .6rem; border-radius: 8px; background: var(--info-soft); color: var(--info); }
.bubble.out.held { background: #fff; color: var(--ink); border: 1.5px dashed #2f5d50; }
.held-row .bubble-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .1rem .55rem; }
.held-when { color: var(--info); font-weight: 600; }
.held-why { color: var(--danger); }
.held-act { font-size: .75rem; padding: 0; min-height: 0; }
.tcard-held .ttime { color: var(--info); min-width: 5.2rem; white-space: normal; }
.tcard-held .ttime.tbad { color: var(--danger); }
.quiet-box { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.quiet-box h3 { margin: 0 0 .3rem; font-size: 1rem; }
.quiet-check { display: flex; align-items: flex-start; gap: .5rem; margin: .5rem 0; line-height: 1.35; }
.quiet-check input { width: 18px; height: 18px; margin: .1rem 0 0; flex: none; accent-color: var(--ink); }
.quiet-times { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: .2rem 0 .2rem 1.7rem; }
.quiet-times input[type="time"] { width: auto; min-height: 38px; padding: .3rem .5rem; }
.quiet-now { margin: .5rem 0 .2rem; }
.ticket-texts { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.ticket-texts > .field-label { display: block; margin-bottom: .2rem; }
.cust-texts h2 { margin-bottom: .3rem; }

.msg-page .page-head { margin-bottom: .7rem; }
.msg-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 1rem; align-items: start; }
.msg-grid > .card { margin-bottom: 0; }
.msg-side { padding: .7rem; display: flex; flex-direction: column; gap: .55rem; position: sticky; top: 120px; max-height: calc(100vh - 140px); }
.msg-threads { display: flex; flex-direction: column; overflow-y: auto; min-height: 120px; }
.msg-thread { display: flex; flex-direction: column; gap: .15rem; width: 100%; text-align: left; border: 0; border-radius: 10px; background: none; padding: .6rem .65rem; font: inherit; color: var(--ink); cursor: pointer; }
.msg-thread:hover { background: #f6f2eb; }
.msg-thread.on { background: var(--gold-soft); }
.msg-thread-top, .msg-thread-bottom { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-width: 0; }
.msg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-last { color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.msg-thread.unread .msg-name, .msg-thread.unread .msg-last { color: var(--ink); font-weight: 700; }
.msg-unread { background: var(--danger); color: #fff; }
.msg-empty { padding: .4rem; }
.msg-new { display: flex; gap: .4rem; border-top: 1px solid var(--line); padding-top: .55rem; }
.msg-new input { flex: 1; min-width: 0; }
.msg-pane { min-height: 320px; }
.msg-head { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .4rem; }
.msg-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.msg-who h2 { margin: 0; }
.msg-back { display: none; align-self: flex-start; padding-left: 0; }
.msg-pick { margin: 2rem auto; text-align: center; }
.msg-link { background: #f7f4ee; border-radius: 10px; padding: .7rem .8rem; margin-bottom: .7rem; }
@media (max-width: 860px) {
  .msg-grid { grid-template-columns: 1fr; }
  .msg-side { position: static; max-height: none; }
  .msg-page.has-sel .msg-side { display: none; }
  .msg-page:not(.has-sel) .msg-pane { display: none; }
  .msg-back { display: inline-flex; }
  .bubble-row { max-width: 88%; }
}

/* ── Price guide: prices at check-in ── */
.price-pick { margin: -.2rem 0 .9rem; }
.price-pick:empty { display: none; }
.price-pick-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .45rem; }
.price-group { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; margin-bottom: .55rem; background: #fcfbf8; }
.price-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.price-metal { background: var(--gold-soft); color: var(--gold-ink); font-size: .78rem; padding: .15rem .55rem; }
.price-btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.price-btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 38px; padding: .3rem .4rem .3rem .75rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-align: left; }
.price-btn:hover { border-color: var(--gold); }
.price-btn:active { transform: translateY(1px); }
.price-amt { background: var(--gold-soft); color: var(--gold-ink); border-radius: 7px; padding: .15rem .45rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-lines:empty { display: none; }
.price-lines { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; margin-bottom: .9rem; }
.price-lines-head { font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }
.price-line { display: grid; grid-template-columns: 1fr auto 6.5rem 2rem; align-items: center; gap: .5rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.price-line:first-of-type { border-top: 0; }
.price-line-name { display: flex; flex-direction: column; min-width: 0; }
.price-line-amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-line-x { border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; padding: .2rem; }
.price-line-x:hover { color: var(--danger); }
.price-line.just-added { animation: price-flash 1.2s ease-out; }
@keyframes price-flash { from { background: var(--gold-soft); } to { background: transparent; } }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty-btn { border: 0; background: var(--surface); width: 2rem; height: 2rem; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink-2); }
.qty-btn:disabled { color: #c9c3b8; cursor: default; }
.qty-n { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-total { display: flex; justify-content: space-between; border-top: 2px solid var(--line); padding-top: .4rem; margin-top: .2rem; }
.price-mismatch { color: var(--warn); margin-top: .3rem; }
.price-mismatch .btn-link { padding: 0; }
.price-list { display: flex; flex-direction: column; gap: .15rem; }
.price-list-row { display: flex; justify-content: space-between; gap: 1rem; }
.price-list-row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .price-line { grid-template-columns: 1fr auto 2rem; }
  .price-line .qty { grid-row: 2; grid-column: 1; justify-self: start; }
  .price-line-amt { grid-row: 1; grid-column: 2; }
  .price-line-x { grid-row: 1; grid-column: 3; }
}

/* ── Price guide tab (admins) ── */
.prices-page { max-width: 980px; }
.pg-intro { margin: -.4rem 0 1rem; }
.pg-section h2 { margin: 0 0 .3rem; }
.pg-note { margin: 0 0 .3rem; }
.pg-links { margin: 0 0 .6rem; color: var(--ink-2); }
.pg-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pg-table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--line); padding: .35rem .5rem; }
.pg-table td { border-bottom: 1px solid var(--line); padding: .45rem .5rem; vertical-align: top; }
.pg-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 7rem; }
.pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-section.editing { border-color: #d9c79f; }
.pg-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.pg-section-name { flex: 1 1 16rem; font-size: 1.15rem; font-weight: 700; }
.pg-edit-tools { display: inline-flex; align-items: center; gap: .1rem; }
.pg-edit-tools .btn-link { padding: .25rem .45rem; }
.pg-remove { color: var(--danger) !important; }
.pg-chips { margin-bottom: .2rem; }
.pg-chips .chip { min-height: 32px; padding: .2rem .65rem; font-size: .85rem; }
.pg-metals { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .8rem; align-items: flex-start; }
.pg-metal-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pg-metal-match { width: 8rem; }
.pg-pct { width: 4.5rem; }
.pg-edit-items { display: flex; flex-direction: column; margin-bottom: .7rem; }
.pg-edit-row { display: grid; grid-template-columns: minmax(12rem, 1fr) 6.2rem auto auto; gap: .5rem; align-items: start; padding: .55rem 0; border-top: 1px solid var(--line); }
.pg-edit-row:first-child { border-top: 0; }
.pg-edit-name { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pg-edit-num { display: flex; flex-direction: column; gap: .15rem; font-size: .75rem; color: var(--muted); }
.pg-money { text-align: right; }
.pg-edit-quote { display: inline-flex; align-items: center; gap: .3rem; padding-top: 1.1rem; white-space: nowrap; font-weight: 600; }
.pg-edit-row .pg-edit-tools { padding-top: .9rem; }
.pg-item-links > summary { cursor: pointer; font-size: .82rem; color: var(--gold-ink); }
.pg-item-links p { margin: .3rem 0; }
.pg-bottom { justify-content: space-between; margin-bottom: 2rem; }
@media (max-width: 760px) {
  .pg-edit-row { grid-template-columns: 1fr auto auto; }
  .pg-edit-name { grid-column: 1 / -1; }
  .pg-edit-quote, .pg-edit-row .pg-edit-tools { padding-top: 0; }
  .pg-table .num { width: auto; }
}
.pg-section-links { margin-bottom: .8rem; }
.pg-section-links > summary { font-size: .9rem; font-weight: 600; }
.pg-section-links[open] > summary { margin-bottom: .45rem; }

/* Cash, check and deposits on a ticket's QuickBooks invoice */
.qbo-deposit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; margin: .5rem 0;
  padding: .55rem .7rem; border-radius: 10px; background: var(--warn-soft); color: #5c3d00; border: 1px solid #f0d7a6; font-size: .92rem; }
.counter-panel { margin-top: .6rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: #fcfbf8; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.counter-panel .chips { margin-bottom: 0; }
.counter-panel input[aria-label="Check number"] { max-width: 12rem; }
.qbo-action .btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.counter-panel .deposit-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.counter-panel .deposit-row > .muted { min-width: 11.5rem; }

/* One invoice per job: the design fee, adding the approved piece, the 50% deposit */
.qbo-fee-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.qbo-fee-row .money-in { width: 7rem; }
.qbo-update { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; margin: .5rem 0;
  padding: .55rem .7rem; border-radius: 10px; background: #eef4fb; border: 1px solid #c9dbef; font-size: .92rem; }
.qbo-half { margin: .5rem 0; padding: .5rem .7rem; border-radius: 10px; background: var(--warn-soft); border: 1px solid #f0d7a6; color: #5c3d00; font-size: .92rem; }
.qbo-half.met { background: #eef7ef; border-color: #cde5cf; color: #24572b; }
.rcard-half { font-size: .8rem; font-weight: 600; color: #8a4b00; background: var(--warn-soft); border-radius: 6px; padding: .15rem .4rem; margin-top: .25rem; display: inline-block; }
.qbo-action .money-wrap { flex: 0 0 8.25rem; }   /* room for $1,000.00 next to Charge, Cash and Check */
.inv-settings .money-wrap { flex: 0 0 9rem; max-width: 9rem; }
.inv-settings .inv-sub { margin: 1rem 0 .2rem; font-size: .95rem; }
.inv-settings .inv-cat > span:first-child { padding-left: .9rem; color: var(--muted, #6b6b6b); }
.sales-qbo { display: block; font-size: .75rem; color: var(--muted, #6b6b6b); }
.sales-qbo.err { color: var(--danger, #b42318); font-weight: 600; }
.sales-qbo.warn { color: var(--warn); }
.sales-notin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; margin-bottom: .8rem; }
.sale-qbo { margin-top: .25rem; }


/* Work requested: the price guide as the menu, with This ticket beside it */
.work-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; margin-bottom: .9rem; }
.work-ticket { position: sticky; top: .75rem; }
.work-ticket .price-lines { margin-bottom: 0; }
.work-ticket .price-lines:empty { display: block; }
.price-empty { margin: .2rem 0 .3rem; }
.work-search { width: 100%; margin-bottom: .55rem; }
.work-tabs { display: flex; flex-wrap: wrap; gap: .35rem; padding-bottom: .55rem; margin-bottom: .6rem; border-bottom: 1px solid var(--line); }
.work-tabs[hidden] { display: none; }
.work-tab { border: 1px solid var(--line); background: #fbf9f5; color: var(--ink); border-radius: 999px; padding: .35rem .8rem; min-height: 38px; font: inherit; font-size: .92rem; cursor: pointer; }
.work-tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.work-tab-n { display: inline-block; margin-left: .35rem; min-width: 1.2rem; padding: 0 .35rem; border-radius: 999px; background: var(--gold); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; }
.work-note { margin: -.2rem 0 .5rem; }
.work-group { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: .7rem 0 .35rem; }
.work-panel > .work-group:first-child { margin-top: 0; }
/* (A heading can carry the metal's premium note beside it: "Platinum +75% included".) */
.work-group { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.work-group .price-metal { text-transform: none; letter-spacing: 0; }
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem; }
.job { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; text-align: left; min-height: 52px;
  padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 10px; background: #fbf9f5; color: var(--ink); font: inherit; cursor: pointer; }
.job:hover { border-color: var(--gold); }
.job:active { transform: translateY(1px); }
.job.on { border-color: var(--gold); background: var(--gold-soft); }
.job-name { font-weight: 600; line-height: 1.2; }
.job-price { font-size: .88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.job-price.quote { color: var(--warn); font-weight: 600; }
.job-count { position: absolute; top: -7px; right: -7px; min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--gold); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; }
.sizer { border: 1px solid var(--line); border-radius: 10px; padding: .65rem .7rem; margin-bottom: .7rem; background: #fcfbf8; display: flex; flex-direction: column; gap: .55rem; }
.sizer-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sizer-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .55rem .9rem; }
.sizer-size { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.sizer-size input { width: 5.5rem; }
.sizer-warn { color: var(--warn); font-weight: 600; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; border-right: 1px solid var(--line); background: transparent; padding: .4rem .7rem; min-height: 38px; font: inherit; font-size: .88rem; cursor: pointer; color: var(--ink); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 600; }
.work-other { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.work-other-label { font-weight: 600; font-size: .9rem; }
.work-other > input { flex: 1 1 10rem; min-width: 0; }
.work-other-price { flex: 0 0 7rem; }
.work-ticket .price-line { grid-template-columns: minmax(0, 1fr) auto 1.6rem; gap: .25rem .4rem; align-items: start; }
.work-ticket .price-line > .price-line-name { grid-column: 1; grid-row: 1; }
.work-ticket .price-line > .qty, .work-ticket .price-line > span:empty { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
.work-ticket .price-line > .price-line-amt, .work-ticket .price-line > .quote-wrap { grid-column: 2; grid-row: 1; }
.work-ticket .price-line > .price-line-x { grid-column: 3; grid-row: 1; }
.work-ticket .qty-btn { width: 1.8rem; height: 1.8rem; }
.quote-wrap { width: 5.6rem; }
.quote-wrap .quote-in { width: 100%; padding-left: 1.4rem; text-align: right; font-weight: 700; }
.price-toquote { color: var(--warn); margin-top: .35rem; }
@media (max-width: 760px) {
  .work-layout { grid-template-columns: 1fr; }
  .work-ticket { position: static; }
  .job-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
.pg-table .pg-group td { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding-top: .8rem; border-bottom: 1px solid var(--line); }
.pg-edit-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: .3rem; }
.pg-group-in { flex: 1 1 10rem; min-width: 0; font-size: .85rem; min-height: 34px; padding: .25rem .5rem; }
.pg-upgraded { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; background: var(--gold-soft); border-color: #e6d3a8; }
.pg-edit-checks { display: flex; flex-direction: column; gap: .15rem; }
.pg-edit-checks .pg-edit-quote + .pg-edit-quote { padding-top: 0; font-weight: 500; }
.pg-hidden .pg-edit-name input[aria-label="Item name"], .pg-table tr.pg-hidden td { opacity: .55; }
.pg-hidden-note { color: var(--warn); font-weight: 600; }

/* Quotes: the ring quote, re-shank and gold calculators */
.quote-prices { padding: .75rem 1.1rem; }
.quote-prices-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.quote-prices-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1.1rem; }
.quote-price strong { font-variant-numeric: tabular-nums; }
.quote-prices-edit h2 { margin-bottom: .6rem; }
.quote-prices-edit .form-error { margin: 0; min-height: 0; }
.quote-stale { color: var(--warn); font-weight: 600; }
.quote-prices-btns { margin: 0; flex-wrap: wrap; }
.quote-prices-problem { margin-top: .25rem; max-width: 46rem; }
.quote-auto { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; }
.quote-auto .quiet-check { margin: 0; }
.quote-auto select { width: auto; min-width: 0; min-height: 38px; }
.quote-auto p { flex-basis: 100%; margin: .2rem 0 0; }
.quote-tabs { border-bottom: 0; padding-bottom: 0; margin-bottom: .9rem; }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: 1rem; align-items: start; }
.quote-side { position: sticky; top: 6.5rem; max-height: calc(100vh - 7.5rem); overflow-y: auto; }
.quote-side > .card:last-child, .quote-grid > div > .card:last-child { margin-bottom: 0; }
.quote-grid { margin-bottom: 1rem; }
.quote-h3 { font: 700 .8rem/1.3 var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1.1rem 0 .5rem; }
.quote-gap { margin: -.5rem 0 0; }
.quote-for-hint { margin: .5rem 0 0; }
.unit-wrap, .cash-wrap { position: relative; display: block; }
.unit-wrap input { width: 100%; padding-right: 2.9rem; }
.unit-wrap .unit { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .88rem; pointer-events: none; }
.cash-wrap input { width: 100%; padding-left: 1.6rem; }
.quote-counts { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: .1rem 1.5rem; }
.quote-count { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid #f0ebe3; }
.quote-count-label { display: flex; flex-direction: column; line-height: 1.25; }
/* A count you can type as well as step with − and + */
input[type=text].qty-in { width: 3.2rem; min-height: 2rem; padding: 0 .2rem; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0;
  text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; background: #fff; }
input[type=text].qty-in:focus { outline-offset: -2px; }
.quote-stone-head { font-weight: 600; font-size: .9rem; margin: .6rem 0 .25rem; }
.quote-stones { display: flex; flex-direction: column; gap: .35rem; }
.quote-stone { display: grid; grid-template-columns: 5rem auto minmax(6rem, 9rem) minmax(0, 1fr) 1.6rem; gap: .5rem; align-items: center; }
.quote-stone-w:not(:empty)::before { content: "= "; color: var(--muted); font-weight: 400; }
.quote-stone-qty input { width: 100%; }
.quote-stone-w { text-align: left; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-add { padding-left: 0; }
.quote-out h2 { margin-bottom: .5rem; }
.quote-table td, .quote-table th { padding-left: .35rem; padding-right: .35rem; }
.quote-table th.num { text-align: right; }
.quote-table td.big { font-weight: 700; font-size: 1.05rem; }
.quote-table tr.on td { background: var(--gold-soft); }
.quote-table tbody tr:last-child td { border-bottom: 0; }
.quote-pick { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.quote-pick input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.quote-table tr.quote-cost-row td { padding-top: 0; padding-left: 2.05rem; }
.quote-table tr.has-cost td { border-bottom: 0; padding-bottom: .15rem; }
.quote-showcost { margin: .6rem 0 0; font-size: .9rem; }
.quote-terms { font-size: .88rem; color: var(--ink-2); margin: .7rem 0; padding: .6rem .7rem; background: #faf8f4; border-radius: 8px; }
.quote-out .form-error { margin: .3rem 0; min-height: 0; }
.quote-go { white-space: normal; text-align: left; flex: 1 1 14rem; }
.quote-facts { margin: .2rem 0 0; font-weight: 600; min-height: 1.4em; }
.quote-facts-list { display: flex; flex-direction: column; margin-top: .8rem; }
.quote-facts-list:empty { display: none; }
.quote-fact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .4rem 0; border-top: 1px solid #f0ebe3; }
.quote-custom { max-width: 12rem; margin-top: .8rem; }
.quote-custom .field { margin-bottom: 0; }
.quote-from { margin-bottom: 1rem; }
.quote-note { padding: .6rem .8rem; border-radius: 10px; border: 1px solid #ecd39a; }
.saved-quotes td { vertical-align: top; }
.saved-quotes th:nth-child(n+4):nth-last-child(n+3), .saved-quotes td.num { text-align: right; }
.rates-card > summary { cursor: pointer; font-weight: 600; color: var(--gold-ink); }
.rates-card[open] > summary { margin-bottom: .6rem; }
.rate { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
input[type=text].rate-in { width: 4.6rem; min-height: 36px; padding: .25rem .45rem; text-align: right; font-variant-numeric: tabular-nums; }
.rates-table td { padding-top: .35rem; padding-bottom: .35rem; }
.rates-row { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.rate-field { display: flex; flex-direction: column; gap: .2rem; }
.rates-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin-bottom: .5rem; }
.rates-actions { margin-top: 1rem; }
/* Text the quote: the message, checked and sent from the price card */
.quote-sms:empty { display: none; }
.quote-sms { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .45rem; }
.quote-sms-metals { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; }
.quote-sms-metals .check-inline { margin-left: 0; }
.quote-sms-metals input { width: 17px; height: 17px; accent-color: var(--ink); margin: 0; }
textarea.quote-sms-box { width: 100%; min-height: 0; resize: vertical; font-size: .95rem; line-height: 1.4; }
.quote-sms-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.quote-sms-actions > span:first-child { margin-right: auto; }
/* The re-shank calculator, popped up from a New repair line */
.modal-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(31, 42, 46, .5); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1rem 1rem; overflow-y: auto; }
.modal { width: 100%; max-width: 34rem; margin: 0; }
.modal .quote-table td { vertical-align: middle; }
.price-line-calc { padding: 0; font-size: .85rem; justify-self: start; }
.quote-banner { margin-bottom: 1rem; }
@media (max-width: 1040px) {
  .quote-grid { grid-template-columns: minmax(0, 1fr); }
  .quote-side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
  .quote-counts { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .quote-stone { grid-template-columns: 4rem auto minmax(5rem, 1fr) auto 1.4rem; }
  .quote-table { font-size: .82rem; }
  .quote-table td.big { font-size: .88rem; }
  .quote-table td, .quote-table th { padding-left: .15rem; padding-right: .15rem; }
  .quote-table th { font-size: .68rem; letter-spacing: 0; }
  .quote-pick { gap: .3rem; }
  .quote-pick input { width: 16px; height: 16px; }
  .quote-out { padding-left: .7rem; padding-right: .7rem; }
}

/* Today: what needs attention, in one place */
.today-head { align-items: flex-end; }
.today-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.ttile { border: 1px solid var(--line); border-top: 4px solid var(--tone, var(--line)); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: .55rem .75rem;
  text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: .1rem; font: inherit; color: inherit; }
.ttile:hover { border-color: var(--gold); border-top-color: var(--tone, var(--gold)); }
.ttile b { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tone, var(--ink)); }
.ttile span { font-size: .84rem; color: var(--ink-2); font-weight: 600; }
.ttile.zero b { color: var(--muted); }
.ttile-late { --tone: var(--danger); } .ttile-soon { --tone: var(--warn); } .ttile-ready { --tone: var(--ok); }
.ttile.zero { --tone: var(--line); }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.today-col { min-width: 0; }
.tcard { scroll-margin-top: 7rem; }
.tcard-late { border-left: 5px solid var(--danger); } .tcard-soon { border-left: 5px solid var(--warn); } .tcard-ready { border-left: 5px solid var(--ok); }
.tcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem .8rem; flex-wrap: wrap; margin-bottom: .2rem; }
.tcard-head h2 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.tcount { font: 700 .8rem/1 var(--font); padding: .25rem .5rem; border-radius: 999px; background: #eee9df; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tcard-late .tcount { background: var(--danger-soft); color: var(--danger); } .tcard-soon .tcount { background: var(--warn-soft); color: var(--warn); } .tcard-ready .tcount { background: var(--ok-soft); color: var(--ok); }
.tlinks { display: inline-flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .9rem; font-weight: 600; }
.tlinks a { text-decoration: none; }
.tlinks a:hover { text-decoration: underline; }
.tsub { color: var(--muted); font-size: .85rem; margin: 0 0 .35rem; }
.tempty { color: var(--muted); margin: .4rem 0 .1rem; }
.tday { display: flex; align-items: baseline; gap: .5rem; margin: .75rem 0 .1rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ink-2); }
.tday small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); font-size: .82rem; }
.tsub + .tday { margin-top: .4rem; }
.tclosed { color: var(--muted); font-size: .82rem; margin: .6rem 0 0; padding: .25rem 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.tjob { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .9rem; align-items: center; padding: .55rem .25rem; border-top: 1px solid #f0ebe3; color: inherit; text-decoration: none; }
a.tjob:hover, .tjob > a.tjob-main:hover { background: #fbf9f5; }
.tday + .tjob, .tsub + .tjob, .tcard-head + .tjob { border-top: 0; }
.tjob-main { min-width: 0; display: block; color: inherit; text-decoration: none; }
.tjob-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.tjob-top .kind-tag { margin-left: 0; }
.tno { font-weight: 700; font-variant-numeric: tabular-nums; }
.twho { font-weight: 600; }
.tjob-what { display: block; color: var(--ink-2); font-size: .9rem; overflow-wrap: anywhere; }
.tjob-side { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.tjob-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem; }
.tjob .pill { padding: .15rem .55rem; font-size: .8rem; }
.pill.towes { background: var(--warn-soft); color: var(--warn); }
.tflag { font-size: .8rem; font-weight: 700; color: var(--danger); white-space: nowrap; }
.tflag::before { content: "▲ "; font-size: .7em; }
.tmeta { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.tdots { display: inline-flex; gap: 3px; align-items: center; }
.tdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.tdots i.on { background: var(--ink-2); }
.tline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .1rem .75rem; align-items: center; padding: .55rem .25rem; border-top: 1px solid #f0ebe3; color: inherit; text-decoration: none; }
.tline:hover { background: #fbf9f5; }
.tcard-head + .tline { border-top: 0; }
.tline.tpast { opacity: .6; }
.ttime { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 4.6rem; }
.tline-txt { min-width: 0; }
.tline-txt b { display: block; }
.tline-txt span { color: var(--ink-2); font-size: .9rem; overflow-wrap: anywhere; }
.tmoney { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.tmoney b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.twarn { color: var(--warn); font-weight: 600; font-size: .9rem; }
.tcard-counter .counter-queue { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
.tcard-counter .counter-queue > .section-head { display: none; }
.nav-badge-today { background: #c9453c; }
.chip-soon:not(.on) { color: var(--warn); border-color: #ecd39a; }
.col-soon { background: var(--warn-soft); }
@media (max-width: 900px) { .today-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .today-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tjob { grid-template-columns: minmax(0, 1fr); }
  .tjob-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
  .tjob-tags { justify-content: flex-start; }
  .tline { grid-template-columns: auto minmax(0, 1fr); }
  .tline > .tmeta { grid-column: 2; }
}