/* GOLDSMITH — app.css (shell). Tokens from mockup/v1/DESIGN.md §0–§5 and §10.
   PAGE SCALE (LUAT 50): the build width is 1920. One page unit --u = 100vw / 1920, so at 1920 every
   calc(N * var(--u)) equals N CSS px = the mockup 1:1; 1280–2560 scale in proportion. No max-width cap.
   Write every size in a route as calc(N * var(--u)) with N = the @1920 value from DESIGN.md.
   Text sizes use the --fs-* tokens (never below 12px). Hairlines use the --rule-* tokens (max(1px, …)).
   BORDERS (LUAT 56): route files contain ZERO border/outline declarations — use the .rule-* classes below.
   FRAME (LUAT 53): <main class="frame"> owns the page ground and the 60/66 gutters; routes never set their
   own max-width, side padding or page background. */

:root {
  --u: calc(100vw / 1920);

  /* colour (DESIGN.md §3) */
  --paper: #2E0C1B;
  --chrome: #2A0E22;
  --surface: #331424;
  --surface-deep: #240817;
  --ivory: #F2EADC;
  --ivory-nav: #F4E9DA;
  --muted: #AB8095;
  --nav-ink: #D8C7D0;
  --footer-ink: #D8C7D0;
  --gold: #D4A017;
  --gold-light: #EBD197;
  --gold-link: #C19243;
  --gold-frame: #F8D07A;
  --danger: #BB3642;
  --gold-fill: linear-gradient(90deg, #DBA141 0%, #E9B55C 50%, #ECBD69 100%);
  --gold-fill-hover: linear-gradient(90deg, #E2AB4E 0%, #EFC06B 50%, #F3CB80 100%);

  /* fonts (DESIGN.md §2) */
  --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --font-body: "Libre Caslon Text", Georgia, serif;
  --font-mono: "Reddit Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* type scale, @1920 px values from DESIGN.md §2 */
  --fs-display: calc(96 * var(--u));   /* cover headline, route openers (cap 96) */
  --fs-title: calc(88 * var(--u));     /* route title */
  --fs-section: calc(64 * var(--u));   /* section titles 56–72 */
  --fs-numeral: calc(96 * var(--u));   /* THE SCALE numeral (Reddit Mono) */
  --fs-receipt: calc(80 * var(--u));   /* THE NOTE numeral (Caslon Display) 72–88 */
  --fs-lede: max(14px, calc(36 * var(--u)));
  --fs-body: max(12px, calc(23 * var(--u)));
  --fs-row: max(12px, calc(20 * var(--u)));
  --fs-kicker: max(12px, calc(20 * var(--u)));
  --fs-source: max(12px, calc(15 * var(--u)));
  --fs-nav: max(12px, calc(15 * var(--u)));
  --fs-foot: max(12px, calc(13 * var(--u)));
  --fs-foot-mono: max(12px, calc(12 * var(--u)));

  /* page frame (USER FIX: 60 left / 66 right @1920, container 1794) */
  --gutter-l: calc(60 * var(--u));
  --gutter-r: calc(66 * var(--u));
  --gap-section: calc(72 * var(--u));  /* section gap 48–96 (WEB_RULES #22) */

  /* rules (DESIGN.md §4b, widths @1920; hairlines never under 1px, doubles never under 3px) */
  --rule-hair: max(1px, calc(1.1 * var(--u)));
  --rule-row-w: max(1px, calc(1.6 * var(--u)));
  --rule-2: max(1px, calc(2.3 * var(--u)));
  --rule-chip-w: max(1px, calc(2.2 * var(--u)));
  --rule-head-w: max(1px, calc(2.8 * var(--u)));
  --rule-toggle-w: max(1px, calc(3.4 * var(--u)));
  --rule-dbl: max(3px, calc(4.8 * var(--u)));
  --rule-dbl-tag: max(3px, calc(3.7 * var(--u)));
  --rule-dbl-mandate: max(3px, calc(4.6 * var(--u)));
  --rule-dbl-mini: max(3px, calc(4.1 * var(--u)));
  --rule-dbl-event: max(3px, calc(4.4 * var(--u)));
  --rule-dbl-drawer-head: max(3px, calc(4 * var(--u)));
  --rule-dbl-column: max(3px, calc(4.2 * var(--u)));
  --rule-ledger-w: max(1px, calc(1.3 * var(--u)));
  --rule-foot-w: max(3px, calc(3 * var(--u)));

  --rule-nav-c: #A98A9A;
  --rule-ivory-c: #DAC9C6;
  --rule-wine-c: #845A6A;
  --rule-column-c: #CEB9B5;
  --rule-section-c: #C6ADB0;
  --rule-input-c: #987368;
  --rule-button-c: #DECE9D;
  --rule-chip-c: #805364;
  --rule-code-c: #97786D;
  --rule-drawer-c: #8B6E71;
  --rule-drawer-on-c: #DFC15C;
  --rule-csv-c: #725058;
  --rule-ledger-c: rgba(132, 90, 106, .6);
  --rule-foot-c: #B99AA9;
  --rule-foot-col-c: #8F6F7D;

  /* motion (DESIGN.md §10): one easing family, three durations + the scale's settle */
  --ease-ink: cubic-bezier(.22, .61, .36, 1);
  --ease-settle: linear(0, .42 14%, .86 28%, 1.1 42%, 1.12 48%, 1.04 60%, .98 72%, 1.005 86%, 1);
  --t-flip: 180ms;
  --t-print: 300ms;
  --t-settle: 400ms;
  --t-draw: 600ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip;
  color: var(--ivory); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.35;
  background-color: var(--paper);
  /* very fine paper grain, <= 3 % (DESIGN.md §4) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .86 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; }
table { border-collapse: collapse; width: 100%; }
td, th, .num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: max(2px, calc(2 * var(--u))) solid var(--gold); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--chrome); padding: 8px 12px; }
[hidden] { display: none !important; }

/* ---------- page frame (one container for every route) ---------- */
main.frame {
  flex: 1; width: 100%;
  padding: 0 var(--gutter-r) 0 var(--gutter-l);
  background: transparent; /* page ground = body paper, never set per route */
}
main.frame:focus { outline: none; }

/* ---------- nav (chrome/nav.html, scaled; CA + BUY removed by user) ---------- */
.site-nav {
  position: relative; z-index: 20;
  height: calc(72 * var(--u));
  background: var(--chrome); color: var(--ivory-nav);
  display: grid; grid-template-columns: calc(360 * var(--u)) 1fr calc(520 * var(--u)); align-items: center;
  padding: 0 calc(52 * var(--u));
  font-family: var(--font-body); font-size: var(--fs-nav); letter-spacing: .01em; white-space: nowrap;
}
.brand {
  display: flex; align-items: center; gap: calc(14 * var(--u)); text-decoration: none; color: var(--ivory-nav);
  font-family: var(--font-mono); font-weight: 500; letter-spacing: .16em;
}
.brand-mark { height: calc(46 * var(--u)); min-height: 30px; width: auto; }
.brand-word { font-size: max(14px, calc(34 * var(--u))); line-height: 1; letter-spacing: .12em; } /* mark ≈ 1.6× the wordmark cap height (LUAT 56) */
.nav-links { position: relative; display: flex; justify-content: center; gap: calc(36 * var(--u)); }
.nav-links a { color: var(--nav-ink); text-decoration: none; padding-bottom: calc(5 * var(--u)); transition: color var(--t-flip) var(--ease-ink); }
.nav-links a:hover { color: var(--ivory-nav); }
.nav-links a.is-active { color: var(--gold-light); }
/* the one moving line of a route change: a gold rule that slides under the active link */
.nav-ink {
  position: absolute; left: 0; bottom: 0; width: 100px; height: var(--rule-hair);
  background: var(--gold); transform-origin: 0 50%; transform: translateX(var(--ink-x, 0)) scaleX(var(--ink-s, 0));
  transition: transform var(--t-print) var(--ease-ink); pointer-events: none;
}
.tools { display: flex; justify-content: flex-end; align-items: center; gap: calc(21 * var(--u)); }
.tools a { color: var(--nav-ink); text-decoration: none; }
.tools a:hover { color: var(--ivory-nav); }
a.is-soon { opacity: .55; cursor: default; }
.nav-toggle { display: none; }
.nav-drawer { display: none; }

/* ---------- footer (chrome/footer.html, scaled + mark + launch.json cells) ---------- */
.site-foot {
  min-height: calc(104 * var(--u));
  background: var(--chrome); color: var(--footer-ink);
  display: grid; grid-template-columns: 1.15fr 1.9fr .95fr; gap: calc(26 * var(--u)); align-items: center;
  padding: calc(18 * var(--u)) calc(52 * var(--u));
  font-family: var(--font-body); font-size: var(--fs-foot); line-height: 1.45;
}
.site-foot > .rule-foot-col { padding-left: calc(26 * var(--u)); }
.foot-brand { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.foot-mark { height: calc(40 * var(--u)); min-height: 26px; width: auto; flex: none; }
.site-foot strong { font-family: var(--font-mono); font-weight: 500; color: var(--ivory-nav); letter-spacing: .12em; font-size: var(--fs-foot-mono); }
.site-foot .meta { font-family: var(--font-mono); font-size: var(--fs-foot-mono); color: var(--gold-light); }
.site-foot a { text-decoration: none; }
.site-foot a:not(.is-soon):hover { text-decoration: underline; }
.ca-copy { background: none; padding: 0 0 0 .4em; color: var(--gold-light); cursor: pointer; font-family: var(--font-mono); font-size: inherit; text-decoration: underline; border: 0; }
.ca-copy:disabled { opacity: .55; cursor: default; text-decoration: none; }

/* ---------- RULES: the only place borders are drawn (DESIGN.md §4b) ---------- */
.rule-nav { border-bottom: var(--rule-hair) solid var(--rule-nav-c); }
.rule-foot { border-top: var(--rule-foot-w) double var(--rule-foot-c); }
.rule-foot-col { border-left: var(--rule-hair) solid var(--rule-foot-col-c); }

.rule-double { border-bottom: var(--rule-dbl) double var(--rule-ivory-c); }
.rule-double-top { border-top: var(--rule-dbl) double var(--rule-ivory-c); }
.rule-section { border-bottom: var(--rule-hair) solid var(--rule-section-c); }
.rule-row { border-bottom: var(--rule-row-w) solid var(--rule-wine-c); }
.rule-row-head { border-bottom: var(--rule-head-w) solid var(--rule-ivory-c); }

/* input frame wraps the whole control; the field inside draws nothing */
.rule-input {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  min-height: calc(73 * var(--u)); padding: 0 calc(20 * var(--u));
  background: var(--surface); border: var(--rule-2) solid var(--rule-input-c); border-radius: 0;
  transition: border-color var(--t-flip) var(--ease-ink);
}
.rule-input:focus-within { border-color: var(--gold); }
.rule-input.is-invalid, .rule-input[aria-invalid="true"] { border-color: var(--danger); }
.rule-input input, .rule-input textarea, .rule-input select {
  flex: 1; min-width: 0; width: 100%; padding: 0; margin: 0; background: transparent;
  border: 0; outline: 0; font-family: var(--font-mono); font-size: inherit; color: var(--ivory);
}
.rule-input input::placeholder, .rule-input textarea::placeholder { color: var(--muted); opacity: 1; }

.rule-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: calc(73 * var(--u)); padding: 0 calc(28 * var(--u));
  background: transparent; color: var(--ivory); font-family: var(--font-body); text-decoration: none; cursor: pointer;
  border: var(--rule-2) solid var(--rule-button-c); border-radius: 0;
  transition: border-color var(--t-flip) var(--ease-ink), color var(--t-flip) var(--ease-ink);
}
.rule-button:hover { border-color: var(--gold-light); color: var(--gold-light); }
/* stacked framed items share one edge, never two */
.rule-stack > * + * { border-top-width: 0; }
.rule-stack-h > * + * { border-left-width: 0; }

.rule-chip { border: var(--rule-chip-w) solid var(--rule-chip-c); border-radius: calc(2 * var(--u)); }
.rule-chip.is-active, .rule-chip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-light); }

.rule-toggle { display: inline-flex; border: var(--rule-toggle-w) solid var(--rule-input-c); border-radius: calc(2 * var(--u)); }
.rule-toggle > * + * { border-left: var(--rule-toggle-w) solid var(--rule-input-c); }
.rule-toggle > .is-active, .rule-toggle > [aria-pressed="true"] { color: var(--gold-light); background: rgba(212, 160, 23, .14); }

.rule-tag { border: var(--rule-dbl-tag) double var(--gold); }
.rule-receipt { border: var(--rule-dbl) double var(--gold-frame); }
.rule-code { border: var(--rule-2) solid var(--rule-code-c); }
.rule-csv { border: var(--rule-2) solid var(--rule-csv-c); }
.rule-csv > * + * { border-top: var(--rule-2) solid var(--rule-csv-c); }
.rule-event-card { border: var(--rule-dbl-event) double var(--gold-frame); }
.rule-drawer { border: var(--rule-2) solid var(--rule-drawer-c); }
.rule-drawer.is-selected, .rule-drawer[aria-selected="true"], .rule-drawer[aria-pressed="true"] { border-color: var(--rule-drawer-on-c); }
.rule-drawer-head { border-top: var(--rule-dbl-drawer-head) double var(--rule-ivory-c); border-bottom: var(--rule-hair) solid var(--rule-ivory-c); } /* mockup: double above the drawer name (scales#12-14), single hairline below (#15 #16) */
.rule-drawer-head.is-winner { border-color: var(--gold); }
.rule-column { border-left: var(--rule-hair) solid var(--rule-column-c); }
.rule-column-double { border-left: var(--rule-dbl-column) double var(--rule-ivory-c); }
.rule-ledger-col { border-left: var(--rule-ledger-w) solid var(--rule-ledger-c); }

/* cut-corner sheets (mandate, mini cards): double frame + four diagonal corners */
.rule-mandate, .rule-card-mini { position: relative; --cut: calc(14 * var(--u)); }
.rule-card-mini { --cut: calc(8 * var(--u)); }
.rule-mandate { border: var(--rule-dbl-mandate) double var(--gold); }
.rule-card-mini { border: var(--rule-dbl-mini) double var(--gold); }
.rule-mandate::before, .rule-card-mini::before {
  content: ""; position: absolute; inset: calc(-1 * var(--rule-dbl-mandate)); pointer-events: none;
  background:
    linear-gradient(135deg, var(--paper) calc(50% - 1px), var(--gold) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) top left / var(--cut) var(--cut) no-repeat,
    linear-gradient(225deg, var(--paper) calc(50% - 1px), var(--gold) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) top right / var(--cut) var(--cut) no-repeat,
    linear-gradient(45deg, var(--paper) calc(50% - 1px), var(--gold) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) bottom left / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, var(--paper) calc(50% - 1px), var(--gold) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) bottom right / var(--cut) var(--cut) no-repeat;
}
.rule-card-mini::before { inset: calc(-1 * var(--rule-dbl-mini)); }

