/* ASSIGNEE — app.css (shell). Tokens from mockup/v1/DESIGN.md §0–§5 and §10 MOTION.
   SCALE (LUAT 50): --u = 1 CSS px of the 1920 mockup (set in index.html before first paint: viewport/1920 from 1024 up,
   0.75px below 1024). Write every size as calc(N * var(--u)) with N = CSS px at 1920 (mockup px × 1.1483).
   BORDERS (LUAT 56): only this file declares border/outline. Routes use the .rule-* classes; never both boxes on a shared edge. */

:root {
  --u: 1px;
  /* colour (DESIGN.md §3) */
  --paper: #E1EED5;          /* page ground, every route (LOCKED) */
  --nav-band: #E3EFD2;       /* chrome ground (chrome/nav.html + footer.html) */
  --surface: #EAF2DE;
  --ink: #04100D;
  --ink-chrome: #10291F;     /* chrome text (chrome files) */
  --ink-button: #1E3228;
  --muted: #425241;
  --rule: #5B6C5F;
  --rule-soft: #B4C4B6;
  --rule-strong: #2E3B31;
  --rule-chrome: #52685A;
  --accent-red: #D00504;
  --accent-orange: #F7981F;
  --bar-sage: #B7C3A7;
  --split-creator: #D52730;
  --split-holders: #EA7016;
  --split-buyback: #F18C3B;
  --split-liquidity: #EEB95E;
  --split-track: #D8E1CF;
  --selected-fill: #FBDED2;
  --success-fill: #D0E3C3;
  --success-ink: #113E12;
  --success-rule: #83A87B;
  --mark-a: #D00000;
  --mark-b: #EE9B00;

  /* type (DESIGN.md §2) */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, monospace;
  --fs-hero: calc(55 * var(--u));
  --fs-title: calc(57 * var(--u));
  --fs-section: calc(44 * var(--u));
  --fs-huge: calc(74 * var(--u));
  --fs-lede: max(15px, calc(23 * var(--u)));
  --fs-num: max(16px, calc(33 * var(--u)));
  --fs-eyebrow: max(12px, calc(21 * var(--u)));
  --fs-ui: max(12px, calc(17 * var(--u)));
  --fs-cell: max(12px, calc(16 * var(--u)));
  --fs-small: max(12px, calc(13 * var(--u)));

  /* frame (LUAT 53, frame.json: gutter 47 / 47, container 1825 @1920, no sidebar) */
  --gutter: calc(47 * var(--u));
  --gap-section: calc(64 * var(--u));      /* section gap 48–96 (WEB_RULES #22) */
  --radius-card: calc(10 * var(--u));
  --radius-control: calc(4 * var(--u));

  /* borders (DESIGN.md §4 + §4b BORDER TABLE) — hairlines never vanish */
  --rule-panel: max(1px, calc(2.3 * var(--u)));
  --rule-hair: max(1px, calc(1.1 * var(--u)));
  --rule-chrome-w: max(1px, calc(1 * var(--u)));
  --rule-double-gap: calc(4 * var(--u));

  /* motion (DESIGN.md §10): one easing, one duration family */
  --ease-settle: cubic-bezier(.22, .8, .24, 1);
  --t-1: 180ms;
  --t-2: 320ms;
  --t-3: 520ms;
}
@media (max-width: 1023px) { :root { --gutter: 16px; --gap-section: 40px; } }

/* ───────── 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;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-ui); line-height: 1.4; letter-spacing: -0.01em;
  overflow-x: hidden;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
table { border-collapse: collapse; width: 100%; }
td, th { font-variant-numeric: tabular-nums; text-align: left; font-weight: inherit; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
/* global button reset — border:0 (no UA frame ever leaks onto a route) */
button {
  border: 0; margin: 0; padding: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; cursor: pointer; text-align: inherit;
}
input, select, textarea {
  border: 0; outline: 0; margin: 0; background: transparent; color: inherit;
  font: inherit; letter-spacing: inherit; min-width: 0;
}
[hidden] { display: none !important; }
:focus-visible { outline: max(2px, calc(2 * var(--u))) solid var(--accent-red); outline-offset: max(2px, calc(2 * var(--u))); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; }
::selection { background: var(--selected-fill); color: var(--ink); }

