/* YG INSURERS, the frame stylesheet for gate B - art direction lock (docs/insurance/design/DIRECTION.md).
   Every value here is a token DIRECTION.md section 4 locks; the build takes them from there, never from this file.
   Dark is the default (no data-theme); light is a second design under [data-theme="light"], never an inversion.
   Hyphens only in this file. */

@font-face { font-family: "Outfit"; src: url("fonts/outfit-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-var.woff2") format("woff2"); font-weight: 100 1000; font-display: block; }

/* ------------------------------------------------------------------ TOKENS, DARK (the default) */
:root {
  color-scheme: dark;
  --ground: #0B0B0D;
  --ground-2: #101014;
  --stage: #16161A;
  --raise: #17171B;
  --tile-a: rgba(255, 255, 255, 0.072);
  --tile-b: rgba(255, 255, 255, 0.028);
  --tile-c: rgba(255, 255, 255, 0.015);
  --edge: rgba(255, 255, 255, 0.085);
  --lip: rgba(255, 255, 255, 0.16);
  --well: rgba(255, 255, 255, 0.07);
  --well-edge: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.085);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-control: rgba(255, 255, 255, 0.35);
  --hover: rgba(255, 255, 255, 0.035);
  --ink: #FFFFFF;
  --ink-mid: rgba(255, 255, 255, 0.64);
  --ink-low: rgba(255, 255, 255, 0.50);
  --struck: rgba(255, 255, 255, 0.40);
  --gold: #FFB612;
  --gold-hi: #FFC93C;
  --gold-mark: #FFB612;
  --gold-well: rgba(255, 182, 18, 0.12);
  --gold-edge: rgba(255, 182, 18, 0.34);
  --cta-ink: #121214;
  --alert: #FF6076;
  --alert-tint: rgba(255, 96, 118, 0.22);
  --alert-well: rgba(255, 96, 118, 0.10);
  --emph: rgba(255, 255, 255, 0.92);
  --context: rgba(255, 255, 255, 0.34);
  --zero: rgba(255, 255, 255, 0.20);
  --track: rgba(255, 255, 255, 0.10);
  --skeleton: rgba(255, 255, 255, 0.06);
  --rim-live: rgba(255, 182, 18, 0.70);
  --ghost: rgba(255, 255, 255, 0.07);
  --wash: rgba(255, 255, 255, 0.055);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 50px -24px rgba(0, 0, 0, 0.8);
  --shadow-2: 0 40px 90px -30px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --focus: 0 0 0 2px var(--ground), 0 0 0 4px var(--gold);
  --scrim: rgba(5, 5, 7, 0.62);
  --strip-bg: #101014;
  --logo-plate: transparent;

  --f-display: "Outfit", system-ui, sans-serif;
  --f-text: "DM Sans", system-ui, sans-serif;
  --r-tile: 18px;
  --r-row: 16px;
  --r-image: 10px;
  --r-stage: 24px;
  --r-control: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --rail-w: 84px;
  --top-h: 64px;
}

/* ------------------------------------------------------------------ TOKENS, LIGHT (paper, a second design) */
[data-theme="light"] {
  color-scheme: light;
  --ground: #FBF9F5;
  --ground-2: #F3EFE7;
  --stage: #16161A;              /* the studio keeps its own dark ground in both themes */
  --raise: #FFFFFF;
  --tile-a: #FFFFFF;
  --tile-b: #FFFFFF;
  --tile-c: #FEFDFB;
  --edge: #E6E0D5;
  --lip: rgba(255, 255, 255, 0);
  --well: #F3EFE7;
  --well-edge: #E6E0D5;
  --line: #E6E0D5;
  --line-2: #D8D0C2;
  --line-control: #8F887C;
  --hover: rgba(23, 20, 16, 0.035);
  --ink: #171410;
  --ink-mid: #6B6459;
  --ink-low: #756E62;
  --struck: #7F786C;
  --gold: #FFB612;
  --gold-hi: #FFC93C;
  --gold-mark: #A9820F;
  --gold-well: rgba(169, 130, 15, 0.10);
  --gold-edge: rgba(169, 130, 15, 0.38);
  --cta-ink: #121214;
  --alert: #B8263F;
  --alert-tint: rgba(184, 38, 63, 0.22);
  --alert-well: rgba(184, 38, 63, 0.07);
  --emph: #2A2622;
  --context: #8F887C;
  --zero: #CFC8BB;
  --track: #D6CEBF;
  --skeleton: #EFEAE0;
  --rim-live: rgba(169, 130, 15, 0.70);
  --ghost: rgba(23, 20, 16, 0.05);
  --wash: rgba(255, 255, 255, 0.7);
  --shadow-1: 0 1px 2px rgba(60, 45, 10, 0.05), 0 14px 36px -22px rgba(80, 60, 10, 0.30);
  --shadow-2: 0 34px 80px -30px rgba(80, 60, 10, 0.34), 0 0 0 1px #E6E0D5;
  --focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #A9820F;
  --scrim: rgba(23, 20, 16, 0.28);
  --strip-bg: #171410;
  --logo-plate: #0B0B0D;
}

/* ------------------------------------------------------------------ BASE */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  font-family: var(--f-text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(120% 70% at 55% -18%, var(--wash), transparent 58%),
    var(--ground);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
body::before {  /* grain, on the ground only: never flat (TASTE-LAW, never flat) */
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
[data-theme="light"] body::before { opacity: 0.05; mix-blend-mode: multiply; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.i.s14 { width: 14px; height: 14px; }
svg.i.s16 { width: 16px; height: 16px; }
svg.i.s18 { width: 18px; height: 18px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 12px; }
.num { font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ TYPE */
.t-hero { font-family: var(--f-display); font-weight: 500; font-size: 44px; line-height: 48px; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.t-hero b { font-weight: 700; }
.t-title { font-family: var(--f-display); font-weight: 500; font-size: 28px; line-height: 34px; letter-spacing: -0.01em; margin: 0; }
.t-h2 { font-family: var(--f-display); font-weight: 500; font-size: 18px; line-height: 23px; letter-spacing: -0.2px; margin: 0; }
.t-fig-xl { font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: 44px; letter-spacing: -0.5px; }
.t-fig-l { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 30px; letter-spacing: -0.3px; }
.t-fig-m { font-family: var(--f-display); font-weight: 400; font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }
.t-unit { font-family: var(--f-display); font-weight: 400; font-size: 0.5em; color: var(--ink-mid); letter-spacing: 0; margin-left: 3px; }
.t-body { font-size: 14px; line-height: 21px; }
.t-say { font-size: 16px; line-height: 25px; }
.t-ask { font-size: 15px; line-height: 22px; color: var(--ink-mid); margin: 6px 0 0; }
.t-label { font-size: 12.5px; line-height: 16px; color: var(--ink-mid); }
.t-meta { font-size: 12px; line-height: 16px; color: var(--ink-low); }
.t-ui { font-weight: 500; font-size: 13px; line-height: 17px; }
.t-ref { font-family: var(--f-display); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: 0.2px; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.mid { color: var(--ink-mid); }
.low { color: var(--ink-low); }
.alert { color: var(--alert); }
.gold { color: var(--gold-mark); }

/* ------------------------------------------------------------------ THE LIT PLATE (round 19's Plate, on the web) */
.plate {
  position: relative;
  border-radius: var(--r-tile);
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--tile-a) 0%, var(--tile-b) 46%, var(--tile-c) 100%);
  box-shadow: var(--shadow-1);
}
.plate::before {
  content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lip), transparent);
}
.plate.row-r { border-radius: var(--r-row); }
.disc {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--well); border: 1px solid var(--well-edge); color: var(--ink);
}
.disc svg.i { width: 18px; height: 18px; }
.disc.sm { width: 28px; height: 28px; }
.disc.sm svg.i { width: 15px; height: 15px; }
.disc.gold { color: var(--gold-mark); }
.disc.alert { color: var(--alert); background: var(--alert-well); border-color: transparent; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 500; font-size: 12.5px; letter-spacing: 0.2px;
  background: var(--well); border: 1px solid var(--well-edge); color: var(--ink);
}
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.struck { display: inline-block; height: 2px; border-radius: 1px; background: var(--struck); vertical-align: middle; }

/* ------------------------------------------------------------------ CONTROLS */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 22px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--cta-ink); font-family: var(--f-text); font-weight: 600; font-size: 14px; letter-spacing: 0.1px;
  box-shadow: 0 10px 30px -12px rgba(255, 182, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
.btn-gold svg.i { width: 16px; height: 16px; stroke-width: 2; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 20px; white-space: nowrap;
  border: 1px solid var(--line-control); color: var(--ink);
  font-weight: 500; font-size: 13.5px;
}
.btn svg.i { width: 16px; height: 16px; }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 17px; }
.btn-quiet { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-mid); font-weight: 500; font-size: 13px; min-height: 34px; white-space: nowrap; }
.btn-quiet svg.i { width: 14px; height: 14px; }
.kbd { font-family: var(--f-display); font-size: 11.5px; line-height: 1; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink-low); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px;
  background: var(--well); border: 1px solid var(--well-edge); font-weight: 500; font-size: 12.5px; color: var(--ink);
  white-space: nowrap;
}
.chip svg.i { width: 14px; height: 14px; }
.chip.gold { background: var(--gold-well); border-color: var(--gold-edge); color: var(--ink); }
.chip.gold svg.i { color: var(--gold-mark); }

