/* PAWNHOOD base.css: design tokens, fonts, site chrome (nav, drawer, footer, CA, countdown, toast, dialog) and the shop's
   signature pieces (paper pawn ticket, hanging price tag, punch card, stamp, brass rule, ledger table).
   Shared by every page including the landing. Night shop: green-black glass, neon red script, vitrine green, brass, paper. */

@font-face { font-family: 'Yellowtail'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/yellowtail-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/courier-prime-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/courier-prime-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/courier-prime-400i-latin.woff2') format('woff2'); }

:root {
  --night: #07110E;
  --glass: #0D1C17;
  --line: #1E3A30;
  --ink: #E6F0EA;
  --ink-2: #8DA89B;
  --neon: #FF3B4E;
  --vitrine: #3DFFA2;
  --brass: #C9A14A;
  --amber: #FFB547;
  --paper: #EFE6CF;
  /* derived */
  --paper-ink: #1B1A16;
  --paper-ink-2: #5E5747;
  --paper-red: #B3202E;
  --paper-green: #1E6B47;
  --paper-line: #CBBE9C;
  --glass-2: #10241D;
  --brass-dim: rgba(201, 161, 74, .38);
  --neon-core: #FFE4E7;
  --script: 'Yellowtail', cursive;
  --mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --gutter: 16px;
  --wrap: 1180px;
  --nav-h: 56px;
  --r: 3px;
  --glow-red: 0 0 2px rgba(255, 255, 255, .35), 0 0 6px var(--neon), 0 0 16px rgba(255, 59, 78, .85), 0 0 36px rgba(255, 59, 78, .5);
  --glow-green: 0 0 2px rgba(255, 255, 255, .35), 0 0 6px var(--vitrine), 0 0 16px rgba(61, 255, 162, .7), 0 0 34px rgba(61, 255, 162, .35);
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 400 15px/1.6 var(--mono); color: var(--ink); background-color: var(--night);
  background-image:
    radial-gradient(ellipse 70% 42% at 50% -8%, rgba(255, 59, 78, .11), transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 4%, rgba(61, 255, 162, .05), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(201, 161, 74, .025) 79px 80px);
  background-attachment: fixed;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 720px) { body { font-size: 16px; } }
main { flex: 1 0 auto; outline: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--vitrine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #9CFFCF; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; }
p { margin: 0 0 1em; }
code, kbd { font-family: var(--mono); font-size: .92em; }
code { background: rgba(201, 161, 74, .08); border: 1px solid rgba(201, 161, 74, .18); padding: 0 .3em; border-radius: 2px; word-break: break-all; }
hr, .ph-rule { border: 0; height: 1px; background: var(--brass-dim); margin: 28px 0; }
::selection { background: rgba(255, 59, 78, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.ph-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.ph-muted { color: var(--ink-2); }
.ph-small { font-size: 13px; }
.ph-tiny { font-size: 12px; }
.ph-ok { color: var(--vitrine); }
.ph-warn { color: var(--amber); }
.ph-hot { color: var(--neon); }
.ph-brass { color: var(--brass); }
.ph-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.ph-visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ph-skiplink { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--paper); color: var(--paper-ink); padding: 8px 12px; font-weight: 700; }
.ph-skiplink:focus { top: 8px; }

/* ── neon script ─────────────────────────────────────── */
.ph-neon, .ph-neon-green {
  font-family: var(--script); font-weight: 400; color: var(--neon-core); text-shadow: var(--glow-red); letter-spacing: .01em; line-height: 1.05;
}
.ph-neon-green { color: #E3FFF1; text-shadow: var(--glow-green); }
.ph-neon-flicker { animation: ph-flicker 5.5s infinite steps(1); }
@keyframes ph-flicker {
  0%, 18%, 22%, 61%, 63%, 100% { opacity: 1; }
  19%, 62% { opacity: .55; text-shadow: none; }
}

/* ── buttons ─────────────────────────────────────────── */
.ph-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  font: 700 13px/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--brass); background: transparent; border: 1px solid var(--brass); border-radius: var(--r); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
}
.ph-btn svg { width: 16px; height: 16px; flex: none; }
.ph-btn:hover { background: rgba(201, 161, 74, .12); color: #E8C778; }
.ph-btn-hot { color: #1D0306; background: var(--neon); border-color: var(--neon); box-shadow: 0 0 18px rgba(255, 59, 78, .35); }
.ph-btn-hot:hover { background: #FF5A6A; color: #1D0306; box-shadow: 0 0 26px rgba(255, 59, 78, .55); }
.ph-btn-ok { color: #03180E; background: var(--vitrine); border-color: var(--vitrine); box-shadow: 0 0 16px rgba(61, 255, 162, .25); }
.ph-btn-ok:hover { background: #7DFFC2; color: #03180E; }
.ph-btn-ghost { border-color: var(--line); color: var(--ink-2); }
.ph-btn-ghost:hover { color: var(--ink); border-color: var(--ink-2); background: rgba(230, 240, 234, .04); }
.ph-btn-sm { min-height: 36px; padding: 7px 12px; font-size: 12px; }
.ph-btn-block { width: 100%; }
.ph-btn[disabled], .ph-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ph-btn[disabled]:hover { background: transparent; color: var(--brass); }
.ph-btn-hot[disabled]:hover { background: var(--neon); color: #1D0306; }
.ph-icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink-2); background: transparent; cursor: pointer; text-decoration: none;
}
.ph-icon-btn svg { width: 16px; height: 16px; }
.ph-icon-btn:hover { color: var(--ink); border-color: var(--brass); }
.ph-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── nav ─────────────────────────────────────────────── */
.ph-nav { position: sticky; top: 0; z-index: 40; height: var(--nav-h); background: rgba(7, 17, 14, .94); border-bottom: 1px solid var(--brass-dim); }
.ph-nav.is-overlay { position: fixed; left: 0; right: 0; background: linear-gradient(rgba(7, 17, 14, .78), rgba(7, 17, 14, 0)); border-bottom-color: transparent; }
.ph-nav-in { height: 100%; display: flex; align-items: center; gap: 16px; }
.ph-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.ph-logo svg { width: 28px; height: 28px; filter: drop-shadow(0 0 5px rgba(255, 59, 78, .55)); }
.ph-logo-t { font: 400 26px/1 var(--script); color: var(--neon-core); text-shadow: var(--glow-red); padding: 2px 4px 4px 0; }
.ph-logo:hover .ph-logo-t { color: #fff; }
.ph-links { display: none; gap: 2px; margin-left: 8px; }
.ph-links a {
  padding: 6px 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border: 1px solid transparent;
}
.ph-links a:hover { color: var(--ink); }
.ph-links a[aria-current="page"] { color: var(--brass); border-color: var(--brass-dim); }
.ph-nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ph-nav.is-overlay .ph-icon-btn, .ph-nav.is-overlay .ph-ca-chip { background: rgba(7, 17, 14, .7); }
.ph-connect { min-width: 0; }
.ph-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vitrine); box-shadow: 0 0 8px var(--vitrine); flex: none; }
.ph-dot.off { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.ph-burger { display: inline-grid; }
.ph-hide-sm, .ph-hide-md { display: none !important; }
@media (min-width: 640px) { .ph-hide-sm { display: inline-grid !important; } a.ph-btn.ph-hide-sm { display: inline-flex !important; } }
@media (min-width: 1100px) { .ph-hide-md { display: inline-flex !important; } }
@media (min-width: 900px) { .ph-links { display: flex; } .ph-burger { display: none; } }
.ph-drawer {
  position: fixed; z-index: 39; top: var(--nav-h); left: 0; right: 0; padding: 8px var(--gutter) 18px; background: var(--night);
  border-bottom: 1px solid var(--brass); display: grid; gap: 2px; max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
}
.ph-drawer[hidden] { display: none; }
.ph-dl { padding: 12px 4px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--line); }
.ph-dl[aria-current="page"] { color: var(--brass); }
.ph-drawer-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; align-items: center; }

/* ── CA strip / chip ─────────────────────────────────── */
.ph-ca-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--brass-dim); border-radius: var(--r);
  background: transparent; font: 400 12px/1 var(--mono); color: var(--ink); cursor: pointer;
}
.ph-ca-chip svg { width: 14px; height: 14px; color: var(--brass); }
.ph-ca-chip:hover { border-color: var(--brass); }
.ph-ca-k { color: var(--brass); font-weight: 700; }
.ph-ca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ph-ca-tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.ph-ca-addr { font-size: 13px; padding: 6px 10px; border: 1px dashed var(--brass-dim); color: var(--ink); word-break: break-all; min-width: 0; }
.ph-ca-addr.pending { color: var(--ink-2); font-style: italic; }

/* ── countdown ───────────────────────────────────────── */
.ph-countdown { display: inline-flex; gap: 6px; align-items: baseline; }
.ph-countdown .c { display: inline-flex; align-items: baseline; gap: 2px; padding: 4px 6px; border: 1px solid var(--brass-dim); }
.ph-countdown b { font-size: 18px; color: var(--paper); }
.ph-countdown small { font-size: 11px; color: var(--brass); }
.ph-countdown .soon { font: 400 22px/1 var(--script); color: var(--neon-core); text-shadow: var(--glow-red); padding: 2px 4px; }
.ph-countdown .live { font-weight: 700; color: var(--vitrine); letter-spacing: .08em; text-transform: uppercase; }

/* ── footer ──────────────────────────────────────────── */
.ph-foot { margin-top: 64px; border-top: 1px solid var(--brass-dim); padding: 36px 0 40px; background: linear-gradient(rgba(13, 28, 23, .6), rgba(7, 17, 14, 0) 80%); font-size: 14px; }
.ph-foot-sign { display: grid; gap: 10px; max-width: 60ch; }
.ph-foot-sign .ph-logo svg { width: 36px; height: 36px; }
.ph-foot-sign .ph-logo-t { font-size: 36px; }
.ph-foot-blurb { color: var(--ink-2); margin: 0; }
.ph-foot-row { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; margin: 26px 0; padding: 18px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.ph-foot-launch { display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ph-foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (min-width: 720px) { .ph-foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ph-foot-h { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 10px; }
.ph-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ph-foot ul a { color: var(--ink); text-decoration: none; }
.ph-foot ul a:hover { color: var(--vitrine); text-decoration: underline; }
.ph-foot-legal { margin: 28px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-2); max-width: 110ch; }
.ph-foot-legal b { color: var(--ink); }

/* ── toast + dialog ──────────────────────────────────── */
.ph-toast {
  position: fixed; z-index: 90; left: 50%; bottom: 20px; transform: translate(-50%, 140%); max-width: min(560px, calc(100vw - 32px));
  background: var(--paper); color: var(--paper-ink); border-left: 4px solid var(--brass); padding: 12px 16px; font-size: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
  transition: transform .25s ease; pointer-events: none;
}
.ph-toast.show { transform: translate(-50%, 0); }
.ph-toast.err { border-left-color: var(--paper-red); }
.ph-toast.ok { border-left-color: var(--paper-green); }
.ph-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--brass); border-radius: var(--r); background: var(--glass); color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.ph-dialog::backdrop { background: rgba(2, 6, 5, .72); }
.ph-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px dashed var(--line); }
.ph-dialog h2 { font: 400 28px/1 var(--script); color: var(--neon-core); text-shadow: var(--glow-red); }
.ph-dialog .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--ink-2); }
.ph-dialog .icon-btn svg { width: 16px; height: 16px; }
.ph-dialog .body { padding: 16px; }
.ph-dialog .actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.ph-wallets { display: grid; gap: 8px; }
.ph-wallets button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; background: var(--night); border: 1px solid var(--line); color: var(--ink); cursor: pointer; text-align: left; font-weight: 700; }
.ph-wallets button:hover { border-color: var(--brass); }
.ph-wallets img { width: 28px; height: 28px; }