/* ---------- shared pieces (DESIGN.md §5) ---------- */
.kicker { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-kicker); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.source-line { font-family: var(--font-mono); font-size: var(--fs-source); color: var(--muted); }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.data-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; font-size: var(--fs-row); padding: calc(12 * var(--u)) 0; }
.data-row > :last-child { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: calc(80 * var(--u)); padding: 0 calc(48 * var(--u)); border: 0; border-radius: 0; cursor: pointer;
  background: var(--gold-fill); color: var(--paper); font-family: var(--font-body); font-size: max(14px, calc(26 * var(--u))); text-decoration: none;
}
.btn-gold:hover { background: var(--gold-fill-hover); }
.btn-gold:disabled, .btn-gold[aria-disabled="true"] { opacity: .4; cursor: default; }
.link-gold { position: relative; color: var(--gold-link); text-decoration: none; font-family: var(--font-body); }
.link-gold::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: var(--rule-hair); background: currentColor; transform-origin: 0 50%; transform: scaleX(.35); transition: transform var(--t-flip) var(--ease-ink); }
.link-gold:hover::after { transform: scaleX(1); }
.arrow { display: inline-block; transition: transform var(--t-flip) var(--ease-ink); }
a:hover > .arrow, button:hover > .arrow { transform: translateX(calc(4 * var(--u))); }
.is-danger { color: var(--danger); }
.art { margin: 0; position: relative; }
.art img, .art video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- motion (DESIGN.md §10) — transform/opacity only; app.js drives it ---------- */
/* route change (USER FIX R1): the next page is there in the click's frame; its ink settles from 70 % in 120 ms
   while the nav's gold rule slides. The old page is never blanked. */