/* ------------------------------------------------------------------ THE DEMO STRIP (SPEC I20: on every page of the demo) */
.demo-strip {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 20px;
  background: var(--strip-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72); font-size: 12.5px;
}
.demo-strip .tag {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px;
  background: rgba(255, 182, 18, 0.12); color: #FFB612; font-weight: 600; font-size: 12px;
  border: 1px solid rgba(255, 182, 18, 0.34);
}
.demo-strip .tag svg.i { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ THE SHELL: rail + top bar */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: calc(100vh - 36px); }
.rail {
  align-self: stretch;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 42%);
}
.rail-in {
  position: sticky; top: 0; height: 100vh; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 16px 0 18px;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px 0 10px; }
.brand .logo { display: grid; place-items: center; width: 74px; height: 38px; border-radius: 10px; background: var(--logo-plate); }
.brand img { width: 68px; height: auto; display: block; }
.brand .word { font-family: var(--f-display); font-weight: 500; font-size: 11.5px; letter-spacing: 0.3px; color: var(--ink-mid); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  position: relative;
  width: 72px; height: 60px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: var(--ink-mid); font-weight: 500; font-size: 11.5px;
}
.nav a .g { width: 38px; height: 30px; border-radius: 15px; display: grid; place-items: center; }
.nav a.on { color: var(--ink); }
.nav a.on .g { background: var(--gold-well); box-shadow: inset 0 0 0 1px var(--gold-edge); color: var(--gold-mark); }
.nav a .dot { position: absolute; top: 9px; right: 17px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ink); color: var(--ground); font-family: var(--f-display); font-weight: 600; font-size: 10px; line-height: 16px; text-align: center; }
.rail .spacer { flex: 1; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  height: var(--top-h); display: flex; align-items: center; gap: 18px; padding: 0 28px 0 28px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  backdrop-filter: blur(14px);
}
.ws { display: flex; align-items: center; gap: 10px; padding-right: 18px; border-right: 1px solid var(--line); height: 36px; }
.ws .mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--well); border: 1px solid var(--well-edge); font-family: var(--f-display); font-weight: 600; font-size: 13px; }
.ws .name { font-weight: 600; font-size: 14px; line-height: 17px; }
.ws .state { font-size: 12px; line-height: 15px; color: var(--ink-low); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-mid); white-space: nowrap; }
.crumbs svg.i { width: 14px; height: 14px; color: var(--ink-low); }
.crumbs .here { color: var(--ink); font-weight: 500; }
.search {
  margin-left: auto; width: 360px; height: 40px; border-radius: var(--r-control);
  display: flex; align-items: center; gap: 10px; padding: 0 10px 0 13px;
  background: var(--well); border: 1px solid var(--line);
  color: var(--ink-low); font-size: 13.5px;
}
.search svg.i { width: 16px; height: 16px; color: var(--ink-mid); }
.search .kbd { margin-left: auto; }
.util { display: flex; align-items: center; gap: 4px; }
.util a { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--gold-mark); }
.util .badge { position: absolute; top: 6px; right: 5px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--ground); font-family: var(--f-display); font-weight: 600; font-size: 10.5px; line-height: 17px; text-align: center; }
.util .pip { position: absolute; top: 11px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-mark); box-shadow: 0 0 0 2px var(--ground); }
.user { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid var(--line); height: 36px; }
.user .who { display: flex; flex-direction: column; }
.user .who b { font-weight: 600; font-size: 13.5px; line-height: 17px; }
.user .who span { font-size: 12px; line-height: 15px; color: var(--ink-low); }
.user svg.i { width: 16px; height: 16px; color: var(--ink-mid); }
@media (min-width: 721px) { .mob-only { display: none !important; } }

.page { position: relative; padding: 34px 40px 72px; min-width: 0; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* ------------------------------------------------------------------ TICKS: the r7 arc, and the arc unrolled */
.strip { display: block; }
.arc { display: block; }

/* ------------------------------------------------------------------ LENSES (tabs) */
.lenses { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-top: 22px; }
.lens {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px;
  font-weight: 500; font-size: 14px; color: var(--ink-mid);
}
.lens .n { font-family: var(--f-display); font-weight: 400; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--well); color: var(--ink-mid); }
.lens.on { color: var(--ink); }
.lens.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 1px; background: var(--gold-mark); }
.lens.on .n { color: var(--ink); }
.lens .n.alert { background: var(--alert-well); color: var(--alert); }

/* ------------------------------------------------------------------ TABLE (index) */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th {
  text-align: left; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--ink-mid);
  padding: 14px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table th .srt { display: inline-flex; align-items: center; gap: 4px; }
