/* Aero Pas — Ledger + Strongbox. Ledger world styles (docs/DESIGN.md).
   TYPE FOLLOWS THE OS: the root font-size anchors to Apple's system body
   size (-apple-system-body follows Dynamic Type / Larger Text on iOS,
   iPadOS and macOS Safari), and every size below is rem off that root.
   The user sets their text size once in System Settings; PAS follows. */
:root {
  /* AERO PAS (Sir, 24 Sep: "call this Platform Aero Pas and make the
     platform look like aero… just use the style files"). The material law
     is now AERO'S MERIDIAN NIGHT (~/aero static/exec/meridian.css — read,
     never written): the navy canvas #0A1530 lit from above, cream ink, the
     brand silver as the muted voice, ONE champagne accent for focus and
     the primary action, faint grain over the atmosphere. Semantic colours
     stay meaning-only — amber soon, wax overdue, brass the vault. Dark
     only, always. Type still follows the OS (never shrink it: Dad reads
     this). */
  color-scheme: dark;
  /* Meridian night, verbatim token values (contrast: ink ~13.9:1, silver
     ~7.3:1, champagne on navy ~8.0:1, navy on champagne ~8.0:1). */
  --paper: #0A1530; --raise: #111E42; --work: #0E1A3C;
  --ink: #F5F0EA; --muted: #A5A6A5;
  --line: rgba(245, 240, 234, 0.09); --rule: rgba(245, 240, 234, 0.55); --soft: rgba(245, 240, 234, 0.07);
  --accent: #D4B98C;          /* champagne — Meridian's one accent: focus, active, links */
  --accent-hi: #E3CDA4;
  --accent-faint: rgba(212, 185, 140, 0.12);
  --btn-grad: linear-gradient(180deg, #E6D2AC, #CBB083);
  --btn-grad-hi: linear-gradient(180deg, #EBD9B7, #D1B78B);
  --btn-ink: #0A1530;         /* primary buttons: navy text ON champagne */
  --btn: #C9AC7A;             /* solid champagne for outlines and rings */
  --panel: rgba(17, 30, 66, 0.55); --panel-line: rgba(245, 240, 234, 0.08);
  --panel-ink: #F5F0EA; --panel-muted: #A5A6A5;
  --amber: #E7A764; --wax: #EC8A80; --ok: #86C9A6;
  --brass: #C9AC7A;
  --r-sm: 11px; --r: 14px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px;
  --glass: rgba(17, 30, 66, 0.55);
  --glass-strong: rgba(17, 30, 66, 0.75);
  --glass-blur: 24px;
  --glass-line: rgba(245, 240, 234, 0.08);
  --edge: rgba(245, 240, 234, 0.08);
  --lift: inset 0 1px 0 rgba(245, 240, 234, 0.07);
  --shadow-1: 0 1px 2px rgba(2, 6, 20, 0.40);
  --shadow-2: 0 18px 40px -18px rgba(2, 6, 20, 0.70);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --grain-opacity: 0.05;
}
* { box-sizing: border-box; }
html {
  background: var(--paper);
  font-size: 17px; /* non-Apple fallback base */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; } /* system size + family; rem derives from this */
}
body {
  margin: 0; color: var(--ink);
  font: 400 1rem/1.6 "Manrope", -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  /* The atmosphere (Meridian night, verbatim): the navy canvas lit from
     above at 62% −12°, one warm breath from the lower left, never black. */
  background:
    radial-gradient(90% 60% at 62% -12%, #1D2E62 0%, rgba(29, 46, 98, 0) 60%),
    radial-gradient(50% 40% at 0% 100%, #0E1B40 0%, rgba(14, 27, 64, 0) 70%),
    #0A1530;
  background-attachment: fixed;
}
/* The grain — Meridian's own data-URI noise, faint, over everything and
   under every word: paper, not pixels. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* The browser's own surfaces join the design: selection, the scrollbar. */
::selection { background: var(--accent); color: var(--paper); }
* { scrollbar-color: rgba(245, 240, 234, 0.18) transparent; scrollbar-width: thin; }
/* No global cap on the shell — the work area fills the screen (the old
   720px main cap is what pinned everything to the middle of desktops). */

/* masthead */
.brandrow { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.wordmark { font-family: "Manrope", -apple-system, sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: 0.01em; color: var(--ink); }
.who { font-size: 0.78rem; font-weight: 600; color: var(--muted); }

/* ---- the shell: everything left, the work owns the rest (S134, Sir) ------- */
/* Phone first: the mast and the navigation are ONE fixed chrome block at the
   top (Sir, 19 Sep: "move the navigation bar to the top, under the logo bar,
   fixed") — the logo strip, then the tabs, then the work scrolls beneath.
   From 620px the chrome dissolves (display: contents) and the sidebar is the
   whole left edge, exactly as before. */
.topchrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6;
  background: var(--panel);
  padding-top: env(safe-area-inset-top, 0px);
}
/* The sidebar is the brand panel — light, the new logo's own ground. */
.sidebar {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem;
  background: var(--panel); border-bottom: 1px solid var(--panel-line);
  color: var(--panel-ink);
}
.sidebar .who { color: var(--panel-muted); }
.sidebar .linklike { color: var(--accent); }
.sidebar .textsize { color: var(--panel-muted); border-color: var(--panel-line); }
.sidebar .textsize[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.railhead { display: flex; align-items: center; gap: 0.6rem; }
/* Mobile mast: the MARK alone — the logo says the name, the wordmark beside
   it said it twice (Sir, 19 Sep). The worded brand lives on the wide rail. */
.railhead .brand { display: none; }
.railhead .wordmark { font-size: 1.15rem; color: var(--panel-ink); }
.brandsub { display: none; }
.seal { width: 2.1rem; height: 2.1rem; color: var(--panel-ink); flex: none; }
.logo-slot .logo-img { height: 2rem; }
/* Sir's logo: the wide PAS lockup cropped from the brand poster. It carries
   its own navy ground, so it sits seamless on the panel. */
.logo-slot { display: flex; align-items: center; }
/* The AEROPAS mark (Sir's art, 25 Sep): transparent cream on the night —
   no tile, no chrome, exactly as Aero wears its symbol top-left. */
.logo-img { height: 2.15rem; width: auto; max-width: 100%; object-fit: contain; }
.sealp { font-family: "Manrope", -apple-system, sans-serif; font-weight: 700; fill: currentColor; }
.sideuser { margin-left: auto; display: flex; align-items: center; gap: 0.65rem; }
.side-actions { display: flex; align-items: center; gap: 0.5rem; }
/* Pills on the chrome strip at every width (the wide query refines them). */
.sidebar .linklike, .sidebar .textsize {
  border-radius: 999px; border: 1px solid var(--panel-line);
  background: var(--glass-strong); color: var(--panel-ink);
  text-decoration: none; font-weight: 600; font-size: 0.82rem;
  padding: 0.42rem 0.95rem; min-height: 2.4rem;
}
.sidebar .linklike:hover, .sidebar .textsize:hover { background: var(--soft); }
.work { background: var(--work); padding-top: 7.3rem; }
/* The date and time — on the phone the fixed chrome owns the top, so the
   clock row simply scrolls with the page (it stays sticky on the wide
   layout, where the sidebar is the chrome). */
.workbar {
  display: flex; justify-content: flex-end;
  background: var(--work); padding: 0.55rem clamp(1.2rem, 3.5vw, 3rem) 0.45rem;
  border-bottom: 1px solid var(--line);
}
html { background: var(--paper); }
.clock { font-size: 0.8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.dateline { padding: 1.15rem clamp(1.2rem, 3.5vw, 3rem) 0.2rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.dateline .day { font-family: "Manrope", -apple-system, sans-serif; font-weight: 500; font-size: 1.75rem; letter-spacing: -0.025em; color: var(--ink); }
.dateline .day::after { content: ""; display: block; width: 2.4rem; height: 2px; background: var(--rule); margin-top: 0.3rem; }

@media (min-width: 620px) {
  #shell { display: grid; grid-template-columns: 17rem minmax(0, 1fr); height: 100vh; }
  /* The Succession measure: the work centres as a reading column (their
     max-w-4xl idiom) — content breathes, cream paper frames the edges. */
  .work { max-width: 62rem; margin-left: auto; margin-right: auto; }
  .work > .workbar, .work > .dateline { max-width: none; }
  /* The fixed top chrome is a PHONE thing: here it dissolves and its children
     lay out as if it did not exist (the grid takes them directly). */
  .topchrome { position: static; display: contents; padding-top: 0; }
  .work { padding-top: 0; }
  .workbar { position: sticky; top: 0; z-index: 4; }
  .sidebar {
    flex-direction: column; align-items: stretch; gap: 0; padding: 0;
    border-bottom: none; border-right: 1.5px solid var(--panel-line);
    height: 100vh; position: sticky; top: 0;
  }
  .railhead { padding: 1.2rem 1.15rem 1rem; border-bottom: 1px solid var(--panel-line); }
  .railhead .wordmark { font-size: 1.5rem; }
  .railhead .brand { display: block; }
  /* The mark sits at a readable size with the wording as REAL text beneath —
     at sidebar scale the poster's own wording line is too small to read. */
  .railhead.has-logo { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
  .railhead.has-logo .brand { display: none; }
  .railhead .logo-img { width: auto; height: 2.5rem; max-width: 100%; }
  .brandsub {
    display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--panel-muted); margin-top: 0.3rem;
  }
  /* The two controls at the foot — Larger text and Sign out — are rounded
     buttons on white, not bare underlined links. */
  .sidebar .side-actions button, .sidebar .sideuser .linklike {
    border-radius: 999px; border: 1px solid var(--panel-line);
    background: var(--glass-strong); color: var(--accent);
    padding: 0.42rem 0.95rem; min-height: 2.4rem; text-decoration: none;
    font-weight: 600; font-size: 0.82rem; margin: 0; width: auto;
  }
  .sidebar .side-actions button:hover, .sidebar .sideuser .linklike:hover {
    background: var(--soft);
  }
  .sidebar .textsize[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
  .seal { width: 2.6rem; height: 2.6rem; }
  .sideuser {
    margin: auto 0 0; padding: 0.9rem 1.15rem 1rem; border-top: 1px solid var(--panel-line);
    flex-direction: column; align-items: flex-start; gap: 0.4rem;
  }
  .side-actions { width: 100%; justify-content: space-between; }
  .tabbar.bottom { display: none; }
  .work { overflow-y: auto; }
}

/* sections + rows — the ledger's voice: quiet signposts, confident rows.
   An OVERDUE row carries a wax spine on its left edge — a signal that reads
   without colour alone (intuition, Sir 19 Sep). */
.body { padding: 0.1rem clamp(1.2rem, 3.5vw, 3rem) 7.5rem; } /* the tail clears the docked Ask PAS bar */
.seclabel {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 1.5rem 0 0.35rem;
}
.row {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 0.35rem 0.9rem 0.55rem;
  border-bottom: 1px solid var(--line); min-height: 3.2rem; flex-wrap: wrap;
  border-left: 3px solid transparent; margin-left: -0.55rem;
}
/* The ledger gutter (the de-AI move): the DATE leads the row, statement
   fashion — a fixed left column of tabular dates, the title beside it. */
.row .when {
  order: -2; text-align: left; flex: none; width: 4.7rem;
  font-variant-numeric: tabular-nums; padding-top: 0.1rem;
}
.row .what { order: -1; flex: 1; min-width: 55%; cursor: pointer; }
.row .what b { font-weight: 600; font-size: 1.02rem; display: block; }
.row .what span { font-size: 0.82rem; color: var(--muted); display: block; margin-top: 0.08rem; }
.row .when b { font-size: 0.95rem; font-weight: 650; display: block; }
.row .when span { font-size: 0.76rem; display: block; color: var(--muted); }
.row.soon .when span { color: var(--amber); font-weight: 700; }
.row.over { border-left-color: var(--wax); }
.row.over .what b, .row.over .when b { color: var(--wax); }
.row.over .when span { color: var(--wax); font-weight: 700; }
.allquiet { color: var(--muted); padding: 1rem 0.1rem; display: flex; align-items: center; gap: 0.6rem; }
.allquiet .kind { width: 2.2rem; height: 2.2rem; }
.greet { font-family: "Manrope", -apple-system, sans-serif; font-weight: 500; font-size: 1.02rem; color: var(--muted); margin: 0.35rem 0 0; }
/* The kind disc: a quiet glyph in a raised circle — what a row IS, before
   it is read. Overdue carries the wax into the disc. */
.row .kind, .allquiet .kind {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
  background: var(--raise); color: var(--muted);
  display: inline-grid; place-items: center;
}
.row .kind svg, .allquiet .kind svg { width: 1.15rem; height: 1.15rem; }
.row.over .kind { background: rgba(229, 140, 133, 0.14); color: var(--wax); }
/* The command bar: Ask PAS reads as one affordance — field and button in
   a single row (the field grows, the button holds its word). */
.askbar { display: flex; gap: 0.6rem; align-items: stretch; margin-top: 0.25rem; }
.askbar input { flex: 1; margin: 0; }
.askbar .action { width: auto; margin: 0; padding: 0.8rem 1.4rem; }

/* statement figures — the estate's arithmetic in statement fashion */
.figure-block { margin-top: 0.1rem; border-top: 2px solid var(--rule); }
.fb-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.85rem 0.1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fb-name { font-size: 0.84rem; font-weight: 650; color: var(--muted); }
.fb-sub { font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; font-variant-numeric: tabular-nums; }
.fb-fig { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* tab bar — shared base; the phone variant is the TOP nav under the logo
   (Sir, 19 Sep) and the side variant restyles inside the wide query.
   The ACTIVE tab wears a filled pill: where you are is obvious at a glance. */
.tabbar {
  display: flex; border-bottom: 1.5px solid var(--rule); background: var(--work);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  gap: 0.2rem; padding: 0.25rem 0.4rem 0.3rem;
}
.tabbar.side { display: none; }
.navlabel {
  display: none; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); padding: 0.95rem 0.8rem 0.3rem; letter-spacing: 0.14em;
}
.tab {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.22rem;
  padding: 0.45rem 0.5rem 0.5rem; font-size: 0.66rem; font-weight: 650; letter-spacing: 0.02em;
  color: var(--muted); min-height: 3rem; justify-content: center;
  border: none; background: none; cursor: pointer; font-family: inherit;
  border-radius: 12px;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab.on { color: var(--accent); background: var(--soft); }
.tab:active { background: var(--soft); }
.tab svg { width: 1.22rem; height: 1.22rem; }
.tab.vaulttab, .tab.vaulttab svg { color: var(--brass); stroke: var(--brass); }
.tab.on.vaulttab, .tab.on.vaulttab svg { color: var(--brass); }
.tab[disabled] { opacity: 0.45; cursor: default; }
@media (min-width: 620px) {
  .tabbar.side {
    display: flex; flex-direction: column; align-items: stretch; flex: 1 1 auto;
    overflow-y: auto; border: none; background: none; position: static;
    padding: 0.35rem 0.65rem 0.9rem;
  }
  .tab {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 0.7rem;
    padding: 0.62rem 0.8rem; font-size: 0.92rem; min-height: 2.9rem;
    border-top: none; margin: 0; border-radius: var(--r); white-space: nowrap;
  }
  .tab.on { background: var(--soft); color: var(--btn); }
  .tab:hover:not(.on) { color: var(--ink); }
  .tab svg { width: 1.15rem; height: 1.15rem; }
  .navlabel { display: block; }
  /* On the panel the departments read in its own light. */
  .tabbar.side .tab { color: var(--panel-muted); }
  .tabbar.side .tab:hover:not(.on) { color: var(--panel-ink); }
  .tabbar.side .tab.on { background: var(--soft); color: var(--btn); }
  .tabbar.side .navlabel { color: var(--panel-muted); }
  .tabbar.side .tab[disabled] { opacity: 0.4; }
}

/* forms — professional controls: quiet borders, one focus ring, one blue */
button.action {
  display: block; width: 100%; padding: 0.8rem 1.2rem; margin: 0.6rem 0;
  /* Meridian's primary: champagne gradient, navy ink, one warm glow. */
  background: var(--btn-grad); color: var(--btn-ink); border: none;
  border-radius: 6px; font: 700 0.95rem/1 "Manrope", sans-serif;
  letter-spacing: 0.01em; cursor: pointer; min-height: 3rem; font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px -6px rgba(212, 185, 140, 0.45);
  transition: filter 0.12s ease, background 0.12s ease;
}
button.action:hover { background: var(--btn-grad-hi); }
button.action:active { filter: brightness(0.96); }
/* Every action is a rounded button — no underlined text links (Sir, S134).
   Colour code: soft = secondary action, graphite = primary, red-tint =
   destructive. */
button.linklike {
  background: transparent; border: 1px solid rgba(245, 240, 234, 0.22); color: var(--ink);
  border-radius: 6px; padding: 0.45rem 0.95rem; margin: 0.6rem 0 0;
  font: 600 0.88rem "Manrope", sans-serif;
  min-height: 2.6rem; width: auto; cursor: pointer; font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
button.linklike:hover { background: var(--soft); }
button.linklike.rowbtn { padding: 0.32rem 0.8rem; margin: 0.15rem 0 0.15rem; min-height: 2.2rem; font-size: 0.8rem; }
/* Destructive row actions carry their meaning in the button itself. */
button.linklike[data-del], button.linklike[data-rm], button.linklike[data-revoke],
button.linklike[data-unenrol], button.linklike[data-docdel] {
  background: rgba(236, 138, 128, 0.12); color: var(--wax); border-color: transparent;
}
button.linklike[data-del]:hover, button.linklike[data-rm]:hover, button.linklike[data-revoke]:hover,
button.linklike[data-unenrol]:hover, button.linklike[data-docdel]:hover { border-color: var(--wax); color: var(--wax); }
input, select {
  display: block; width: 100%; padding: 0.68rem 0.85rem; margin: 0.3rem 0;
  background: var(--raise); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; font: 400 1rem "Manrope", sans-serif; min-height: 3rem;
  font-family: inherit; transition: border-color 0.15s ease;
}
label { display: block; font-size: 0.87rem; font-weight: 600; color: var(--ink); margin-top: 0.9rem; }
input:focus, select:focus {
  outline: 2px solid var(--btn); outline-offset: 0; border-color: var(--btn);
}
button:focus-visible { outline: 2px solid var(--btn); outline-offset: 2px; }
.checkrow { display: flex; align-items: center; gap: 0.75rem; margin: 0.85rem 0; }
.checkrow input { width: 1.3rem; height: 1.3rem; min-height: 1.3rem; margin: 0; }
.checkrow span { font-size: 0.95rem; }
.err { color: var(--wax); font-weight: 600; min-height: 1.3rem; margin: 0.25rem 0 0.5rem; font-size: 0.9rem; }

/* auth */
/* auth — the poster's world: deep navy, the logo large, Sir's subtitle. */
.authwrap {
  max-width: 26rem; margin: 0 auto; padding: 0 1.5rem;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  background: var(--work); color: var(--ink);
}
.authwrap .mast { border-bottom: 1px solid var(--line); padding-bottom: 1.1rem; margin-bottom: 1.4rem; }
/* The lockup centres in the mast with real air either side (Sir, 25 Sep:
   "not centred and cut off" — a width:100% block with a max-width cap and
   no auto margins sits left; and at full column width the tight crop crowds
   the letters against the edges). */
.auth-logo { display: block; width: 100%; max-width: 15rem; height: auto; margin: 0 auto; }
.authwrap .mastsub { display: none; }
.authwrap h2 { font-family: "Manrope", -apple-system, sans-serif; font-weight: 500; font-size: 1.4rem; letter-spacing: -0.02em; margin: 0 0 0.35rem; color: var(--ink); }
.authwrap p { margin: 0 0 0.85rem; color: var(--muted); }
.authwrap input {
  background: var(--work); color: var(--ink); border: 1px solid var(--line);
}
.authwrap .linklike {
  background: var(--soft); border: 1px solid transparent;
  color: var(--accent); border-radius: 999px; padding: 0.5rem 1.15rem; margin-top: 0.8rem;
}
.authwrap .linklike:hover { border-color: var(--accent); }
.codecard { border: 1.5px solid var(--rule); border-radius: 6px; padding: 1.2rem; margin: 0.85rem 0; }
.code { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; word-break: break-all; }
.codecard small { color: var(--muted); display: block; margin-top: 0.5rem; font-size: 0.8rem; }
.kv { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0.7rem 0.1rem; font-size: 0.92rem; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; }

/* misc */
.hidden { display: none !important; }
.backrow { padding: 0.85rem 1.2rem 0; }
h2.page { font-family: "Manrope", -apple-system, sans-serif; font-weight: 500; font-size: 1.4rem; letter-spacing: -0.02em; margin: 0; padding: 0; color: var(--accent); }
.sub { color: var(--muted); font-size: 0.86rem; margin: 0.1rem 0 0; }
.empty { color: var(--muted); font-size: 0.9rem; padding: 0.85rem 0.1rem; }

/* ---- Phase 2: the elder-simple pass ---------------------------------------- */

/* Plain-English status strip — signal, queued changes, out-of-date edits.
   One line under the dateline, visible in every view, never a toast. */
.status {
  font-size: 0.88rem; font-weight: 600; color: var(--amber);
  background: var(--raise); border: 1px solid var(--edge); border-radius: 8px;
  padding: 0.55rem 0.85rem; margin-top: 0.7rem;
}.status.calm { color: var(--muted); font-weight: 400; background: none; border-color: transparent; padding-left: 0; }

/* Bigger-text mode (a11y): the toggle multiplies the OS-anchored root size
   (the exact px is read at runtime, never assumed). Everything that must
   grow WITH the size lives here: hit targets, contrast, line weight. There
   is deliberately NO font-size rule here — a CSS fallback size re-multiplies
   with the JS one (17 → 21.25 → 27, found by the browser harness 17 Sep);
   one source of truth: the JS multiplication. */
html[data-a11y="on"] body { letter-spacing: 0.01em; }
[data-a11y="on"] .row .what span, [data-a11y="on"] .row .when span,
[data-a11y="on"] .sub, [data-a11y="on"] .empty, [data-a11y="on"] .status { color: var(--ink); opacity: 0.82; }
[data-a11y="on"] .row { border-bottom-width: 2px; }
[data-a11y="on"] .tab { min-height: 3.5rem; }
[data-a11y="on"] button.action, [data-a11y="on"] button.linklike { min-height: 3.5rem; }
[data-a11y="on"] input, [data-a11y="on"] select { min-height: 3.5rem; }
.textsize {
  /* A real switch (the 21st.dev idiom, hand-ported): the label says what it
     does, the knob says where it is. aria-pressed drives the knob. */
  background: none; border: none; border-radius: 999px;
  color: var(--muted); font: 600 0.78rem "Manrope", sans-serif;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.2rem 0; cursor: pointer; min-height: 2.4rem; font-family: inherit;
}
.textsize::before {
  content: ""; width: 2.35rem; height: 1.35rem; border-radius: 999px;
  background: var(--raise); border: 1.5px solid var(--line);
  position: relative; transition: background 0.18s ease, border-color 0.18s ease;
  flex: none;
}
.textsize::after {
  content: ""; position: absolute; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: #FFFFFF; border: 1px solid var(--line);
  margin-left: 0.22rem; transform: translateX(0);
  transition: transform 0.18s ease; flex: none;
}
.textsize[aria-pressed="true"] { color: var(--ink); }
.textsize[aria-pressed="true"]::before { background: var(--soft); border-color: var(--accent); }
.textsize[aria-pressed="true"]::after { transform: translateX(0.95rem); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .textsize::before, .textsize::after { transition: none; } }

/* Copy affordance on every code shown once (recovery, kit half, invites). */
button.copybtn {
  background: var(--soft); border: 1px solid transparent; color: var(--ink);
  border-radius: 6px; padding: 0.35rem 0.85rem; margin: 0.4rem 0 0;
  font: 600 0.82rem "Manrope", sans-serif; min-height: 2.3rem;
  width: auto; cursor: pointer; font-family: inherit;
}
button.copybtn:hover { border-color: var(--btn); color: var(--btn); }
button.copybtn.copied { color: var(--accent); border-color: var(--accent); }

/* Install guidance (iOS Safari, not yet on the Home Screen) — real steps,
   dismissible once, no tricks. */
.install {
  border: 1.5px solid var(--rule); border-radius: 2px; padding: 0.9rem 1rem;
  margin-top: 0.85rem; font-size: 0.92rem;
}
.install b { display: block; margin-bottom: 0.2rem; }
.install ol { margin: 0.35rem 0 0.6rem; padding-left: 1.3rem; }
.install .linklike { margin: 0; }

/* ---- style attributes are CSP-dead — every style the templates need is a class.
   Found live 17 Sep: style-src 'self' silently strips every style="" we emit. */
.mastword { font-size: 44px; }
.mastsub { color: var(--muted); margin: 8px 0 0; font-size: 15px; }
.headline-actions { display: flex; gap: 0.75rem; align-items: center; }
#btn-signout { margin: 0; font-size: 0.85rem; }
.mt-xs { margin-top: 0.5rem; } .mt-s { margin-top: 0.75rem; } .mt-085 { margin-top: 0.85rem; }
.mt { margin-top: 1rem; } .mt-l { margin-top: 1.25rem; } .mt-xl { margin-top: 1.4rem; }
.pt-s { padding-top: 0.5rem; }
.rowbtn { margin: 0; min-height: 2.2rem; font-size: 0.8rem; }
.dim { color: var(--muted); } .ink { color: var(--ink); }
.neg { color: var(--wax); } .good { color: var(--accent); } .waxfill { color: var(--wax); }
.breakall { word-break: break-all; }
.plain { cursor: default; }
.permo { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.fig-lg { font-size: 1.1rem; } .code-sm { font-size: 0.95rem; }
.colstack { display: flex; flex-direction: column; gap: 0.35rem; }
.modal-veil { position: fixed; inset: 0; background: var(--paper); z-index: 10; display: grid; place-items: center; padding: 1.5rem; }
.modal-card { max-width: 26rem; width: 100%; }
.getstart { border: 1.5px solid var(--rule); border-radius: 6px; padding: 1.25rem 1.3rem 1.15rem; margin: 0.4rem 0 1.5rem; background: var(--raise); }
.getstart .seclabel { margin-top: 0; color: var(--accent); font-weight: 700; }
.getstart p { color: var(--ink); font-size: 0.98rem; line-height: 1.55; }
.getstart button.action { margin-bottom: 0; }

/* ---- the money band: statement fashion, not KPI cards ----------------------- */
.moneyband {
  display: flex; flex-wrap: wrap; gap: 1.15rem 2.6rem;
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--line);
  padding: 1.2rem 0.1rem 1.1rem; margin: 0.4rem 0 0.6rem;
}
.mb-fig b { display: block; font-size: 1.95rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.mb-fig span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-top: 0.25rem; }
.mb-fig.neg b { color: var(--wax); }
.estateline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem; margin: 0 0 1rem; color: var(--muted); }
.estateline .dot { color: var(--line); }
.estatelink {
  background: none; border: none; color: var(--ink); font: 600 0.92rem "Manrope", sans-serif;
  padding: 0.15rem 0.1rem; cursor: pointer; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line);
}
.estatelink:hover { text-decoration-color: var(--accent); color: var(--accent); }

/* ---- attachments: photo strip + file chips ---------------------------------- */
.photostrip { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.7rem 0 0.2rem; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-top: 0.3rem; }
.chip {
  display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--work);
  border-radius: 8px; padding: 0.3rem 0.7rem; font: 600 0.8rem "Manrope", sans-serif; color: var(--ink);
  cursor: pointer; font-family: inherit;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip-img { padding: 0; overflow: hidden; width: 5.4rem; height: 3.8rem; }
.chip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip-x {
  border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.8rem;
  padding: 0.3rem 0.15rem; margin-right: 0.35rem;
}
.chip-x:hover { color: var(--wax); }
.getstart p { margin: 0.35rem 0 0.85rem; }
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr)); border: 1px solid var(--line); border-radius: 6px; margin: 0 0 1.4rem; overflow: hidden; background: var(--raise); }
.glancecell {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.9rem 0.3rem 0.8rem; background: none; border: none;
  border-left: 1px solid var(--line); cursor: pointer; min-height: 3rem; font-family: inherit;
}
.glancecell:first-child { border-left: none; }
.glancecell b { font-size: 1.45rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.glancecell span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.glancecell:hover { background: var(--soft); }
/* Left rail on wide screens: the tab bar becomes a column beside the work.
   Same tabs, same rules — no new chrome, just room to breathe. */
/* the work column holds the page and FILLS it — no narrow centred column */
#shell .body { flex: 1; }

/* ---- the vault (Sir, 19 Sep: same format as the rest of the site) -----------
   The dark strongbox world is retired: the vault renders in the house's light
   ledger — neutral chrome, standard buttons, the same rows. The wax stays
   semantic (sealed/refused); the brass icon on the tab is the only whisper. */
.vault-title {
  font-family: "Manrope", -apple-system, sans-serif; font-weight: 500; font-size: 1.4rem;
  letter-spacing: -0.02em; color: var(--rule);
}
.seal-state { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--wax); }
.seal-big { text-align: center; margin: 1.75rem 0 1.25rem; }
.seal-disc {
  width: 5.5rem; height: 5.5rem; margin: 0 auto 0.85rem; border-radius: 50%;
  border: 2px solid var(--rule); display: grid; place-items: center; color: var(--rule);
}
.seal-disc svg { width: 2rem; height: 2rem; }
.seal-big .count { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.seal-big .lbl { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--muted); }
.boxrow {
  display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 0.1rem;
  border-bottom: 1px solid var(--line); font-size: 0.9rem; min-height: 2.7rem; align-items: center; flex-wrap: wrap;
}
.boxrow .k { color: var(--muted); }
.boxrow .v { font-variant-numeric: tabular-nums; text-align: right; }
.boxrow .v b { font-weight: 600; }
.reseal { font-size: 0.8rem; color: var(--muted); text-align: center; margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; }

#printArea, #kitArea { display: none; }
@media print {
  body > *:not(#printArea):not(#kitArea) { display: none !important; }
  body { display: block; padding: 0; background: #fff; color: #000; }
  body.printing-kit #printArea { display: none !important; }
  body:not(.printing-kit) #kitArea { display: none !important; }
  #printArea { display: block; font: 400 14pt/1.5 "Manrope", sans-serif; }
  #printArea .pw { font-family: "Fraunces", Georgia, serif; font-size: 26pt; letter-spacing: 0.08em; }
  #printArea .pc { font-size: 20pt; font-weight: 700; letter-spacing: 0.08em; margin: 18pt 0; }
  #printArea .pm { margin-top: 26pt; font-size: 11pt; }
  #kitArea { display: block; font: 400 14pt/1.5 "Manrope", sans-serif; }
  #kitArea .pw { font-family: "Fraunces", Georgia, serif; font-size: 26pt; letter-spacing: 0.08em; }
  #kitArea .pk { font-size: 20pt; font-weight: 700; letter-spacing: 0.08em; margin: 18pt 0; font-variant-numeric: tabular-nums; word-break: break-all; }
  #kitArea .pm { margin-top: 26pt; font-size: 11pt; }
}

/* Ask PAS (v2 Phase 4) — the correction affordance and the honest source
   label. The toggle is a soft secondary button (no underlined text-links,
   per the design language). */
.ask-src { color: var(--muted); font-size: 0.8rem; }
button.fix-toggle {
  background: var(--soft); border: 1px solid transparent; color: var(--ink);
  border-radius: 8px; padding: 0.32rem 0.8rem; margin: 0.35rem 0 0;
  font: 600 0.8rem "Manrope", sans-serif; min-height: 2.2rem;
  width: auto; cursor: pointer; font-family: inherit;
}
button.fix-toggle:hover { border-color: var(--accent); color: var(--accent); }
#ask-fix-form input { display: inline-block; width: 60%; }
#ask-fix-form .action { display: inline-block; width: auto; margin-left: 0.5rem; }
#ask-fix-err { font-size: 0.82rem; }
/* The rail head is a way home — it should say so with the cursor. */
.railhead.homeward { cursor: pointer; }
.railhead.homeward:hover .wordmark, .railhead.homeward:hover .logo-img { opacity: 0.85; }

/* Sealed document copies + the toast (S136): a sealed chip reads as vault
   material — quiet lock, muted; the toast is the honest refusal. */
.chip-sealed { background: var(--soft); color: var(--ink); }
.toast {
  position: fixed; bottom: calc(8.6rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
  background: var(--panel); color: var(--panel-ink); border: 1px solid var(--panel-line);
  border-radius: 10px; padding: 0.75rem 1.1rem; max-width: 34rem; z-index: 60;
  font: 400 0.92rem "Manrope", sans-serif; border-width: 2px;
}

/* ---- the view transition: navigation ANSWERED, once, quietly -----------------
   A 180ms rise when a view paints — motion that confirms the tap, never
   decoration. Reduced-motion preferences switch it off entirely. */
.view-enter { animation: view-in 0.12s ease-out both; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view-enter { animation: none; }
  .tab, button.action, button.linklike { transition: none; }
}

/* ---- Phase C: the sidebar's estate drop-downs + the document reader ---- */
/* Properties and vehicles listed under their tabs (Sir, 21 Sep): sidebar
   only — the phone bar stays a bar. */
.subnav-item { display: none; }
.rowlink { width: 100%; text-align: left; background: none; border: none; font-family: inherit; cursor: pointer; }
.rowlink:hover { background: var(--soft); }
@media (min-width: 620px) {
  .subnav-item {
    display: block; width: 100%; text-align: left; font-family: inherit;
    font-size: 0.82rem; color: var(--muted); background: none; border: none;
    padding: 0.3rem 0.8rem 0.3rem 2.6rem; border-radius: var(--r); cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .subnav-item:hover { background: var(--soft); color: var(--ink); }
  .subnav-item.on { color: var(--btn); background: var(--soft); font-weight: 600; }
}
/* The read-and-fill review card: every fact shown before it is written. */
.docrev-row {
  display: flex; gap: 0.6rem; align-items: baseline; padding: 0.45rem 0;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.docrev-row b { display: inline-block; min-width: 9rem; font-weight: 650; }
.docrev-val { color: var(--ink); }

/* ===========================================================================
   LIQUID GLASS (Sir, 21 Sep) — the material layer. Everything here OVERRIDES
   the flat rules above by cascade order: frosted chrome, glass cards, real
   depth, one authored press feel. Type sizes are untouched — the elder pass
   (OS-driven rem scale) outranks any aesthetic.
   =========================================================================== */

/* ---- chrome: the shell is glass over the wash ------------------------------ */
.topchrome {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 1px 2px rgba(2, 6, 16, 0.3);
}
.sidebar { background: transparent; border-bottom: 1px solid var(--edge); }
.work { background: transparent; }
.workbar { background: transparent; }
.status {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--edge); border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}
/* Desktop: the topchrome dissolves (display: contents) and the SIDEBAR is the
   grid item — the floating glass rail is therefore the sidebar itself. */
@media (min-width: 620px) {
  .sidebar {
    background: var(--glass);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid var(--edge); border-right: 1px solid var(--edge);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    margin: 12px 0 12px 12px;
    height: calc(100vh - 24px);
    padding: 1rem 0.8rem;
    flex-direction: column; align-items: stretch; gap: 0.4rem;
  }
  .railhead { padding: 0.35rem 0.5rem 0.7rem; }
  .work { padding-right: 1rem; }
  .workbar {
    background: var(--glass);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-bottom: 1px solid var(--edge);
    margin: 0 0 0 0.4rem; border-radius: 0 0 var(--r) var(--r);
  }
  .tabbar.side { flex: 1 1 auto; }
  .sideuser { margin-top: auto; padding: 0.6rem 0.5rem 0.2rem; border-top: 1px solid var(--edge); }
  .side-actions { flex-wrap: wrap; }
}

/* ---- surfaces: cards and rows carry the depth ------------------------------ */
.getstart, .codecard, .install, .authwrap .card, .vaultpanel, .modal-card {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.getstart, .codecard, .install { border-radius: var(--r); }
.row {
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.row:hover { background: rgba(245, 240, 234, 0.05); border-color: var(--edge); }
.rowlink:hover, .rowlink:active { transform: none; }

/* ---- controls: pills with an authored press -------------------------------- */
button.action {
  border-radius: var(--r-pill);
  transition: transform 0.16s var(--ease-out), filter 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out);
  box-shadow: var(--shadow-1);
}
button.action:active { transform: scale(0.97); box-shadow: 0 1px 2px rgba(2, 6, 16, 0.35); }
button.linklike {
  border-radius: var(--r-pill);
  transition: transform 0.16s var(--ease-out), border-color 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
button.linklike:active { transform: scale(0.97); }
.tab { border-radius: 12px; transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), transform 0.16s var(--ease-out); }
.tab:active { transform: scale(0.97); }
input, select {
  border-radius: var(--r-sm);
  background: rgba(17, 30, 66, 0.85);
  border: 1px solid var(--line);
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
input:focus-visible, select:focus-visible {
  outline: none; border-color: rgba(212, 185, 140, 0.5);
  box-shadow: 0 0 0 3px var(--accent-faint);
}
.chip { border-radius: var(--r-pill); }
.subnav-item { border-radius: var(--r-sm); }
.copybtn { border-radius: var(--r-pill); }

/* ---- the fixed Ask PAS bar --------------------------------------------------
   Docked bottom-centre on every signed-in view; a glass pill with the
   answer sheet rising OUT of it (origin at the bar, not centre). The phone
   clears the fixed tab bar; the desktop floats. */
#askdock {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px));
  width: min(40rem, calc(100vw - 1.4rem));
  z-index: 8;
}
@media (min-width: 620px) { #askdock { bottom: 1.4rem; } }
@media (min-width: 620px) { .toast { bottom: 5.6rem; } }
#askbar {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0 auto; padding: 0.45rem 0.45rem 0.45rem 1rem;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--edge); border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
#askbar:focus-within { border-color: rgba(212, 185, 140, 0.45); box-shadow: var(--shadow-2), 0 0 0 4px var(--accent-faint); }
#askbar .askglass { width: 1.15rem; height: 1.15rem; color: var(--muted); flex: none; }
#askbar input {
  flex: 1; min-width: 0; border: none; background: transparent;
  box-shadow: none; padding: 0.55rem 0; font-size: 1rem; color: var(--ink);
}
#askbar input:focus-visible { box-shadow: none; }
#askbar input::placeholder { color: var(--muted); opacity: 1; }
#askbar .askgo { width: auto; flex: none; padding: 0.5rem 1.15rem; font-size: 0.92rem; }
#asksheet {
  margin: 0 auto 0.6rem; padding: 0.9rem 1.1rem;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--edge); border-radius: var(--r);
  box-shadow: var(--shadow-2);
  transform-origin: bottom center;
  animation: sheet-in 0.22s var(--ease-out) both;
  max-height: 45vh; overflow-y: auto;
}
#asksheet.hidden { display: none; }
#asksheet .ask-src { color: var(--muted); font-size: 0.88em; }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ---- toast + modal: the two system voices ----------------------------------- */
.toast {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--edge); border-width: 1px; border-radius: var(--r);
  box-shadow: var(--shadow-2);
  animation: toast-in 0.22s var(--ease-out) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateX(-50%); }
}
.modal-veil {
  background: rgba(4, 9, 26, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: veil-in 0.2s var(--ease-out) both;
}
.modal-card { animation: card-in 0.22s var(--ease-out) both; }
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-in {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---- browser surfaces Aero Pas draws no others of --------------------------- */
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus-visible { outline-offset: 3px; }

/* ---- gates on the material: hover is for pointers, motion is kind ----------- */
@media (hover: none) {
  .tab:hover:not(.on), .row:hover, .chip:hover, .estatelink:hover { background: none; border-color: transparent; color: inherit; }
}
@media (hover: hover) and (pointer: fine) {
  .row:hover { background: rgba(245, 240, 234, 0.05); border-color: var(--edge); }
}
/* Meridian's own gate: when the OS says no transparency, glass becomes
   solid surface — the blur is a material, not a requirement. */
@media (prefers-reduced-transparency: reduce) {
  .topchrome, .sidebar, .workbar, .status, #askbar, #asksheet, .toast,
  .getstart, .codecard, .install, .modal-card {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--raise);
  }
}
@media (prefers-reduced-motion: reduce) {
  .view-enter, #asksheet, .toast, .modal-veil, .modal-card { animation: none; }
  button.action:active, button.linklike:active, .tab:active { transform: none; }
  .row, button.action, button.linklike, .tab { transition-duration: 0.01ms; }
}