/* ───────── type classes (DESIGN.md §2) ───────── */
.t-hero { font: 700 var(--fs-hero)/1.05 var(--font-display); letter-spacing: 0; }
.t-title { font: 700 var(--fs-title)/1.0 var(--font-display); letter-spacing: 0; }
.t-section { font: 700 var(--fs-section)/1.05 var(--font-display); letter-spacing: 0; }
.t-lede { font: 400 var(--fs-lede)/1.3 var(--font-display); letter-spacing: -0.016em; }
.t-name { font: 700 calc(36 * var(--u))/1.05 var(--font-display); letter-spacing: 0; }
.t-num { font: 400 var(--fs-num)/1.0 var(--font-mono); letter-spacing: 0.034em; font-variant-numeric: tabular-nums; }
.t-huge { font: 700 var(--fs-huge)/1.0 var(--font-display); }
.t-huge .t-amount, .t-amount { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.t-eyebrow { font: 500 var(--fs-eyebrow)/1.2 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.t-ui { font: 500 var(--fs-ui)/1.4 var(--font-body); letter-spacing: -0.03em; }
.t-body { font: 400 var(--fs-ui)/1.45 var(--font-body); letter-spacing: -0.01em; }
.t-cell { font: 400 var(--fs-cell)/1.35 var(--font-mono); font-variant-numeric: tabular-nums; }
.t-small { font: 400 var(--fs-small)/1.35 var(--font-body); color: var(--muted); }
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-muted { color: var(--muted); }
.t-red { color: var(--accent-red); }

/* ───────── page frame (LUAT 53) — every route lives inside this; routes never add max-width/side padding/ground ───────── */
main.page-frame {
  flex: 1; width: 100%; padding: 0 var(--gutter);
  background: var(--paper);
}

/* ───────── CHROME: nav (copied from mockup/v1/chrome/nav.html — sizes at 1920, scaled by --u) ───────── */
.as-nav {
  position: relative; z-index: 20;
  height: calc(100 * var(--u)); padding: 0 calc(48 * var(--u));
  display: flex; align-items: center; gap: calc(32 * var(--u)); white-space: nowrap;
  background: var(--nav-band); color: var(--ink-chrome); font-family: var(--font-body);
}
.as-nav a { color: var(--ink-chrome); font-size: max(12px, calc(15 * var(--u))); line-height: calc(100 * var(--u)); }
.as-nav .brand { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); width: calc(380 * var(--u)); line-height: 1; flex: none; }
.as-nav .brand img { width: calc(52 * var(--u)); height: calc(52 * var(--u)); min-width: 40px; min-height: 40px; object-fit: contain; }
.as-nav .brand span { font: 600 max(16px, calc(22 * var(--u)))/1 var(--font-body); letter-spacing: .17em; }
.as-nav .routes { display: flex; align-items: center; gap: calc(32 * var(--u)); height: 100%; }
.as-nav .routes a { position: relative; display: inline-block; height: 100%; }
.as-nav .routes a::after {          /* active = 3 px accent-red underline, drawn like a ruling pen */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: max(2px, calc(3 * var(--u)));
  background: var(--accent-red); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-2) var(--ease-settle);
}
.as-nav .routes a.is-active { font-weight: 600; }
.as-nav .routes a.is-active::after { transform: scaleX(1); }
.as-nav .routes a:not(.is-active):hover::after { transform: scaleX(1); background: var(--rule-chrome); height: max(1px, calc(1.5 * var(--u))); }
.as-nav .spacer { flex: 1; }
.as-nav .actions { display: flex; align-items: center; gap: calc(32 * var(--u)); height: 100%; }
.as-nav .utility { font-size: max(12px, calc(14 * var(--u))); }
.as-nav a[aria-disabled="true"], .as-footer a[aria-disabled="true"] { cursor: default; }
.nav-menu { display: none; }
.nav-drawer { display: none; }