.table .nw { white-space: nowrap; }
.table th svg.i { width: 12px; height: 12px; color: var(--ink-low); }
.table td { padding: 14px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.sel td { background: var(--hover); }
.table tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--gold-mark); }
.cellrow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.stack { display: flex; flex-direction: column; min-width: 0; }
.stack .top { font-weight: 500; font-size: 14px; line-height: 19px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stack .sub { font-size: 12px; line-height: 16px; color: var(--ink-low); white-space: nowrap; }
.blk { font-size: 13.5px; line-height: 19px; }
.blk b { font-weight: 500; }

/* ------------------------------------------------------------------ STAGE (the car's studio) */
.stage-card {
  position: relative; overflow: hidden; border-radius: var(--r-stage);
  background:
    radial-gradient(70% 60% at 34% 92%, rgba(255, 255, 255, 0.11), transparent 62%),
    radial-gradient(60% 80% at 80% 0%, rgba(255, 182, 18, 0.05), transparent 60%),
    linear-gradient(180deg, #131317, #0C0C0F);
  border: 1px solid rgba(255, 255, 255, 0.085);
  box-shadow: var(--shadow-1);
  color: #FFFFFF;
  --ink: #FFFFFF; --ink-mid: rgba(255, 255, 255, 0.64); --ink-low: rgba(255, 255, 255, 0.50);
  --well: rgba(255, 255, 255, 0.07); --well-edge: rgba(255, 255, 255, 0.09); --line: rgba(255, 255, 255, 0.085);
  --line-control: rgba(255, 255, 255, 0.35); --struck: rgba(255, 255, 255, 0.40); --track: rgba(255, 255, 255, 0.10);
  --gold-mark: #FFB612; --rim-live: rgba(255, 182, 18, 0.70); --emph: rgba(255, 255, 255, 0.92); --ghost: rgba(255, 255, 255, 0.07);
  --alert: #FF6076; --alert-tint: rgba(255, 96, 118, 0.22);
}

/* ------------------------------------------------------------------ SKELETON (still, never shimmering) */
.sk { background: var(--skeleton); border-radius: 6px; }

/* ------------------------------------------------------------------ PHONE (390): checked for reading */
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .desk-only { display: none !important; }
  .demo-strip { height: auto; min-height: 36px; padding: 8px 16px; font-size: 12px; line-height: 16px; }
  .topbar { padding: 0 8px 0 4px; gap: 4px; height: 56px; }
  .topbar .mb { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); }
  .topbar .mb-brand { display: flex; align-items: center; gap: 7px; }
  .topbar .mb-brand .logo { display: grid; place-items: center; height: 28px; padding: 0 5px; border-radius: 7px; background: var(--logo-plate); }
  .topbar .mb-brand img { width: 50px; }
  .topbar .mb-brand span { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--ink-mid); }
  .topbar .util { margin-left: auto; gap: 0; }
  .page { padding: 20px 16px 96px; }
  .t-hero { font-size: 30px; line-height: 34px; }
  .t-title { font-size: 23px; line-height: 28px; }
  .t-fig-xl { font-size: 32px; line-height: 36px; }
  .lenses { overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 12px; }
  .lens { flex: none; padding: 0 10px; }
}

/* ------------------------------------------------------------------ CELLS: one plate, cells divided by hairlines */
.cells { display: grid; }
.cells > * { position: relative; }
.cells > * + *::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--line); }
@media (max-width: 720px) {
  .cells > * + *::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px; }
}

/* a full-page capture renders the sticky bars in flow, so nothing they would float over is hidden (frames only) */
html.static .decide { position: static; }

/* ==================================================================================================================
   WAVE I-5 EXTENSIONS (design-surface, Jae-won Park). Two kinds of rule, and no hex in either:
   (a) the components the four I-3 frames draw inline, lifted here VALUE FOR VALUE so every new frame shares them
       (one component, every home). They are scoped under .i5, which only the new frames carry, so nothing below
       can leak into the four approved frames;
   (b) the layers frames.js draws on EVERY frame (popover, sheet, banner, state block, drawer, the frame tool), each
       under a class name none of the approved frames defines.
   ================================================================================================================== */

/* ------------------------------------------------------------------ (a) LIFTED: page parts */
.i5 .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.i5 .page-head .acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.i5 .tools { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; flex-wrap: wrap; }
.i5 .tools .count { font-size: 13px; color: var(--ink-mid); margin-right: auto; }
.i5 .filter { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--line-2); font-size: 13px; color: var(--ink); white-space: nowrap; }
.i5 .filter svg.i { width: 15px; height: 15px; color: var(--ink-mid); }
.i5 .filter .v { color: var(--ink-mid); }
.i5 .list { padding: 4px 6px; }
.i5 .table td { padding-top: 16px; padding-bottom: 16px; }
.i5 .table tr[data-href] { cursor: pointer; }
.i5 .table tr[data-href]:hover td { background: var(--hover); }
.i5 .foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; font-size: 12.5px; color: var(--ink-low); }
.i5 .split { display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 18px; align-items: start; }
.i5 .col { display: grid; gap: 16px; min-width: 0; align-content: start; }
.i5 .col > *, .i5 .split > * { min-width: 0; }
.i5 .sec { padding: 20px 22px; }
.i5 .sec-head { display: flex; align-items: center; gap: 12px; }
.i5 .sec-head .t-h2 { flex: 1; }
.i5 .sec-head .t-label { white-space: nowrap; }
.i5 .card-head { display: flex; align-items: center; gap: 12px; }
.i5 .card-head .t-h2 { flex: 1; }
.i5 .st { font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.i5 .st.new::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--ink); vertical-align: 1px; }
.i5 .st.past { color: var(--alert); }
.i5 .clock { display: flex; flex-direction: column; gap: 5px; }
.i5 .clock .num { font-size: 15px; }
.i5 .clock .when { font-size: 12px; line-height: 15px; color: var(--ink-low); white-space: nowrap; }
.i5 .clock .past { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--alert); white-space: nowrap; }
.i5 .clock .past svg.i { width: 13px; height: 13px; }
.i5 .money { font-family: var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.i5 .nb { white-space: nowrap; }
.i5 .money .cur { font-size: 0.62em; color: var(--ink-mid); margin-right: 4px; letter-spacing: 0.2px; }
.i5 .note-line { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 17px; color: var(--ink-mid); }
.i5 .note-line svg.i { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.i5 .kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.i5 .kv .k { display: block; font-size: 12.5px; line-height: 16px; color: var(--ink-mid); }
.i5 .kv .v { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; }
.i5 .kv .v.num { font-size: 15px; }

/* the quick view (04's, lifted): in the build it portals, traps focus, closes on Escape */
.i5 .qv { position: sticky; top: 84px; padding: 16px; border-radius: 22px; background: var(--raise); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); }
.i5 .qv .qh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.i5 .qv .x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-mid); }
.i5 .qv .nm2 { margin-top: 6px; }
.i5 .qv .nm2 b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 29px; letter-spacing: -0.2px; }
.i5 .qv .nm2 span { font-size: 13.5px; color: var(--ink-mid); }
.i5 .qv .stage-card { margin-top: 12px; height: 220px; }
.i5 .qv .stage-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.i5 .qv .block { padding: 14px 0; border-bottom: 1px solid var(--line); }
.i5 .qv .block:last-of-type { border-bottom: 0; }
.i5 .qv .block .t-label { display: block; margin-bottom: 8px; }
.i5 .qv .acts { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.i5 .qv .acts .btn-gold { flex: 1; }
.i5 .gauge-row { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 16px; align-items: end; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.i5 .gauge-row .t-label { display: block; }
.i5 .gauge-row .fig { margin-top: 4px; }
.i5 .gauge-row .fig .t-fig-l { font-size: 32px; line-height: 36px; }
.i5 .gauge-row .prov { margin-top: 8px; font-size: 12.5px; line-height: 17px; color: var(--ink-mid); }
.i5 .hidden-id { display: flex; gap: 12px; padding: 14px 0 4px; }
.i5 .hidden-id p { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-mid); }
.i5 .hidden-id p b { color: var(--ink); font-weight: 500; }
.i5 .shade { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 60%, transparent 55%, rgba(10, 10, 12, 0.5) 100%); }
.i5 .paint { display: flex; gap: 7px; align-items: flex-start; margin-top: 9px; font-size: 12px; line-height: 16px; color: var(--ink-low); }
.i5 .paint svg.i { width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* the stage rail (03's, lifted): named stages, dated, never a percentage */
.i5 .stages { margin-top: 22px; padding: 18px 26px 16px; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); }
.i5 .stg { position: relative; display: flex; flex-direction: column; gap: 3px; padding-top: 22px; }
.i5 .stg::before { content: ""; position: absolute; top: 7px; left: 16px; right: 0; height: 2px; border-radius: 1px; background: var(--track); }
.i5 .stg.done::before { background: var(--context); }
.i5 .stg:last-child::before { display: none; }
.i5 .stg .node { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--ground); border: 2px solid var(--track); }
.i5 .stg.done .node { border-color: var(--context); background: var(--context); color: var(--ground); }
.i5 .stg.done .node svg.i { width: 10px; height: 10px; stroke-width: 3; }
.i5 .stg.now .node { border-color: var(--gold-mark); background: var(--ground); box-shadow: 0 0 0 5px var(--gold-well); }
.i5 .stg.now .node::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-mark); }
.i5 .stg.stop .node { border-color: var(--alert); }
.i5 .stg .nm { font-weight: 500; font-size: 13.5px; line-height: 18px; color: var(--ink-low); }
.i5 .stg.done .nm { color: var(--ink-mid); }
.i5 .stg.now .nm { color: var(--ink); }
.i5 .stg .when { font-family: var(--f-display); font-size: 12.5px; line-height: 16px; color: var(--ink-low); font-variant-numeric: tabular-nums; }

