/* Lease Household seasonal color. Values come from /theme.js; these are fallbacks. */
:root {
  --accent: #b08a24;
  --accent-next: #c27a20;
  --accent-ink: #7a5f14;
  --accent-soft: #f4eedf;
  --accent-dim: #e3d4ab;
}

/* ================================================================ one system (design review phase 2, 10/3/26)
   Stephen picked the closet board's pair for the website: Outfit for titles and big numbers, Figtree for text
   (10/3/26, 9:09 and 9:14 PM). Self-hosted from /fonts/ (SIL Open Font License files beside them), no Google Fonts.
   Colors are the system sheet on the design canvas: one warm ground, ivory cards, warm grays.
   1. The type and the shared color names (--plane, --surface, --ink, --ink-2, --ink-muted, --rule, --border) apply to
      every page that loads this file; html:root outranks each page's own :root, so the 35 copies of the old palette
      all follow this one. A page's other colors (its chart and state colors) are its own.
   2. The page pieces (header, section heads, stat tiles, buttons, cards, notes) apply only to pages that opt in with
      <body class="ln-sys">, so a page moves over when it is checked, not before. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/outfit-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/outfit-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/outfit-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/figtree-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/figtree-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/figtree-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/figtree-latin-700-normal.woff2) format('woff2'); }
html:root {
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --plane: #f7f4ee; --surface: #fffdf9; --ink: #1b1a17; --ink-2: #57524a; --ink-muted: #6f695f;
  --rule: #ece5d9; --border: #e5ded2;
  --ln-late: #9a2f24; --ln-late-bg: #f8e3df; --ln-soon: #7d4f0c; --ln-soon-bg: #f7ecd6; --ln-quiet: #4d4943; --ln-quiet-bg: #ece8e1; --ln-good: #2f7d4f;
}
/* The browser's own controls (time and date pickers and their icons, Choose File, checkboxes, select menus, scrollbars) follow
   the page into dark; screen only, so paper keeps print.css's light (2.2 sweep: they stayed light on a dark page). */
@media screen and (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) { color-scheme: dark; }
  /* With color-scheme dark Chrome draws a field's auto focus ring white and two-tone, ignoring outline-color: the accent
     ring drawn plainly instead. :where keeps it weightless, so a field a page draws without a ring keeps none. */
  :where(html:not([data-theme="light"])) :where(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
}
@media screen and (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) {
    --plane: #121110; --surface: #1c1b18; --ink: #f5f2eb; --ink-2: #cbc6bb; --ink-muted: #9b958a;
    --rule: #2d2b27; --border: rgba(255,255,255,0.10);
    --ln-late: #ffab9f; --ln-late-bg: rgba(255,120,100,0.14); --ln-soon: #f3c46b; --ln-soon-bg: rgba(240,180,80,0.14);
    --ln-quiet: #d6d1c6; --ln-quiet-bg: rgba(255,255,255,0.08); --ln-good: #8fd19e;
  }
  /* In dark the accent ink is a light tint, so the filled button takes ink text: white on it was 3.2 to 1
     (second design review, 10/4/26); ink on it is about 5.4. */
  html:root:not([data-theme="light"]) button.primary { color: #1b1a17; }
}
@media print { html:root { --plane: #fff; --surface: #fff; } }
html body { font-family: var(--font-text); }   /* html body outranks each page's own body font, whatever the load order */
button, input, select, textarea { font-family: inherit; }

/* ---- page pieces, for <body class="ln-sys"> ---- */
.ln-sys .page { max-width: 1100px; margin: 0 auto; padding: 28px 24px 56px; }
/* The widths: 1100 standard for every page (Stephen, 11/8/26, R-0482: no narrow 760 pages for web use), .wide 1240 (the
   top bar's own width) for Today-like pages, the calendar, ledger and cards. Full bleed is the map's alone. The games keep
   their own play column (games-app.css). Running text stays near 75 characters inside the wider column (below). */
@media screen { :where(.ln-sys main p) { max-width: 75ch; } }   /* no weight, so any page rule still wins; screens only, paper is unchanged */
.ln-sys .page.wide { max-width: 1240px; }
/* Header: a small link back to the hub, the title, one line of lede, and a quiet Print on the right. */
.ln-sys .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ln-sys .top > div:first-child { min-width: 0; flex: 1 1 320px; }
.ln-back { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; margin-bottom: 2px; }
.ln-back::before { content: ''; width: 6px; height: 6px; border-left: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg); margin: 0 4px 0 2px; }
.ln-back:hover { color: var(--accent-ink); }
.ln-sys h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); }
.ln-sys .top .sub { margin-top: 6px; font-size: 15px; color: var(--ink-2); max-width: 70ch; text-wrap: pretty; }
.ln-sys .top .lede { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); max-width: 70ch; text-wrap: pretty; }   /* no word left alone on the last line */
.ln-sys .top .btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* rhythm:start  The vertical rhythm (R-0513 step 1.1; heroes mockup, Stephen 11/9/26: "let's be consistent in vertical space";
   docs/design-language.md section 2). Spacing uses only the scale 4, 8, 12, 16, 24, 32, through these tokens, never raw pixels.
   A page takes the fixed rhythm with <body class="ln-sys ln-rhythm">: the title row is 72 px (back link 32 + one title line 40,
   with an ellipsis), nothing sits between it and the tabs, and the row of pages, the hero and the page's own tabs sit at the
   same y on every page of a row. The design guard's hero, head and rhythm checks hold it (tools/design-guard.mjs). */