/* ── page head ───────────────────────────────────────── */
.ph-head { padding: 36px 0 18px; }
@media (min-width: 720px) { .ph-head { padding: 56px 0 24px; } }
.ph-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.ph-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--brass); }
.ph-head h1 { font: 400 clamp(46px, 11vw, 84px)/1 var(--script); color: var(--neon-core); text-shadow: var(--glow-red); margin: 10px 0 12px; padding-bottom: .08em; }
.ph-lead { max-width: 62ch; color: var(--ink-2); font-size: 16px; margin: 0; }
.ph-lead b { color: var(--ink); }
.ph-section { padding: 18px 0; }
.ph-h2 { font: 400 clamp(32px, 7vw, 44px)/1.05 var(--script); color: var(--neon-core); text-shadow: var(--glow-red); margin: 0 0 14px; padding-bottom: .06em; }
.ph-h2.green { color: #E3FFF1; text-shadow: var(--glow-green); }
.ph-h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 0 0 10px; }

/* ── panels, notes, states ───────────────────────────── */
.ph-panel { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; position: relative; }
@media (min-width: 720px) { .ph-panel { padding: 20px; } }
.ph-panel.brass { border-color: var(--brass-dim); }
.ph-note { border-left: 2px solid var(--brass); padding: 8px 12px; background: rgba(201, 161, 74, .06); color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }
.ph-note b { color: var(--ink); }
.ph-note.warn { border-left-color: var(--amber); background: rgba(255, 181, 71, .07); }
.ph-note.hot { border-left-color: var(--neon); background: rgba(255, 59, 78, .07); }
.ph-note.ok { border-left-color: var(--vitrine); background: rgba(61, 255, 162, .05); }
.ph-state { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px dashed var(--line); border-radius: var(--r); background: rgba(13, 28, 23, .55); }
.ph-state-mark { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--brass); color: var(--brass); font-weight: 700; border-radius: 50%; }
.ph-state-unavailable .ph-state-mark, .ph-state-error .ph-state-mark { border-color: var(--neon); color: var(--neon); }
.ph-state-t { margin: 0 0 4px; font-weight: 700; color: var(--ink); }
.ph-state-b { margin: 0; color: var(--ink-2); font-size: 14px; }
.ph-state-a { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ph-state-unavailable .ph-state-t { font: 400 26px/1.1 var(--script); color: var(--neon-core); text-shadow: var(--glow-red); }
.ph-spin { flex: none; width: 18px; height: 18px; border: 2px solid var(--brass-dim); border-top-color: var(--brass); border-radius: 50%; animation: ph-spin 0.8s linear infinite; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
.ph-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid currentColor; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; white-space: nowrap; }
.ph-pill.ok { color: var(--vitrine); } .ph-pill.warn { color: var(--amber); } .ph-pill.hot { color: var(--neon); } .ph-pill.dim { color: var(--ink-2); } .ph-pill.brass { color: var(--brass); }
.ph-live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: ph-pulse 1.6s ease-in-out infinite; }
@keyframes ph-pulse { 50% { opacity: .35; } }