/* receipt rows, the activity log, the conversation (03's, lifted) */
.i5 .rows { display: grid; }
.i5 .rows .r { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 19px; }
.i5 .rows .r:last-child { border-bottom: 0; }
.i5 .rows .r .k { color: var(--ink-mid); flex: none; }
.i5 .rows .r .v { text-align: right; }
.i5 .log { list-style: none; margin: 10px 0 0; padding: 0; }
.i5 .log li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-mid); }
.i5 .log li:last-child { border-bottom: 0; }
.i5 .log li b { color: var(--ink); font-weight: 500; }
.i5 .log li .num { font-size: 12.5px; color: var(--ink-low); }
.i5 .people { display: flex; }
.i5 .people .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--ground); }
.i5 .thread { margin-top: 12px; display: grid; gap: 12px; }
.i5 .sys { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; color: var(--ink-low); }
.i5 .sys::before, .i5 .sys::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.i5 .sys svg.i { width: 13px; height: 13px; }
.i5 .bubble { max-width: 88%; padding: 11px 14px; border-radius: 16px 16px 16px 6px; background: var(--well); border: 1px solid var(--well-edge); font-size: 13.5px; line-height: 20px; }
.i5 .bubble.mine { justify-self: end; border-radius: 16px 16px 6px 16px; background: var(--hover); }
.i5 .bubble .by { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 12px; color: var(--ink-low); }
.i5 .bubble .by b { color: var(--ink-mid); font-weight: 500; }
.i5 .waiting { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-mid); }
.i5 .waiting svg.i { width: 14px; height: 14px; }
.i5 .composer { margin-top: 12px; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 16px; border: 1px solid var(--line-control); background: var(--well); }
.i5 .composer .ph { flex: 1; font-size: 13.5px; line-height: 20px; color: var(--ink-low); padding: 8px 0; }
.i5 .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-mid); }
.i5 .ic.solid { background: var(--ink); color: var(--ground); }

/* requirement rows and thumbnails (03's, lifted) */
.i5 .req { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.i5 .req:last-child { border-bottom: 0; padding-bottom: 2px; }
.i5 .req .name { font-weight: 500; font-size: 14px; line-height: 19px; }
.i5 .req .rule { font-size: 12.5px; line-height: 17px; color: var(--ink-low); }
.i5 .req .got { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.i5 .thumb { width: 56px; height: 40px; border-radius: var(--r-image); overflow: hidden; border: 1px solid var(--well-edge); flex: none; }
.i5 .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.i5 .state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-mid); white-space: nowrap; }
.i5 .state svg.i { width: 15px; height: 15px; }

/* a document's first page, drawn: a sheet with its kind (the build shows the PDF's real first page, 56 by 40) */
.i5 .page-thumb { position: relative; width: 56px; height: 40px; flex: none; border-radius: var(--r-image); overflow: hidden; background: var(--well); border: 1px solid var(--well-edge); }
.i5 .page-thumb::before { content: ""; position: absolute; left: 14px; top: 5px; width: 28px; height: 35px; border-radius: 3px 3px 0 0; background: var(--ink); opacity: 0.86; }
.i5 .page-thumb::after { content: ""; position: absolute; left: 19px; top: 11px; width: 18px; height: 2px; border-radius: 1px; background: var(--ground); box-shadow: 0 5px 0 var(--ground), 0 10px 0 var(--ground), 0 15px 0 var(--ground); opacity: 0.55; }
.i5 .page-thumb.lg { width: 96px; height: 120px; border-radius: 12px; }
.i5 .page-thumb.lg::before { left: 16px; top: 14px; width: 64px; height: 106px; }
.i5 .page-thumb.lg::after { left: 26px; top: 30px; width: 44px; box-shadow: 0 9px 0 var(--ground), 0 18px 0 var(--ground), 0 27px 0 var(--ground), 0 36px 0 var(--ground), 0 45px 0 var(--ground); }

/* the policy as a paper (03's, lifted, r19's tile at 1.357x): the one gold gauge where it stands */
.i5 .paper { position: relative; width: 190px; height: 212px; padding: 19px 19px 0; border-radius: 24px; overflow: hidden; background: var(--well); border: 1px solid var(--well-edge); flex: none; }
.i5 .paper .t-label { font-size: 17px; line-height: 22px; }
.i5 .paper .fig .t-fig-l { font-size: 35px; line-height: 41px; }
.i5 .paper .fig .t-unit { font-size: 17.5px !important; }
.i5 .paper .date { font-size: 16px !important; line-height: 22px; margin-top: 2px; }
.i5 .paper .fig { margin-top: 4px; }
.i5 .paper .arcwrap { position: absolute; left: -1px; right: -1px; bottom: 0; display: grid; place-items: end center; line-height: 0; }

/* the decision bar (03's, lifted) */
.i5 .decide { position: sticky; bottom: 16px; z-index: 5; margin-top: 18px; display: flex; align-items: center; gap: 18px; padding: 12px 14px 12px 20px; border-radius: 20px; background: color-mix(in srgb, var(--raise) 92%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); }
.i5 .decide .now { display: flex; flex-direction: column; }
.i5 .decide .now b { font-weight: 600; font-size: 14px; }
.i5 .decide .now span { font-size: 12.5px; color: var(--ink-low); }
.i5 .decide .acts2 { display: flex; align-items: center; gap: 10px; }
.i5 .decide .why { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-low); }
.i5 .decide .why svg.i { width: 15px; height: 15px; }