main.frame.is-entering { animation: gs-page-in 120ms var(--ease-ink) both; }
@keyframes gs-page-in { from { opacity: .7; } to { opacity: 1; } }

/* Entrances run as keyframes that start only when an element enters the viewport (app.js adds .is-in).
   The resting state is always the final state, so a page that is never scrolled is complete. */
/* ink on the rule: a rule draws left -> right, then the ink under it appears */
[data-draw] { transform-origin: 0 50%; }
[data-draw].is-in { animation: gs-draw var(--t-draw) var(--ease-ink) both; }
@keyframes gs-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-reveal].is-in { animation: gs-ink-in var(--t-print) var(--ease-ink) var(--reveal-delay, 0ms) both; }
@keyframes gs-ink-in { from { opacity: 0; } to { opacity: 1; } }
/* SVG engraved strokes drawn in (put pathLength="1" and data-stroke on the path) */
.is-in [data-stroke], svg.is-in [data-stroke] { stroke-dasharray: 1; animation: gs-stroke var(--t-draw) var(--ease-ink) both; }
@keyframes gs-stroke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* the weigh-in: a balance beam / pan settles with one damped swing */
[data-tilt] { transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(var(--tilt, 0deg)); transition: transform var(--t-settle) var(--ease-settle); }
[data-drop] { transform: translateY(var(--drop, 0)); transition: transform var(--t-settle) var(--ease-settle); }