/* ── ledger table (dashed rules) ─────────────────────── */
.ph-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ph-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ph-table th, .ph-table td { padding: 9px 10px 9px 0; text-align: left; border-bottom: 1px dashed var(--line); vertical-align: top; }
.ph-table thead th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); border-bottom: 1px solid var(--brass-dim); font-weight: 700; }
.ph-table td.r, .ph-table th.r { text-align: right; padding-right: 0; padding-left: 10px; }
.ph-table tbody tr:hover td, .ph-table tbody tr:hover th { background: rgba(201, 161, 74, .04); }
.ph-dl-ledger { margin: 0; display: grid; }
.ph-dl-ledger > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
.ph-dl-ledger dt { color: var(--ink-2); font-size: 14px; flex: 1 0 38%; }
.ph-dl-ledger dd { margin: 0; text-align: right; font-weight: 700; }
.ph-dl-ledger dd small { display: block; font-weight: 400; color: var(--ink-2); font-size: 12px; }
.ph-dl-ledger .total { border-bottom: 3px double var(--brass-dim); }
.ph-dl-ledger .total dd { color: var(--vitrine); font-size: 18px; }

/* ── stat cells ──────────────────────────────────────── */
.ph-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--brass-dim); border-bottom: 1px solid var(--brass-dim); }
@media (min-width: 720px) { .ph-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ph-stat { padding: 14px 12px 14px 0; border-bottom: 1px dashed var(--line); min-width: 0; }
.ph-stat:nth-child(odd) { padding-right: 12px; border-right: 1px dashed var(--line); }
.ph-stat:nth-child(even) { padding-left: 12px; }
@media (min-width: 720px) {
  .ph-stat, .ph-stat:nth-child(odd), .ph-stat:nth-child(even) { padding: 16px 14px; border-right: 1px dashed var(--line); border-bottom: 0; }
  .ph-stat:last-child { border-right: 0; }
}
.ph-stat .ph-label { display: block; margin-bottom: 6px; }
.ph-stat b { display: block; font-size: clamp(18px, 4.6vw, 24px); color: var(--paper); overflow-wrap: anywhere; }
.ph-stat b.ok { color: var(--vitrine); }
.ph-stat small { color: var(--ink-2); font-size: 12px; }

/* ── forms ───────────────────────────────────────────── */
.ph-field { display: grid; gap: 6px; margin-bottom: 16px; }
.ph-field > label, .ph-field > .ph-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.ph-input-row { display: flex; align-items: stretch; border: 1px solid var(--line); background: var(--night); border-radius: var(--r); }
.ph-input-row:focus-within { border-color: var(--brass); }
.ph-input {
  flex: 1; min-width: 0; height: 48px; padding: 0 12px; border: 0; background: transparent; color: var(--paper); font: 700 18px var(--mono); outline: none;
}
.ph-input::placeholder { color: #4A6359; font-weight: 400; }
.ph-input-unit { display: grid; place-items: center; padding: 0 12px; color: var(--ink-2); font-size: 13px; border-left: 1px dashed var(--line); }
.ph-input-row .ph-max { border: 0; border-left: 1px dashed var(--line); background: transparent; color: var(--brass); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 0 12px; cursor: pointer; }
.ph-input-row .ph-max:hover { color: var(--paper); }
.ph-hint { font-size: 12px; color: var(--ink-2); margin: 0; }
.ph-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ph-seg button { min-height: 52px; padding: 6px 4px; border: 0; border-right: 1px dashed var(--line); background: var(--night); color: var(--ink-2); cursor: pointer; display: grid; gap: 2px; place-content: center; text-align: center; }
.ph-seg button:last-child { border-right: 0; }
.ph-seg button b { color: var(--ink); font-size: 15px; }
.ph-seg button small { font-size: 11px; }
.ph-seg button[aria-pressed="true"] { background: rgba(201, 161, 74, .14); color: var(--paper); box-shadow: inset 0 -2px 0 var(--brass); }
.ph-seg button[aria-pressed="true"] b { color: var(--brass); }
.ph-check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.ph-check input { width: 18px; height: 18px; accent-color: var(--brass); }

/* ── tx flow ─────────────────────────────────────────── */
.ph-txflow { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-top: 12px; border: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); }
.ph-txflow[hidden] { display: none; }
.ph-txflow.ok { border-color: rgba(61, 255, 162, .5); color: var(--ink); }
.ph-txflow.fail { border-color: rgba(255, 59, 78, .6); color: var(--ink); }
.ph-tx-mark { font-weight: 700; } .ph-txflow.ok .ph-tx-mark { color: var(--vitrine); } .ph-txflow.fail .ph-tx-mark { color: var(--neon); }

/* ═══ signature pieces ═══════════════════════════════════ */

/* paper pawn ticket: serrated torn top, string hole, red number, tilted stamp */
.ph-ticket {
  --tooth: 7px;
  position: relative; color: var(--paper-ink); background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 30%, rgba(120, 90, 30, .07), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(120, 90, 30, .08), transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(27, 26, 22, .05) 23px 24px);
  padding: calc(var(--tooth) + 18px) 18px 16px 18px; font-size: 14px; line-height: 1.45;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(var(--tooth) * 2) 100% repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(var(--tooth) * 2) 100% repeat-x;
}
.ph-ticket-shell { filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55)); }
.ph-ticket a { color: var(--paper-red); }
.ph-ticket-hole {
  position: absolute; top: calc(var(--tooth) + 12px); left: 14px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--night); box-shadow: 0 0 0 3px #D9CBA6, inset 0 1px 2px rgba(0, 0, 0, .6);
}
.ph-ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-left: 24px; margin-bottom: 10px; }
.ph-ticket-shop { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-ink-2); line-height: 1.3; }
.ph-ticket-shop b { display: block; font: 400 24px/1 var(--script); letter-spacing: 0; text-transform: none; color: var(--paper-red); margin-top: 2px; }
.ph-ticket-no { font-weight: 700; color: var(--paper-red); font-size: 17px; letter-spacing: .04em; white-space: nowrap; }
.ph-ticket-no small { display: block; font-size: 9px; letter-spacing: .2em; color: var(--paper-ink-2); text-align: right; }
.ph-ticket-pledge { border-top: 1px solid var(--paper-ink); border-bottom: 1px solid var(--paper-ink); padding: 8px 0; margin-bottom: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ph-ticket-pledge b { font-size: 22px; letter-spacing: .02em; }
.ph-ticket-pledge span { font-size: 12px; color: var(--paper-ink-2); }
.ph-ticket-body { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ph-ticket-body > div { padding: 5px 0; border-bottom: 1px dashed var(--paper-line); min-width: 0; }
.ph-ticket-body dt { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink-2); }
.ph-ticket-body dd { margin: 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.ph-ticket-body .wide { grid-column: 1 / -1; }
.ph-ticket-body .red dd { color: var(--paper-red); }
.ph-ticket-body .green dd { color: var(--paper-green); }
.ph-ticket-perf { margin: 12px -18px 10px; border-top: 2px dotted rgba(27, 26, 22, .35); position: relative; }
.ph-ticket-foot { display: flex; justify-content: space-between; gap: 10px; align-items: flex-end; font-size: 11px; color: var(--paper-ink-2); }
.ph-ticket-foot .ph-ticket-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-ticket-stamp {
  position: absolute; right: 14px; bottom: 30px; transform: rotate(-11deg); padding: 4px 10px; border: 3px double currentColor; border-radius: 4px;
  font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-red); opacity: .78; mix-blend-mode: multiply; pointer-events: none;
  background: rgba(239, 230, 207, .25);
}
.ph-ticket-stamp.ok { color: var(--paper-green); }
.ph-ticket-stamp.warn { color: #A0620C; }
.ph-ticket-stamp.dim { color: #6A6457; }
.ph-ticket.is-preview .ph-ticket-stamp { color: #6A6457; }
.ph-ticket .ph-btn { color: var(--paper-ink); border-color: var(--paper-ink); }
.ph-ticket .ph-btn:hover { background: rgba(27, 26, 22, .08); color: var(--paper-ink); }
.ph-ticket .ph-btn-hot { color: #FFF4F5; background: var(--paper-red); border-color: var(--paper-red); box-shadow: none; }
.ph-ticket .ph-btn-hot:hover { background: #941824; color: #fff; }
.ph-ticket .ph-btn[disabled]:hover { background: transparent; color: var(--paper-ink); }

/* hanging price tag: paper tag with a pointed end, eyelet and string up to a brass rail */
.ph-rail { position: relative; padding-top: 22px; }
.ph-rail::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(var(--brass), #7D6328); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); border-radius: 2px; }
.ph-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px) { .ph-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ph-tags { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ph-tag {
  --tilt: -1.5deg;
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer; border: 0; padding: 12px 10px 10px 24px; color: var(--paper-ink);
  background: var(--paper); font: 400 13px/1.35 var(--mono);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
  transform: rotate(var(--tilt)); transform-origin: 50% -20px; transition: transform .2s ease, background .15s;
}
.ph-tags > li { position: relative; }
.ph-tags > li::before { content: ''; position: absolute; left: 50%; top: -30px; height: 34px; width: 1px; background: rgba(230, 240, 234, .45); transform: rotate(calc(var(--tilt, -1.5deg) * -2)); transform-origin: top; }
.ph-tags > li::after { content: ''; position: absolute; left: calc(50% - 3px); top: -33px; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); box-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.ph-tags > li:nth-child(3n+2) { --tilt: 1.2deg; }
.ph-tags > li:nth-child(3n) { --tilt: -.6deg; }
.ph-tag::before { content: ''; position: absolute; left: 6px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--night); box-shadow: 0 0 0 2px #CDBE95; }
.ph-tag:hover { transform: rotate(0deg) translateY(2px); }
.ph-tag[aria-pressed="true"] { background: #FFF3D6; box-shadow: inset 0 0 0 2px var(--paper-red); }
.ph-tag[aria-pressed="true"] .ph-tag-t { color: var(--paper-red); }
.ph-tag[disabled] { cursor: not-allowed; opacity: .55; }
.ph-tag-t { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-weight: 700; font-size: 17px; letter-spacing: .03em; }
.ph-tag-t small { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--paper-ink-2); }
.ph-tag-n { display: block; font-size: 11px; color: var(--paper-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-tag-p { display: block; font-size: 16px; font-weight: 700; margin-top: 4px; }
.ph-tag-m { display: block; font-size: 11px; color: var(--paper-ink-2); border-top: 1px dashed var(--paper-line); margin-top: 4px; padding-top: 4px; }
@media (prefers-reduced-motion: reduce) { .ph-tag { transform: none; transition: none; } .ph-tag:hover { transform: none; } .ph-tags > li::before { transform: none; } }

/* punch card */
.ph-punch { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; background: var(--paper); color: var(--paper-ink); padding: 14px 16px; border-radius: 2px; position: relative; }
.ph-punch::after { content: ''; position: absolute; inset: 5px; border: 1px solid var(--paper-line); pointer-events: none; }
.ph-punch-holes { display: flex; gap: 8px; }
.ph-punch-hole { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--paper-ink-2); }
.ph-punch-hole.on { border: 0; background: var(--night); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .8), 0 0 0 2px #D9CBA6; }
.ph-punch-t { font-size: 12px; line-height: 1.4; }
.ph-punch-t b { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-red); }

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

/* ── touch targets: 40px minimum on touch / narrow screens ── */
@media (max-width: 720px), (pointer: coarse) {
  .ph-btn-sm { min-height: 40px; }
  .ph-icon-btn, .ph-dialog .icon-btn { width: 40px; height: 40px; }
  .ph-ca-chip { height: 40px; }
  .ph-foot ul a { display: inline-block; min-height: 40px; line-height: 40px; }
}