/* the month band's forms (01's, lifted): every number gets a form; design-dataviz validates */
.i5 .stat { padding: 20px 22px 20px; }
.i5 .stat .t-label { display: block; }
.i5 .stat .fig { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 12px; }
.i5 .stat .fig .t-fig-l { font-size: 30px; line-height: 34px; }
.i5 .bars { display: flex; align-items: flex-end; gap: 3px; height: 38px; }
.i5 .bars.tall { height: 120px; gap: 4px; }
.i5 .bars i { flex: 1; border-radius: 2px 2px 1px 1px; background: var(--context); min-height: 2px; }
.i5 .bars i.z { background: var(--zero); }
.i5 .bars i.emph { background: var(--emph); }
.i5 .part { position: relative; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.i5 .part i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--emph); }
.i5 .bullet { position: relative; height: 22px; margin-top: 4px; }
.i5 .bullet .trk { position: absolute; left: 0; right: 0; top: 7px; height: 8px; border-radius: 4px; background: var(--track); }
.i5 .bullet .val { position: absolute; left: 0; top: 7px; height: 8px; border-radius: 4px; background: var(--emph); }
.i5 .bullet .val.over { background: var(--alert); }
.i5 .bullet .tgt { position: absolute; top: 2px; width: 2px; height: 18px; border-radius: 1px; background: var(--ink-mid); }
.i5 .axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-low); margin-top: 6px; font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.i5 .agebar { display: flex; gap: 3px; height: 10px; }
.i5 .agebar i { display: block; height: 100%; border-radius: 5px; background: var(--context); }
.i5 .agebar i.emph { background: var(--emph); }
.i5 .agebar i.alert { background: var(--alert); }
.i5 .legend { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; margin-top: 10px; }
.i5 .legend div { display: flex; flex-direction: column; }
.i5 .legend .num { font-size: 17px; line-height: 21px; }
.i5 .legend span:not(.num) { font-size: 11.5px; line-height: 15px; color: var(--ink-mid); }

/* ------------------------------------------------------------------ (a) NEW, scoped: the six gates [DIRECTION 6.4] */
.i5 .gates { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.i5 .gate { position: relative; display: flex; flex-direction: column; gap: 3px; padding-top: 24px; padding-right: 10px; }
.i5 .gate::before { content: ""; position: absolute; top: 8px; left: 18px; right: 0; height: 2px; border-radius: 1px; background: var(--track); }
.i5 .gate.lit::before { background: var(--context); }
.i5 .gate:last-child::before { display: none; }
.i5 .gate .node { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ground); border: 2px solid var(--track); }
.i5 .gate.lit .node { border-color: var(--context); background: var(--context); color: var(--ground); }
.i5 .gate.lit .node svg.i { width: 11px; height: 11px; stroke-width: 3; }
.i5 .gate .w { font-weight: 500; font-size: 13px; line-height: 17px; color: var(--ink); }
.i5 .gate:not(.lit) .w { color: var(--ink-mid); }
.i5 .gate .who { font-size: 12px; line-height: 16px; color: var(--ink-low); }
/* A blocked or past-time sub line keeps its alert ink: `.stack .sub` (0,2,0) otherwise outranks `.alert` (0,1,0) and a
   suspension read grey. */
.i5 .stack .sub.alert { color: var(--alert); }
/* A line that carries a price wraps; it is never cut with an ellipsis (a price read as "QAR 3,..." is a wrong price). */
.i5 .stack .top:has(.money) { white-space: normal; overflow: visible; }
/* The six gates as a vertical ladder: a quick view's narrow column, and every phone (the mobile block below). */
.i5 .gates.ladder { grid-template-columns: minmax(0, 1fr); gap: 0; }
.i5 .gates.ladder .gate { padding: 0 0 12px 30px; min-height: 40px; }
.i5 .gates.ladder .gate::before { top: 18px; left: 8px; right: auto; bottom: -2px; width: 2px; height: auto; }
.i5 .gates.mini { display: inline-flex; align-items: center; gap: 0; }
.i5 .gates.mini i { position: relative; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--track); background: var(--ground); flex: none; }
.i5 .gates.mini i.lit { border-color: var(--context); background: var(--context); }
.i5 .gates.mini i + i { margin-left: 8px; }
.i5 .gates.mini i + i::before { content: ""; position: absolute; right: 100%; top: 2px; width: 8px; height: 2px; background: var(--track); }
.i5 .gates.mini i.lit + i.lit::before { background: var(--context); }

/* ------------------------------------------------------------------ (a) NEW, scoped: custom controls [SPEC 9.2] */
.i5 .field { display: grid; gap: 7px; align-content: start; }
.i5 .field + .field, .i5 .grid2 + .field, .i5 .field + .grid2, .i5 .grid2 + .grid2 { margin-top: 18px; }
.i5 .field > .seg, .i5 .field > .stepper { justify-self: start; }
.i5 .field .lab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; color: var(--ink); }
.i5 .field .lab .opt { font-weight: 400; font-size: 12px; color: var(--ink-low); }
.i5 .field .hint { font-size: 12px; line-height: 16px; color: var(--ink-low); }
.i5 .field .errline { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 16px; color: var(--alert); }
.i5 .field .errline svg.i { width: 14px; height: 14px; }
.i5 .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.i5 .grid2 > .field + .field { margin-top: 0; }
.i5 .input { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--r-control); background: var(--well); border: 1px solid var(--line-control); font-size: 14px; line-height: 20px; color: var(--ink); min-width: 0; }
.i5 .input .ph { color: var(--ink-low); }
.i5 .input .val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i5 .input .cur { font-family: var(--f-display); font-size: 12.5px; color: var(--ink-mid); letter-spacing: 0.2px; }
.i5 .input .fig { font-family: var(--f-display); font-size: 17px; font-variant-numeric: tabular-nums; }
.i5 .input svg.i { width: 16px; height: 16px; color: var(--ink-mid); flex: none; }
.i5 .input.ro { background: transparent; border-style: dashed; border-color: var(--line-2); color: var(--ink-mid); }
.i5 .input.err { border-color: var(--alert); box-shadow: 0 0 0 1px var(--alert) inset; }
.i5 .input.focus { box-shadow: var(--focus); border-color: transparent; }
.i5 .input.ta { align-items: flex-start; min-height: 96px; padding: 12px 14px; white-space: normal; }
.i5 .input.ta .val { white-space: normal; }
.i5 .seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--r-control); background: var(--well); border: 1px solid var(--line); flex-wrap: wrap; }
.i5 .seg > * { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 9px; font-weight: 500; font-size: 13px; color: var(--ink-mid); white-space: nowrap; }
.i5 .seg > * svg.i { width: 15px; height: 15px; }
.i5 .seg > .on { background: var(--raise); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--line-2); }
.i5 .seg > .off { color: var(--ink-low); }
.i5 .switch { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--well); border: 1px solid var(--line-control); flex: none; display: inline-block; vertical-align: middle; }
.i5 .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-mid); transition: transform 150ms var(--ease); }
.i5 .switch.on { background: var(--ink); border-color: var(--ink); }
.i5 .switch.on::after { transform: translateX(18px); background: var(--ground); }
.i5 .switch.dis { opacity: 0.45; }
.i5 .swrow { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.i5 .swrow:last-child { border-bottom: 0; }
.i5 .swrow .txt { flex: 1; min-width: 0; }
.i5 .swrow .txt b { display: block; font-weight: 500; font-size: 14px; line-height: 19px; }
.i5 .swrow .txt span { display: block; font-size: 12.5px; line-height: 17px; color: var(--ink-low); margin-top: 2px; }
.i5 .stepper { display: inline-flex; align-items: center; height: 44px; border-radius: var(--r-control); background: var(--well); border: 1px solid var(--line-control); }
.i5 .stepper button { width: 44px; height: 42px; display: grid; place-items: center; color: var(--ink); }
.i5 .stepper .v { min-width: 70px; text-align: center; font-family: var(--f-display); font-size: 17px; font-variant-numeric: tabular-nums; }
.i5 .stepper .v small { font-size: 0.62em; color: var(--ink-mid); margin-left: 3px; }
.i5 .select { justify-content: space-between; cursor: pointer; }
.i5 .select .chev { margin-left: auto; }
.i5 .radio-list { display: grid; gap: 8px; }
.i5 .opt-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line-2); }
.i5 .opt-card.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.i5 .opt-card .mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-control); flex: none; margin-top: 1px; display: grid; place-items: center; }
.i5 .opt-card.on .mark { border-color: var(--ink); }
.i5 .opt-card.on .mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.i5 .opt-card .txt b { display: block; font-weight: 500; font-size: 14px; line-height: 19px; }
.i5 .opt-card .txt span { display: block; font-size: 12.5px; line-height: 17px; color: var(--ink-mid); margin-top: 3px; }
.i5 .opt-card.locked { border-style: dashed; }
.i5 .opt-card.locked .txt b { color: var(--ink-mid); }
.i5 .tick-box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line-control); display: grid; place-items: center; flex: none; }
.i5 .tick-box.on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.i5 .tick-box.on svg.i { width: 13px; height: 13px; stroke-width: 3; }
.i5 .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.i5 .chip .x { display: grid; place-items: center; margin-right: -4px; color: var(--ink-mid); }