html:root {
  --ln-s1: 4px; --ln-s2: 8px; --ln-s3: 12px; --ln-s4: 16px; --ln-s5: 24px; --ln-s6: 32px;
  --ln-page-top: var(--ln-s5);       /* top of main to the title row; 16 under 600 */
  --ln-head-h: 72px;                 /* the title row: back link 32 + title line 40 */
  --ln-tab-h: 50px;                  /* a tab row, per line: 44 tap + the track's 3 + 3 */
  --ln-gap-head: var(--ln-s4);       /* title row to the row of pages */
  --ln-gap-tabs: var(--ln-s4);       /* row of pages to the hero, or to the page's own tabs */
  --ln-gap-hero: var(--ln-s4);       /* hero to what follows it */
  --ln-gap-content: var(--ln-s5);    /* page tabs to the first content */
  --ln-gap-section: var(--ln-s6);    /* above a section heading */
  --ln-gap-heading: var(--ln-s3);    /* a heading to what it heads */
  --ln-row-h: 38px;                  /* a list or table row with a mouse, as the Register Stephen approved (08.02, 11/10/26); 44 on touch */
  --ln-card-pad: var(--ln-s4);       /* inside every card and the hero */
}
@media (pointer: coarse) { html:root { --ln-row-h: 44px; } }
@media (max-width: 599px) { html:root { --ln-page-top: var(--ln-s4); } }
.ln-sys.ln-rhythm main.page { padding-top: var(--ln-page-top); }
.ln-sys.ln-rhythm main > .top { height: var(--ln-head-h); flex-wrap: nowrap; align-items: flex-end; gap: var(--ln-s3); margin: 0 0 var(--ln-gap-head); position: relative; }
.ln-sys.ln-rhythm main > .top > div:first-child { flex: 1 1 auto; min-width: 0; }
.ln-sys.ln-rhythm main > .top .ln-back { margin: 0; }
.ln-sys.ln-rhythm main > .top h1 { line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-sys.ln-rhythm main > .top > .btns { flex: none; flex-wrap: nowrap; align-self: flex-end; min-height: 40px; }
.ln-sys.ln-rhythm main > .top + .ln-tabrow, .ln-sys.ln-rhythm main > .ln-tabrow { margin: 0 0 var(--ln-gap-tabs); }
.ln-sys.ln-rhythm main .ln-pagetabs { margin: 0 0 var(--ln-gap-content); }
@media (max-width: 699px) {
  /* Print keeps its corner on the back link's line; the 72 px row still holds, so the title never drops under it */
  .ln-sys.ln-rhythm main > .top { margin-bottom: var(--ln-gap-head); }
  .ln-sys.ln-rhythm main > .top > .btns:not(:has(> :not(.ln-print):not(.ln-wide))) { top: 0; right: -8px; }
  .ln-sys.ln-rhythm main .ln-pagetabs { margin: 0 0 var(--ln-gap-content); }
}
@media print { .ln-sys.ln-rhythm main > .top { height: auto; margin-bottom: 0; } .ln-sys.ln-rhythm main > .top h1 { white-space: normal; line-height: 1.15; } }
/* rhythm:end */
/* The hero band (R-0474 3.6, Stephen picked option A 11/9/26; shared on every trip page since R-0496, Stephen 11/9/26: "definitely
   the rest of the trips"): the month's soft accent with a dim accent border and a drawn contour (decoration only, drawn by
   theme.js into any main .ln-band, svg.ln-topo). A page puts its head in <header class="ln-band">: its .top (title, lede, buttons)
   or its own head, and the page's tab row lands inside under it. .slim is the Travel Map's one line across the top of main.
   Paper drops the fill, the border and the contour (print.css). One style: a page never tints a head of its own. */
.ln-sys main .ln-band { position: relative; overflow: hidden; margin: 0 0 20px; padding: 12px 16px 18px; background: var(--accent-soft); border: 1px solid var(--accent-dim); border-radius: 16px; }
.ln-sys main .ln-band > svg.ln-topo { position: absolute; right: -30px; top: -10px; width: 70%; height: 140%; opacity: 0.55; pointer-events: none; }
.ln-sys main .ln-band > :not(svg.ln-topo) { position: relative; }
.ln-sys main .ln-band > .top { margin-bottom: 0; }
.ln-sys main .ln-band > .top + .ln-tabrow { margin: 12px 0 0; }
/* Over the band, one line: the back link at the left, the page's buttons and Print at the right, as on the trip page and the
   itinerary (.crumb there; 08.02 review of R-0496, 11/9/26), so every trip page puts them in the same place. */
.ln-sys main .ln-crumb { display: flex; justify-content: space-between; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ln-sys main .ln-crumb .ln-back { margin: 0; min-height: 44px; }
.ln-sys main .ln-crumb .btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ln-sys main .ln-crumb .print-corner { position: static; }
/* The trip's own row (Overview | Itinerary | Packing | Album) is one line on a phone on every one of its pages (08.02, 11/9/26) */
@media (max-width: 699px) { .ln-seg.ln-tabrow.trip-tabs:not(.ln-tabgrid) > a { padding: 0 11px; } }
@media (min-width: 700px) { .ln-sys main .ln-band { padding: 14px 24px 22px; } }
.ln-sys main .ln-band.slim { margin: 0; padding: 8px 18px; border-width: 0 0 1px; border-radius: 0; }
.ln-sys main .ln-band.slim > svg.ln-topo { right: 0; top: -60%; width: 34%; height: 220%; }
@media (max-width: 699px) { .ln-sys main .ln-band.slim { padding: 6px 12px 8px; } .ln-sys main .ln-band.slim > svg.ln-topo { width: 60%; } }
button.ln-print { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
button.ln-print[hidden] { display: none; }   /* the rule above outranks the hidden attribute; a page that hides Print means it (5.1) */
button.ln-print::before { content: ''; width: 16px; height: 16px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E") center / contain no-repeat; }
button.ln-print:hover { background: var(--accent-soft); color: var(--accent-ink); }
/* Full width (R-0304 2.15; theme.js wide:start): the Money row's one-tap toggle, beside Print, quiet like it; wide screens with a mouse only, never on paper */
/* !important on the look: Money pages style every main button (border, fill) and this one stays quiet like Print on all of them */
button.ln-wide { display: none; min-height: 44px; padding: 8px 12px; border: 0 !important; border-radius: 10px; background: transparent !important; color: var(--ink-2) !important; font: inherit; font-size: 14px; font-weight: 400; cursor: pointer; }
button.ln-wide:hover, button.ln-wide[aria-pressed="true"] { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
@media screen and (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  button.ln-wide { display: inline-flex; align-items: center; }
  html.ln-wide body.ln-sys main.page { max-width: none; }
}
/* Section heads: one style, Outfit 22. The jump bar's group label (.gk) stays as the only eyebrow. */
.ln-sys main h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink); }
.ln-sys main h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
/* Stat tiles: a small caps label, an Outfit number, a quiet line under it. */
.ln-sys .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 16px 14px; }
.ln-sys .stat .l { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.ln-sys .stat .v { font-family: var(--font-display); font-weight: 500; font-weight: 500; font-size: 30px; line-height: 1.12; letter-spacing: -0.01em; margin-top: 4px;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.ln-sys .stat .v small { font-family: var(--font-text); font-size: 14px; font-weight: 500; color: var(--ink-2); margin-left: 3px; letter-spacing: 0; }
.ln-sys .stat .s { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
/* Cards, tables and notes */
.ln-sys .card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.ln-sys .note, .ln-sys .lead { color: var(--ink-2); }
.ln-sys .foot { color: var(--ink-muted); }
/* Buttons keep each page's own outlined style (it already reads the shared colors); the one filled button in a view is
   button.primary in accent ink (set for every page below, under controls). */
/* Selected, two ways by job (second design review). A segmented control switches what the page shows (views, people):
   the chosen one is raised. A chip jumps or filters within the page: the chosen one is the soft accent, like nav.jump. */
.ln-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--rule); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ln-seg::-webkit-scrollbar { display: none; }
.ln-seg > button, .ln-seg > a { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.ln-seg > .on, .ln-seg > [aria-selected="true"], .ln-seg > [aria-pressed="true"], .ln-seg > [aria-current] {
  background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 0 0 1px var(--ink-muted); }   /* the ring makes the picked one 3 to 1 or more against the track in both schemes (5.6) */
/* A row of tabs across related pages (TAB_ROWS in theme.js): 44 px links, wraps into a grid on a phone (below), never on paper.
   Width and margin are :where() so a page's own row rule (.tree-tabs in tree.css) still wins. */
:where(.ln-tabrow) { width: max-content; margin: 0 0 10px; }
.ln-seg.ln-tabrow { display: flex; }
.ln-seg.ln-tabrow[hidden] { display: none; }
.ln-seg.ln-tabrow > a { min-height: 44px; }
/* Each tab holds the width of its own name in the picked weight (an invisible bold copy under it), so the row is the same width on each
   of its pages whichever tab is picked, and nothing shifts when the pick moves (R-0510: the trip row was 325.7 px on Packing and 326.4
   on Itinerary). The grid shares the width evenly, so it needs no copy. */
.ln-seg.ln-tabrow:not(.ln-tabgrid) .ln-tabw { display: inline-flex; flex-direction: column; }
.ln-seg.ln-tabrow:not(.ln-tabgrid) .ln-tabw::after { content: attr(data-t) / ""; font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none; }
main .plex-tabs ~ nav.jump a { min-height: 44px; }   /* the Movies and TV pages' jump chips, 44 px since R-0417 */
@media print { .ln-tabrow { display: none !important; } }
/* On a phone a row never scrolls (R-0458): theme.js sets ln-tabgrid and --cols (3 for more than four tabs, 2 for four or fewer that
   do not fit), and the tabs share the width, a long name wrapping inside its own 44 px tab. */
.ln-seg.ln-tabrow.ln-tabmeasure > a { font-weight: 600; }   /* tabFit measures every tab as the picked one */
.ln-seg.ln-tabrow.ln-tabgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); width: 100%; overflow: visible; }
.ln-seg.ln-tabrow.ln-tabgrid > a { padding: 4px 6px; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
/* In-page tabs (R-0481, Stephen 11/8/26: "Like energy which is perfect"; drawn by theme.js from main's .ln-tabpane parts). Energy's
   own tab row, lifted as it was (R-0418): a .ln-seg track that spans the column on a phone, its tabs sharing it, 44 px tall, and is as
   wide as its words from 700 px. A row that does not fit a phone wraps into a grid (ln-tabgrid) instead of scrolling; Energy's six fit.
   One part shows on screen; paper prints them all (only screen hides them). Before theme.js runs, the first part shows and the rest
   wait, so nothing flashes. */
.ln-sys main .ln-pagetabs { display: flex; width: 100%; margin: 4px 0 16px; scroll-margin-top: 72px; }
.ln-sys main .ln-pagetabs[hidden] { display: none; }
.ln-sys main .ln-pagetabs > a { flex: 1 0 auto; min-height: 44px; padding: 0 8px; }
.ln-sys main .ln-pagetabs > a[hidden] { display: none; }
.ln-sys main .ln-pagetabs > a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
@media (min-width: 700px) { .ln-sys main .ln-pagetabs { display: inline-flex; width: auto; } .ln-sys main .ln-pagetabs > a { padding: 0 18px; } }
@media screen and (max-width: 699px) { .ln-sys main .ln-pagetabs { margin: 2px 0 12px; } .ln-sys main .ln-pagetabs > a { padding: 0 6px; font-size: 14px; } }
.ln-sys main .ln-pagetabs.ln-tabgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); overflow: visible; }
.ln-sys main .ln-pagetabs.ln-tabgrid > a { padding: 4px 6px; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
@media screen {
  html.ln-tabbed .ln-tabpane:not(.on), html:not(.ln-tabbed) .ln-tabpane ~ .ln-tabpane:not(.on) { display: none; }
  .ln-tabname { display: none; }
}
@media print { .ln-pagetabs { display: none !important; } }
/* the House Manual's one 1Password line (TAB_ROWS foot), quiet at the foot of the page */
.ln-rowfoot { font-size: 12.5px; color: var(--ink-muted); margin: 22px 0 0; }
.src + .ln-rowfoot, .foot + .ln-rowfoot { margin-top: 6px; }
.ln-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ln-chip small, .ln-chip .n { color: var(--ink-muted); font-size: 13px; }
.ln-chip.on, .ln-chip[aria-pressed="true"], .ln-chip[aria-selected="true"], .ln-chip[aria-current] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.ln-chip.on small, .ln-chip.on .n, .ln-chip[aria-pressed="true"] small, .ln-chip[aria-pressed="true"] .n { color: var(--accent-ink); }
.ln-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* A thumb-sized tap (44 px) for the shared chips, segments and Print on a phone and an iPad (Stephen: tap targets big enough
   for a thumb on every page). The same test the House Manual pages use (R-0458 PR 4): a touch screen at any width, or any
   window up to 1024 px. A desktop with a mouse keeps the tighter 38 and 40 px look. Taller, not bigger type; paper unchanged. */
@media screen and (pointer: coarse), screen and (max-width: 1024px) {
  .ln-chip, .ln-seg > button, .ln-seg > a, button.ln-print { min-height: 44px; }
}
/* Pills, exceptions only (late, due soon, quiet notice). A quiet row means all is well. */
.ln-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--ln-quiet-bg); color: var(--ln-quiet); white-space: nowrap; vertical-align: middle; }
.ln-pill.late { background: var(--ln-late-bg); color: var(--ln-late); }
.ln-pill.soon { background: var(--ln-soon-bg); color: var(--ln-soon); }
.ln-pill.warm { background: var(--accent-soft); color: var(--accent-ink); }
@media (max-width: 699px) {
  .ln-sys .page { padding: 18px 16px 40px; }
  .ln-sys h1 { font-size: 28px; }
  .ln-sys main h2 { font-size: 20px; }
  .ln-sys .stat .v { font-size: 26px; }
  .ln-sys .top { margin-bottom: 14px; position: relative; }
  /* Print sits on the back link's line at the right, not on a row of its own above the content (review Top 10 #8). */
  /* Only when the block holds nothing but Print: a year menu or an Edit button stays in the flow under the title
     (Holiday Card overlapped its title with three controls there, second design review). */
  .ln-sys .top > .btns:last-child:not(:has(> :not(.ln-print):not(.ln-wide))) { position: absolute; top: -4px; right: -8px; }   /* Full width (the Money row, R-0498 2.3) never shows here */
  /* With other buttons in the block, Print alone goes up to that corner and the rest stay under the title, so Print is in one
     place on every page (2.2 sweep). */
  /* Not where a page already places that corner itself (.tools on Tasks, #topBtns on Kroger Run) or keeps two print buttons
     together (Park Passport, which puts the pair in .print-corner itself, 4.3). */
  .ln-sys .top > .btns:not(.tools):not(#topBtns):has(> :not(.ln-print)):not(:has(> .ln-print ~ .ln-print)) > button.ln-print:not(.print-corner) { position: absolute; top: -4px; right: -8px; z-index: 1; margin: 0; }
  /* A page's own Print button that would otherwise take a row to itself: put class print-corner on it, and it sits at the top
     right of the nearest positioned header block (.ln-sys .top is one at this width). Pages nudge top and right to suit (fix-print, 10/4/26). */
  .print-corner { position: absolute; top: -4px; right: -8px; z-index: 1; margin: 0; }   /* one height with the rule above: centered on the back link's line (4.7) */
  /* With Print up in the corner, the rest of the header's buttons take the line under the title. From 600 to 699 px they
     would otherwise fit beside the title and run into Print (Bills, Water, Trips, Quote Book, Warranties, Packing Lists,
     Cards, Ledger and Thanksgiving did; 4.7). Only while something besides Print shows there, so a hidden Add leaves no empty
     line; and not Tasks or Kroger Run, which lay out that corner themselves. */
  .ln-sys .top > :not(:first-child):not(.tools):not(#topBtns):has(button.ln-print):has(> :not(.ln-print):not([hidden]):not(.print-corner):not(.ln-wide)) { flex-basis: 100%; }
}
@media print {
  .ln-back, button.ln-print { display: none !important; }
  .ln-sys .page { padding: 0; max-width: none; }
  .ln-sys h1 { font-size: 24px; }
  .ln-sys main h2 { font-size: 16px; }
  .ln-sys .stat { border-color: #ddd; }
}

/* ---- site bar (10/3/26, Stephen picked "A. Night sky"): the deep blue of the house drawing's night sky, cream
   type, the live oak icon, and the month's color only as the line under the hub you are in and the dot by its name.
   #lease-nav outranks the older .sitebar rules in site.css and the ledger. ---- */
:root { --nav-sky: #111b33; --nav-ink: #f3eed8; }
#lease-nav.sitebar { position: relative; background: var(--nav-sky); border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--nav-ink); }
#lease-nav.sitebar::after { display: none; }
.season { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(243,238,216,0.62); white-space: nowrap; }
.season-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---- headings and tabs ---- */
h1 { color: var(--ink); }
header > nav { background: var(--accent-soft); }
header > nav button[aria-selected="true"] { color: var(--accent-ink); font-weight: 600; }
.section-h { color: var(--accent-ink); }

/* ---- the hero tile carries the color; the others get a thin rule ---- */
.card.tile { position: relative; overflow: hidden; }
.card.tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent-dim); }
.card.tile.hero { background: linear-gradient(140deg, var(--accent-soft) 0%, var(--surface) 65%); }
.card.tile.hero::before { background: linear-gradient(90deg, var(--accent), var(--accent-next)); }
.hero .value { color: var(--accent-ink); }

/* ---- controls ---- */
button.primary { background: var(--accent-ink); color: #fff; }
button.primary:hover { filter: brightness(1.08); }
input:focus, select:focus, textarea:focus { outline-color: var(--accent); }
.checkrow input, .newtoggle input { accent-color: var(--accent-ink); }
.current[data-for]:hover { color: var(--accent-ink); }
tbody tr:hover { background: var(--accent-soft); }
.numcopy:hover { background: var(--accent-dim); }
th { color: var(--accent-ink); }   /* no fade: a page that greys its table heads with --ink-muted keeps 4.5 to 1 (step 7.1) */

/* ---- home page ---- */
a.card { position: relative; overflow: hidden; }
a.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
a.card:hover { border-color: var(--accent); }
a.card.soon::before { background: var(--accent-dim); }

@media print {
  .card.tile::before, .sitebar::after { display: none; }
  .card.tile.hero { background: #fff; }
}

/* Owner-only links (backups, site status, uploads) stay hidden until theme.js confirms the owner. */
html:not([data-role="owner"]) .owner-only { display: none !important; }

/* ================================================================ the menu (drawn by theme.js) */
#lease-nav.sitebar { min-height: 60px; display: block; padding: 0; margin: 0; border-radius: 0; }   /* resets pages' own nav rules (the ledger's) */
.ln-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 36px; }
.ln-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--nav-ink); text-decoration: none; white-space: nowrap; }
.ln-brand img { width: 30px; height: 30px; border-radius: 7px; display: block; }
.ln-brand span { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; }
.ln-hubs { display: flex; gap: 28px; height: 60px; }
.ln-hubs a { display: flex; align-items: center; font-size: 15px; color: rgba(243,238,216,0.72); text-decoration: none; white-space: nowrap; }
.ln-hubs a:hover { color: var(--nav-ink); }
.ln-hubs a[aria-current] { color: var(--nav-ink); font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent); }
.ln-end { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.ln-search { display: flex; align-items: center; gap: 8px; height: 38px; width: 220px; padding: 0 8px 0 12px; border-radius: 10px;
  border: 1px solid rgba(243,238,216,0.16); background: rgba(243,238,216,0.07); color: rgba(243,238,216,0.68);
  font: inherit; font-size: 13.5px; cursor: pointer; }
.ln-search:hover { border-color: rgba(243,238,216,0.34); color: var(--nav-ink); }
.ln-search kbd { margin-left: auto; font: 11px system-ui, sans-serif; padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(243,238,216,0.2); }
.ln-tabs { display: none; }
/* When the menu could not be loaded (theme.js: window.LEASE_MENU 'failed'): one quiet line with a thumb-sized button, in the bar and on a hub page. */
.ln-menufail { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 6px 16px; font-size: 14px; color: var(--ink); background: var(--surface); border-bottom: 1px solid var(--border); }
.ln-menufail.ln-menufail-hub { margin: 14px 0; border: 1px solid var(--border); border-radius: 12px; }
.ln-menufail .ln-retry { min-height: 44px; min-width: 44px; padding: 0 16px; font: inherit; font-weight: 600; color: var(--accent-ink); background: transparent; border: 1px solid var(--accent-ink); border-radius: 10px; cursor: pointer; }
.ln-menufail .ln-retry:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 999px) {
  .ln-in { gap: 24px; padding: 0 20px; }
  .ln-hubs { gap: 20px; }
  .ln-search { width: auto; }
  .ln-search kbd, .ln-end .season { display: none; }
}

@media (max-width: 699px) {
  #lease-nav.sitebar { position: sticky; top: 0; z-index: 40; min-height: 56px; }
  .ln-in { padding: 0 6px 0 16px; gap: 10px; height: 56px; }
  .ln-brand img { width: 28px; height: 28px; }
  .ln-brand span { font-size: 20px; }
  .ln-hubs, .ln-end .season { display: none; }
  .ln-search { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 22px; }
  .ln-search span, .ln-search kbd { display: none; }
  .ln-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--nav-sky); padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); margin: 0; border-radius: 0; gap: 0; }
  .ln-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px;
    color: rgba(243,238,216,0.68); text-decoration: none; font-size: 11px; }
  .ln-tabs a .ic { display: flex; padding: 2px 14px; border-radius: 999px; }
  .ln-tabs a:only-child { grid-column: 1 / -1; justify-self: center; width: 34%; max-width: 140px; }   /* a lone Today (before the menu has loaded) sits in the middle */
  .ln-tabs a[aria-current] { color: var(--nav-ink); font-weight: 600; }
  .ln-tabs a[aria-current] .ic { background: rgba(224,122,46,0.3); background: color-mix(in srgb, var(--accent) 34%, transparent); }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
}

