/* Front Row Spirits Collection — the app wearing the printed menu.

   Palette sampled from "The Front Row Spirits Collection": pure white
   ground, ONE oxblood (#7C3520) carrying every accent, charcoal body text.
   The menu has no second colour, so neither does this. Headings are bold,
   uppercase and letterspaced the way his section heads are.

   Tokens first, then components. Every interactive target is >=44px. */

/* Self-hosted so the strict CSP needs no external font host. Swapping in a
   font made from Dan's actual handwriting means replacing these two files. */
@font-face {
  font-family: "Hand";
  src: url("fonts/caveat-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hand";
  src: url("fonts/caveat-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Front Row's own palette, sampled from the printed menu:
     ground is pure white, every accent is one oxblood, body text charcoal.
     There is no second accent colour on the menu, so there isn't one here. */
  --seal: #7c3520;            /* the monogram red — headings, rules, stamps */
  --seal-soft: #c9a99f;
  --seal-wash: #f6eeeb;

  /* paper */
  --paper: #ffffff;
  --paper-2: #faf7f5;
  --paper-edge: #e7ded9;
  --rule: #efe7e3;
  --margin-rule: var(--seal);

  /* inks */
  --ink: #333333;             /* body, as printed */
  --ink-muted: #6f6864;
  /* Was the leather theme's second accent (a blue pen). Dan's menu has
     exactly one accent, so everything that used it becomes the seal —
     buttons, badges, progress fills. Running prose is overridden below. */
  --ink-dan: var(--seal);
  --ink-you: #6b4a2f;
  --stamp: var(--seal);
  --club: var(--seal);
  --danger: #a8402c;

  /* chrome. These kept their old names so every rule that referenced them
     still resolves; what changed is that the ground is now paper, not hide. */
  --leather: #ffffff;
  --leather-deep: #f4f0ee;
  --leather-edge: #e7ded9;
  --gold: var(--seal);
  --gold-soft: var(--seal-soft);
  --gold-ink: #ffffff;

  /* spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 22px; --s6: 32px; --s7: 44px;

  --radius: 12px;
  --radius-sm: 9px;
  --tap: 44px;
  --rule-h: 30px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --hand: "Hand", "Segoe Script", "Bradley Hand", cursive;

  --shadow: 0 1px 2px rgba(51, 41, 38, .06), 0 10px 28px rgba(51, 41, 38, .07);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--leather-deep);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;

  /* Reads as an app, not a web page: no stray highlighting when you tap a
     row, no long-press callout, no blue flash. Fields opt back in below. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Anywhere you actually type, selection has to work normally. */
input, textarea, select, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

h1, h2, h3 { font-family: var(--font); font-weight: 700; }
.serif { font-family: var(--serif); }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
a { color: var(--gold); }

::selection { background: var(--seal-wash); color: var(--ink); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--paper) inset;
  box-shadow: 0 0 0 100px var(--paper) inset;
  caret-color: var(--ink);
  border-radius: var(--radius-sm);
  transition: background-color 100000s ease-in-out 0s;
}

:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.hidden { display: none !important; }
/* The browser's own [hidden] rule is only `display: none` at author-agent
   strength, so any `display: flex` on the same element beats it and a hidden
   row stays on screen. Make the attribute mean what it says. */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- the leather itself ---------- */

.leather { background-color: var(--leather); }

/* The menu's divider: diamond, rule, diamond. Drawn rather than shipped as
   an image so it scales and takes the ink colour. */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  color: var(--seal); margin: var(--s4) 0;
}
.ornament::before, .ornament::after {
  content: ""; flex: 1 1 0; max-width: 120px; height: 1px; background: currentColor;
}
.ornament span { font-size: 10px; line-height: 1; transform: rotate(45deg); }
.ornament span::before { content: "\25C6"; }

/* ---------- shared controls (on leather) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap);
  background: var(--gold); color: var(--gold-ink);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: var(--s3) var(--s5); font-weight: 600;
  transition: filter .15s ease, transform .1s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: scale(.985); }
.btn.secondary { background: transparent; color: var(--gold); border-color: var(--gold-soft); }
.btn.secondary:hover { background: var(--seal-wash); }
.btn.ghost { background: transparent; color: var(--ink-muted); border-color: transparent; font-weight: 500; }
.btn.ghost:hover { color: var(--paper); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label {
  font-size: 10.5px; color: var(--ink-muted);
  letter-spacing: .14em; text-transform: uppercase;
}

input[type="text"], input[type="password"], input[type="search"], input:not([type]), textarea, select {
  width: 100%; min-height: var(--tap); color: var(--ink);
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4);
  transition: border-color .15s ease;
}
input::placeholder, textarea::placeholder { color: #a09894; }
input:focus, textarea:focus { outline: none; border-color: var(--seal); }
textarea { min-height: 78px; resize: vertical; line-height: 1.45; }

.form-error { color: var(--danger); font-size: 14px; min-height: 20px; text-align: center; }

/* ---------- sign in: the closed cover ---------- */

#auth {
  /* `margin: auto` on the child, not `place-items: center` on the parent:
     centred content taller than the viewport gets clipped at BOTH ends
     otherwise, and the seal was the half that disappeared. */
  min-height: 100dvh; display: grid;
  padding: var(--s6) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom));
  background: var(--paper);
}
.auth-inner {
  margin: auto;
  width: 100%; max-width: 380px; text-align: center;
  padding: var(--s6) var(--s5) var(--s5);
}
.brand-mark { width: 132px; height: 132px; margin: 0 auto var(--s4); display: block; }
#auth h1 {
  font-family: var(--font); font-weight: 800; text-transform: uppercase;
  font-size: clamp(23px, 6vw, 29px); letter-spacing: .06em; color: var(--seal);
}
#auth .tagline {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: var(--s2);
}
.auth-card { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s5); text-align: left; }
.auth-card .btn { width: 100%; }