/* digit flip: each changed digit rolls up into place (180 ms) */
.gs-digit { display: inline-block; }
.gs-digit.is-flip { animation: gs-flip var(--t-flip) var(--ease-ink) both; }
@keyframes gs-flip { from { transform: translateY(.45em); opacity: 0; } to { transform: none; opacity: 1; } }
/* live tick: fresh ink dries (600 ms) */
.gs-digit.is-fresh { animation: gs-flip var(--t-flip) var(--ease-ink) both, gs-ink 600ms var(--ease-ink) both; }
@keyframes gs-ink { from { opacity: .45; } to { opacity: 1; } }

/* receipt prints top -> bottom, line by line (300 ms + 40 ms stagger) */
[data-print].is-in > * { animation: gs-print var(--t-print) var(--ease-ink) calc(var(--i, 0) * 40ms) both; }
@keyframes gs-print { from { opacity: 0; transform: translateY(-30%); } to { opacity: 1; transform: none; } }

/* grow-in: bars stack up from the baseline in four weights */
[data-grow] { transform-origin: 50% 100%; }
[data-grow].is-in { animation: gs-grow var(--t-draw) steps(4, end) calc(var(--i, 0) * 40ms) both; }
@keyframes gs-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

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

/* ---------- 1024–1279: same page, scaled; routes drop rails under the main column ---------- */
/* ---------- below 1024: mobile layout ---------- */
@media (max-width: 1023px) {
  :root {
    --u: clamp(.5px, calc(100vw / 1100), .9px);
    --gutter-l: 16px; --gutter-r: 16px;
    --fs-nav: 16px; --fs-foot: 13px; --fs-foot-mono: 12px;
  }
  .site-nav { height: 60px; grid-template-columns: 1fr auto; padding: 0 16px; }
  .brand-mark { height: 38px; min-height: 0; }
  .brand-word { font-size: 16px; }
  .nav-links, .tools { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--ivory-nav); cursor: pointer; }
  .nav-drawer:not([hidden]) {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 60px; z-index: 30;
    background: var(--chrome); padding: 8px 16px 20px; font-size: 20px;
  }
  .nav-drawer a { display: block; padding: 12px 0; color: var(--nav-ink); text-decoration: none; }
  .nav-drawer a.is-active { color: var(--gold-light); }
  .nav-drawer .drawer-tools { display: flex; gap: 24px; padding-top: 8px; font-size: 16px; }
  .site-foot { grid-template-columns: 1fr; gap: 16px; padding: 24px 16px; }
  .site-foot > .rule-foot-col { padding-left: 0; padding-top: 16px; }
  .rule-foot-col { border-left: 0; border-top: var(--rule-hair) solid var(--rule-foot-col-c); }
  .foot-mark { height: 36px; min-height: 0; }
}