/* ───────── CHROME: footer (mockup/v1/chrome/footer.html + brand mark, LUAT 56) ───────── */
.as-footer {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: calc(24 * var(--u));
  min-height: calc(64 * var(--u)); padding: calc(5 * var(--u)) calc(48 * var(--u)) calc(4 * var(--u));
  background: var(--nav-band); color: var(--ink-chrome); font-family: var(--font-body);
}
.as-footer .row { display: flex; align-items: center; gap: calc(24 * var(--u)); font-size: max(12px, calc(13 * var(--u))); line-height: calc(24 * var(--u)); white-space: nowrap; min-width: 0; }
.as-footer .source { font-size: max(12px, calc(12 * var(--u))); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.as-footer .spacer { flex: 1; }
.as-footer .ca { font-family: var(--font-mono); padding: calc(3 * var(--u)) calc(12 * var(--u)); display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.as-footer .ca-copy { font-family: var(--font-mono); text-transform: uppercase; }
.as-footer .boundary { margin-top: calc(3 * var(--u)); font-size: max(12px, calc(12 * var(--u))); line-height: calc(18 * var(--u)); }
.as-footer .foot-mark { width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 32px; min-height: 32px; object-fit: contain; }

/* ───────── BORDER CLASSES (DESIGN.md §4b; widths from the table only) ───────── */
.rule-nav { border-bottom: var(--rule-chrome-w) solid var(--rule-chrome); }
.rule-footer { border-top: var(--rule-chrome-w) solid var(--rule-chrome); }
.rule-panel { border: var(--rule-panel) solid var(--rule); border-radius: var(--radius-card); }          /* panels, cards */
.rule-panel-soft { border: var(--rule-panel) solid var(--rule-soft); border-radius: var(--radius-card); } /* panels measured rule-soft */
.rule-card { border: var(--rule-panel) solid var(--rule); border-radius: var(--radius-card); }
.rule-box { border: var(--rule-panel) solid var(--rule); }                                              /* square boxes (contract box, thumb, strip) */
.rule-box-soft { border: var(--rule-panel) solid var(--rule-soft); }
.rule-double {                           /* certificate / lot card / deed / seat card: outer 2.3 + inner 1.1 inset 4 */
  position: relative; border: var(--rule-panel) solid var(--rule); border-radius: var(--radius-card);
}
.rule-double::after {
  content: ''; position: absolute; inset: var(--rule-double-gap); pointer-events: none;
  border: var(--rule-hair) solid var(--rule); border-radius: calc(var(--radius-card) - var(--rule-double-gap));
  transition: border-color var(--t-1) var(--ease-settle);
}
.rule-double.is-soft { border-color: var(--rule-soft); }
.rule-double.is-soft::after { border-color: var(--rule-soft); }
.rule-double.is-ink, .rule-double.is-ink::after { border-color: var(--ink); }
.rule-input {                            /* the frame wraps the WHOLE control incl. its unit suffix */
  display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: 0 calc(14 * var(--u)); min-height: calc(50 * var(--u));
  border: var(--rule-panel) solid var(--rule); border-radius: var(--radius-control); background: var(--surface);
  transition: border-color var(--t-1) var(--ease-settle);
}
.rule-input > input, .rule-input > select, .rule-input > textarea { flex: 1 1 auto; width: 100%; align-self: stretch; }
.rule-input:focus-within { border-color: var(--ink); }
.rule-input.is-error { border-color: var(--accent-red); }
.rule-button { border: var(--rule-panel) solid var(--rule); border-radius: var(--radius-control); }        /* outline buttons */
.rule-button-ink { border: var(--rule-panel) solid var(--ink); border-radius: var(--radius-control); }
.rule-segment { border: var(--rule-panel) solid var(--rule); border-radius: var(--radius-control); overflow: hidden; }
.rule-segment > * + * { border-left: var(--rule-hair) solid var(--rule); }
.rule-selected { border: var(--rule-panel) solid var(--accent-red); }
.rule-selected-ink { border: var(--rule-panel) solid var(--ink); }
.rule-success { border: var(--rule-panel) solid var(--success-rule); border-radius: var(--radius-control); }
.rule-row { border-bottom: var(--rule-hair) solid var(--rule-soft); }                 /* table rows, list rows */
.rule-row-top { border-top: var(--rule-hair) solid var(--rule-soft); }
.rule-rows > * + * { border-top: var(--rule-hair) solid var(--rule-soft); }          /* row stack: one line between rows */
.rule-head { border-bottom: var(--rule-hair) solid var(--rule); }                     /* table header underline */
.rule-divider { border-bottom: var(--rule-panel) solid var(--rule); }                 /* band divider under a title */
.rule-divider-top { border-top: var(--rule-panel) solid var(--rule); }
.rule-vline { border-left: var(--rule-hair) solid var(--rule-soft); }                 /* column divider / filter rail rule */
.rule-vline-strong { border-left: var(--rule-panel) solid var(--rule); }
.rule-bar-left { border-left: max(3px, calc(4 * var(--u))) solid var(--accent-red); } /* selected row marker */
/* shared edge drawn ONCE: the lower / right box of a pair drops that side */
.rule-join-top { border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.rule-join-left { border-left: 0 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.rule-join-bottom { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rule-join-right { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rule-none { border: 0 !important; }
/* stamp ring (the registrar's round stamp) — ring is a border, the mark inside is the brand file */
.rule-stamp { border: max(2px, calc(3 * var(--u))) solid var(--accent-red); border-radius: 50%; }
.rule-stamp-inner { border: var(--rule-hair) solid var(--accent-red); border-radius: 50%; }

/* ───────── shared controls ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  min-height: calc(48 * var(--u)); padding: 0 calc(22 * var(--u)); border-radius: var(--radius-control);
  font: 600 var(--fs-ui)/1 var(--font-body); letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color var(--t-1) var(--ease-settle), color var(--t-1) var(--ease-settle);
}
.btn-ink { background: var(--ink-button); color: var(--paper); }
.btn-ink:hover { background: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--surface); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn .arrow { display: inline-block; transition: transform var(--t-1) var(--ease-settle); }
.btn:hover .arrow, a:hover > .arrow { transform: translateX(calc(4 * var(--u))); }
.segmented { display: inline-flex; }
.segmented > button { padding: 0 calc(18 * var(--u)); min-height: calc(46 * var(--u)); font: 500 var(--fs-ui)/1 var(--font-body); }
.segmented > button[aria-pressed="true"], .segmented > button.is-selected { background: var(--ink-button); color: var(--paper); }
.surface { background: var(--surface); }
.chip { display: inline-flex; align-items: center; min-height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: 999px; font: 500 var(--fs-small)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.pen-link { position: relative; display: inline-block; }
.pen-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.12em; height: max(1px, calc(1.2 * var(--u))); background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-1) var(--ease-settle); }
.pen-link:hover::after { transform: scaleX(1); }
.table-scroll { overflow-x: auto; max-width: 100%; }
figure.art { position: relative; overflow: hidden; }
figure.art img, figure.art video { width: 100%; height: 100%; object-fit: cover; }

/* ───────── MOTION (DESIGN.md §10 — the transfer room: registrar's stamp + ruling pen) ───────── */
/* stamp: pressed onto the paper once — lands tilted, bites, settles; ink halo fades */
[data-stamp] { --stamp-rot: -8deg; transform: rotate(var(--stamp-rot)); }
[data-stamp].is-stamped { animation: as-stamp var(--t-3) var(--ease-settle) both; }
@keyframes as-stamp {
  0% { opacity: 0; transform: rotate(calc(var(--stamp-rot) - 9deg)) scale(1.32); }
  55% { opacity: 1; transform: rotate(calc(var(--stamp-rot) + 1deg)) scale(.95); }
  78% { transform: rotate(var(--stamp-rot)) scale(1.02); }
  100% { opacity: 1; transform: rotate(var(--stamp-rot)) scale(1); }
}
/* ruling pen: rules, underlines, horizontal bars draw left → right */
[data-draw].is-drawing { animation: as-rule var(--t-3) var(--ease-settle) both; transform-origin: left center; }
@keyframes as-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* ledger entries: bars / rows are entered one after another (day by day) */
[data-grow] > * { transform-origin: center bottom; }
[data-grow="x"] > * { transform-origin: left center; }
[data-grow].is-growing > * { animation: as-grow-y var(--t-2) var(--ease-settle) both; animation-delay: calc(var(--i, 0) * 40ms); }
[data-grow="x"].is-growing > * { animation-name: as-grow-x; animation-duration: 420ms; }
@keyframes as-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes as-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* filed: a sheet laid on the desk — slides a little and squares up (never hidden at rest) */
[data-filed].is-filing { animation: as-lay var(--t-3) var(--ease-settle) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes as-lay { from { opacity: 0; transform: translateY(calc(14 * var(--u))) rotate(-0.6deg); } to { opacity: 1; transform: none; } }
/* sheet: quick look / deed draft / deed slide up out of the tray */
[data-sheet].is-open { animation: as-sheet 250ms var(--ease-settle) both; }
@keyframes as-sheet { from { opacity: 0; transform: translateY(calc(28 * var(--u))); } to { opacity: 1; transform: none; } }
/* numbering machine: count-up clicks forward; live block ticks advance one click */
[data-countup], [data-tick] { display: inline-block; font-variant-numeric: tabular-nums; }
.is-click { animation: as-click 90ms steps(2, end) both; }
@keyframes as-click { from { transform: translateY(-0.14em); } to { transform: none; } }
/* route change: the next file is laid on the desk */
/* route change is instant (USER_FIXES_R1): the next file is on the desk in the click frame; no page fade, only a 100 ms settle */
main.is-leaving { opacity: 1; }
main.is-entering { animation: as-enter 100ms var(--ease-settle) both; }
@keyframes as-enter { from { transform: translateY(calc(4 * var(--u))); } to { transform: none; } }
/* hover on framed cards: the inner rule darkens (DESIGN.md §5) */
a.rule-double:hover::after, .rule-double.is-hoverable:hover::after { border-color: var(--ink); }

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

/* ───────── below 1024: mobile shell (390 = no horizontal scroll) ───────── */
@media (max-width: 1023px) {
  .as-nav { height: 64px; padding: 0 16px; gap: 12px; }
  .as-nav .brand { width: auto; }
  .as-nav .brand img { width: 40px; height: 40px; }
  .as-nav .brand span { font-size: 16px; }
  .as-nav .routes, .as-nav .actions { display: none; }
  .as-nav .spacer { display: none; }
  .nav-menu {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto; height: 40px; padding: 0 14px;
    font: 600 14px/1 var(--font-body); color: var(--ink-chrome);
  }
  .nav-menu-bars { width: 18px; height: 12px; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
  .nav-drawer {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 64px; z-index: 30;
    padding: 8px 16px 16px; background: var(--nav-band);
  }
  .nav-drawer[hidden] { display: none !important; }
  .nav-drawer a { display: block; padding: 12px 0; font: 500 16px/1.3 var(--font-body); color: var(--ink-chrome); }
  .nav-drawer a.is-active { font-weight: 700; color: var(--accent-red); }
  .nav-drawer .drawer-actions { display: flex; gap: 24px; padding-top: 8px; }
  .as-footer { grid-template-columns: 1fr; row-gap: 12px; padding: 16px; }
  .as-footer .row { flex-wrap: wrap; white-space: normal; gap: 8px 16px; line-height: 1.5; }
  .as-footer .source { overflow: visible; white-space: normal; flex-basis: 100%; }
  .as-footer .spacer { display: none; }
  .as-footer .boundary { line-height: 1.5; }
}
/* between 1024 and 1440 (12px floor) the long sources line may wrap instead of overflowing */
@media (min-width: 1024px) and (max-width: 1439px) {
  .as-footer .row { white-space: normal; flex-wrap: wrap; }
}
/* #/seat (hydrate-seat): ink hairlines, chart grid, title spine + rings, diagram node, certificate hairline, deed 9-slice frame */ .rule-head-ink { border-bottom: var(--rule-hair) solid var(--ink); } .rule-vline-ink { border-left: var(--rule-hair) solid var(--ink); } .rule-dash { border-bottom: var(--rule-hair) dashed var(--rule-soft); } .rule-spine { border-left: var(--rule-panel) solid var(--ink-button); } .rule-ring { border: var(--rule-panel) solid var(--ink-button); border-radius: 50%; } .rule-node { border: max(1px, calc(1.6 * var(--u))) solid var(--ink); border-radius: 50%; } .rule-cert { border: var(--rule-hair) solid var(--rule); border-radius: calc(6 * var(--m, var(--u))); } .rule-deed-frame { border-style: solid; border-width: calc(17 * var(--m, var(--u))); border-image: url(art/seat-certificate.webp) 140 fill / calc(17 * var(--m, var(--u))) / 0 stretch; }
/* #/list (hydrate-list): step discs, offer radios + rows, status pills, recipient nodes (lit = red), lot-card double frame (hover: inner rule to ink) */ .list .rule-step, .list .rule-radio, .list .rule-node { border: max(1px, calc(1.8 * var(--m, var(--u)))) solid var(--ink); border-radius: 50%; } .list .rule-node-red { border: max(1px, calc(1.8 * var(--m, var(--u)))) solid #E8553B; border-radius: 50%; } .list .rule-offer-row { border: var(--rule-panel) solid var(--rule); border-radius: calc(6 * var(--m, var(--u))); } .list .rule-offer-row-sel { border: var(--rule-panel) solid var(--ink); border-radius: calc(6 * var(--m, var(--u))); } .list .rule-pill { border: var(--rule-hair) solid #A9B8A8; border-radius: 999px; } .list .rule-pill-ok { border: var(--rule-hair) solid #8DBB82; border-radius: 999px; } .list .rule-card-double { border: var(--rule-panel) solid var(--rule); border-radius: calc(9 * var(--m, var(--u))); } .list .rule-card-double::after { content: ''; position: absolute; inset: calc(4.4 * var(--m, var(--u))); pointer-events: none; border: var(--rule-hair) solid var(--rule); border-radius: calc(6 * var(--m, var(--u))); transition: border-color var(--t-1) var(--ease-settle); } .list [data-list-card]:hover .rule-card-double::after { border-color: var(--ink); }
/* #/mint (hydrate-mint): title rules inside step/field panels, SEAT tag, contract box + chair thumb, Argus split slip + perforation */ .mint .rule-under { border-bottom: var(--rule-panel) solid var(--rule-strong); } .mint .rule-tag { border: var(--rule-hair) solid var(--rule); border-radius: calc(3 * var(--m, var(--u))); } .mint .rule-box-ink { border: var(--rule-panel) solid var(--ink-button); } .mint .rule-receipt { border: var(--rule-hair) solid var(--rule); } .mint .rule-perf { border-left: var(--rule-hair) dashed var(--rule); }
/* #/deeds (hydrate-deeds): proof|receipt divider, rules printed on the book/ticket paper, ink rules + spine on the deed, chain-of-title line and rings */ .deeds .rule-vline-rule { border-left: var(--rule-hair) solid var(--rule); } .deeds .rule-vline-page { border-left: var(--rule-hair) solid var(--rule-soft); } .deeds .rule-head-ink { border-bottom: var(--rule-hair) solid var(--ink); } .deeds .rule-spine-ink { border-left: var(--rule-hair) solid var(--ink); } .deeds .rule-chain { border-bottom: var(--rule-panel) solid var(--ink); } .deeds .rule-ring-ink { border: var(--rule-panel) solid var(--ink); border-radius: 50%; } .deeds .rule-ring-thin { border: max(1px, calc(1.6 * var(--u))) solid var(--ink); border-radius: 50%; } .deeds .rule-ring-red { border: var(--rule-panel) solid var(--accent-red); border-radius: 50%; } .deeds .rule-ring-halo { border: var(--rule-hair) solid var(--accent-red); border-radius: 50%; }