/* ---------- shell: leather covers, paper inside ---------- */

#shell { padding-bottom: calc(70px + env(safe-area-inset-bottom)); background: var(--leather-deep); }

header.app {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 2px solid var(--seal);
  padding: calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s3);
  background: var(--paper);
}
header.app .title-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
header.app h1 {
  font-family: var(--font); font-weight: 800; text-transform: uppercase;
  font-size: 16px; letter-spacing: .07em; color: var(--seal);
}
header.app .count {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); white-space: nowrap;
}
.progress-track {
  margin-top: var(--s2); height: 5px; border-radius: 3px;
  background: var(--rule); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0; border-radius: 3px; background: var(--seal);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

/* the page you're reading */
main {
  max-width: 720px; margin: 0 auto; position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s4) var(--s4) var(--s6);
  min-height: 70dvh;
}
/* No margin rule: the menu is a printed card, not a ruled page. */
main:focus { outline: none; }

/* type on paper */
main h2, main h3 { color: var(--ink); }
.section-note { color: var(--ink-muted); font-size: 13.5px; margin: var(--s1) 0 var(--s4); }
.section-note b { color: var(--ink); font-weight: 600; }
.empty { color: var(--ink-muted); text-align: center; padding: var(--s7) var(--s3); font-family: var(--hand); font-size: 20px; }

/* controls sitting on paper */
main input[type="text"], main input[type="password"], main input[type="search"],
main input:not([type]), main textarea, main select {
  background: var(--paper); border-color: var(--paper-edge); color: var(--ink);
}
main input::placeholder, main textarea::placeholder { color: var(--ink-muted); }
main input:focus, main textarea:focus { border-color: var(--margin-rule); }
main .btn { background: var(--ink-dan); color: var(--paper); }
main .btn.secondary { background: transparent; color: var(--ink-dan); border-color: var(--seal-soft); }
main .btn.ghost { background: transparent; color: var(--ink-muted); }
main .btn.danger { background: transparent; color: var(--danger); border-color: #c08573; }
main .form-error { color: var(--danger); }

/* ---------- the ledger ---------- */

.toolbar { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s3); }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap .ico { position: absolute; left: var(--s3); width: 18px; height: 18px; color: var(--ink-muted); pointer-events: none; }
.search-wrap input { padding-left: 40px; }

