/* Promised Lands SKIN, part 4 of 4: MENU, the cards, the query card, every sheet / window (Budget, Advisors, Maps, Scribe, Settings, Lamp speed, Laws, Graphs, the demand window), sliders, tabs, the Elder's script card. Owner: windows helper (WP-9U-C)
   Builds on skin.css (the k- classes and --k- tokens). Only restyles the selectors of YOUR area; later rules here win over styles.css because this file loads after it.
   The recipe is the same everywhere: a cream window with a 3.5 px ink outline and a step under it, a coloured ribbon on top with white outlined letters, inner cards that are lighter cream with a 3 px outline,
   candy for everything pressed (orange = the chosen one, green = plus / confirm, blue = plain, red = close), navy chips for totals. Ink text on cream is 14 px or more; every button is 48 px or more. */

:root {
  --w-bg: linear-gradient(#fff7da, var(--k-cream2) 62%, var(--k-cream3));                 /* a window's cream */
  --w-card: linear-gradient(#fffef5, #fff0c0);                                              /* a card that sits on a window */
  --w-card-lo: linear-gradient(#fff8e0, #f9e6ae);                                           /* a quieter card (nothing to say, switched off) */
  --w-step: 0 3px 0 var(--k-ink), inset 0 2px 0 #fff;                                       /* the step under a card */
  --w-gloss: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0) 50%);
  --r-orange: linear-gradient(var(--k-orange-l), var(--k-orange) 50%, #ec8410);
  --r-green: linear-gradient(var(--k-green-l), var(--k-green) 50%, #3fb126);
  --r-blue: linear-gradient(var(--k-blue-l), var(--k-blue) 50%, #2a9ae8);
  --r-purple: linear-gradient(var(--k-purple-l), var(--k-purple) 50%, #9a4fd0);
  --r-navy: linear-gradient(#9fb2dd, var(--k-navy-1) 50%, var(--k-navy-2));
  --r-gold: linear-gradient(#fff0a0, var(--k-gold) 50%, #f0a21e);
  --w-pos: #1d8a1a; --w-neg: #c0391b;
}
/* one rounded face in every window (the old rules set a serif or system font on many small selectors) */
.menu *, .card *, .qcard *, .sheet *, .elder *, .mapchip * { font-family: var(--k-font) !important; }
.menu, .card, .qcard, .sheet, .elder, .mapchip { color: var(--k-ink); }
.menu .pos, .card .pos, .sheet .pos { color: var(--w-pos); } .menu .neg, .card .neg, .sheet .neg { color: var(--w-neg); }
:is(.menu, .card, .qcard, .sheet, .elder, .mapchip) :focus-visible { outline: 4px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px var(--k-ink); }

/* ---------- the X: a red candy circle with a white outlined cross (menu, every sheet, the map chip) ---------- */
.menu .xbtn, .sheet .xbtn, .mapchip .xbtn { width: 48px; height: 48px; }
.menu .xbtn::before, .sheet .xbtn::before, .mapchip .xbtn::before {
  inset: 3px; border: 3px solid var(--k-ink); border-radius: 50%; transform: translateY(-2px);
  background: var(--w-gloss), linear-gradient(var(--k-red-l) 0%, var(--k-red) 46%, #ec4030 54%, var(--k-red) 100%);
  box-shadow: 0 4px 0 var(--k-red-d), 0 4px 0 3px var(--k-ink), 0 8px 10px rgba(58, 22, 8, 0.25), inset 0 3px 0 rgba(255, 255, 255, 0.55); transition: transform 0.08s, box-shadow 0.08s;
}
.menu .xbtn:active::before, .sheet .xbtn:active::before, .mapchip .xbtn:active::before { transform: translateY(2px); box-shadow: 0 1px 0 var(--k-red-d), 0 1px 0 3px var(--k-ink); }
.menu .xbtn svg, .sheet .xbtn svg, .mapchip .xbtn svg { width: 26px; height: 26px; transform: translateY(-2px); filter: none; }
.menu .xbtn:active svg, .sheet .xbtn:active svg, .mapchip .xbtn:active svg { transform: translateY(2px); }

/* ======================================================= MENU ======================================================= */
.scrim { background: var(--k-shade); }
.menu { border: 3.5px solid var(--k-ink); border-radius: 28px; background: var(--w-bg); box-shadow: 0 6px 0 var(--k-ink), var(--k-drop), inset 0 3px 0 #fff; }
.l-portrait .menu { left: auto; right: max(var(--menu-right), var(--safe-r)); width: min(430px, calc(100% - var(--menu-left) - var(--menu-right)));
  --menu-b: calc(max(var(--menu-bottom), var(--fab-edge) + var(--fab) + 14px) + var(--safe-b));                                   /* always clear of BUILD and MENU, whatever size they have */
  bottom: var(--menu-b); max-height: calc(100% - var(--menu-b) - var(--pills-end) - var(--safe-t) - 14px); }   /* (--menu-max-vh arrives in px, so the old vh calc never applied) */
.l-portrait.lefty .menu { right: auto; left: max(var(--menu-left), var(--safe-l)); }
.l-landscape .menu, .l-compact .menu { right: max(var(--menu-right), var(--safe-r)); top: max(var(--menu-top), calc(var(--pills-end) + 4px + var(--safe-t))); bottom: calc(var(--menu-bottom) + var(--safe-b)); }
.l-landscape.lefty .menu, .l-compact.lefty .menu { right: auto; left: max(6px, var(--safe-l)); }
.menu .hd { position: relative; height: auto; min-height: var(--menu-hd); padding: 0 9px 0 16px; gap: 8px; color: #fff; border-bottom: 3.5px solid var(--k-ink); background: var(--r-purple);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55); font: 900 22px/1 var(--k-font); letter-spacing: 0.7px; text-transform: uppercase; }
.menu .hd::before, .sheet .hd::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.03)); pointer-events: none; }
.menu .hd span { position: relative; flex: 1; -webkit-text-stroke: 5px var(--k-ink); paint-order: stroke fill; }
#menulist { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 16px; overscroll-behavior: contain; }
.mi { flex: none; height: auto; min-height: var(--menu-row); gap: 12px; padding: 6px 10px 6px 8px; border: 3px solid var(--k-ink); border-radius: 22px; background: var(--w-card); box-shadow: var(--w-step); transition: transform 0.08s, box-shadow 0.08s; }
.mi:last-child { border-bottom: 3px solid var(--k-ink); }
.mi:active { transform: translateY(3px); box-shadow: 0 0 0 var(--k-ink), inset 0 2px 0 #fff; }
.mi .ri { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--k-ink); background: var(--w-gloss), var(--p, var(--r-gold));
  box-shadow: 0 2px 0 rgba(74, 39, 18, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.5); }
.mi .ri svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.3)); }
.mi[data-row='budget'] .ri { --p: var(--r-orange); } .mi[data-row='advisors'] .ri { --p: var(--r-green); } .mi[data-row='maps'] .ri { --p: var(--r-blue); }
.mi[data-row='scribe'] .ri { --p: var(--r-purple); } .mi[data-row='settings'] .ri { --p: var(--r-navy); } .mi[data-row='word'] .ri { --p: var(--r-gold); }
.mi .t { min-width: 0; gap: 3px; }
.mi .t b { font: 900 18px/1.1 var(--k-font); letter-spacing: 0.2px; }
.mi .t small { font: 700 14px/1.2 var(--k-font); color: var(--k-ink2); }
.mi .chev { flex: none; display: grid; place-items: center; width: 24px; } .mi .chev svg { width: 18px; height: 20px; opacity: 1; }

/* ================================================= THE INFO CARDS AND THE QUERY CARD ================================================= */
.card, .qcard { gap: 0; padding: 0 0 12px; overflow: hidden; border: 3.5px solid var(--k-ink); border-radius: 24px; background: var(--w-bg); box-shadow: 0 5px 0 var(--k-ink), var(--k-drop), inset 0 3px 0 #fff; }
.card { width: 272px; max-height: calc(100% - var(--pills-end) - 12px - var(--safe-t) - var(--safe-b)); overflow-y: auto; touch-action: pan-y; }   /* (scrolls inside only when a screen is too short for it) */
.qcard { width: min(340px, calc(100% - 24px)); max-height: calc(100% - var(--pills-end) - var(--fab-edge) - var(--fab) - 30px - var(--safe-t) - var(--safe-b)); overflow-y: auto; touch-action: pan-y; }
.qcard.top { max-height: calc(100% - var(--pills-end) - var(--fab-edge) - 24px - var(--safe-t) - var(--safe-b)); }
.card h4, .qcard h4 { position: relative; display: flex; align-items: center; min-height: 44px; margin: 0 0 8px; padding: 6px 12px 7px; color: #fff; border-bottom: 3.5px solid var(--k-ink); background: var(--r-orange);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55); font: 900 16.5px/1.2 var(--k-font); letter-spacing: 0.1px; -webkit-text-stroke: 4.5px var(--k-ink); paint-order: stroke fill; }
.card[data-card='land'] h4 { background: var(--r-green); } .card[data-card='people'] h4 { background: var(--r-blue); } .card[data-card='lamp'] h4 { background: var(--r-orange); } .qcard h4 { background: var(--r-purple); }
.card p, .qcard p { margin: 0 14px; font: 800 14.5px/1.3 var(--k-font); }
.card p + p, .qcard p + p { margin-top: 5px; }
.card p.small { font: 700 14px/1.3 var(--k-font); color: var(--k-ink2); }
.card .bt, .qcard .bt, .qcard .bt.away { align-self: stretch; margin: 10px 14px 0; }
.card .bt + .bt, .qcard .bt + .bt { margin-top: 8px; }
.l-compact .card, .l-compact .qcard { padding-bottom: 10px; } .l-compact .card h4, .l-compact .qcard h4 { min-height: 36px; margin-bottom: 5px; padding: 3px 12px 4px; font-size: 16.5px; }
.l-compact .card p, .l-compact .qcard p { font-size: 14px; line-height: 1.22; } .l-compact .card p + p, .l-compact .qcard p + p { margin-top: 3px; } .l-compact .card .bt, .l-compact .qcard .bt, .l-compact .qcard .bt.away { min-height: 44px; margin-top: 6px; }

/* ===================================================== SHEETS (full screen windows) ===================================================== */
.sheethost.modal { background: var(--k-shade); }
.sheet { font-family: var(--k-font);
  background: radial-gradient(rgba(139, 90, 20, 0.07) 1.6px, transparent 2.2px) 0 0 / 22px 22px, linear-gradient(#fff7da, #ffe9ae 55%, #fadb90); }
.sheethost.modal .sheet { width: min(460px, calc(100% - 20px)); border: 3.5px solid var(--k-ink); border-radius: 28px; box-shadow: 0 6px 0 var(--k-ink), var(--k-drop); }
.sheet { --rib: var(--r-orange); }
.sheet[data-sheet='budget'] { --rib: var(--r-orange); } .sheet[data-sheet='advisors'] { --rib: var(--r-green); } .sheet[data-sheet='maps'] { --rib: var(--r-blue); }
.sheet[data-sheet='scribe'] { --rib: var(--r-purple); } .sheet[data-sheet='settings'] { --rib: var(--r-navy); } .sheet[data-sheet='demand'] { --rib: var(--r-green); }
/* the ribbon: icon plate, title, a small info chip under it, the X (a grid so the chip drops under the title on a narrow phone) */
.sheet .hd { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'ic ti x' 'ic inf x'; align-items: center; column-gap: 10px; row-gap: 3px;
  height: auto; min-height: calc(var(--sheet-hd) + 8px); padding: calc(6px + var(--safe-t)) max(5px, var(--safe-r)) 6px max(12px, var(--safe-l)); color: #fff; border-bottom: 3.5px solid var(--k-ink);
  background: var(--rib); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55); }
.sheet .hd > * { position: relative; }
.sheet .hd .hic { grid-area: ic; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--k-ink); background: linear-gradient(#fffef5, #ffe9ae); box-shadow: 0 3px 0 rgba(74, 39, 18, 0.55), inset 0 2px 0 #fff; }
.sheet .hd .hic svg { width: 28px; height: 28px; }
.sheet .hd h2 { grid-area: ti; min-width: 0; font: 900 22px/1.08 var(--k-font); letter-spacing: 0.6px; text-transform: uppercase; overflow-wrap: anywhere; -webkit-text-stroke: 5px var(--k-ink); paint-order: stroke fill; }
.sheet .hd .info { grid-area: inf; justify-self: start; max-width: 100%; padding: 3px 10px 4px; border: 2.5px solid var(--k-ink); border-radius: 13px; color: var(--k-ink); background: linear-gradient(#fffef5, #ffeeb8);
  box-shadow: 0 2px 0 rgba(74, 39, 18, 0.55); font: 800 14px/1.15 var(--k-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .hd .info:empty { display: none; }
.l-portrait .sheet .hd:has(.info:empty) h2 { grid-row: 1 / 3; }
.sheet .hd .xbtn { grid-area: x; margin: 0; }
.l-landscape .sheet .hd, .l-compact .sheet .hd { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: 'ic ti inf x'; padding-top: calc(4px + var(--safe-t)); padding-bottom: 4px; }   /* wide screens: the chip sits beside the title, the ribbon stays low */
.l-compact .sheet .hd { min-height: calc(var(--sheet-hd) + 4px); padding-top: calc(2px + var(--safe-t)); padding-bottom: 2px; } .l-compact .sheet .hd h2 { font-size: 20px; } .l-compact .sheet .xbtn { width: 44px; height: 44px; }
.l-compact .sheet .hd .hic { width: 38px; height: 38px; } .l-compact .sheet .hd .hic svg { width: 24px; height: 24px; }
.sheethost.modal .sheet .hd { padding-top: 5px; } .sheethost.modal .sheet .hd h2 { font-size: 19px; }
.sheet .body { align-items: stretch; }
.sheethost.modal .body { padding: 14px 14px 16px; }
.sheet h5 { margin: 8px 2px; font: 900 14px/1.15 var(--k-font); letter-spacing: 0.6px; text-transform: uppercase; color: var(--k-ink2); align-items: baseline; gap: 8px; }
.sheet h5 span + span:last-child { font-weight: 800; letter-spacing: 0.2px; text-transform: none; }

/* tabs: candy. The chosen one is orange with white outlined letters, the others are cream pills. They share the width and wrap their words instead of spilling. */
.tabs, .sheet[data-sheet='scribe'] .tabs { gap: 8px; padding: 12px max(12px, var(--safe-r)) 8px max(12px, var(--safe-l)); background: none; }
.tab { position: relative; flex: 1 1 auto; justify-content: center; min-width: 0; min-height: 52px; padding: 6px 12px; border: 3px solid var(--k-ink); border-radius: 20px; color: var(--k-ink); text-align: center;
  background: var(--w-card); box-shadow: 0 4px 0 var(--k-ink), inset 0 2px 0 #fff; font: 900 16px/1.05 var(--k-font); letter-spacing: 0.3px; transition: transform 0.08s, box-shadow 0.08s; }
.tab:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--k-ink), inset 0 2px 0 #fff; }
.tab.on { color: #fff; border-color: var(--k-ink); background: var(--w-gloss), linear-gradient(var(--k-orange-l) 0%, var(--k-orange) 46%, #ec8410 54%, var(--k-orange) 100%);
  box-shadow: 0 4px 0 var(--k-orange-d), 0 4px 0 3px var(--k-ink), inset 0 3px 0 rgba(255, 255, 255, 0.55); -webkit-text-stroke: 3.5px var(--k-ink); paint-order: stroke fill; }
.sheet[data-sheet='scribe'] .tab { min-height: 52px; min-width: 96px; font-size: 17px; }
.l-compact .tabs, .l-compact .sheet[data-sheet='scribe'] .tabs { padding-top: 5px; padding-bottom: 6px; } .l-compact .tab, .l-compact .sheet[data-sheet='scribe'] .tab { min-height: 44px; padding-top: 3px; padding-bottom: 3px; }
.pane { max-width: 880px; width: 100%; margin: 0 auto; gap: 14px; padding: 8px max(12px, var(--safe-r)) 22px max(12px, var(--safe-l)); border-top: 0; overscroll-behavior: contain; }
.l-portrait .pane { gap: 8px; padding: 6px max(12px, var(--safe-r)) 22px max(12px, var(--safe-l)); }
.col { min-width: 0; } .col > * { flex: none; }   /* a row keeps its height when the column is shorter than the pane */

/* ---------- sliders: a groove with a candy fill (--p, 0 to 1, is set by the sheet) and a big orange knob ---------- */
input[type='range'] { height: 52px; margin: 0; --kn: 42px; }
input[type='range']::-webkit-slider-runnable-track { height: 20px; border: 3px solid var(--k-ink); border-radius: 12px; box-shadow: inset 0 3px 0 rgba(74, 39, 18, 0.22), 0 2px 0 rgba(255, 255, 255, 0.7);
  background: linear-gradient(var(--k-green-l), var(--k-green) 55%, #3fb126) 0 0 / calc(var(--kn) / 2 + (100% - var(--kn)) * var(--p, 0.5)) 100% no-repeat, linear-gradient(#e3c27a, #fbe4a6); }
input[type='range']::-moz-range-track { height: 14px; border: 3px solid var(--k-ink); border-radius: 12px; background: linear-gradient(#e3c27a, #fbe4a6); box-shadow: inset 0 3px 0 rgba(74, 39, 18, 0.22); }
input[type='range']::-moz-range-progress { height: 14px; border-radius: 10px 0 0 10px; background: linear-gradient(var(--k-green-l), var(--k-green) 55%, #3fb126); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: var(--kn); height: var(--kn); margin-top: calc((20px - var(--kn)) / 2); border: 3px solid var(--k-ink); border-radius: 50%;
  background: var(--w-gloss), linear-gradient(var(--k-orange-l) 0%, var(--k-orange) 46%, #ec8410 54%, var(--k-orange) 100%);
  box-shadow: 0 4px 0 var(--k-orange-d), 0 4px 0 3px var(--k-ink), 0 8px 10px rgba(58, 22, 8, 0.3), inset 0 3px 0 rgba(255, 255, 255, 0.55); }
input[type='range']::-moz-range-thumb { box-sizing: border-box; width: var(--kn); height: var(--kn); border: 3px solid var(--k-ink); border-radius: 50%;
  background: var(--w-gloss), linear-gradient(var(--k-orange-l) 0%, var(--k-orange) 46%, #ec8410 54%, var(--k-orange) 100%); box-shadow: 0 4px 0 var(--k-orange-d), 0 4px 0 3px var(--k-ink); }
input[type='range']:active::-webkit-slider-thumb { transform: translateY(3px); box-shadow: 0 1px 0 var(--k-orange-d), 0 1px 0 3px var(--k-ink); }
input[type='range']:focus-visible { outline: none; box-shadow: none; } input[type='range']:focus-visible::-webkit-slider-thumb { outline: 4px solid #fff; outline-offset: 3px; }

/* ---------- + and -: round candy (green plus, orange minus) ---------- */
.pm { --c1: var(--k-green-l); --c2: var(--k-green); --c3: #3fb126; --dark: var(--k-green-d); position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0 0 3px;
  border: 3px solid var(--k-ink); border-radius: 50%; color: #fff; font: 900 30px/1 var(--k-font); -webkit-text-stroke: 4.5px var(--k-ink); paint-order: stroke fill; touch-action: manipulation;
  background: var(--w-gloss), linear-gradient(var(--c1) 0%, var(--c2) 46%, var(--c3) 54%, var(--c2) 100%);
  box-shadow: 0 4px 0 var(--dark), 0 4px 0 3px var(--k-ink), 0 8px 10px rgba(58, 22, 8, 0.25), inset 0 3px 0 rgba(255, 255, 255, 0.55); transition: transform 0.08s, box-shadow 0.08s; }
.pm[aria-label^='Lower'], .pm[aria-label='Slower'] { --c1: var(--k-orange-l); --c2: var(--k-orange); --c3: #ec8410; --dark: var(--k-orange-d); }
.pm:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dark), 0 1px 0 3px var(--k-ink); }

/* ---------- Budget: income rows (name and sum on the left, the stepper on the right) ---------- */
.trow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: 'nm mi rt pl' 'am mi rt pl'; align-items: center; column-gap: 6px; row-gap: 0; min-height: 72px; margin: 0 0 10px; padding: 8px 10px 11px 12px;
  border: 3px solid var(--k-ink); border-radius: 20px; background: var(--w-card); box-shadow: var(--w-step); }
.trow > :nth-child(1) { grid-area: nm; } .trow > :nth-child(2) { grid-area: mi; } .trow > :nth-child(3) { grid-area: rt; } .trow > :nth-child(4) { grid-area: pl; } .trow > :nth-child(5) { grid-area: am; }
.trow .nm { min-width: 0; min-height: 44px; gap: 7px; font: 900 16px/1.1 var(--k-font); } .trow .nm i { width: 16px; height: 16px; flex: none; border: 2.5px solid var(--k-ink); border-radius: 6px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.chv svg { width: 14px; height: 14px; }
.rate { min-width: 48px; font: 900 19px/1 var(--k-font); font-variant-numeric: tabular-nums; }
.amt { min-width: 0; margin: 0; text-align: left; font: 800 14.5px/1.1 var(--k-font); } .amt::after { content: ' a month'; font-weight: 700; color: var(--k-ink2); } .amt:empty::after, .trow.single .amt::after { content: none; }
.subrows { margin: -2px 0 12px; padding: 8px 6px 0; border: 3px dashed rgba(74, 39, 18, 0.32); border-radius: 20px; background: rgba(255, 255, 255, 0.4); }
.trow.single, .drow.single { min-height: 64px; margin-bottom: 8px; background: var(--w-card-lo); } .trow.single .nm, .drow.single .nm { font-size: 14px; }
.sumrow, .netline { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 6px; padding: 11px 14px; border: 3px solid var(--k-ink); border-radius: 18px; color: #fff; background: var(--r-navy);
  box-shadow: 0 4px 0 var(--k-ink), inset 0 2px 0 rgba(255, 255, 255, 0.3); font: 900 18px/1.1 var(--k-font); -webkit-text-stroke: 3.5px var(--k-ink); paint-order: stroke fill; font-variant-numeric: tabular-nums; }
.sumrow .pos, .netline .pos { color: var(--k-green-l); } .sumrow .neg, .netline .neg { color: var(--k-orange-l); }
.netline { font-size: 19px; }
.loanbox { gap: 10px; margin-top: 8px; padding: 10px 12px; border: 3px solid var(--k-ink); border-radius: 20px; background: var(--w-card); box-shadow: var(--w-step); }
.loanbox b { font: 900 17px/1.15 var(--k-font); } .loanbox small { font: 700 14px/1.25 var(--k-font); color: var(--k-ink2); margin-top: 2px; display: block; }
.treasurer { gap: 10px; margin-top: 12px; padding: 8px 12px 8px 8px; border: 3px solid var(--k-ink); border-radius: 20px; background: var(--w-card-lo); box-shadow: var(--w-step); }
.treasurer .bub { font: 700 14px/1.3 var(--k-font); } .treasurer .bub b { font: 900 15px/1.3 var(--k-font); } .treasurer .bub em { font-style: italic; color: var(--k-ink2); }
.face { width: 52px; height: 52px; border: 3px solid var(--k-ink); background: radial-gradient(circle at 35% 30%, #fff3c4, #f1d68a 70%); box-shadow: 0 2px 0 rgba(74, 39, 18, 0.5); } .face svg { width: 34px; height: 34px; }
/* expense rows: the name and the percent on top, the slider across the whole row */
.drow { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'nm pc co' 'sl sl sl'; align-items: center; gap: 0 10px; margin: 0 0 10px; padding: 8px 12px 6px;
  border: 3px solid var(--k-ink); border-radius: 20px; background: var(--w-card); box-shadow: var(--w-step); }
.drow > :nth-child(1) { grid-area: nm; } .drow > :nth-child(2) { grid-area: sl; } .drow > :nth-child(3) { grid-area: pc; } .drow > :nth-child(4) { grid-area: co; }
.drow .nm { min-width: 0; min-height: 44px; gap: 8px; font: 900 16px/1.1 var(--k-font); } .drow .di svg { width: 28px; height: 28px; }
.drow .pc { min-width: 52px; font: 900 17px/1 var(--k-font); text-align: right; font-variant-numeric: tabular-nums; } .drow .co { min-width: 52px; font: 800 15px/1 var(--k-font); text-align: right; font-variant-numeric: tabular-nums; }
.drow.fixed { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: 'nm sl pc co'; padding: 10px 12px; } .drow.fixed small { font: 700 14px/1.2 var(--k-font); color: var(--k-ink2); }
.loanlist { white-space: pre-line; margin: 6px 0 12px; font: 800 15px/1.5 var(--k-font); } .loanbtns { flex-direction: column; gap: 12px; } .loanbtns .bt { width: 100%; min-height: 56px; margin: 0; }
.sheet .bt, .card .bt, .qcard .bt, .elder .bt { isolation: isolate; } .sheet .bt::before, .card .bt::before, .qcard .bt::before, .elder .bt::before { z-index: -1; }   /* (the gloss was washing the top of the letters) */
.pane.loans .col > b { display: block; margin: 4px 0 8px; padding: 11px 14px; border: 3px solid var(--k-ink); border-radius: 18px; color: #fff; background: var(--r-navy); box-shadow: 0 4px 0 var(--k-ink), inset 0 2px 0 rgba(255, 255, 255, 0.3);
  font: 900 17px/1.2 var(--k-font); -webkit-text-stroke: 3.5px var(--k-ink); paint-order: stroke fill; }

/* ---------- Laws (the third tab of Budget) ---------- */
.pane.laws { gap: 8px; padding-top: 4px; }
.lawsum { padding: 8px 4px 0; font: 900 17px/1.2 var(--k-font); } .lawsum span { font: 800 14.5px/1.2 var(--k-font); }
.lawmsg { padding: 9px 12px; border: 3px solid var(--k-ink); border-radius: 16px; color: #6b3d06; background: linear-gradient(#fff3c4, #ffe08a); box-shadow: 0 3px 0 var(--k-ink); font: 800 14px/1.3 var(--k-font); }
.lawjump { gap: 8px; }
.lawchip { min-height: 48px; gap: 8px; padding: 0 14px 0 10px; border: 3px solid var(--k-ink); border-radius: 18px; background: var(--w-card); box-shadow: var(--w-step); font: 900 14px/1 var(--k-font); }
.lawchip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--k-ink), inset 0 2px 0 #fff; } .lawchip .di svg, .lawgroup h5 .di svg { width: 26px; height: 26px; }
.lawgroup h5 { margin: 14px 2px 8px; padding: 0 0 6px; gap: 8px; border-bottom: 3px solid var(--k-ink); color: var(--k-ink); font: 900 17px/1 var(--k-font); letter-spacing: 0.2px; text-transform: none; }
.lawgroup h5 em { font: 800 13.5px/1 var(--k-font); color: var(--k-ink2); }
.law { grid-template-columns: minmax(0, 1fr) 68px; gap: 10px; min-height: 76px; margin: 0 0 9px; padding: 8px 6px 8px 12px; border: 3px solid var(--k-ink); border-radius: 18px; background: var(--w-card); box-shadow: var(--w-step); }
.law.on { background: linear-gradient(#f2ffe0, #cdf5a2); }
.lawtx b { font: 900 16px/1.15 var(--k-font); } .lawtx p { margin-top: 2px; font: 700 14px/1.3 var(--k-font); }
.lawcost { font: 900 14px/1.2 var(--k-font); } .lawmeta small { font: 700 12.5px/1.2 var(--k-font); color: var(--k-ink2); } .lawnote { margin-top: 3px; font: 800 14px/1.25 var(--k-font); color: #8a4b08; }
.l-landscape .lawrows, .l-compact .lawrows { column-gap: 14px; }

/* ---------- the switch (Settings and Laws): a candy pill, grey off, green on ---------- */
.sw { width: 68px; height: 48px; }
.sw::before { left: 2px; right: 2px; top: 7px; bottom: 7px; border: 3px solid var(--k-ink); border-radius: 18px; background: linear-gradient(#aeb3c2, #d6d9e3); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.16), 0 2px 0 rgba(255, 255, 255, 0.7); }
.sw i { left: 6px; top: 10px; width: 28px; height: 28px; border: 3px solid var(--k-ink); background: linear-gradient(#fffef5, #ffe7a6); box-shadow: 0 2px 0 rgba(74, 39, 18, 0.5), inset 0 2px 0 #fff; }
.sw.on::before { background: linear-gradient(var(--k-green-l), var(--k-green) 55%, #3fb126); } .sw.on i { left: 34px; }

/* ---------- Settings ---------- */
.settings { max-width: 680px; width: 100%; margin: 0 auto; padding: 4px max(12px, var(--safe-r)) 22px max(12px, var(--safe-l)); overscroll-behavior: contain; }
.settings h5 { display: inline-flex; margin: 16px 0 8px; padding: 6px 13px 7px; border: 3px solid var(--k-ink); border-radius: 14px; color: #fff; background: var(--r-purple); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 var(--k-ink);
  font: 900 13px/1 var(--k-font); letter-spacing: 0.8px; -webkit-text-stroke: 3.5px var(--k-ink); paint-order: stroke fill; }
.srow { flex-wrap: wrap; gap: 8px 10px; min-height: 60px; margin: 0 0 8px; padding: 6px 8px 6px 14px; border: 3px solid var(--k-ink); border-radius: 18px; background: var(--w-card); box-shadow: var(--w-step); }
.srow .sl { flex: 1 1 120px; font: 900 16px/1.15 var(--k-font); }
.segs { flex: 1 1 250px; gap: 8px; justify-content: stretch; }
.seg { flex: 1 1 auto; min-width: 52px; min-height: 48px; padding: 0 10px; border: 3px solid var(--k-ink); border-radius: 16px; color: var(--k-ink); background: var(--w-card); box-shadow: 0 3px 0 var(--k-ink), inset 0 2px 0 #fff; font: 900 14px/1 var(--k-font); }
.seg:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--k-ink), inset 0 2px 0 #fff; }
.seg.on { color: #fff; border-color: var(--k-ink); background: var(--w-gloss), linear-gradient(var(--k-orange-l) 0%, var(--k-orange) 46%, #ec8410 54%, var(--k-orange) 100%);
  box-shadow: 0 3px 0 var(--k-orange-d), 0 3px 0 3px var(--k-ink), inset 0 3px 0 rgba(255, 255, 255, 0.5); -webkit-text-stroke: 3px var(--k-ink); paint-order: stroke fill; }
.bt.hold { width: 100%; height: auto; min-height: 56px; margin: 6px 0 12px; padding: 10px 16px; white-space: normal; line-height: 1.15; text-align: center; }
.about { padding: 8px 4px; font: 700 14px/1.4 var(--k-font); color: var(--k-ink2); }
.lampspeed { margin-top: 4px; } .lampspeed .pm:disabled { filter: grayscale(0.6); }
.lampspeed .srow { flex-wrap: nowrap; } .lampspeed .srow .sl { flex: 1 1 0; min-width: 0; } .lampspeed .srow .pm { flex: none; } .lampspeed [data-ls='value'] { min-width: 50px; text-align: center; }
.lscard { margin: 0 0 8px; padding: 4px 14px 10px; border: 3px solid var(--k-ink); border-radius: 18px; background: var(--w-card); box-shadow: var(--w-step); }   /* (the number, the words and the scale get their type from lampSpeed.js) */

/* ---------- Advisors ---------- */
.advisors { gap: 12px; padding: 12px max(12px, var(--safe-r)) calc(20px + var(--safe-b)) max(12px, var(--safe-l)); }
.advcard { gap: 12px; padding: 10px 12px 12px 10px; border: 3px solid var(--k-ink); border-radius: 22px; background: var(--w-card); box-shadow: var(--w-step); }
.advcard.quiet, .advcard.empty { background: var(--w-card-lo); box-shadow: var(--w-step); border-color: var(--k-ink); } .advcard.fresh { background: linear-gradient(#fffbe0, #ffe99a); }
.advface { width: 60px; height: 60px; border: 3px solid var(--k-ink); background: radial-gradient(circle at 35% 30%, #fff3c4, #f1d68a 70%); box-shadow: 0 2px 0 rgba(74, 39, 18, 0.5); } .advface b { font: 900 26px/1 var(--k-font); }
.advname { gap: 2px 8px; min-height: 28px; padding-right: 22px; } .advname h3 { font: 900 19px/1.2 var(--k-font); }
.advname small { padding: 2px 9px 3px; border: 2.5px solid var(--k-ink); border-radius: 10px; color: var(--k-ink); background: linear-gradient(var(--k-blue-l), #8fd3ff); font: 800 12.5px/1.2 var(--k-font); }
.advdot { top: 10px; right: 12px; width: 18px; height: 18px; border: 3px solid var(--k-ink); background: linear-gradient(var(--k-red-l), var(--k-red)); box-shadow: none; }
.advmsg { gap: 4px; padding: 8px 0 9px; border-top: 3px dotted rgba(74, 39, 18, 0.35); } .advmsg:first-child { border-top: 0; padding-top: 2px; }
.advmsg .say { font: 800 15px/1.35 var(--k-font); } .advmsg.new .say { font-weight: 900; } .advmsg .verse { font: italic 700 14px/1.35 var(--k-font); color: var(--k-ink2); }
.advnew { padding: 3px 8px 4px; border: 2.5px solid var(--k-ink); border-radius: 10px; color: #fff; background: linear-gradient(var(--k-red-l), var(--k-red)); font: 900 12px/1.1 var(--k-font); letter-spacing: 0.5px; -webkit-text-stroke: 2.5px var(--k-ink); paint-order: stroke fill; vertical-align: 2px; }
.advgo { align-self: stretch; min-height: 52px; margin-top: 6px; font-size: 16px; } .advnone { min-height: 28px; font: 700 14.5px/1.35 var(--k-font); color: var(--k-ink2); }
.l-compact .advisors { gap: 8px; padding-top: 8px; } .l-compact .advface { width: 50px; height: 50px; } .l-compact .advmsg .say, .l-compact .advmsg .verse { font-size: 14px; } .l-compact .advgo { min-height: 48px; }

/* ---------- Maps: the chooser, the legend and the chip on the map ---------- */
.maps { padding: 12px max(12px, var(--safe-r)) calc(20px + var(--safe-b)) max(12px, var(--safe-l)); }
.mgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px 10px; }
.mrow { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'ic nm' 'sub sub'; align-content: start; align-items: center; gap: 4px 8px; min-height: 68px; padding: 8px 10px 9px;
  border: 3px solid var(--k-ink); border-radius: 20px; background: var(--w-card); box-shadow: var(--w-step); transition: transform 0.08s, box-shadow 0.08s; }
.mrow:active { transform: translateY(3px); box-shadow: 0 0 0 var(--k-ink), inset 0 2px 0 #fff; }
.mrow .mic { grid-area: ic; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid var(--k-ink); border-radius: 50%; background: linear-gradient(#fffef5, #ffe9ae); box-shadow: 0 2px 0 rgba(74, 39, 18, 0.5), inset 0 2px 0 #fff; }
.mrow .mic svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.3)); }
.mrow .mt { display: contents; } .mrow b { grid-area: nm; font: 900 16px/1.1 var(--k-font); } .mrow small { grid-area: sub; font: 700 14px/1.2 var(--k-font); color: var(--k-ink2); }
.mrow.on { background: linear-gradient(#fff6b8, var(--k-gold)); box-shadow: 0 3px 0 #b97a0c, 0 3px 0 3px var(--k-ink), inset 0 2px 0 #fff; } .mrow.on small { color: var(--k-ink); }
.mrow.moff { background: var(--w-card-lo); } .mrow.moff .mic { background: linear-gradient(var(--k-grey-l), var(--k-grey)); }
.mrow.on, .mrow.moff.on { background: linear-gradient(#fff6b8, var(--k-gold)); }
.mlegend { max-width: 460px; margin-top: 16px; padding: 6px 14px 14px; border: 3px solid var(--k-ink); border-radius: 20px; background: var(--w-card); box-shadow: var(--w-step); } .mlegend p { margin-top: 8px; font: 700 14px/1.35 var(--k-font); }
.mramp { height: 16px; border: 3px solid var(--k-ink); border-radius: 10px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35); } .mramp.steps i { border-right: 2px solid var(--k-ink); } .mramp.steps i:last-child { border-right: 0; }
.mends { margin-top: 5px; gap: 6px; font: 800 12.5px/1 var(--k-font); color: var(--k-ink2); } .mends.steps span { flex: 1 1 auto; min-width: 0; }
.mapchip { align-items: center; width: 232px; border: 3px solid var(--k-ink); border-radius: 22px; background: var(--w-card); box-shadow: 0 4px 0 var(--k-ink), var(--k-drop), inset 0 2px 0 #fff; } .mapchip.wide { width: 272px; }
.mc-pick { min-height: 50px; padding: 4px 0 5px 12px; } .mc-t { font: 900 14px/1.1 var(--k-font); }
.mapchip .xbtn { align-self: center; margin-right: 2px; }

/* ---------- the Scribe: the newspaper and the graphs ---------- */
.scr-pane { max-width: 880px; width: 100%; margin: 0 auto; padding: 8px max(12px, var(--safe-r)) 22px max(12px, var(--safe-l)); border-top: 0; overscroll-behavior: contain; } .l-compact .scr-pane { padding-top: 4px; }
.scr-news { gap: 14px; }
.scr-paper, .scr-card { padding: 12px 14px; border: 3px solid var(--k-ink); border-radius: 20px; background: var(--w-card); box-shadow: var(--w-step); } .scr-card { padding: 10px 14px 12px; margin-bottom: 14px; }
.scr-mast { padding-bottom: 8px; border-bottom: 5px double var(--k-ink); } .scr-mast h3 { font: 900 24px/1.12 var(--k-font); letter-spacing: 0.3px; }
.scr-date { font: 800 14.5px/1.3 var(--k-font); } .scr-weather { font: italic 700 14px/1.3 var(--k-font); }
.scr-score { gap: 4px 10px; min-height: 52px; padding: 10px 2px; border-bottom: 3px dotted rgba(74, 39, 18, 0.35); } .scr-sl { font: 900 13px/1 var(--k-font); letter-spacing: 0.6px; }
.scr-score b { font: 900 28px/1 var(--k-font); } .scr-delta { font: 800 14px/1.2 var(--k-font); } .scr-delta.pos, .scr-gtrend.pos { color: var(--w-pos); } .scr-delta.neg, .scr-gtrend.neg { color: var(--w-neg); }
.scr-head { gap: 12px; min-height: 66px; padding: 10px 0; border-bottom: 3px dotted rgba(74, 39, 18, 0.35); }
.scr-pic { width: 54px; height: 54px; border: 3px solid var(--k-ink); background: radial-gradient(circle at 35% 30%, #fff3c4, #f1d68a 70%); box-shadow: 0 2px 0 rgba(74, 39, 18, 0.5); } .scr-pic svg { width: 36px; height: 36px; }
.scr-ht h4 { font: 900 16.5px/1.25 var(--k-font); } .scr-head:first-child h4 { font-size: 18px; } .scr-verse { font: italic 700 14px/1.3 var(--k-font); } .scr-quiet { font: italic 700 14.5px/1.4 var(--k-font); }
.scr-card h5 { margin: 0 0 8px; font: 900 13.5px/1.2 var(--k-font); letter-spacing: 0.5px; } .scr-q { font: 900 15.5px/1.3 var(--k-font); }
.scr-bar { height: 22px; margin: 10px 0 7px; border: 3px solid var(--k-ink); border-radius: 13px; background: #fff1cf; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.1); }
.scr-bar i { border-radius: 10px; background: linear-gradient(var(--k-green-l), var(--k-green) 55%, #3fb126); } .scr-res { font: 800 14.5px/1.2 var(--k-font); }
.scr-list li { padding: 8px 0 8px 22px; border-bottom: 3px dotted rgba(74, 39, 18, 0.25); font: 700 14.5px/1.35 var(--k-font); }
.scr-list li::before { left: 2px; top: 14px; width: 12px; height: 12px; border: 2.5px solid var(--k-ink); background: var(--k-gold); }
.scr-chip, .scr-range { min-height: 48px; min-width: 48px; padding: 0 8px; border: 3px solid var(--k-ink); border-radius: 16px; color: var(--k-ink); background: var(--w-card); box-shadow: 0 3px 0 var(--k-ink), inset 0 2px 0 #fff; font: 900 14px/1.1 var(--k-font); }
.scr-chip:active, .scr-range:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--k-ink), inset 0 2px 0 #fff; }
.scr-chip.on, .scr-range.on { color: #fff; border-color: var(--k-ink); background: var(--w-gloss), linear-gradient(var(--k-orange-l) 0%, var(--k-orange) 46%, #ec8410 54%, var(--k-orange) 100%);
  box-shadow: 0 3px 0 var(--k-orange-d), 0 3px 0 3px var(--k-ink), inset 0 3px 0 rgba(255, 255, 255, 0.5); -webkit-text-stroke: 3px var(--k-ink); paint-order: stroke fill; }
.scr-chips { gap: 9px 8px; padding-bottom: 6px; } .scr-ranges { gap: 8px; padding-bottom: 5px; } .l-compact .scr-range { padding: 0 4px; font-size: 14px; line-height: 1.05; }
.scr-gt { font: 900 18px/1.2 var(--k-font); } .scr-gnow { font: 800 15px/1.3 var(--k-font); } .scr-gtrend { font: 800 14px/1.3 var(--k-font); } .scr-ghilo, .scr-gshort { font: 700 14px/1.3 var(--k-font); }
.scr-chart { border: 3px solid var(--k-ink); border-radius: 20px; background: linear-gradient(#fffef5, #fff3cc); box-shadow: var(--w-step); }
.scr-yax b { font: 900 13px/1.1 var(--k-font); } .scr-yax small { font: 700 12px/1.1 var(--k-font); } .scr-xax span { font: 700 12px/1.3 var(--k-font); }
.scr-chart { container-type: inline-size; } @container (max-width: 430px) { .scr-xax .m { display: none; } }   /* a narrow chart keeps the first and the last word only */
.scr-svg .gl { stroke: rgba(107, 59, 28, 0.3); stroke-width: 1.5; } .scr-svg .gl.base { stroke: rgba(74, 39, 18, 0.7); stroke-width: 2.5; } .scr-svg .gl.zero { stroke: rgba(74, 39, 18, 0.8); stroke-width: 2.5; }
.scr-svg .area { fill: rgba(255, 160, 46, 0.28); } .scr-svg .ln { stroke: var(--k-ink); stroke-width: 4; }
.scr-dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 3px solid var(--k-ink); background: var(--k-orange); box-shadow: 0 0 0 2px #fff6dc; } .scr-dot.sel { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--k-gold); border: 3px solid var(--k-ink); }
.scr-cross { border-left: 3px dashed rgba(74, 39, 18, 0.6); }
.scr-tip { padding: 5px 10px; border: 3px solid var(--k-ink); border-radius: 12px; background: linear-gradient(#fffef5, #ffeeb8); box-shadow: 0 3px 0 var(--k-ink); } .scr-tip b { font: 900 14px/1.2 var(--k-font); } .scr-tip small { font: 700 12.5px/1.2 var(--k-font); }
.scr-empty { font: italic 700 15px/1.4 var(--k-font); }

/* ---------- the demand window (a small centred card over a scrim) ---------- */
.drow2 { grid-template-columns: minmax(0, 1fr) 112px; gap: 3px 10px; margin: 0 0 9px; padding: 9px 12px 10px; border: 3px solid var(--k-ink); border-radius: 18px; background: var(--w-card); box-shadow: var(--w-step); }
.drow2 b { font: 900 16px/1.15 var(--k-font); } .drow2 .dw { font: 800 14px/1.15 var(--k-font); color: var(--k-ink); } .drow2 small { font: 700 14px/1.25 var(--k-font); color: var(--k-ink2); }
.drow2 .dbar { height: 20px; border: 3px solid var(--k-ink); border-radius: 12px; background: #fff1cf; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.1); }
.drow2 .dbar::after { top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: var(--k-ink); } .drow2 .dbar i { border-radius: 9px; }
.drow2 .dbar i.up { background: linear-gradient(var(--k-green-l), var(--k-green) 55%, #3fb126); } .drow2 .dbar i.dn { background: linear-gradient(var(--k-orange-l), var(--k-orange) 55%, #ec8410); }

/* ======================================== the Elder's script card (first-time tour) ======================================== */
.elder { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'face say'; align-items: start; gap: 10px 12px; padding: 26px 14px 12px 10px; border: 3.5px solid var(--k-ink); border-radius: 26px;
  background: var(--w-bg); box-shadow: 0 5px 0 var(--k-ink), var(--k-drop), inset 0 3px 0 #fff; }
.elder .eface { grid-area: face; width: 48px; height: 48px; border: 3px solid var(--k-ink); background: radial-gradient(circle at 35% 30%, #fff3c4, #f1d68a 70%); box-shadow: 0 3px 0 rgba(74, 39, 18, 0.55); }
.elder .es { grid-area: say; gap: 5px; }
.elder .esay { font: 900 16px/1.2 var(--k-font); } .elder .ehint { font: 700 14px/1.28 var(--k-font); color: var(--k-ink2); }
.elder .eskip { position: absolute; top: -32px; right: 14px; min-height: 48px; padding: 0 16px; font-size: 15px; }   /* a tab on the top edge: the words keep the whole width */
.l-landscape .elder, .l-compact .elder { width: min(560px, calc(100% - 2 * var(--fab) - 28px)); grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'face say skip'; align-items: center; gap: 10px 12px; padding: 8px 12px 10px 10px; }
.l-landscape .elder .eskip, .l-compact .elder .eskip { position: relative; top: auto; right: auto; }
.l-compact .elder { gap: 4px 10px; padding: 4px 10px 6px 8px; border-width: 3px; border-radius: 22px; } .l-compact .elder .eface { width: 44px; height: 44px; }
.l-compact .elder .esay { font-size: 14.5px; line-height: 1.08; } .l-compact .elder .ehint { line-height: 1.14; } .l-compact .elder .es { gap: 2px; }

.l-compact .col.l { width: 320px; } .l-compact .pm { width: 44px; height: 44px; font-size: 28px; } .l-compact .rate { min-width: 40px; } .l-compact .trow { column-gap: 4px; padding-right: 8px; }   /* (the compact income column is wider than styles.css makes it: the names need it) */

/* ========================================== narrow phones (320 px) ========================================== */
@media (max-width: 345px) {
  .sheet .hd { column-gap: 8px; } .sheet .hd .hic { width: 38px; height: 38px; } .sheet .hd .hic svg { width: 24px; height: 24px; } .sheet .hd .info { font-size: 13px; padding: 3px 8px 4px; } .sheet .hd h2 { font-size: 20px; }
  .tab { padding: 6px 6px; font-size: 15px; } .tabs { gap: 6px; }
  .trow { padding-left: 10px; padding-right: 8px; column-gap: 4px; } .rate { min-width: 40px; font-size: 18px; } .pm { width: 46px; height: 46px; } .trow .nm { font-size: 15px; gap: 6px; }
  .srow { padding-left: 10px; }
  .lampspeed .srow { flex-wrap: wrap; justify-content: flex-end; } .lampspeed .srow .sl { flex: 1 1 100%; }
  .l-portrait .elder { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'say'; padding: 30px 12px 12px; } .l-portrait .elder .eface { position: absolute; left: 12px; top: -22px; width: 44px; height: 44px; }
}