/* search: modeled on iPhone Spotlight (10/4/26). A rounded sheet, a field with Cancel on phones, a Top Hit, then groups. */
.ln-pal { position: fixed; inset: 0; z-index: 60; background: rgba(11,11,11,0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; padding: 9vh 16px 16px; }
.ln-pal.on { display: flex; }
.ln-pal-box { width: min(640px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: var(--surface, #fcfcfb); color: var(--ink, #0b0b0b); border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.3); overflow: hidden; border: 1px solid var(--border, rgba(11,11,11,0.1)); }
.ln-pal-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.ln-pal-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: var(--rule, rgba(11,11,11,0.07)); color: var(--ink-muted, #898781); }
.ln-pal-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink, #0b0b0b); font: inherit; font-size: 17px; height: 44px; -webkit-appearance: none; appearance: none; }
.ln-pal-field input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ln-pal-field:focus-within { box-shadow: 0 0 0 2px var(--accent-ink, #8a5a1e); }
.ln-pal-cancel { display: none; border: 0; background: none; color: var(--accent-ink, #8a5a1e); font: inherit; font-size: 16px; min-height: 44px; padding: 0 4px; cursor: pointer; }
.ln-pal-body { overflow: auto; overscroll-behavior: contain; padding: 0 8px 10px; flex: 1; min-height: 0; }
.ln-pal-body .ph { display: flex; align-items: center; gap: 7px; padding: 14px 10px 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted, #898781); }
.ln-pal-body .ph .pgi { display: inline-flex; color: var(--accent-ink); }
.ln-pal-body .pclr { margin-left: auto; border: 0; background: none; color: var(--accent-ink, #8a5a1e); font: inherit; font-size: 12.5px; cursor: pointer; min-height: 28px; }
.ln-pal-body .pl { list-style: none; margin: 0; padding: 0; }
.ln-pal-body li a, .ln-pal-body .prc, .ln-pal-body .pmore { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 11px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; min-height: 44px; }
.ln-pal-body li[aria-selected] a, .ln-pal-body li[aria-selected] .prc, .ln-pal-body li[aria-selected] .pmore, .ln-pal-body li a:hover { background: var(--accent-soft); }
.ln-pal-body .pi { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--rule, rgba(11,11,11,0.07)); color: var(--accent-ink); flex-shrink: 0; }
.ln-pal-body .pt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ln-pal-body .n { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-pal-body .w { font-size: 12.5px; color: var(--ink-muted, #898781); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-pal-body .x { font-size: 12.5px; color: var(--ink-2, #57524a); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ln-pal-body mark { background: none; color: inherit; font-weight: 700; }
.ln-pal-body .pl-top li a { padding: 10px; }
.ln-pal-body .pl-top .pi { width: 38px; height: 38px; }
.ln-pal-body .pl-top .n { font-size: 17px; font-weight: 600; }
.ln-pal-body .pmore { color: var(--accent-ink, #8a5a1e); font-size: 14px; min-height: 40px; padding-left: 54px; }
.ln-pal-body .pnone { padding: 18px 12px; color: var(--ink-muted, #898781); font-size: 14.5px; }
.ln-pal-body .phere { padding: 10px 10px 0; }
.ln-pal-body .pchip { font: inherit; font-size: 13.5px; font-weight: 600; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border, #d8d4cc); background: none; color: var(--ink-2, #5c5a55); cursor: pointer; }
.ln-pal-body .pchip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-ink); color: var(--accent-ink); }
.ln-pal-body .pnone-s { padding: 6px 12px 10px; }
.ln-pal-body .pfz { padding: 10px 12px 14px; color: var(--ink-muted, #898781); font-size: 13px; overflow-wrap: anywhere; }
.ln-pal-body .pask { padding: 8px 2px 0; }
.ln-pal-body .pask-b { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px; border: 1px dashed var(--accent-ink, #8a5a1e); border-radius: 11px; background: none; color: var(--accent-ink, #8a5a1e); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.ln-pal-body .pask-b:hover, .ln-pal-body .pask-b:focus-visible { background: var(--accent-soft); }
.ln-pal-body .pask-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-pal-body .pans { margin: 8px 2px 0; padding: 4px 12px 10px; border: 1px solid var(--border, #d8d4cc); border-radius: 11px; }
.ln-pal-body .pans-h { display: flex; align-items: center; gap: 7px; padding: 8px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted, #898781); }
.ln-pal-body .pans-h .pgi { display: inline-flex; color: var(--accent-ink); }
.ln-pal-body .pans-t { margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--ink, #0b0b0b); user-select: text; overflow-wrap: anywhere; }
.ln-pal-body .pans-w { color: var(--ink-muted, #898781); }
.ln-pal-body .pans-n { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-muted, #898781); }
.ln-pal-foot { padding: 8px 16px; font-size: 12px; color: var(--ink-muted, #898781); border-top: 1px solid var(--border, rgba(11,11,11,0.1)); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 699px) {
  .ln-pal { padding: 0; background: var(--plane, #f7f4ee); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ln-pal-box { width: 100%; max-height: none; height: 100vh; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; padding-top: env(safe-area-inset-top); background: var(--plane, #f7f4ee); }
  .ln-pal-in { padding: 10px 12px 6px; }
  .ln-pal-cancel { display: block; }
  .ln-pal-body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .ln-pal-foot { display: none; }
}

/* ---- hub pages (design review phase 4, 10/4/26; the grouped House hub Stephen approved on the canvas, the same pattern on
   the others). A header with the lede (and the manual search on House), live tiles that /data/hub fills with a fact, then
   the rest as rows in groups: two columns on a computer, one on an iPad or phone. A row's few words hide on a phone unless
   they are live (Warranties' next end date, the latest water bill). ---- */
.ln-hub { max-width: 1100px; margin: 0 auto; padding: 36px 24px 64px; }
.ln-hh { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 26px; }
.ln-hh h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); }
.ln-hh p { margin: 6px 0 0; color: var(--ink-2); font-size: 16px; }
.ln-hsearch { flex: 0 1 540px; display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 50px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--ink-muted); }
.ln-hsearch svg { flex: none; }
.ln-hsearch input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15.5px; color: var(--ink); outline: none; padding: 12px 0; }
.ln-hsearch input::placeholder { color: var(--ink-muted); }
.ln-hsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ln-hsec { margin: 0 0 30px; }
.ln-hsec h2 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink); }
.ln-live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ln-live.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ln-live.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ln-live.n1 { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
.ln-live.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ln-live.n5 > * { grid-column: span 2; }
.ln-live.n5 > :nth-child(n+4) { grid-column: span 3; }
.ln-live.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ln-lt { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 17px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  color: inherit; text-decoration: none; min-height: 124px; }
.ln-lt:hover { border-color: var(--accent); }
.ln-lt-b { display: flex; flex-direction: column; gap: 4px; }
.ln-lt-h { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--ink); }
.ln-lt-h svg { color: var(--accent-ink); flex: none; }
.ln-lt-v { margin-top: 6px; font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ln-lt-v small { font-family: var(--font-text); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); margin-left: 5px; }
.ln-lt-t { margin-top: 6px; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); }
.ln-lt-s { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.ln-lt-t { text-wrap: balance; }   /* "Ordered, week of 10/3" breaks as two even lines on a phone, not "... week of / 10/3" */
.ln-lt.late .ln-lt-v, .ln-lt.late .ln-lt-t { color: var(--ln-late); }
.ln-lt.soon .ln-lt-v, .ln-lt.soon .ln-lt-t { color: var(--ln-soon); }
.ln-used { margin-bottom: 24px; }   /* Your most used (Family hub, 10/20/26): a short row of shortcuts above the groups */
.ln-usedrow { display: flex; flex-wrap: wrap; gap: 10px; }
.ln-usedlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.ln-usedlink .ic { display: flex; color: var(--accent-ink); }
.ln-usedlink:hover { border-color: var(--accent); }
.ln-hcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
.ln-rows { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.ln-row { display: flex; align-items: center; gap: 14px; padding: 0 16px 0 18px; min-height: 62px; color: inherit; text-decoration: none; border-top: 1px solid var(--rule); }
.ln-row:first-child { border-top: 0; }
.ln-row:hover { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.ln-row .ic { display: flex; color: var(--accent-ink); flex: none; }
.ln-row-t { flex: 1; min-width: 0; padding: 11px 0; line-height: 1.35; font-size: 15px; color: var(--ink); }
.ln-row-t b { font-weight: 600; margin-right: 5px; }
.ln-row-l { color: var(--ink-2); font-size: 14px; }
.ln-row-l.late { color: var(--ln-late); }
.ln-row-l.soon { color: var(--ln-soon); }
.ln-row .chev { color: var(--ink-muted); flex: none; }
.ln-hres { display: grid; gap: 8px; margin: -8px 0 28px; }
.ln-hres a.hit { display: grid; gap: 2px; min-height: 44px; padding: 10px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--ink); text-decoration: none; }
.ln-hres a.hit:hover { border-color: var(--accent); }
.ln-hres .where { font-size: 12.5px; color: var(--ink-muted); }
.ln-hres .none { margin: 0; color: var(--ink-muted); }
.ln-empty { color: var(--ink-muted, #898781); }
.ln-soon { margin: 0; color: var(--ink-2); font-size: 15px; }   /* a hub group with no page yet (Entertainment's Listen, R-0483) */
@media (max-width: 1020px) { .ln-live { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ln-live.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .ln-hcols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) {
  .ln-hub { padding: 20px 16px 32px; }
  .ln-hh { margin-bottom: 20px; }
  .ln-hh h1 { font-size: 32px; }
  .ln-hh p { font-size: 15px; }
  .ln-hsearch { flex-basis: 100%; min-height: 48px; }
  .ln-hsearch input { font-size: 16px; }
  .ln-hsec { margin-bottom: 24px; }
  .ln-hsec h2 { font-size: 20px; margin-bottom: 10px; }
  .ln-live, .ln-live.n3, .ln-live.n5, .ln-live.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ln-live.n5 > *, .ln-live.n5 > :nth-child(n+4) { grid-column: auto; }   /* the second form outranks the desktop's span 3 (2.2 sweep) */
  .ln-live > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* no tile alone on a row */
  .ln-live.n1 { max-width: none; }
  .ln-lt { min-height: 0; padding: 13px 14px 14px; gap: 3px; }
  .ln-lt-b { gap: 3px; }
  .ln-lt-h { font-family: var(--font-text); font-size: 13.5px; font-weight: 600; color: var(--accent-ink); }
  .ln-lt-h svg { display: none; }
  .ln-lt-v { margin-top: 2px; font-size: 24px; }
  .ln-lt-v small { display: block; margin: 1px 0 0; font-size: 13px; }
  .ln-lt-t { margin-top: 2px; font-size: 15px; }
  .ln-lt-s { font-size: 12.5px; }
  .ln-row { min-height: 54px; }
  .ln-row-l { display: none; }
  .ln-row-l.live { display: block; font-size: 13px; }
  .ln-row-l.live::first-letter { text-transform: uppercase; }
}
@media print { .ln-hsearch, .ln-hres { display: none !important; } }
.ln-build { text-align: center; font-size: 12px; color: var(--ink-muted, #898781); padding: 18px 16px 22px; }
@media print { .sitebar, .ln-tabs, .ln-pal, .ln-build { display: none !important; } body { padding-bottom: 0 !important; } }
/* Thumb-sized targets on touch screens (scan 10/1/26): the ledger's note and copy buttons, the filter
   menus on Points and Credit Cards, the bank sign-in links, the brand link and the trips' Edit buttons.
   Desktop keeps its tighter look. */
/* The ledger's copy and note buttons: a 32 px target with the mouse too (design review, 10/4/26), 44 px by touch. */
.copy, .notebtn { min-width: 32px; min-height: 32px; align-items: center; justify-content: center; margin-top: -8px; margin-bottom: -8px; }
@media (pointer: coarse) {
  .copy, .notebtn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin-top: -12px; margin-bottom: -12px; }
  select.filter { min-height: 40px; }
  .signin, .bankbtn { min-height: 40px; }
  .ln-brand { min-height: 44px; }
  button.small { min-height: 40px; }
}
/* ================================================================ the "..." menu (10/8/26)
   A quiet square button that opens a short list of actions: <details class="emenu"><summary>...</summary>
   <div class="emenu-list"><button>...</button></div></details>. Kroger Run, the Roadmap and Thanksgiving (a worded Edit
   button there) share it. theme.css loads after a page's own styles, so a page changes a part with a `main` prefix. */
.emenu { position: relative; }
.emenu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; user-select: none; }
.emenu > summary::-webkit-details-marker { display: none; }
.emenu > summary:hover, .emenu[open] > summary { color: var(--ink); border-color: var(--ink-muted); }
.emenu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 35; min-width: 250px; display: grid; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,0.14); }
.emenu-list button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: inherit; text-align: left; min-height: 44px;
  border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 14.5px; cursor: pointer; }
.emenu-list button:hover, .emenu-list button:focus-visible { background: var(--accent-soft); color: var(--accent-ink); }
/* The list opens over the sticky section chips (nav.jump, 30) and under the phone's top bar and tab bar (40): at 20 it sat
   under the chips, so Thanksgiving's Date and times could not be tapped on an iPad (R-0467, 11/7/26). */
/* A list with no room on its side (under a sticky bar, past the phone tab bar) opens the other way; theme.js sets the class (6.5). */
.emenu[open]:not(.placed) > .emenu-list { opacity: 0; }
.emenu.down > .emenu-list, main .emenu.down > .emenu-list { top: calc(100% + 6px); bottom: auto; }
.emenu.up > .emenu-list, main .emenu.up > .emenu-list { top: auto; bottom: calc(100% + 6px); }
/* In dark the card and the list were the same color and the shadow did not show, so the list sits a step lighter (6.5). */
@media screen and (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) .emenu-list { background: #2a2824; border-color: rgba(255,255,255,0.16); box-shadow: 0 12px 32px rgba(0,0,0,0.55); }
}
@media print { .emenu { display: none !important; } }
/* ================================================================ shorter pages (10/1/26): see the end of theme.js */
nav.jump { position: sticky; top: 0; z-index: 30; display: flex; gap: 6px; padding: 8px 0; margin: 0 0 14px; background: var(--plane, #f9f9f7);
  border-bottom: 1px solid var(--rule, #e1e0d9); overflow-x: auto; scrollbar-width: none; }
nav.jump::-webkit-scrollbar { display: none; }
nav.jump[hidden] { display: none; }
nav.jump a { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--ink-2, #52514e); text-decoration: none; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border, rgba(11,11,11,0.1)); background: var(--surface, #fcfcfb); min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
nav.jump a.on { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
/* Section shortcuts (R-0419 2.1): the same bar, built by theme.js for a page with <body data-sections>; 44 px taps. */
nav.jump.ln-shortcuts a { min-height: 44px; }
[data-jump] { scroll-margin-top: 64px; }
.gk { margin: 40px 0 0; padding-top: 10px; border-top: 2px solid var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-ink); }
/* Method text, folded (design review phase 5, 10/4/26): the numbers stay out, the explanation sits behind a quiet
   "How this is worked out" line. <details class="ln-how"><summary>How ...</summary>...</details>, or a fold button with
   class "more ln-q". Print opens both. */
details.ln-how { margin: -2px 0 14px; max-width: 75ch; }
details.ln-how > summary, button.more.ln-q { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 0; border: 0; background: none;
  cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-2); border-radius: 6px; }
details.ln-how > summary::-webkit-details-marker { display: none; }
details.ln-how > summary::before, button.more.ln-q::before { content: 'i'; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor;
  font: 700 10px/13px var(--font-text); text-align: center; font-style: normal; }
details.ln-how > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg) translate(-2px, -1px); }
details.ln-how[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
details.ln-how > summary:hover, button.more.ln-q:hover { color: var(--accent-ink); }
@media screen { details.ln-how > :not(summary) { font-size: 13.5px; color: var(--ink-2); margin: 4px 0 8px; } }   /* paper takes the page's print sizes */
button.more.ln-q { margin: -2px 0 14px; }
@media (pointer: coarse) { details.ln-how > summary, button.more.ln-q { min-height: 44px; } }
@media print { details.ln-how > summary, button.more.ln-q { display: none !important; } details.ln-how > :not(summary) { display: block; } }
.fold { display: none; }
.fold.open { display: block; }
button.more, button.clipbtn { font: inherit; font-size: 14px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border, rgba(11,11,11,0.1));
  background: var(--surface, #fcfcfb); color: var(--ink, #0b0b0b); cursor: pointer; min-height: 44px; margin: 0 0 14px; }
button.more { display: inline-flex; align-items: center; gap: 8px; }
button.more[hidden], button.clipbtn[hidden] { display: none; }   /* the display above outranked [hidden] */
button.more::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
button.more[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* A fold button dressed as a quiet "i" line draws the same chevron as its details twin beside it (4.4). */
button.more.ln-q::after { width: 6px; height: 6px; border-width: 0 1.75px 1.75px 0; transform: rotate(45deg) translate(-2px, -1px); }
button.more.ln-q[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-1px, -1px); }
button.clipbtn[hidden] { display: none; }
table.clip tr.extra { display: none; }
table.clip.all tr.extra { display: table-row; }
details.lsec { border-radius: 14px; background: var(--surface, #fcfcfb); border: 1px solid var(--border, rgba(11,11,11,0.1)); padding: 14px 18px; margin-bottom: 12px; scroll-margin-top: 80px; }
details.lsec > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 12px; }
details.lsec > summary::-webkit-details-marker { display: none; }
details.lsec > summary::after { content: ''; flex: 0 0 auto; margin: 8px 4px 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-2, #52514e); border-bottom: 2px solid var(--ink-2, #52514e); transform: rotate(45deg); }
details.lsec[open] > summary::after { transform: rotate(-135deg); margin-top: 12px; }
details.lsec[open] > summary { margin-bottom: 10px; }
details.lsec > summary h2, details.lsec > summary h3 { margin: 0; }
/* A computer or iPad has room, so the chips wrap instead of running off the right edge with no sign of the rest
   (10/4/26: Tech and Smart Home cut "Displays and gadgets" to "Displ" at 1512 px). A heading reached from the bar stops
   just under it however many rows it takes (--jump-h, set by theme.js). The phone keeps one row that scrolls. */
@media (min-width: 700px) {
  nav.jump { flex-wrap: wrap; overflow-x: visible; }
  [data-jump] { scroll-margin-top: calc(var(--jump-h, 56px) + 8px); }
}
@media (max-width: 699px) {
  nav.jump { top: 56px; margin: 0 -16px 14px; padding: 8px 16px; gap: 4px; }
  nav.jump a { padding: 8px 10px; font-size: 13px; }
  [data-jump] { scroll-margin-top: 120px; }
  /* Net zero width (64 px less the 64 and the 4 px gap it adds), so turning the fade on or off never moves the chips. Above the
     chips and solid for its last third, so a cut chip reads as "more this way" rather than a clipped word (2.2 sweep). */
  nav.jump.more::after { content: ''; position: sticky; right: -16px; flex: 0 0 64px; margin: -8px 0 -8px -68px; pointer-events: none; z-index: 1;
    background: linear-gradient(to right, transparent, var(--plane, #f9f9f7) 65%); }
  /* The same on the left once the bar is scrolled (it scrolls itself to the section in view, which can cut the first chip). */
  nav.jump.less::before { content: ''; position: sticky; left: -16px; flex: 0 0 64px; margin: -8px -68px -8px 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to left, transparent, var(--plane, #f9f9f7) 65%); }
  /* Any other row of chips that scrolls sideways on a phone takes class ln-fade (LeaseUI.fade in theme.js toggles more and less);
     --ln-fade-gap is the row's own gap, and the row needs 16 px of side padding (with -16 px margins) like the jump bar. */
  .ln-fade.more::after { content: ''; position: sticky; right: -16px; flex: 0 0 64px; margin: 0 0 0 calc(-64px - var(--ln-fade-gap, 8px)); pointer-events: none; z-index: 1;
    background: linear-gradient(to right, transparent, var(--plane, #f9f9f7) 65%); }
  .ln-fade.less::before { content: ''; position: sticky; left: -16px; flex: 0 0 64px; margin: 0 calc(-64px - var(--ln-fade-gap, 8px)) 0 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to left, transparent, var(--plane, #f9f9f7) 65%); }
}
/* A block that scrolls sideways (a diagram, a port strip, a segmented row) fades at the edge that has more, by a mask, so it
   works whatever the block's own layout; LeaseUI.fade sets more and less, and theme.js re-checks it when a fold opens (6.6). */
@media screen {
  .ln-fade-mask.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .ln-fade-mask.less { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
  .ln-fade-mask.more.less { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
}
@media print {
  /* Pills read the same in black and white on paper: an outline, no fill (second design review). */
  .ln-pill, .ln-pill.late, .ln-pill.soon, .ln-pill.warm { background: none !important; border: 0.75pt solid currentColor; }
  nav.jump, button.more, button.clipbtn { display: none !important; }
  .fold { display: block !important; }
  table.clip tr.extra { display: table-row !important; }
  details.lsec > summary::after { display: none; }
}

/* Back to top (Stephen, 10/31/26; R-0436; theme.js draws it on a page taller than 3 screens, past 1.5 of them). Quiet, never a
   filled button, 44 px, bottom right above the phone tab bar and the safe area, under a page's own Undo bar, never on paper. */
button.ln-top { position: fixed; z-index: 29; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 16px 0 12px; border-radius: 22px;
  border: 1px solid var(--border, rgba(11,11,11,0.1)); background: var(--surface, #fcfcfb); color: var(--ink, #0b0b0b);
  font: 600 14px/1 var(--font-text, system-ui, sans-serif); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.14); }
button.ln-top[hidden] { display: none; }
button.ln-top:hover { border-color: var(--ink-2, #52514e); }
button.ln-top:focus-visible { outline: 2px solid var(--accent-ink, #8a2b3a); outline-offset: 2px; }
@media (max-width: 699px) { button.ln-top { bottom: calc(80px + env(safe-area-inset-bottom)); } }
@media print { button.ln-top { display: none !important; } }

/* A page switched off on Who Has Access (10/4/26). Only the owner ever sees these: the small Off mark beside a page in the
   menu, the hub and search, and the banner at the top of the page itself. Quiet, but not easy to forget. */
.ln-off { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  vertical-align: 1px; color: #7a4f00; background: rgba(212, 167, 44, 0.22); white-space: nowrap; }
@media screen and (prefers-color-scheme: dark) { .ln-off { color: #f0c96a; background: rgba(212, 167, 44, 0.2); } }
.ln-offbar { margin: 0; padding: 10px 16px; font-size: 14px; line-height: 1.4; color: #5c3d00; background: #fbefc8; border-bottom: 1px solid #e3cf8c; overflow-wrap: anywhere; }
.ln-offbar a { color: inherit; font-weight: 600; text-decoration: underline; display: inline-block; padding: 4px 0; }
@media screen and (prefers-color-scheme: dark) { .ln-offbar { color: #f3dca0; background: #3a2f12; border-bottom-color: #5a4a20; } }
@media print { .ln-offbar { display: none !important; } }

/* A page that could not load (design pass, step 1.6, 10/8/26): one look everywhere, drawn by LeaseUI.fail in theme.js.
   A soft red box, the sentence in body ink, Try again beside it; on paper only the sentence. */
html body .ln-fail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0; padding: 12px 14px;
  background: var(--ln-late-bg); border-left: 3px solid var(--ln-late); border-radius: 10px; color: var(--ink); text-align: left; }
html body .ln-fail > p { flex: 1 1 260px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
html body .ln-fail > button { flex: none; min-height: 44px; padding: 6px 14px; border: 1px solid var(--ln-late); border-radius: 9px;
  background: var(--surface); color: var(--ln-late); font: 600 14px/1.2 var(--font-text); cursor: pointer; }
html body .ln-fail > button:hover:not(:disabled) { background: var(--ln-late-bg); }
html body .ln-fail > button:disabled { cursor: progress; opacity: 1; }   /* Trying again: the words say it, the colors stay readable */
@media print { html body .ln-fail { background: none; border-left-color: #000; } html body .ln-fail > button { display: none; } }

/* LeaseFind (10/10/26): the filter box over a page's own rows (theme.js). One fixed-height row, created when the page loads, so nothing moves when data arrives or the filter changes. */
.lf { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.lf-field { position: relative; flex: 1 1 auto; max-width: 420px; min-width: 0; }
.lf-in { width: 100%; font: inherit; font-size: 16px; min-height: 44px; padding: 8px 40px 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); -webkit-appearance: none; appearance: none; }
.lf-in::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.lf-in:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.lf-x { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 22px; line-height: 1; cursor: pointer; visibility: hidden; }
.lf-n { flex: 0 0 auto; min-width: 5.5em; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lf-off { display: none !important; }
.lf-paper { display: none; margin: 0; }
@media print {
  .lf { display: none !important; }
  .lf-paper { display: block; margin: 0 0 6pt; font-size: 9pt; color: #444; }
  .lf-paper:empty { display: none; }
}

/* hero:start  The shared hero (R-0513 step 1.1; heroes mockup v2, Stephen approved 11/9/26; docs/design-language.md section 5).
   One block for every page, built from Energy's Now card: a small-caps label, Energy's 46 px number and its unit, a live line
   ("Updated 8:42:10 AM" with a pulsing dot while the page polls), two to four side facts, an optional sparkline or bars, an
   optional backdrop washed by the card's own color, and a quiet state with the same shape. Drawn by LeaseUI.hero() in theme.js,
   or written by a page in the same classes (Energy keeps its own insides under .h-main). One per page; on a tabbed page it is the
   top of the first tab, so it shows in that tab only and the tabs never move. From 700 px the number, facts and chart sit in
   three columns; on a phone they stack, the facts in two columns. Paper keeps the number and the facts as plain text: no card,
   no dot, no chart, no image. */
.ln-sys main .ln-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--ln-s3) var(--ln-s5);
  grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: var(--ln-card-pad); margin: 0 0 var(--ln-gap-hero); }
.ln-sys main .ln-hero > * { min-width: 0; }
.ln-sys main .ln-hero.own { display: block; }   /* a page that keeps its own insides (Energy's Now card) */
@media (min-width: 700px) {
  .ln-sys main .ln-hero.has-facts { grid-template-columns: minmax(200px, auto) minmax(0, 1fr); align-items: end; }
  .ln-sys main .ln-hero.has-facts.has-viz { grid-template-columns: minmax(200px, auto) minmax(0, 1fr) minmax(200px, 280px); }
  .ln-sys main .ln-hero.has-viz:not(.has-facts) { grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); align-items: end; }
}
.ln-hero .h-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--ln-s2); }
.ln-hero .h-big { font: 500 46px/0.95 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.ln-hero .h-big small { font: 500 18px var(--font-display); color: var(--ink-2); margin-left: 3px; letter-spacing: 0; }
.ln-hero .h-big.word { font-size: 28px; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; }
.ln-hero .h-sub { font-size: 14.5px; line-height: 1.35; color: var(--ink-2); margin-top: var(--ln-s1); overflow-wrap: anywhere; }
.ln-hero .h-sub b { color: var(--ink); font-weight: 600; }
.ln-hero .h-live { display: flex; align-items: center; gap: 6px; margin-top: var(--ln-s2); font-size: 13.5px; line-height: 1.4; color: var(--ink-2); min-height: 1.4em; }
.ln-hero .h-live:empty { display: none; }
.ln-hero .h-live .ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--ln-good); flex: none; }
.ln-hero .h-live.static .ldot { display: none; }
.ln-hero .h-live.retry { color: var(--ln-soon); }
.ln-hero .h-live.retry .ldot { background: var(--ln-soon); animation: none; }
@media screen and (prefers-reduced-motion: no-preference) { .ln-hero .h-live .ldot { animation: ln-hpulse 2.4s ease-in-out infinite; } }
@keyframes ln-hpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ln-hero .h-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ln-s3) var(--ln-s4); margin: 0; }
@media (min-width: 700px) { .ln-hero .h-facts { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } }
.ln-hero .h-facts > div { min-width: 0; border-top: 1px solid var(--rule); padding-top: var(--ln-s2); }
.ln-hero .h-facts dt { font-size: 12.5px; color: var(--ink-2); }
.ln-hero .h-facts dd { margin: 0; font: 500 20px/1.15 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.ln-hero .h-facts dd small { display: block; font: 400 12.5px/1.3 var(--font-text); color: var(--ink-2); margin-top: 2px; }
.ln-hero .h-viz svg { display: block; width: 100%; height: 64px; overflow: visible; }
.ln-hero .h-viz .vcap { display: flex; justify-content: space-between; gap: var(--ln-s2); font-size: 11.5px; color: var(--ink-muted); margin-top: var(--ln-s1); font-variant-numeric: tabular-nums; }
.ln-hero .sp-line { fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ln-hero .sp-area { fill: var(--accent-soft); stroke: none; }
.ln-hero .sp-base { stroke: var(--rule); stroke-width: 1; }
.ln-hero .sp-end { fill: var(--accent-ink); stroke: var(--surface); stroke-width: 2; }
.ln-hero .sp-bar { fill: var(--accent-ink); opacity: 0.75; }
.ln-hero .sp-bar.dim { fill: var(--rule); opacity: 1; }
.ln-hero .h-foot { grid-column: 1 / -1; }
.ln-hero .h-foot:empty { display: none; }
.ln-hero .h-withcover { display: flex; gap: var(--ln-s3); align-items: center; }
.ln-hero .h-withcover > div { min-width: 0; }
.ln-hero .h-cover { flex: none; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--rule); }
/* the backdrop: a blurred cover or photo behind the card, washed by the card's own color so the text keeps 4.5 to 1 */
.ln-hero .h-bg { position: absolute; inset: -30px; z-index: -2; background-size: cover; background-position: center; filter: blur(26px) saturate(1.25); opacity: 0.45; pointer-events: none; }
.ln-hero.has-bg::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, var(--surface) 30%, color-mix(in srgb, var(--surface) 70%, transparent) 72%, color-mix(in srgb, var(--surface) 50%, transparent)); }
@media (max-width: 699px) { .ln-hero.has-bg::before { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 62%, transparent), var(--surface) 70%); } }
@media screen and (prefers-color-scheme: dark) { html:root:not([data-theme="light"]) .ln-hero .h-bg { opacity: 0.7; } }
@media screen { html:root[data-theme="dark"] .ln-hero .h-bg { opacity: 0.7; } }
/* quiet: no data yet. Same shape, nothing loud, says what is missing; never a spinner, never a zero */
.ln-hero.quiet .h-big { color: var(--ink-muted); font-size: 28px; line-height: 1.1; white-space: normal; }
.ln-hero.quiet .h-viz { opacity: 0.5; }
@media (max-width: 699px) { .ln-hero .h-big { font-size: 40px; } .ln-hero .h-big.word, .ln-hero.quiet .h-big { font-size: 24px; } }
@media print {
  .ln-sys main .ln-hero { display: block; padding: 0; border: 0; border-radius: 0; background: none; margin: 0 0 8pt; overflow: visible; }
  .ln-sys main .ln-hero.no-print { display: none !important; }   /* a screen-only hero (Watch, Weather, Garage, Trips) never prints; Energy's, the Now card, does (08.02, #806) */
  .ln-hero .h-bg, .ln-hero.has-bg::before, .ln-hero .h-viz, .ln-hero .h-cover, .ln-hero .h-live, .ln-hero .h-foot { display: none !important; }
  .ln-hero .h-big { font-size: 22pt; }
  .ln-hero .h-facts { display: flex; flex-wrap: wrap; gap: 2pt 16pt; margin-top: 4pt; }
  .ln-hero .h-facts > div { border: 0; padding: 0; }
  .ln-hero .h-facts dd { font-size: 12pt; }
}
/* hero:end */