/* the uploader and the library [build standard rule 1; SPEC 9.1]: never a URL field */
.i5 .drop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px; border-radius: 16px; background: var(--well); border: 1.5px dashed var(--line-control); }
.i5 .drop .t { font-weight: 500; font-size: 14px; }
.i5 .drop .s { font-size: 12.5px; color: var(--ink-low); margin-top: 2px; }
.i5 .drop .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.i5 .file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.i5 .file:last-child { border-bottom: 0; }
.i5 .file .nm { font-weight: 500; font-size: 13.5px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i5 .file .mt { font-size: 12px; line-height: 16px; color: var(--ink-low); }
.i5 .file .acts { display: flex; gap: 6px; align-items: center; }
.i5 .progress { position: relative; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; margin-top: 7px; }
.i5 .progress i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--emph); }
.i5 .lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.i5 .lib .it { border-radius: 14px; border: 1px solid var(--line-2); padding: 10px; display: grid; gap: 8px; }
.i5 .lib .it.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.i5 .lib .it .page-thumb { width: 100%; height: 88px; }
.i5 .lib .it .page-thumb::before { left: calc(50% - 26px); width: 52px; top: 10px; height: 78px; }
.i5 .lib .it .page-thumb::after { left: calc(50% - 17px); width: 34px; top: 22px; }
.i5 .lib .it b { font-weight: 500; font-size: 12.5px; line-height: 16px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i5 .lib .it span { font-size: 11.5px; color: var(--ink-low); }
.i5 .crop { position: relative; width: 168px; height: 168px; border-radius: 16px; overflow: hidden; background: var(--stage); flex: none; }
.i5 .crop .area { position: absolute; inset: 22px; border: 1.5px solid rgba(255, 255, 255, 0.9); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.45); }
.i5 .crop .h { position: absolute; width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.95); }
.i5 .crop .mk { position: absolute; inset: 22px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; font-size: 44px; color: rgba(255, 255, 255, 0.92); letter-spacing: -1px; }

/* the drawer's parts (the layer itself is (b) below) */
.i5 .preview-card { margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--well); border: 1px solid var(--well-edge); }
.i5 .preview-card .as { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-low); margin-bottom: 10px; }
.i5 .preview-card .as svg.i { width: 14px; height: 14px; }
.i5 .section-label { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; font-family: var(--f-display); font-weight: 500; font-size: 15px; line-height: 20px; }
.i5 .section-label:first-child { margin-top: 0; }
.i5 .section-label .n { font-family: var(--f-display); font-size: 12.5px; color: var(--ink-low); font-weight: 400; }

/* the owner's own screen, drawn at 320 (I14's preview) */
.i5 .phone { width: 320px; border-radius: 34px; padding: 12px; box-shadow: var(--shadow-2); flex: none; }
.i5 .phone .scr { border-radius: 24px; padding: 18px 16px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%), rgba(0, 0, 0, 0.35); min-height: 520px; }

/* ------------------------------------------------------------------ (a) NEW, scoped: sign-in [DIRECTION 4.6 I1] */
.i5 .auth { position: relative; z-index: 1; min-height: calc(100vh - 36px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.i5 .auth .stage-card { border-radius: 0; border: 0; border-right: 1px solid rgba(255, 255, 255, 0.085); min-height: 640px; }
.i5 .auth .car { position: absolute; left: 4%; bottom: 10%; width: 92%; -webkit-mask-image: radial-gradient(64% 70% at 50% 56%, black 58%, transparent 82%); mask-image: radial-gradient(64% 70% at 50% 56%, black 58%, transparent 82%); }
.i5 .auth .ghostw { position: absolute; left: 36px; top: 64px; font-family: var(--f-display); font-weight: 500; font-size: 64px; line-height: 64px; letter-spacing: -0.03em; color: var(--ink); max-width: 560px; text-wrap: balance; }
.i5 .auth .ghostw b { font-weight: 700; }
.i5 .auth .brandrow { position: absolute; left: 36px; top: 30px; display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--ink-mid); }
.i5 .auth .brandrow img { width: 68px; }
.i5 .auth .foot-note { position: absolute; left: 36px; right: 36px; bottom: 28px; display: flex; gap: 10px; font-size: 12.5px; color: var(--ink-mid); }
.i5 .auth .side { display: grid; place-items: center; padding: 48px 40px; }
.i5 .auth .card { width: 100%; max-width: 420px; padding: 30px 30px 26px; }
.i5 .auth .card .t-title { margin-top: 12px; }
.i5 .auth .or { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 12px; color: var(--ink-low); }
.i5 .auth .or::before, .i5 .auth .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.i5 .auth .btn-gold { width: 100%; margin-top: 22px; }
.i5 .auth .refusal { display: flex; gap: 12px; margin-top: 18px; padding: 14px; border-radius: 14px; background: var(--alert-well); }
.i5 .auth .refusal p { margin: 0; font-size: 13.5px; line-height: 20px; }
.i5 .auth .refusal .disc { background: transparent; border: 0; color: var(--alert); }
.i5 .auth .inv-strip { margin-top: 14px; }

/* ------------------------------------------------------------------ (b) LAYERS frames.js draws on every frame */
/* banners under the top bar, one at a time [DIRECTION 4.4] */
.ygb { display: flex; align-items: center; gap: 12px; padding: 11px 28px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 19px; position: relative; z-index: 2; }
.ygb svg.i { width: 18px; height: 18px; flex: none; }
.ygb .grow { flex: 1; min-width: 0; }
.ygb.alert { background: var(--alert-well); color: var(--alert); }
.ygb.alert b { color: var(--alert); }
.ygb.neutral { background: var(--ground-2); color: var(--ink); }
.ygb.neutral svg.i { color: var(--ink-mid); }
.ygb .btn.sm { color: var(--ink); }
.ygb .gline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-mid); }
.ygb .gline i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--track); display: inline-block; }
.ygb .gline i.lit { border-color: var(--context); background: var(--context); }
html[data-shell="suspended"] .btn-gold,
html[data-shell="suspended"] [data-write] { display: none !important; }
html[data-shell="offline"] .btn-gold,
html[data-shell="offline"] [data-write] { opacity: 0.45; pointer-events: none; }
.yg-off { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-low); margin-left: 8px; white-space: nowrap; }
.yg-off svg.i { width: 13px; height: 13px; }