/* ---------- wallet picker (wallet.js, USER FIX R1) — frames only through the .rule-* classes ---------- */
html.wp-open { overflow: hidden; }
.wp-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(20, 4, 13, .78); }
.wp-box { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--chrome); padding: 28px 32px 24px; }
.wp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.wp-head .kicker { margin: 0 0 6px; font-size: 13px; }
.wp-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.05; color: var(--ivory); }
.wp-close { min-height: 0; height: 38px; padding: 0 16px; font-size: 15px; cursor: pointer; }
.wp-list { list-style: none; margin: 0; padding: 0; }
.wp-item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px 4px; cursor: pointer; text-align: left; color: var(--ivory); transition: color var(--t-flip) var(--ease-ink); }
.wp-item:hover, .wp-item:focus-visible { color: var(--gold-light); }
.wp-item:hover .wp-logo { background: #FFFFFF; }
.wp-logo { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--ivory); transition: background var(--t-flip) var(--ease-ink); }
.wp-logo img { width: 36px; height: 36px; }
.wp-name { flex: 1; font-size: 20px; }
.wp-state { font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.wp-state.is-found { color: var(--gold-light); }
.wp-note { margin-top: 16px; font-size: 16px; line-height: 1.45; color: var(--nav-ink); }
.wp-note:empty { display: none; }
.wp-note strong { color: var(--ivory); font-weight: 400; }
.wp-note.is-warn strong { color: var(--gold-light); }
.wp-foot { margin: 18px 0 0; font-size: 13px; line-height: 1.5; }
@media (max-width: 560px) { .wp-box { padding: 20px 18px; } .wp-title { font-size: 28px; } }