/* pouring now / past pours */
.seg { display: flex; border: 1px solid var(--paper-edge); border-radius: 9px; overflow: hidden; }
.seg button {
  flex: 1; min-height: 40px; background: transparent; border: none;
  color: var(--ink-muted); font-size: 14px; padding: var(--s2) var(--s3);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.seg button + button { border-left: 1px solid var(--paper-edge); }
.seg button[aria-pressed="true"] { background: var(--seal); color: #ffffff; font-weight: 700; }
.seg .seg-n { font-size: 11.5px; opacity: .75; }
.shelf-note {
  font-size: 13px; color: var(--ink-muted); line-height: 1.5;
  border-left: 3px solid var(--margin-rule); padding-left: var(--s3); margin-bottom: var(--s3);
}
.shelf-note b { color: var(--ink); }
.search-hint {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  border: 1px solid var(--paper-edge); border-left: 3px solid var(--ink-dan);
  border-radius: 0 8px 8px 0; background: var(--paper-2);
  padding: var(--s3); margin-bottom: var(--s3); font-size: 13px; color: var(--ink-muted); line-height: 1.5;
}
.search-hint span { flex: 1; min-width: 170px; }
.search-hint b { color: var(--ink); }
.search-hint .btn { flex: 0 0 auto; min-height: 38px; padding: var(--s2) var(--s3); font-size: 13.5px; }
.missed { font-family: var(--hand); font-size: 20px; color: var(--ink-muted); text-align: center; }

/* A real dropdown instead of a scrolling chip strip: on a phone this opens the
   OS picker — a much bigger target for someone a few drams in. */
.select-wrap { position: relative; display: flex; }
.select-wrap select {
  width: 100%; padding-right: 40px;
  appearance: none; -webkit-appearance: none;
  font-size: 16px;                  /* under 16px iOS zooms the page on focus */
  cursor: pointer;
}
.select-wrap .chev {
  position: absolute; right: var(--s3); top: 50%; margin-top: -9px;
  width: 18px; height: 18px; pointer-events: none; color: var(--ink-muted);
}
main .select-wrap select { background: var(--paper); border-color: var(--paper-edge); color: var(--ink); }

.chips { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: 36px;
  background: transparent; color: var(--ink-muted);
  border: 1px solid var(--paper-edge); border-radius: 999px;
  padding: 6px var(--s3); font-size: 13.5px; white-space: nowrap;
}
.chip:hover { color: var(--ink); border-color: var(--ink-muted); }
.chip[aria-pressed="true"] { color: #fff; background: var(--ink-dan); border-color: var(--ink-dan); font-weight: 600; }

.wlist { display: block; }
.group-head {
  font-family: var(--font); font-weight: 800; text-transform: uppercase;
  font-size: 15px; letter-spacing: .07em; text-align: center;
  color: var(--seal); margin: var(--s6) 0 var(--s3); padding-bottom: var(--s3);
  border-bottom: none; position: relative;
}
/* The menu's diamond rule, under every section head. */
.group-head {
  padding-bottom: 44px;
  background-image: url("/art/barrel.png");
  background-repeat: no-repeat;
  background-position: center bottom 2px;
  background-size: 46px auto;
}
/* Rule, barrel, rule — the divider from the menu's section heads. */
.group-head::before, .group-head::after {
  content: ""; position: absolute; bottom: 15px; width: 74px; height: 1px;
  background: var(--seal);
}
.group-head::before { right: 50%; margin-right: 32px; }
.group-head::after  { left: 50%;  margin-left: 32px; }
.group-head:first-child { margin-top: var(--s2); }
.wrow {
  position: relative; width: 100%; text-align: left;
  display: flex; align-items: baseline; gap: var(--s3);
  background: none; border: none;
  border-bottom: 1px solid var(--rule);
  padding: 11px 0 10px; min-height: var(--tap);
}
.wrow:hover { background: rgba(255, 255, 255, .35); }
/* Instant answer to a tap. Without this a phone shows nothing at all until
   the sheet opens, which is what made the app feel slow. */
.wrow:active { background: var(--seal-wash); }
.wrow .rowmain { flex: 1; min-width: 0; }
.wrow .wname { display: block; font-family: var(--font); font-weight: 700; font-size: 15.5px; color: var(--ink); line-height: 1.3; }
.wrow .wmeta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-muted); letter-spacing: .04em; }
.wrow .region { font-weight: 600; letter-spacing: .07em; }
.r-islay { color: #4a6f86; }
.r-speyside { color: #96702f; }
.r-highland { color: #5f7a4a; }
.r-lowland { color: #79893f; }
.r-campbeltown { color: #3f7a72; }
.r-islands { color: #4d6a8c; }
.r-blend { color: #7d6a4d; }
.r-america { color: #a2612a; }
.r-ireland { color: #3f7d52; }
.r-japan { color: #9a4f63; }
.r-canada { color: #8a5340; }
.r-world { color: #6f5a8a; }
.wrow .tier { color: #937f52; letter-spacing: .1em; }
.wrow .wtag { color: var(--stamp); text-transform: uppercase; letter-spacing: .08em; font-size: .92em; }
.wrow .wtag.new { color: var(--ink-dan); }
.wrow.tried .wname { color: var(--ink-muted); }
.wrow .gone { color: var(--ink-muted); font-style: italic; letter-spacing: 0; }
.fact.gone-fact { border-color: var(--margin-rule); color: var(--margin-rule); font-style: italic; }

/* a line-item rubber stamp struck across the entry */
.wrow .mark {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%) rotate(-3deg);
  display: flex; flex-direction: column; align-items: center;
  border: 1.5px solid var(--stamp); border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(124, 53, 32, .25);
  background: rgba(124, 53, 32, .05);
  color: var(--stamp); font-family: var(--font);
  padding: 3px 7px; white-space: nowrap; opacity: .92;
}
.mark .l1 {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.25;
}
.mark .l2 {
  font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; line-height: 1.2;
}
.wrow.tried .rowmain { padding-right: 96px; }   /* reserve the stamp's ground */

@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }
.skel { height: 46px; border-bottom: 1px solid var(--rule); animation: pulse 1.4s ease-in-out infinite; }

/* ---------- stamps (detail view) ---------- */

.stamp {
  width: 118px; height: 118px; border-radius: 50%;
  border: 4px solid var(--stamp); color: var(--stamp);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-12deg);
  font-family: var(--serif); text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(124, 53, 32, .3);
  background: rgba(124, 53, 32, .06);
}
.stamp .s1 { font-size: 17px; letter-spacing: 1.5px; font-weight: 700; }
.stamp .s2 { font-size: 12px; letter-spacing: .4px; margin-top: 2px; }
@keyframes thunk {
  0%   { transform: rotate(-12deg) scale(2.2); opacity: 0; }
  60%  { transform: rotate(-12deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-12deg) scale(1); opacity: 1; }
}
.stamp.fresh { animation: thunk .45s cubic-bezier(.2, .8, .3, 1.2) both; }
.stamp-zone { display: flex; justify-content: center; padding: var(--s2) 0 var(--s4); }
.stamp-zone .btn { width: 100%; }

/* ---------- detail sheet: a page of the book ---------- */

.sheet-back {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(51, 41, 38, .38);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .18s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  width: 100%; max-width: 720px; max-height: 92dvh;
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 10px 10px 0 0;
  padding: var(--s2) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow);
  animation: slideup .24s cubic-bezier(.2, .8, .3, 1) both;
  background-color: var(--paper);
  /* flat card: the menu has no ruled margin */
  color: var(--ink);
}
@keyframes slideup { from { transform: translateY(14px); } to { transform: translateY(0); } }
.sheet .grab { width: 42px; height: 4px; border-radius: 2px; background: var(--paper-edge); margin: var(--s1) auto var(--s3); }
.sheet h2 { font-size: 23px; line-height: 1.2; color: var(--ink); }
.sheet .sub { color: var(--ink-muted); margin-top: 2px; font-size: 14px; }
.sheet .factrow { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.fact { border: 1px solid var(--paper-edge); border-radius: 6px; padding: 4px 9px; font-size: 12.5px; color: var(--ink-muted); }
.fact b { color: var(--ink); font-weight: 600; }
/* A barrel the bar chose itself — the one fact worth a colour. */
.fact.pick { border-color: var(--stamp); color: var(--stamp); }
.provenance { margin-top: var(--s2); font-size: 12.5px; color: var(--ink-muted); font-style: italic; }
.sheet-head { position: relative; padding-right: 50px; }
.sheet-close {
  position: absolute; top: 0; right: 0;
  width: var(--tap); height: var(--tap); border-radius: 50%;
  background: transparent; border: 1px solid var(--paper-edge); color: var(--ink-muted);
  font-size: 20px; line-height: 1; display: grid; place-items: center;
}
.sheet-close:hover { color: var(--ink); border-color: var(--ink-muted); }

.sheet input, .sheet textarea, .sheet select {
  background: var(--paper); border-color: var(--paper-edge); color: var(--ink);
}
.sheet input::placeholder, .sheet textarea::placeholder { color: var(--ink-muted); }
.sheet input:focus, .sheet textarea:focus { border-color: var(--margin-rule); }
.sheet .btn { background: var(--ink-dan); color: var(--paper); }
.sheet .btn.secondary { background: transparent; color: var(--ink-dan); border-color: var(--seal-soft); }

/* ---------- notes ---------- */

.notes-block { margin: var(--s5) 0; }
.notes-block h3 {
  font-size: 12px; color: var(--ink-muted); letter-spacing: .13em; text-transform: uppercase;
  font-family: var(--font); font-weight: 600;
  margin-bottom: var(--s2); padding-bottom: 4px; border-bottom: 1px solid var(--paper-edge);
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
}
.notes-block h3 .tag { font-size: 11px; letter-spacing: .02em; text-transform: none; font-weight: 400; color: var(--ink-muted); }
.notes-block .none { color: var(--ink-muted); font-style: italic; font-size: 14px; }
/* :not(.hand) so printed notes don't override the handwriting's ruled metrics */
.notes-block > p:not(.hand) { font-size: 15px; line-height: 1.55; }

/* handwriting, ruled so it sits on the lines like a real page */
.hand {
  font-family: var(--hand);
  font-size: 22px;
  line-height: var(--rule-h);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--rule-h) - 1px),
    var(--rule) calc(var(--rule-h) - 1px) var(--rule-h));
  background-position: 0 2px;
  padding: 2px 0 0;
  white-space: pre-wrap;
}
.hand.dan { color: var(--ink); }        /* house notes are prose, not accent */
.hand.you { color: var(--ink-you); }
textarea.hand {
  font-size: 22px; line-height: var(--rule-h);
  min-height: calc(var(--rule-h) * 3);
  background-color: var(--paper-2);
  border: 1px solid var(--paper-edge); border-radius: 6px;
  padding: 2px var(--s3) 0; color: var(--ink-you);
}
textarea.hand::placeholder { color: #a09894; }

/* Dan's tasting sheet — label in the margin, his hand on the rules */
.dan-part { display: flex; gap: var(--s3); align-items: baseline; margin-bottom: var(--s2); }
.dan-part .dan-label {
  flex: 0 0 52px; text-align: right;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600; padding-top: 6px;
}
.dan-part .hand { flex: 1; min-width: 0; }
.dan-part:only-child .dan-label { display: none; }

/* admin: the note editor, split the same way */
.dan-field { margin-bottom: var(--s3); }
.dan-field > label { display: flex; align-items: baseline; gap: var(--s2); font-weight: 600; color: var(--ink); font-size: 13px; }
.dan-field > label .hint { font-weight: 400; color: var(--ink-muted); font-size: 11.5px; }
.dan-field textarea { min-height: calc(var(--rule-h) * 2); }

.aw-count { font-size: 12.5px; color: var(--ink-muted); margin: var(--s3) 0 var(--s2); }
.aw-count b { color: var(--ink); }
.aw-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--paper-edge); flex: 0 0 auto;
}
.aw-dot.on { background: var(--ink-dan); border-color: var(--ink-dan); }

.mnote { border-bottom: 1px solid var(--rule); padding: var(--s2) 0 var(--s3); }
.mnote:last-child { border-bottom: none; }
.mnote .who { color: var(--club); font-size: 13px; font-weight: 600; }
.mnote .when { color: var(--ink-muted); font-size: 12px; margin-left: 6px; }
.mnote .body { margin-top: 2px; font-size: 15px; line-height: 1.5; }
.mnote .del { float: right; color: var(--ink-muted); background: none; border: none; font-size: 12.5px; padding: 2px 4px; }
.mnote .del:hover { color: var(--danger); }

.stars { display: flex; gap: 2px; margin: var(--s2) 0; }
.stars button { background: none; border: none; font-size: 26px; line-height: 1; color: var(--paper-edge); padding: 2px 3px; }
.stars button.on { color: var(--seal); }

.noterow { display: flex; gap: var(--s2); margin-top: var(--s2); align-items: flex-start; }
.noterow .btn { flex: 0 0 auto; }
.save-hint { color: var(--ink-muted); font-size: 13px; margin-top: 6px; min-height: 18px; font-family: var(--hand); font-size: 17px; }

/* ---------- the soft ask ---------- */

.ask-back { align-items: center; padding: var(--s4); }
.ask-card {
  width: 100%; max-width: 380px;
  background-color: var(--paper);
  /* flat card: the menu has no ruled margin */
  color: var(--ink);
  border-radius: 10px; box-shadow: var(--shadow);
  padding: var(--s5) var(--s5) var(--s4) calc(var(--s5) + 14px);
  animation: slideup .24s cubic-bezier(.2, .8, .3, 1) both;
}
.ask-card h2 { font-family: var(--hand); font-size: 30px; font-weight: 400; color: var(--seal); }
.ask-card p { margin-top: var(--s2); font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }
.ask-card p.ask-err { color: var(--danger); }
.ask-actions { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.ask-actions .btn { width: 100%; }
.ask-actions .btn:first-child { background: var(--seal); color: #ffffff; }
.ask-actions .btn.secondary { background: transparent; color: var(--seal); border-color: var(--seal-soft); }
.ask-actions .btn.ghost { color: var(--ink-muted); min-height: 38px; }

/* ---------- PIN pad: closes the book ---------- */

.pin-back {
  position: fixed; inset: 0; z-index: 60;
  background-color: var(--leather-deep);
  background-image: repeating-radial-gradient(circle at 30% 30%, transparent 0 2px, transparent 2px 7px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s5); text-align: center; color: var(--paper);
  animation: fade .15s ease both;
}
.pin-back h2 { font-size: 23px; color: var(--gold); }
.pin-back .whichw { font-family: var(--hand); font-size: 24px; color: var(--ink); margin-top: 2px; }
.pin-back .staffline { color: var(--ink-muted); margin: var(--s3) 0 var(--s5); max-width: 320px; font-size: 14.5px; }
.pin-dots { display: flex; gap: var(--s3); margin-bottom: var(--s5); min-height: 14px; }
.pin-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--seal-soft); display: block; }
.pin-dots i.filled { background: var(--gold); border-color: var(--gold); }
.pinpad { display: grid; grid-template-columns: repeat(3, 74px); gap: var(--s3); }
.pinpad button {
  height: 64px; border-radius: 50%; font-size: 23px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--paper-edge);
}
.pinpad button:hover { background: var(--seal-wash); border-color: var(--seal-soft); }
.pinpad button.act { color: var(--gold); }
.pin-error { color: #e08a72; min-height: 22px; margin-top: var(--s4); }
.pin-cancel { margin-top: var(--s2); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.shake { animation: shake .3s ease 2; }

/* ---------- rewards ---------- */

.rwd-intro {
  font-family: var(--hand); font-size: 23px; color: var(--ink);
  line-height: 1.35; margin-bottom: var(--s4);
}
.rwd-intro b { font-weight: 700; }

/* The threshold sits in its own gutter; it used to hang in the notebook
   margin, which the printed-card layout no longer has. */
.rwd-list { padding-left: 40px; }
.reward { position: relative; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.reward .rwd-at {
  position: absolute; left: -34px; top: 14px;
  width: 26px; text-align: center;
  font-family: var(--serif); font-size: 15px; color: var(--ink-muted);
}
.reward.ready .rwd-at, .reward.claimed .rwd-at { color: var(--stamp); font-weight: 700; }
.reward .rwd-name { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.reward .rwd-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
.reward .rwd-foot { margin-top: var(--s2); }
.reward.locked .rwd-name { color: var(--ink-muted); }
.reward.ready { background: rgba(124, 53, 32, .05); }
.reward.ready .rwd-foot .btn { width: 100%; background: var(--stamp); color: #ffffff; }

.rwd-progress { display: flex; align-items: center; gap: var(--s3); }
.rwd-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.rwd-fill { height: 100%; width: 0; border-radius: 3px; background: var(--ink-dan); opacity: .55; transition: width .5s ease; }
.rwd-left { font-family: var(--hand); font-size: 18px; color: var(--ink-muted); white-space: nowrap; }

/* claimed rewards get the same rubber stamp as a tasted bottle */
.mark.rwd-stamp {
  position: static; transform: rotate(-2.5deg);
  display: inline-flex; flex-direction: column; align-items: center;
  border: 1.5px solid var(--stamp); border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(124, 53, 32, .25);
  background: rgba(124, 53, 32, .05); color: var(--stamp);
  font-family: var(--font); padding: 3px 7px; white-space: nowrap; opacity: .92;
}

/* stock picture in the admin rewards list */
.stock-alert {
  border: 1px solid var(--stamp); border-radius: 6px;
  background: rgba(124, 53, 32, .07); color: var(--ink);
  padding: var(--s2) var(--s3); font-size: 14px; margin-bottom: var(--s3);
}
.stock-alert b { color: var(--stamp); }
.rwd-repeat {
  display: inline-block; margin-left: 3px; padding: 0 5px;
  border: 1px solid var(--ink-dan); border-radius: 999px;
  font-size: 11px; color: var(--ink-dan); font-weight: 600; vertical-align: 1px;
}
.rwd-repeat.club { border-color: var(--club); color: var(--club); }
.rwd-club {
  display: block; font-family: var(--font); font-size: 11px; color: var(--ink-muted);
  letter-spacing: .04em; margin-top: 1px;
}
.rwd-tally {
  font-family: var(--font); font-size: 11px; color: var(--stamp);
  border: 1px solid var(--stamp); border-radius: 999px; padding: 1px 7px;
  vertical-align: 2px; white-space: nowrap;
}
.rwd-stock { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; color: var(--ink-muted); }
.rwd-stock b { color: var(--ink); font-weight: 600; }
.rwd-stock .owed b { color: var(--stamp); }

/* ---------- news / ranks / profile, all on the page ---------- */

.card { border-bottom: 1px solid var(--rule); padding: var(--s3) 0; }
.card h3 { font-size: 17px; }
.card .when { color: var(--ink-muted); font-size: 12.5px; margin-top: 2px; font-family: var(--hand); font-size: 16px; }
.card p { margin-top: var(--s2); white-space: pre-wrap; font-size: 15px; line-height: 1.55; }

.rankrow { display: flex; align-items: center; gap: var(--s3); padding: 11px 0; border-bottom: 1px solid var(--rule); }
.rankrow .pos { width: 26px; font-family: var(--serif); font-size: 16px; text-align: center; color: var(--ink-muted); }
.rankrow .who { flex: 1; min-width: 0; }
.rankrow .clubtag { color: var(--club); font-size: 11px; letter-spacing: .5px; }
.rankrow .n { font-family: var(--hand); font-size: 21px; color: var(--ink-dan); white-space: nowrap; }
.rankrow.me .who { font-weight: 600; }

.profile-head { text-align: center; padding: var(--s4) 0 var(--s2); }
.profile-head .big { font-size: 27px; font-family: var(--hand); color: var(--ink-you); }
.profile-head .clubline { color: var(--club); margin-top: var(--s1); font-size: 12.5px; letter-spacing: .5px; }
/* earned rewards, pressed into the profile page */
.marks-block { margin: var(--s4) 0 var(--s5); }
.marks-head {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted);
  font-weight: 600; border-bottom: 1px solid var(--paper-edge); padding-bottom: 4px;
  display: flex; align-items: baseline; gap: var(--s2);
}
.marks-head span { color: var(--stamp); letter-spacing: 0; }
.marks { display: flex; flex-wrap: wrap; gap: var(--s3); padding: var(--s4) 0 var(--s2); }
.mark-stamp {
  position: relative;
  width: 76px; height: 76px; border-radius: 50%;
  border: 2.5px solid var(--stamp); color: var(--stamp);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1.5px rgba(124, 53, 32, .3);
  background: rgba(124, 53, 32, .06);
  text-align: center; padding: 4px; opacity: .95;
}
.mark-stamp:nth-child(2n) { transform: rotate(-7deg); }
.mark-stamp:nth-child(3n) { transform: rotate(5deg); }
.mark-stamp .mt { font-family: var(--serif); font-size: 20px; line-height: 1; font-weight: 700; }
.mark-stamp .ml {
  font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.2; margin-top: 3px; max-width: 62px; overflow-wrap: break-word;
}
.mark-stamp .mx {
  position: absolute; right: -2px; bottom: 4px;
  font-family: var(--serif); font-size: 12px; font-weight: 700;
}
.marks-none, .marks-next { font-family: var(--hand); font-size: 19px; color: var(--ink-muted); margin-top: var(--s2); }
.marks-none b, .marks-next b { color: var(--ink-dan); }

/* the one mark that fits beside a name on the leaderboard */
.rankrow .whoname { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rank-mark {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--stamp); color: var(--stamp);
  font-family: var(--serif); font-size: 10.5px; font-weight: 700;
  transform: rotate(-8deg); flex: 0 0 auto;
}

.kv { display: flex; justify-content: space-between; gap: var(--s4); padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.kv .k { color: var(--ink-muted); flex: 0 0 auto; }
.kv .v { text-align: right; min-width: 0; overflow-wrap: anywhere; }

.form-row { display: flex; gap: var(--s2); margin: var(--s3) 0; flex-wrap: wrap; }
.form-row input, .form-row select { flex: 1 1 140px; min-width: 0; }
.form-row .btn { flex: 0 0 auto; }

/* admin, tabbed so each screen does one job */
.admin-wrap { margin-top: var(--s6); border-top: 2px solid var(--margin-rule); padding-top: var(--s4); }
.admin-title {
  font-family: var(--hand); font-size: 25px; font-weight: 400;
  color: var(--ink-dan); margin-bottom: var(--s3);
}
.admin-tabs { margin-bottom: var(--s4); }
.admin-sub { font-family: var(--serif); font-size: 17px; color: var(--ink); margin-bottom: var(--s1); }

.add-block { margin-top: var(--s5); border-top: 1px solid var(--paper-edge); padding-top: var(--s3); }
.add-block summary {
  cursor: pointer; min-height: 32px; display: flex; align-items: center;
  font-size: 14px; color: var(--ink-dan); font-weight: 600;
}

.notify-row { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: 14px; color: var(--ink); }
.notify-row input { width: 18px; height: 18px; accent-color: var(--ink-dan); flex: 0 0 auto; }
.notify-row input:disabled + span { opacity: .5; }

/* the "turn on notifications" prompt */
.push-card {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  border: 1px solid var(--paper-edge); border-left: 3px solid var(--ink-dan);
  border-radius: 0 8px 8px 0; background: var(--paper-2);
  padding: var(--s3); margin-bottom: var(--s4);
}
.push-card .push-copy { flex: 1; min-width: 180px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; }
.push-card .push-copy b { color: var(--ink); }
.push-card .push-copy > b:first-child { display: block; }
.push-card .btn { flex: 0 0 auto; }
.push-actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.ios-steps { margin: var(--s2) 0 0 var(--s4); padding: 0; }
.ios-steps li { margin-bottom: 3px; font-size: 13px; color: var(--ink-muted); }
.ios-steps b { color: var(--ink); }

.push-diag { margin: calc(var(--s4) * -1 + 2px) 0 var(--s4); }
.push-diag summary { cursor: pointer; font-size: 12.5px; color: var(--ink-muted); min-height: 30px; display: flex; align-items: center; }
.push-diag dl { margin-top: var(--s2); border-top: 1px solid var(--paper-edge); }
.push-diag dl > div { display: flex; justify-content: space-between; gap: var(--s3); padding: 5px 0; border-bottom: 1px solid var(--rule); }
.push-diag dt { font-size: 12.5px; color: var(--ink-muted); }
.push-diag dd { font-size: 12.5px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.push-diag dd.bad { color: var(--stamp); }
.diag-err { margin-top: var(--s2); font-size: 12.5px; color: var(--danger); }

.admin-section { margin: var(--s6) 0; }
.admin-section > h3 {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted);
  font-family: var(--font); font-weight: 600;
  border-bottom: 1px solid var(--paper-edge); padding-bottom: 4px; margin-bottom: var(--s3);
}

.userrow { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.userrow .who small { color: var(--ink-muted); display: block; overflow-wrap: anywhere; }
.userctl { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s2); flex-wrap: wrap; }
.userctl label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-muted); min-height: 32px; }
.userctl input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink-dan); flex: 0 0 auto; }
.userctl input:disabled + span { opacity: .5; }
.userctl .del-user { margin-left: auto; background: none; border: none; color: var(--danger); font-size: 13px; padding: var(--s2); }
.userctl .self { margin-left: auto; color: var(--ink-muted); font-size: 12.5px; font-family: var(--hand); font-size: 17px; }

.wadmin-row { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.wadmin-row summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: var(--s2); font-family: var(--serif); }
.wadmin-row summary small { color: var(--ink-muted); font-family: var(--font); }
.wadmin-row[open] summary { color: var(--ink-dan); }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom));
  background: var(--ink-dan); color: var(--paper);
  font-family: var(--hand); font-size: 20px;
  border-radius: var(--radius-sm); padding: var(--s2) var(--s5);
  box-shadow: var(--shadow); max-width: calc(100vw - 32px); text-align: center; z-index: 80;
  animation: toastin .2s ease both;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- bottom nav: the back cover ---------- */

nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; border-top: 1px solid #000;
  box-shadow: 0 -2px 0 var(--seal-wash);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--leather);
  background-image: repeating-radial-gradient(circle at 30% 40%, transparent 0 2px, transparent 2px 7px);
}
nav.tabs button {
  flex: 1; background: none; border: none; color: var(--ink-muted);
  padding: var(--s2) 0 var(--s3); font-size: 11.5px;
  position: relative; min-height: var(--tap);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
nav.tabs button .ico { width: 22px; height: 22px; }
nav.tabs button[aria-current="page"] { color: var(--gold); }
nav.tabs .badge {
  position: absolute; top: 2px; left: calc(50% + 7px);
  background: var(--stamp); color: #fff; font-size: 10.5px; font-weight: 700;
  border-radius: 9px; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; text-align: center;
}

.ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------- utilities ----------
   These exist so no markup needs a style="" attribute, which lets the
   Content-Security-Policy forbid inline styles outright. */
.u-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.u-right { float: right; }
.u-full { width: 100%; }
.u-mt3 { margin-top: var(--s3); }
.u-mt5 { margin-top: var(--s5); }
.u-pt3 { padding-top: var(--s3); }
.ta-compact { min-height: 52px; }
.in-narrow { flex: 0 0 96px; max-width: 96px; }

/* reward stock — what's physically on the shelf */
.stockline { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.stockline label { font-size: 12.5px; color: var(--ink-muted); }
.stockline .stock-in {
  width: 84px; min-height: 36px; padding: 4px var(--s2); font-size: 14px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.stockline .stock-save { min-height: 36px; padding: 4px var(--s3); font-size: 13px; }
.stock-state { font-size: 12.5px; color: var(--ink-muted); }
.stock-state.ok { color: #4a6f4a; }
.stock-state.bad { color: var(--stamp); font-weight: 600; }

/* Text that hasn't arrived yet — a faint ruled line rather than a spinner, so
   the sheet doesn't jump when the real note lands. */
@keyframes pending { 0%, 100% { opacity: .25; } 50% { opacity: .5; } }
.pending {
  height: 15px; border-radius: 3px; background: var(--paper-edge);
  animation: pending 1.3s ease-in-out infinite; max-width: 70%;
}

/* one-time temporary password, sized to be read across a bar */
.temp-pw {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(26px, 8vw, 34px); letter-spacing: .06em; text-align: center;
  color: var(--ink-dan); background: var(--paper);
  border: 1px dashed var(--paper-edge); border-radius: 8px;
  padding: var(--s3); margin: var(--s3) 0; user-select: text; -webkit-user-select: text;
}
.userctl .reset-pw { background: none; border: none; color: var(--ink-dan); font-size: 13px; padding: var(--s2); }

/* Sheet sync report in the admin panel. */
.sync-out { margin-top: var(--s3); font-size: 13.5px; color: var(--ink-muted); }
.sync-out:empty { display: none; }
.sync-head { color: var(--ink); }
.sync-out ul { list-style: none; margin: var(--s1) 0 var(--s3); padding-left: var(--s3); }
.sync-out li { padding: 2px 0; border-left: 2px solid var(--paper-edge); padding-left: var(--s2); }
.sync-add { color: var(--ink-dan); margin-top: var(--s2); }
.sync-gone { color: var(--stamp); margin-top: var(--s2); }
.sync-warn { color: var(--danger); margin-top: var(--s2); }
.sync-back { color: var(--club); margin-top: var(--s2); }


/* ---------- Dan's illustrations ---------- */

/* The rickhouse from the menu cover, under the sign-in mark. */
.cover-art {
  display: block; width: 100%; max-width: 300px; height: auto;
  margin: var(--s4) auto 0; opacity: .92;
}
/* On a short screen the cover art is the first thing that can go. */
@media (max-height: 700px) { .cover-art { display: none; } }

/* An empty shelf gets the flight board rather than a bare sentence. */
.empty::before {
  content: ""; display: block; width: 190px; height: 97px; margin: 0 auto var(--s3);
  background: url("/art/flight.png") center/contain no-repeat;
  opacity: .85;
}

/* The rewards board is headed by the barrels, as the ladder's whole point. */
.rewards-art {
  display: block; width: 100%; max-width: 280px; height: auto;
  margin: 0 auto var(--s3); opacity: .9;
}

/* The seal at the head of a soft-ask card, so the prompt looks like the bar
   asking rather than the browser. */
.ask-mark { display: block; width: 64px; height: 64px; margin: 0 auto var(--s3); }

/* ---------- review approval ---------- */

/* A review nobody has approved yet: visible to its author, obviously not live. */
/* .mnote has no side padding by design — a plain note sits flush with the
   column. A tinted, ruled block does not, so it brings its own. */
.mnote.awaiting {
  border-left: 3px solid var(--seal-soft);
  background: var(--seal-wash);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--s3);
  margin-bottom: var(--s2);
}
.await-tag {
  display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--seal); margin: 2px 0 var(--s1);
}

.review-row {
  border: 1px solid var(--paper-edge); border-left: 3px solid var(--seal);
  border-radius: var(--radius-sm); padding: var(--s3); margin-bottom: var(--s3);
  background: var(--paper);
}
.rv-head { font-size: 13px; color: var(--ink-muted); }
.rv-head b { color: var(--ink); }
.rv-whisky { color: var(--seal); font-weight: 600; }
.rv-head .when { display: block; font-size: 11.5px; margin-top: 2px; }
.rv-body { margin: var(--s2) 0 var(--s3); color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
.rv-actions { display: flex; gap: var(--s2); }
.rv-actions .btn { min-height: 38px; padding: var(--s2) var(--s4); }

/* ---------- rules & terms: the printed card, on screen ---------- */

.terms { margin-top: var(--s5); }
.terms h3 {
  font-family: var(--font); font-weight: 800; text-transform: uppercase;
  font-size: 12px; letter-spacing: .12em; color: var(--seal);
  margin: var(--s5) 0 var(--s2);
}
.terms h3:first-child { margin-top: 0; }
.terms p { color: var(--ink); font-size: 14px; line-height: 1.55; margin-bottom: var(--s2); }
.terms ul { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.terms li {
  position: relative; padding-left: var(--s4); margin-bottom: var(--s2);
  font-size: 14px; line-height: 1.55; color: var(--ink);
}
.terms li::before {
  content: "\25C6"; position: absolute; left: 0; top: 1px;
  font-size: 7px; color: var(--seal); line-height: 2.4;
}
.terms-foot {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-muted);
}

/* A button that reads as a link, so the CSP needs no inline handler. */
.linkish {
  background: none; border: 0; padding: 0; color: var(--seal);
  font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}

.rules-back { padding-left: 0; }
.rules-head { text-align: center; margin: var(--s2) 0 var(--s5); }
.rules-seal { display: block; margin: 0 auto var(--s3); }
.rules-head h2 {
  font-family: var(--font); font-weight: 800; text-transform: uppercase;
  font-size: clamp(17px, 4.6vw, 21px); letter-spacing: .06em; color: var(--seal);
}
.rules-sub {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: var(--s1);
}

/* ---------- the crew: one PIN each ---------- */

.pin-row {
  border: 1px solid var(--paper-edge); border-left: 3px solid var(--seal);
  border-radius: var(--radius-sm); padding: var(--s3); margin-bottom: var(--s3);
  background: var(--paper);
}
/* Off the roster, still on the record — greyed, not hidden. */
.pin-row.retired { border-left-color: var(--paper-edge); opacity: .72; }
.pin-head { font-size: 13px; color: var(--ink-muted); }
.pin-head b { color: var(--ink); font-size: 15px; }
.pin-head .when { display: block; font-size: 11.5px; margin-top: 2px; }
.pin-row .form-row { margin-bottom: 0; }
.pin-row .pin-name { flex: 1 1 160px; }

/* The night at a glance, above the detail. */
.pin-totals {
  display: flex; gap: var(--s2); margin: var(--s3) 0;
  flex-wrap: wrap;
}
.pt-cell {
  flex: 1 1 72px; text-align: center;
  border: 1px solid var(--paper-edge); border-radius: var(--radius-sm);
  padding: var(--s3) var(--s2); background: var(--paper);
}
.pt-cell b { display: block; font-size: 22px; color: var(--seal); line-height: 1.1; }
.pt-cell span {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* A flagged patron. Danger-edged because it wants a decision, not because
   anything went wrong -- the stamp was allowed through. */
.pace-row {
  border: 1px solid var(--paper-edge); border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm); padding: var(--s3); margin-bottom: var(--s3);
  background: var(--paper);
}
.pace-head { font-size: 13px; color: var(--ink-muted); }
.pace-head b { color: var(--ink); font-size: 15px; }
.pace-head .when { display: block; font-size: 11.5px; margin-top: 2px; }
.pace-what { font-size: 13.5px; color: var(--ink); margin-top: var(--s2); }
.pace-row .noterow { margin-top: var(--s3); }

/* Money in the people list. Same weight as the name, so a glance down the
   column reads as a column. */
.userrow .ltv { color: var(--seal); font-weight: 700; }

.pin-log { border-top: 1px solid var(--rule); margin-top: var(--s3); }
.pin-log-row {
  display: grid; grid-template-columns: minmax(72px, auto) 1fr auto;
  gap: var(--s2) var(--s3); align-items: baseline;
  padding: var(--s2) 0; border-bottom: 1px solid var(--rule); font-size: 13px;
}
.pl-who { font-weight: 600; color: var(--seal); }
.pl-none { font-weight: 400; color: var(--ink-muted); font-style: italic; }
.pl-what { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.pl-for { color: var(--ink-muted); }
.pin-log-row .when { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }

/* A phone can't carry three columns; stack the time under the line. */
@media (max-width: 480px) {
  .pin-log-row { grid-template-columns: 1fr; gap: 2px; }
  .pin-log-row .when { grid-row: 1; justify-self: end; margin-top: -18px; }
}

/* Count on the tab itself — a queue shouldn't need opening to be noticed. */
.chip-n {
  display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; background: var(--seal); color: #fff;
  font-size: 11px; line-height: 17px; text-align: center; font-weight: 700;
}