/* the state block: empty and failed, drawn once for every surface [DIRECTION 4.7] */
.ygs { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); overflow: hidden; margin-top: 16px; }
.ygs .art { position: relative; min-height: 260px; border-radius: 0; border: 0; box-shadow: none; }
.ygs .art img.render { position: absolute; left: 8%; right: 8%; top: 10%; bottom: 10%; width: 84%; height: 80%; object-fit: contain; }
.ygs .art img.car { position: absolute; left: -2%; bottom: -4%; width: 104%; -webkit-mask-image: radial-gradient(64% 70% at 50% 56%, black 58%, transparent 82%); mask-image: radial-gradient(64% 70% at 50% 56%, black 58%, transparent 82%); opacity: 0.9; }
.ygs .art .big { position: absolute; inset: 0; display: grid; place-items: center; }
.ygs .art .big span { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.86); }
.ygs .art .big svg.i { width: 44px; height: 44px; stroke-width: 1.4; }
.ygs .txt { padding: 34px 34px 30px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.ygs .txt h2 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 30px; letter-spacing: -0.2px; }
.ygs .txt p { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--ink-mid); max-width: 460px; }
.ygs .txt .acts { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.ygs.failed { grid-template-columns: minmax(0, 1fr); }
.ygs.failed .txt { flex-direction: row; align-items: center; gap: 16px; padding: 22px 24px; justify-content: flex-start; }
.ygs.failed .txt .grow { flex: 1; min-width: 0; }
.ygs.failed .txt h2 { font-size: 17px; line-height: 23px; }
.ygs.failed .txt p { font-size: 13.5px; line-height: 20px; }

/* the drawer: a floating layer, portalled to body in the build; the frame draws it open [DIRECTION 4.5] */
.yl { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: none; }
.yl.open { display: block; }
.yd { position: absolute; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100%; display: flex; flex-direction: column; background: var(--raise); box-shadow: var(--shadow-2); border-left: 1px solid var(--line-2); }
.yd .dh { display: flex; align-items: flex-start; gap: 12px; padding: 22px 22px 16px; border-bottom: 1px solid var(--line); }
.yd .dh .grow { flex: 1; min-width: 0; }
.yd .dh h2 { margin: 4px 0 0; font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: -0.2px; }
.yd .dh p { margin: 4px 0 0; font-size: 13.5px; line-height: 20px; color: var(--ink-mid); }
.yd .dh .x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-mid); margin: -8px -8px 0 0; }
.yd .db { flex: 1; overflow: auto; padding: 20px 22px 24px; scrollbar-width: thin; }
.yd .df { padding: 14px 22px 18px; border-top: 1px solid var(--line); display: grid; gap: 12px; background: var(--raise); }
.yd .df .acts { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.yd .df .acts .grow { margin-right: auto; }
.yd .df .effect { display: flex; gap: 10px; font-size: 13px; line-height: 19px; color: var(--ink-mid); }
.yd .df .effect svg.i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.yd .df .effect b { color: var(--ink); font-weight: 500; }
.yd .drop { grid-template-columns: auto minmax(0, 1fr); }
.yd .drop .acts { grid-column: 2; justify-content: flex-start; }
/* a capture draws an open drawer at its full height: the layer grows with the drawer and the drawer with the page */
html.static .yl.open { position: absolute; top: 0; left: 0; right: 0; bottom: auto; min-height: 100%; display: flex; justify-content: flex-end; align-items: stretch; }
html.static .yd { position: relative; top: auto; right: auto; bottom: auto; }
html.static .yd .db { overflow: visible; flex: none; }

/* popovers: the user menu, the bell, search, a listbox, a calendar. Portalled to body, anchored, flipped [SPEC 9.2] */
.ygp { position: absolute; z-index: 80; min-width: 240px; max-width: min(380px, calc(100vw - 24px)); padding: 8px; border-radius: 16px; background: var(--raise); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); color: var(--ink); }
.ygp[hidden] { display: none; }
.ygp .ph { padding: 8px 10px 6px; font-size: 12px; color: var(--ink-low); }
.ygp .pi { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; line-height: 18px; color: var(--ink); width: 100%; text-align: left; }
.ygp .pi:hover, .ygp .pi.act { background: var(--hover); }
.ygp .pi svg.i { width: 18px; height: 18px; color: var(--ink-mid); flex: none; }
.ygp .pi .grow { flex: 1; min-width: 0; }
.ygp .pi .m { display: block; font-size: 12px; line-height: 16px; color: var(--ink-low); margin-top: 2px; }
.ygp .pi .ck { color: var(--ink); }
.ygp hr { border: 0; height: 1px; background: var(--line); margin: 6px 4px; }
.ygp .seg2 { display: flex; gap: 3px; padding: 3px; margin: 4px 6px 6px; border-radius: 12px; background: var(--well); border: 1px solid var(--line); }
.ygp .seg2 button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border-radius: 9px; font-weight: 500; font-size: 13px; color: var(--ink-mid); }
.ygp .seg2 button svg.i { width: 15px; height: 15px; }
.ygp .seg2 button.on { background: var(--raise); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
.ygp.srch { width: 560px; max-width: calc(100vw - 24px); padding: 10px; }
.ygp.srch .sin { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--well); border: 1px solid var(--line-control); font-size: 14px; }
.ygp.srch .sin svg.i { width: 16px; height: 16px; color: var(--ink-mid); }
.ygp .cal { padding: 6px 6px 4px; }
.ygp .cal .mh { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 8px; font-weight: 500; font-size: 14px; }
.ygp .cal .mh button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-mid); }
.ygp .cal .g { display: grid; grid-template-columns: repeat(7, 38px); gap: 2px; }
.ygp .cal .g span { height: 36px; display: grid; place-items: center; border-radius: 10px; font-family: var(--f-display); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ygp .cal .g .dow { font-family: var(--f-text); font-size: 11.5px; color: var(--ink-low); height: 24px; }
.ygp .cal .g .out { color: var(--ink-low); opacity: 0.45; text-decoration: line-through; text-decoration-color: var(--struck); }
.ygp .cal .g .today { box-shadow: inset 0 0 0 1px var(--line-control); }
.ygp .cal .g .sel { background: var(--ink); color: var(--ground); }
.ygp .cal .foot2 { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 2px; font-size: 12px; color: var(--ink-low); }

/* the phone menu: the rail as a sheet from the left [DIRECTION 4.4 at 390] */
.ygm { position: fixed; inset: 0; z-index: 70; background: var(--scrim); }
.ygm[hidden] { display: none; }
.ygm .sheet { position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); padding: 16px 12px 20px; background: var(--raise); box-shadow: var(--shadow-2); overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.ygm .sheet .top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; }
.ygm .sheet .top .brandm { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--ink-mid); }
.ygm .sheet .top .brandm .logo { display: grid; place-items: center; height: 30px; padding: 0 6px; border-radius: 8px; background: var(--logo-plate); }
.ygm .sheet .top .brandm img { width: 56px; }
.ygm .sheet a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 12px; border-radius: 12px; font-weight: 500; font-size: 14.5px; color: var(--ink-mid); }
.ygm .sheet a.on { color: var(--ink); background: var(--gold-well); box-shadow: inset 0 0 0 1px var(--gold-edge); }
.ygm .sheet a.on svg.i { color: var(--gold-mark); }
.ygm .sheet a .dotm { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ink); color: var(--ground); font-family: var(--f-display); font-weight: 600; font-size: 11px; line-height: 20px; text-align: center; }
.ygm .sheet .sep { height: 1px; background: var(--line); margin: 8px 6px; }
.ygm .sheet .x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-mid); }

/* THE FRAME TOOL: not product chrome. It exists so the founder can walk every state; captures (shot=1) omit it. */
/* a slim tab on the right edge, mid-height: clear of the docked decision bars at every width */
.ygf { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90; display: inline-flex; align-items: center; gap: 8px; min-width: 44px; padding: 14px 10px; border-radius: 14px 0 0 14px; writing-mode: vertical-rl; background: var(--raise); border: 1px dashed var(--line-control); border-right: 0; box-shadow: var(--shadow-2); font-weight: 500; font-size: 12.5px; color: var(--ink); }
.ygf svg.i { width: 18px; height: 18px; color: var(--ink-mid); transform: rotate(90deg); }
.ygf .st2 { color: var(--ink-mid); font-weight: 400; }
html.shot .ygf { display: none; }
.ygp.ftp { width: 300px; border-style: dashed; border-color: var(--line-control); }
.ygp.ftp .grp { padding: 8px 10px 2px; font-size: 11.5px; color: var(--ink-low); }
.ygp.ftp .opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px; }
.ygp.ftp .opts button, .ygp.ftp .opts a { height: 32px; padding: 0 11px; border-radius: 16px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink-mid); display: inline-flex; align-items: center; gap: 6px; }
.ygp.ftp .opts .on { color: var(--ground); background: var(--ink); border-color: var(--ink); }
.ygp.ftp .opts svg.i { width: 14px; height: 14px; }

/* a floating layer never clips: it is on body, above everything, and it reflows on resize (frames.js) */
@media (max-width: 720px) {
  .ygb { padding: 10px 16px; flex-wrap: wrap; font-size: 13px; }
  .ygb .grow { flex: 1 1 220px; }
  .ygs { grid-template-columns: minmax(0, 1fr); }
  .ygs .art { min-height: 200px; }
  .ygs .txt { padding: 22px 20px 22px; }
  .ygs.failed .txt { flex-direction: column; align-items: flex-start; }
  .yd { width: 100%; border-left: 0; }
  .yd .dh { padding: 18px 16px 14px; }
  .yd .db { padding: 18px 16px 22px; }
  .yd .df { padding: 12px 16px 16px; }
  .yd .df .acts > * { flex: 1; }
  .ygf { padding: 12px 8px; }
  .i5 .page-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .i5 .page-head .acts { justify-content: flex-start; }
  .i5 .split { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .i5 .qv { position: relative; top: 0; }
  .i5 .sec { padding: 18px; }
  .i5 .kv { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .i5 .grid2 { grid-template-columns: minmax(0, 1fr); }
  .i5 .grid2 > .field + .field { margin-top: 0; }
  .i5 .stages { grid-template-columns: repeat(var(--n, 5), 118px); overflow-x: auto; padding: 16px 18px 14px; margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: 0; border-right: 0; scrollbar-width: none; }
  /* A phone holds all six gates as the ladder, never a strip scrolled half out of view. */
  .i5 .gates:not(.mini) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .i5 .gates:not(.mini) .gate { padding: 0 0 12px 30px; min-height: 40px; }
  .i5 .gates:not(.mini) .gate::before { top: 18px; left: 8px; right: auto; bottom: -2px; width: 2px; height: auto; }
  .i5 .decide { bottom: 10px; flex-wrap: wrap; gap: 10px; padding: 12px; }
  .i5 .decide .why { margin-left: 0; width: 100%; order: 3; }
  .i5 .decide .acts2 { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
  .i5 .decide .acts2 > * { flex: 1; }
  .i5 .drop { grid-template-columns: auto minmax(0, 1fr); }
  .i5 .drop .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .i5 .tools .filter.desk-only { display: none; }
  .i5 .auth { grid-template-columns: minmax(0, 1fr); }
  .i5 .auth .stage-card { min-height: 420px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.085); }
  .i5 .auth .ghostw { left: 18px; top: 58px; font-size: 34px; line-height: 38px; right: 18px; }
  .i5 .auth .brandrow { left: 18px; top: 18px; }
  .i5 .auth .car { left: 2%; width: 96%; top: 150px; bottom: auto; }
  .i5 .auth .foot-note { display: none; }
  .i5 .auth .side { padding: 20px 16px 40px; }
  .i5 .auth .card { padding: 22px 18px 20px; }
  .i5 .phone { width: 100%; max-width: 320px; }
  .i5 .rows .r { flex-wrap: wrap; }
  .i5 .rows .r .v { text-align: left; }
  .i5 .sec-head, .i5 .card-head { flex-wrap: wrap; row-gap: 4px; }
  .i5 .sec-head .t-h2, .i5 .card-head .t-h2 { flex: 1 1 auto; }
  /* The page never scrolls sideways (DIRECTION 4.8). A table whose row carries an action, or more columns than a
     phone holds, REFLOWS: each row becomes a block from the same markup. The lead cell sits top left, an .act cell
     (a button or a switch) top right, a .mark cell (a grip) before the lead, and every other cell stacks beneath the
     lead with its column name from data-label. A table that fits keeps its columns. Nothing is scrolled out of reach. */
  .i5 .table.reflow, .i5 .table.reflow > tbody { display: block; }
  .i5 .table.reflow > thead { display: none; }
  .i5 .table.reflow tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .i5 .table.reflow tr:last-child { border-bottom: 0; }
  .i5 .table.reflow td { display: block; grid-column: 2; padding: 0; border: 0; min-width: 0; background: none; box-shadow: none; }
  .i5 .table.reflow td.lead { grid-row: 1; }
  .i5 .table.reflow td.mark { grid-column: 1; grid-row: 1; margin-right: 10px; }
  .i5 .table.reflow td.act { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 12px; }
  .i5 .table.reflow td.act:empty { display: none; }
  .i5 .table.reflow td[data-label]::before { content: attr(data-label); margin-right: 8px; font-size: 12px; color: var(--ink-low); }
  .i5 .table.reflow td.ar { grid-column: 2 / 4; text-align: right; }
  .i5 .table.reflow tr.sel, .i5 .table.reflow tr[data-href]:hover { background: var(--hover); }
  .i5 .table.reflow tr.sel { box-shadow: inset 2px 0 0 var(--gold-mark); }
  .i5 .table.reflow tr.sel td, .i5 .table.reflow tr[data-href]:hover td { background: none; box-shadow: none; }
}