/* ============================================================================
   LAPIS TOOLS — forms, calculators, comments, notices, legal block.
   Built on the existing identity: navy surfaces, antique gold controls, Inter
   text, 9–16px radii, thin gold hairlines. Loaded by the homepage (contact
   modal, reviews) and by interior pages. Values marked "observed" in
   docs/DESIGN.md are reused, not reinvented.
   2026-10-30 (owner: "make sure the tools page matches"): everything inside
   the Tools page's pane takes the homepage's materials — the glass tiles for
   every choice (a translucent royal tint over a blur, a light-catching top
   edge, a gold tint when chosen), the pane-on-pane note cards with the gold
   caps label, the gold diamond bullets, Inter 700/800 headings.
   ========================================================================== */
:root {
  --lt-bg: #0a0e1a;
  --lt-card: #162a60;       /* 2026-10-29: royal navy, a shade lighter than the honeycomb field (owner: the near-black tiles looked off) */
  --lt-card-2: #1b346f;
  --lt-surface: radial-gradient(180px 110px at 50% 0%, rgba(230, 198, 112, .14), transparent 70%), linear-gradient(168deg, rgba(38, 68, 146, .66) 0%, rgba(22, 42, 96, .7) 58%, rgba(18, 35, 79, .76) 100%);
  --lt-surface-shadow: 0 18px 44px rgba(5, 9, 20, .42), inset 0 1px 0 rgba(255, 255, 255, .24);
  --lt-glass: blur(14px) saturate(1.3);
  /* the homepage's glass tiles (index.html "GLASS TILES"): rest, hover, chosen */
  --lt-tile: linear-gradient(160deg, rgba(60, 96, 180, .22), rgba(22, 42, 96, .34));
  --lt-tile-hover: linear-gradient(160deg, rgba(80, 118, 200, .3), rgba(30, 56, 120, .42));
  --lt-tile-on: linear-gradient(160deg, rgba(200, 164, 78, .22), rgba(200, 164, 78, .12));
  --lt-tile-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  --lt-tile-on-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(200, 164, 78, .35);
  --lt-tile-glass: blur(8px) saturate(1.3);
  --lt-tile-line: rgba(200, 164, 78, .28);
  /* the homepage's note card (the "Important note" under a trade-off card): a gold glow in one corner, a brighter hairline */
  --lt-note: radial-gradient(220px 90px at 0% 0%, rgba(200, 164, 78, .2), transparent 72%), linear-gradient(168deg, rgba(38, 68, 146, .66) 0%, rgba(22, 42, 96, .7) 58%, rgba(18, 35, 79, .76) 100%);
  --lt-note-line: rgba(200, 164, 78, .44);
  --lt-gold: #c8a44e;
  --lt-gold-bright: #e3c87a;
  --lt-line: rgba(200, 164, 78, .34);
  --lt-line-strong: rgba(200, 164, 78, .45);
  --lt-text: #ffffff;      /* white (owner 2026-11-01: the lighter text looked washed out; was #f1ede5) */
  --lt-muted: #ece8e1;      /* the quieter text, near-white (owner 2026-11-01: "washed out"; was #d4cfc5, before that #aaa59d) */
  --lt-error: #ffb4a8;
  --lt-error-line: rgba(255, 140, 120, .55);
  --lt-ok: #2dd4a0;
  --lt-radius: 12px;
  --lt-tap: 44px;
}

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- forms
   2026-10-29 (owner: "the form needs an even more updated look"): labels in
   the site's small gold caps, roomy 12px fields with a soft fill and a gold
   focus ring, the four ways-to-reach-you as icon tiles (navy tile, gold line
   icon — the site's icon style) that light up gold when chosen, and a full
   gold submit. Shared by the homepage dialog, the contact page and the
   navigator pages. */
.lapis-form { color: var(--lt-text); }
.lapis-form fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.lapis-form legend, .lapis-form label { display: block; font-size: .9rem; font-weight: 700; letter-spacing: .02em; text-transform: none; color: #fff; margin-bottom: .45rem; }
.lapis-form .field { margin-bottom: 1.25rem; }
.lapis-form .req { color: var(--lt-gold-bright); margin-left: .1rem; }
.lapis-form .opt { color: var(--lt-muted); font-weight: var(--w-text, 550); letter-spacing: .02em; text-transform: none; }
.lapis-form input[type="text"], .lapis-form input[type="email"], .lapis-form input[type="tel"],
.lapis-form input[type="number"], .lapis-form select, .lapis-form textarea,
.calc-form input[type="text"], .calc-form input[type="number"], .calc-form select {
  width: 100%; min-height: 50px;
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(200, 164, 78, .3); border-radius: 12px;
  padding: .8rem 1.05rem; font: inherit; font-size: 1rem; color: var(--lt-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 0 rgba(0, 0, 0, .18);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.lapis-form select, .calc-form select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e3c87a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; }
.lapis-form select option, .calc-form select option { background: var(--lt-card); color: var(--lt-text); }
.lapis-form textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; }
.lapis-form ::placeholder, .calc-form ::placeholder { color: rgba(236, 232, 225, .68); }
.lapis-form input:hover, .lapis-form select:hover, .lapis-form textarea:hover,
.calc-form input:hover, .calc-form select:hover { border-color: rgba(200, 164, 78, .55); background: rgba(255, 255, 255, .07); }
.lapis-form input:focus-visible, .lapis-form select:focus-visible, .lapis-form textarea:focus-visible,
.calc-form input:focus-visible, .calc-form select:focus-visible {
  outline: none; border-color: var(--lt-gold); background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 3px rgba(200, 164, 78, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.lapis-form [aria-invalid="true"], .calc-form [aria-invalid="true"] { border-color: var(--lt-error-line); }
.field-hint { font-size: .95rem; color: var(--lt-muted); margin: -.1rem 0 .5rem; line-height: 1.5; }
.field-error { font-size: .95rem; color: var(--lt-error); margin-top: .45rem; line-height: 1.45; }
.field-error::before { content: "! "; font-weight: 800; }
.field-warn { font-size: .95rem; color: var(--lt-gold-bright); margin-top: .45rem; border-left: 3px solid var(--lt-gold); padding-left: .6rem; }
.char-count { font-size: .88rem; color: var(--lt-muted); text-align: right; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.method-hint:empty { display: none; }
.method-hint { font-size: .95rem; color: var(--lt-muted); margin-top: .6rem; }

/* contact-preference tiles: real radio inputs behind icon tiles */
.pref-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.lapis-form .pref { position: relative; display: flex; align-items: center; gap: .7rem; min-height: var(--lt-tap);
  padding: .55rem .75rem; margin: 0; border-radius: 12px; background: linear-gradient(160deg, rgba(60, 96, 180, .22), rgba(22, 42, 96, .34));
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
  border: 1px solid rgba(200, 164, 78, .28); color: var(--lt-text); font-size: .95rem; font-weight: 600; cursor: pointer;
  text-transform: none; letter-spacing: 0;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s; }
.lapis-form .pref input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lapis-form .pref svg { flex: none; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 10px;
  background: linear-gradient(160deg, rgba(44, 76, 156, .7), rgba(20, 40, 90, .8)); color: #E6C670; box-shadow: 0 0 0 1px rgba(230, 198, 112, .3), inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 8px rgba(0, 0, 0, .35);
  transition: background .2s, color .2s, box-shadow .2s; }
.lapis-form .pref:hover { border-color: rgba(200, 164, 78, .55); background: rgba(255, 255, 255, .07); }
.lapis-form .pref.on, .lapis-form .pref:has(input:checked) { border-color: var(--lt-gold); background: rgba(200, 164, 78, .15); color: #fff;
  box-shadow: 0 0 0 1px rgba(200, 164, 78, .45), 0 0 18px rgba(200, 164, 78, .22); }
.lapis-form .pref.on svg, .lapis-form .pref:has(input:checked) svg { background: linear-gradient(135deg, #e8d08a, #c8a44e); color: #14285A;
  box-shadow: 0 0 0 1px rgba(255, 243, 196, .5), 0 2px 10px rgba(200, 164, 78, .45); }
.lapis-form .pref:has(input:focus-visible) { outline: none; box-shadow: 0 0 0 3px rgba(200, 164, 78, .35); }

.lapis-form .check { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; align-items: start;
  padding: .9rem 1rem; border: 1px solid rgba(200, 164, 78, .22); border-radius: 12px; background: rgba(255, 255, 255, .03); }
.lapis-form .check input { width: 22px; height: 22px; margin: .15rem 0 0; accent-color: var(--lt-gold); }
.lapis-form .check label { font-weight: var(--w-text, 550); font-size: .9rem; line-height: 1.5; margin: 0; color: var(--lt-text); text-transform: none; letter-spacing: 0; }
.lapis-form .check .field-error { grid-column: 1 / -1; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-summary { border: 1px solid var(--lt-error-line); background: rgba(255, 120, 100, .07); border-radius: 10px;
  padding: .85rem 1rem; margin-bottom: 1.1rem; font-size: .9rem; color: var(--lt-text); }
.form-summary:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; }
.form-summary ul { margin: .4rem 0 0 1.1rem; }
.form-summary a { color: var(--lt-error); text-decoration: underline; }

.form-status { margin-top: .9rem; font-size: 1rem; line-height: 1.55; }
.form-status:empty { display: none; }
.form-status.is-sending { color: var(--lt-muted); }
.form-status.is-error { border-left: 3px solid var(--lt-error-line); padding: .6rem .8rem; background: rgba(255, 120, 100, .06); border-radius: 0 8px 8px 0; }
.form-status a, .form-success a, .modal-legal a, .notice a, .calc-sources a, .prose a { color: var(--lt-gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.form-status:focus { outline: none; }
.lapis-form [type="submit"][aria-disabled="true"] { opacity: .7; cursor: progress; }
.lapis-form [type="submit"] { min-height: 52px; width: 100%; justify-content: center; margin-top: 1.1rem;
  border: 0; border-radius: 12px; padding: .9rem 1.4rem; font-weight: 800; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(135deg, #e8d08a 0%, #c8a44e 60%, #b8923f 100%); color: #101427;
  box-shadow: 0 12px 28px rgba(200, 164, 78, .26), inset 0 1px 0 rgba(255, 255, 255, .38);
  transition: transform .2s, box-shadow .2s; }
.lapis-form [type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(200, 164, 78, .34), inset 0 1px 0 rgba(255, 255, 255, .38); }
.lapis-form [type="submit"]:focus-visible { outline: 3px solid var(--lt-gold-bright); outline-offset: 3px; }
.form-success { border: 1px solid rgba(45, 212, 160, .4); background: rgba(45, 212, 160, .07); border-radius: 12px; padding: 1.2rem 1.3rem; }
.form-success h3 { font-size: 1.15rem; margin-bottom: .5rem; color: #fff; }
.form-success h3:focus { outline: none; }
.form-success p { margin-bottom: .6rem; font-size: 1rem; }
.form-ref strong { font-variant-numeric: tabular-nums; letter-spacing: .03em; color: var(--lt-gold-bright); }
.form-note { font-size: .95rem; color: var(--lt-muted); }
.form-closed { border: 1px dashed var(--lt-line-strong); border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .9rem; color: var(--lt-text); background: var(--lt-tile); }
.modal-legal { font-size: .9rem; line-height: 1.6; color: var(--lt-muted); margin-top: 1rem; }

/* --------------------------------------------------------- page sections */
/* the reading column uses the screen (owner 2026-10-31: no screen wasted): wider panels, with sentences kept to a readable measure inside them */
.tool-section { padding: 60px 5vw; }
.tool-wrap { max-width: min(1240px, 100%); margin: 0 auto; }
.tool-wrap.narrow { max-width: min(960px, 100%); }
/* a thin pale vein between one block of a page and the next (owner 2026-10-31: separations for organization) */
.tool-section + .tool-section { border-top: 1px solid rgba(255, 255, 255, .13); }
.prose p, .prose li, .notice p, .answer-first p { max-width: 72ch; }
.panel { background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: 18px; padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--lt-surface-shadow); -webkit-backdrop-filter: var(--lt-glass); backdrop-filter: var(--lt-glass); }
.panel + .panel { margin-top: 2rem; }
.panel h2 { font-family: var(--serif); font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 600; letter-spacing: 0; line-height: 1.2; color: #fff; margin-bottom: .7rem; }   /* the site's headline serif */
.panel h3 { font-family: var(--sans); font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; color: #fff; margin: 1.2rem 0 .5rem; }
.panel .h4-like { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; margin: 1.6rem 0 .55rem; }   /* answer headings in the site's serif (owner 2026-11-01) */
.prose p, .prose li { color: var(--lt-text); line-height: 1.7; }
.prose p + p { margin-top: .8rem; }
.prose ul, .prose ol { margin: .6rem 0 .6rem 1.2rem; }
.prose li + li { margin-top: .35rem; }
.prose h2 { margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
/* the lead answer and the notices: the homepage's note card (glass, a gold glow in the corner, the gold caps label) */
.answer-first { border: 1px solid var(--lt-note-line); border-left: 3px solid var(--lt-gold); background: var(--lt-note); border-radius: 0 12px 12px 0; padding: 1rem 1.2rem; margin-bottom: 1.6rem;
  box-shadow: var(--lt-tile-shadow); -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); }
.answer-first .label { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #e8cf85; margin-bottom: .35rem; }
.answer-first p { margin: 0; color: var(--lt-text); line-height: 1.65; }
.notice { border: 1px solid var(--lt-tile-line); border-radius: 12px; padding: .95rem 1.1rem; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); font-size: 1rem; line-height: 1.6; }
.notice + .notice { margin-top: .8rem; }
.notice.warn { border-color: var(--lt-note-line); background: var(--lt-note); }
.notice strong { color: #fff; }

/* -------------------------------------------------------------- calculators */
.calc-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.calc-tile { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem 1.3rem 1.2rem; background: var(--lt-surface); box-shadow: var(--lt-surface-shadow); -webkit-backdrop-filter: var(--lt-glass); backdrop-filter: var(--lt-glass); border: 1px solid var(--lt-line);
  border-radius: 14px; color: var(--lt-text); transition: border-color .25s, transform .25s; min-height: 100%; }
.calc-tile:hover { border-color: var(--lt-gold); transform: translateY(-2px); }
.calc-tile:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 3px; }
.calc-tile .calc-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #E6C670;   /* the homepage's icon tile */
  background: linear-gradient(160deg, rgba(44, 76, 156, .62), rgba(20, 40, 90, .72));
  box-shadow: 0 0 0 1px rgba(230, 198, 112, .26), inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 12px 26px rgba(5, 9, 20, .38); }
.calc-tile .calc-icon svg { width: 20px; height: 20px; }
.calc-tile h2, .calc-tile h3 { font-size: 1.05rem; font-weight: 600; margin: .2rem 0 0; }
.calc-tile p { font-size: .98rem; color: var(--lt-text); line-height: 1.55; }
.calc-tile .go { margin-top: auto; font-size: .92rem; font-weight: 700; color: var(--lt-gold-bright); }

.calc-form .calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.calc-form .calc-grid .full { grid-column: 1 / -1; }
.calc-form label, .calc-form legend { display: block; font-size: 1rem; font-weight: 700; margin-bottom: .4rem; color: #fff; }
.calc-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.date-group { display: grid; grid-template-columns: 1.6fr .8fr 1fr; gap: .5rem; }
.month-group { display: grid; grid-template-columns: 1.6fr 1fr; gap: .5rem; }
.date-group label, .month-group label { font-size: .9rem; font-weight: 600; color: var(--lt-text); margin-bottom: .3rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
/* small choices: the homepage's glass tiles — gold-tinted when chosen */
.choice { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: var(--lt-tap); padding: .55rem .9rem;
  border: 1px solid var(--lt-tile-line); border-radius: 10px; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass);
  cursor: pointer; font-size: .98rem; font-weight: 600; color: var(--lt-text); transition: border-color .2s, background .2s, box-shadow .2s; }
.choice input { accent-color: var(--lt-gold); width: 18px; height: 18px; margin: 0; }
.choice:hover { background: var(--lt-tile-hover); border-color: rgba(200, 164, 78, .55); }
.choice:has(input:checked) { border-color: var(--lt-gold); background: var(--lt-tile-on); box-shadow: var(--lt-tile-on-shadow); color: #fff; }
.choice:has(input:focus-visible) { outline: 3px solid var(--lt-gold); outline-offset: 2px; }
.calc-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.calc-actions .btn { min-height: var(--lt-tap); padding: 10px 22px; font-size: 1rem; }
/* the quiet button: the homepage's .btn-quiet (a glass tile with the gold hairline) */
.btn-quiet-lt { color: var(--lt-text); border: 1px solid var(--lt-tile-line); background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); }
.btn-quiet-lt:hover { border-color: var(--lt-gold); color: var(--lt-gold-bright); background: var(--lt-tile-hover); }
.btn:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 3px; }
.calc-result { margin-top: 1.4rem; border-top: 1px solid var(--lt-line); padding-top: 1.3rem; }
.calc-result:empty { display: none; }
.calc-result:focus { outline: none; }
.result-headline { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 600; letter-spacing: 0; color: #fff; line-height: 1.25; margin-bottom: .5rem; }   /* the site's headline serif (owner 2026-11-01) */
.result-figure { font-family: var(--serif); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; color: var(--lt-gold-bright); line-height: 1.1; font-variant-numeric: tabular-nums; }
.result-sub { color: var(--lt-muted); font-size: .98rem; margin-top: .2rem; }
.breakdown { margin-top: 1rem; border: 1px solid var(--lt-tile-line); border-radius: 12px; overflow: hidden; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); }
.breakdown table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.breakdown caption { text-align: left; padding: .7rem 1rem; font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: #e8cf85; background: rgba(200, 164, 78, .08); }
.breakdown th, .breakdown td { padding: .6rem 1rem; border-top: 1px solid rgba(200, 164, 78, .14); text-align: left; vertical-align: top; }
.breakdown td.num, .breakdown th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.breakdown tr.total td { font-weight: 700; color: #fff; }
.breakdown tr.hl td { background: rgba(200, 164, 78, .1); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; }
.result-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.result-actions .btn { min-height: var(--lt-tap); padding: 8px 18px; font-size: .95rem; }
.calc-route { margin-top: 1rem; }
.year-note { font-size: .95rem; color: var(--lt-muted); margin-top: .35rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: .98rem; margin: .8rem 0; }
.data-table th, .data-table td { border-bottom: 1px solid rgba(200, 164, 78, .16); padding: .55rem .6rem; text-align: left; }
.data-table th { color: var(--lt-gold-bright); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-sources { font-size: .95rem; line-height: 1.6; }
.calc-sources li { margin-top: .35rem; overflow-wrap: anywhere; }
.verified-line { font-size: .95rem; color: var(--lt-muted); margin-top: .8rem; }
.no-js-note { border: 1px dashed var(--lt-line-strong); border-radius: 10px; padding: .8rem 1rem; }
html.js .no-js-note { display: none; }
html:not(.js) .needs-js { display: none; }

/* ------------------------------------------------------- reviews/comments */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.paths > [hidden] { display: none !important; }
.path-card { display: flex; flex-direction: column; gap: .5rem; background: var(--lt-surface); box-shadow: var(--lt-surface-shadow); -webkit-backdrop-filter: var(--lt-glass); backdrop-filter: var(--lt-glass); border: 1px solid var(--lt-line); border-radius: 14px; padding: 1.3rem; }
.path-card .tag { font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lt-gold-bright); }
.path-card h3 { font-size: 1.08rem; font-weight: 600; color: #fff; }
.path-card p { font-size: .98rem; color: var(--lt-text); line-height: 1.55; }
.path-card .btn { margin-top: auto; align-self: flex-start; min-height: var(--lt-tap); padding: 10px 20px; font-size: .95rem; }
.site-comments-list { display: grid; gap: .9rem; }
.site-comment { background: var(--lt-surface); box-shadow: var(--lt-surface-shadow); -webkit-backdrop-filter: var(--lt-glass); backdrop-filter: var(--lt-glass); border: 1px solid var(--lt-line); border-radius: 12px; padding: 1rem 1.15rem; }
.site-comment-text { white-space: pre-line; line-height: 1.6; overflow-wrap: anywhere; }
.site-comment-meta { margin-top: .5rem; font-size: .95rem; color: var(--lt-muted); }
.site-comment-reply { margin-top: .8rem; border-left: 2px solid var(--lt-gold); padding-left: .8rem; font-size: .98rem; }
.site-comment-reply-label { font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lt-gold-bright); margin-bottom: .2rem; }
.site-comments-status { font-size: .98rem; color: var(--lt-muted); }

/* ------------------------------------------------------------ team & areas */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.team-card { background: var(--lt-surface); box-shadow: var(--lt-surface-shadow); -webkit-backdrop-filter: var(--lt-glass); backdrop-filter: var(--lt-glass); border: 1px solid var(--lt-line); border-radius: 14px; padding: 1.2rem; display: grid; grid-template-columns: 84px 1fr; gap: .9rem 1rem; align-items: start; }
.team-card img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: var(--lt-card-2); }
.team-card h2, .team-card h3 { font-size: 1.05rem; font-weight: 600; color: #fff; }
.team-card .role { font-size: .92rem; color: var(--lt-gold-bright); font-weight: 700; }
.team-card .bio { grid-column: 1 / -1; font-size: 1rem; color: var(--lt-text); line-height: 1.6; }
.team-card .facts { grid-column: 1 / -1; font-size: .95rem; color: var(--lt-muted); line-height: 1.55; }
.team-card .team-more { grid-column: 1 / -1; margin: .1rem 0 0; font-size: .86rem; font-weight: 700; letter-spacing: .02em; }   /* the homepage card's door, on the team page too */
.team-card .team-more a { color: var(--lt-gold-bright); text-decoration: underline; text-decoration-color: rgba(227, 200, 122, .45); text-underline-offset: 3px; display: inline-block; padding: .6rem 0; }
.team-card .team-more a:hover { color: #fff3c4; text-decoration-color: #fff3c4; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }

/* ---------------------------------------------------------- legal / TPMO */
.legal .tpmo-statement { font-size: 1rem; line-height: 1.65; color: #fff; border: 1px solid rgba(200, 164, 78, .3); border-radius: 14px; padding: .95rem 1.15rem; margin-bottom: 1rem; }
.legal { color: var(--muted, #d4cfc5) !important; font-size: .9rem !important; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.foot-mail { font-size: .95rem; line-height: 1.5; margin-top: .4rem; opacity: 1; }

/* --------------------------------------------------------- mobile nav (interior) */
.nav-toggle { display: none; }
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--lt-tap); padding: 0 .9rem; margin-left: auto; margin-right: .5rem;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 99px; color: #fff; font-weight: 600; font-size: .85rem; }
  .nav-toggle-bars { width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
  .nav-toggle-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
  nav.topnav .nav-links.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(16, 32, 84, .98); border-bottom: 1px solid rgba(200, 164, 78, .3); padding: .5rem 1rem 1rem; }
  nav.topnav .nav-links.open a { padding: .8rem .6rem; border-radius: 8px; font-size: .95rem; }
}
@media (max-width: 520px) {
  .btn-nav .btn-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .btn-nav { padding: 10px 13px; }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 760px) {
  .calc-form .calc-grid { grid-template-columns: 1fr; }
  .paths { grid-template-columns: 1fr; }
  .tool-section { padding: 52px 5vw; }
  .pref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* on phones the month takes its own row and day/year share the next, so "Day" and "Year" never get clipped to a letter (seen at 390px, 2026-10-30) */
@media (max-width: 480px) {
  .date-group { grid-template-columns: 1fr 1fr; }
  .date-group > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .team-card { grid-template-columns: 64px 1fr; }
  .team-card img { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .calc-tile, .calc-tile:hover { transition: none; transform: none; }
}

/* ------------------------------------------------------------------ print */
@media print {
  body { background: #fff !important; color: #000 !important; }
  body::after, nav.topnav, #progressBar, #flyBtn, footer, .skip-link, .calc-actions, .result-actions, .hero-inner .hex-field, .fontsize, .no-print { display: none !important; }
  .hero-inner { padding: 0 0 12px !important; background: none !important; color: #000 !important; text-align: left !important; }
  .hero-inner h1, .hero-inner p.lede, .crumb { color: #000 !important; opacity: 1 !important; transform: none !important; animation: none !important; }
  .panel, .breakdown, .notice, .answer-first { background: #fff !important; border-color: #999 !important; box-shadow: none !important; color: #000 !important; }
  .panel *, .breakdown *, .notice *, .answer-first * { color: #000 !important; }
  section::before { display: none !important; }
  .tool-section { padding: 0 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .calc-form { display: none !important; }
  .print-summary { display: block !important; }
  .viz text, .viz text.mut, .viz text.gold, .viz text.big { fill: #000 !important; stroke: none !important; }
  .viz .track { fill: #e6e6e6 !important; }
  .viz .grid, .viz .axis { stroke: #ccc !important; }
  .viz .mark { stroke: #000 !important; }
  .viz .dot { fill: #000 !important; }
}
.print-summary { display: none; }
ul.calc-hub { list-style: none; margin: 0; padding: 0; }
ul.calc-hub > li { display: flex; }
ul.calc-hub > li > .calc-tile { flex: 1; }
.path-card h2.h3-like { font-size: 1.08rem; font-weight: 600; color: #fff; }
.preview-badge { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #101427; background: var(--lt-gold); border-radius: 4px; padding: .1rem .4rem; margin-right: .35rem; vertical-align: middle; }

/* contrast repairs for small gold text on the royal-blue nav (observed 4.3:1 and 3.7:1) */
nav.topnav .brand-text span { color: var(--lt-gold-bright); }
nav.topnav .nav-links a.here { color: var(--lt-gold-bright); }
footer .wrap .foot-grid a, footer .wrap .foot-grid p { color: var(--muted, #d4cfc5); }
footer .wrap .foot-grid a:hover { color: var(--lt-gold); }
.car-count { color: var(--muted, #d4cfc5) !important; }
.foot-grid .foot-mail { color: inherit; }

/* breadcrumb as an ordered list, styled like the existing .crumb pill */
ol.crumb { list-style: none; flex-wrap: wrap; justify-content: center; row-gap: .2rem; max-width: 100%; }
ol.crumb li { display: inline; }
ol.crumb li + li::before { content: "·"; margin: 0 .55rem 0 .15rem; opacity: .8; }
ol.crumb [aria-current="page"] { color: #fff; opacity: .92; }
.hero-inner nav[aria-label="Breadcrumb"] { display: block; }

/* (2026-10-30: the opaque fills the lead answer and notices once had over the
   honeycomb are gone — they sit inside a glass pane now and take the homepage's
   note-card glass above) */
.calc-hub-label { display: block; font-family: var(--serif); font-style: italic; font-size: 1.1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--lt-gold-bright); margin: 1.6rem 0 .8rem; }
.calc-hub { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* homepage footer tagline uses an inline muted color; on the #10264c field it measured 4.13:1 */
footer .wrap .foot-grid > div:first-child > p { color: var(--muted, #d4cfc5) !important; }
.related-tools { margin-top: 1.2rem; font-size: 1rem; color: var(--lt-text); }
.related-tools a { color: var(--lt-gold-bright); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: .35rem 0; }
/* owner-only notes: shown in the local preview, never on the public site
   (also removed from the HTML by scripts/build_public.py for publishing) */
[data-preview-only] { display: none !important; }
html.preview [data-preview-only] { display: revert !important; }
/* buttons inside text panels keep button styling (not link styling) */
.prose a.btn, .notice a.btn, .form-success a.btn { text-decoration: none; }
.prose a.btn-gold, .notice a.btn-gold { color: #101427; }
.prose a.btn-quiet-lt, .notice a.btn-quiet-lt { color: var(--lt-text); }
.area-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---- homepage design tweaks (owner request, Oct 23) ---- */
/* (the section bar's tab padding is the homepage's own since 2026-10-31: the bar is a carousel strip and no longer has to fit every tab on one screen) */
/* commitment icons now follow the Lapis icon spec (56px, 2px strokes, relief); see index.html .lapis-icon */
/* review card dots keep their 8px look but get a 24px tap target */
.rev-dot { width: 24px !important; height: 24px !important; background: none !important; position: relative; transform: none !important; }
.rev-dot::before { content: ""; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: rgba(200, 164, 78, .25); transition: background .3s, transform .3s; }
.rev-dot.on::before { background: var(--gold, #c8a44e); transform: scale(1.35); }
.rev-nav { gap: 0 !important; }
.rev-invite-lead { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.28rem; line-height: 1.55; color: var(--text, #e8e4dc); }
.rev-invite-text { color: #ece8e1; max-width: 34rem; margin: 0 auto; }
.rev-card .who a { color: var(--gold, #c8a44e); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: .5rem 0; }
.rev-card .who [hidden] { display: none !important; }
/* review cards: stack in one grid cell so the box grows to the tallest card
   instead of clipping text on phones (the original clipped there too) */
.rev-carousel { display: grid; }
.rev-carousel > .rev-card { position: relative; inset: auto; grid-area: 1 / 1; }
@media (max-width: 600px) { .rev-carousel > .rev-card { padding: 2rem 1.4rem; } }
.rev-card .who > span { white-space: nowrap; }

/* ---- planning results (enrollment planner, IRMAA planning, claiming) ---- */
.calc-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .4rem; }
.calc-more[open] > summary { margin-bottom: .8rem; }
.calc-more .calc-grid { margin-bottom: .9rem; }
.calc-result .calc-more { margin-top: 1rem; border: 1px solid var(--lt-tile-line); border-radius: 12px; padding: .4rem 1rem; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); }
.calc-result .calc-more .breakdown { margin-bottom: .8rem; }
.cell-note { color: var(--lt-muted); font-size: .95rem; font-weight: var(--w-text, 500); }
.h4-like { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: #fff; margin: 1.6rem 0 .55rem; }
/* result lists: the homepage's gold diamond bullets */
.result-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.result-list li { position: relative; padding-left: 1.1rem; margin: .45rem 0; line-height: 1.5; }
.result-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--lt-gold); opacity: .75; transform: rotate(45deg); border-radius: 1px; }
.plan-checklist li.past { opacity: .62; }
.calc-result .notice { margin-top: .9rem; }
.calc-result .notice p + p { margin-top: .4rem; }
/* enrollment windows: a table on wide screens, stacked cards on phones */
@media (max-width: 640px) {
  .plan-windows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .plan-windows tr { display: block; padding: .75rem 1rem; border-top: 1px solid rgba(200, 164, 78, .14); }
  .plan-windows tr:first-child { border-top: 0; }
  .plan-windows td { display: block; padding: 0; border: 0; }
  .plan-windows td.num { display: inline-block; text-align: left; margin-top: .45rem; margin-right: 1.1rem; white-space: nowrap; }
  .plan-windows td.num::before { content: attr(data-label) " "; display: block; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lt-gold-bright); }
}
/* small comparison tables: a table on wide screens, one card per row on phones */
@media (max-width: 640px) {
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-table tr { display: block; padding: .7rem .9rem; border-top: 1px solid rgba(200, 164, 78, .14); }
  .stack-table tr:first-child { border-top: 0; }
  .stack-table tr.hl { background: rgba(200, 164, 78, .1); }
  .stack-table tr.hl td { background: none; }
  .stack-table td { display: block; padding: 0 !important; border: 0; }
  .stack-table td[data-label] { display: inline-block; text-align: left; margin: .4rem 1rem 0 0; white-space: nowrap; }
  .stack-table td[data-label]::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lt-gold-bright); }
}
/* the tool page: a shorter hero so the first step shows on the first screen of a phone */
.hero-inner.compact { padding-top: calc(var(--bars, 132px) + 2rem); padding-bottom: 1.6rem; }   /* under the homepage's two bars (2026-10-30) */
.hero-inner.compact h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 10px; }
.hero-inner.compact p.lede { margin-bottom: 0; }
.hero-inner.compact + .tool-section, .hero-inner.compact + main > .tool-section:first-child { padding-top: 1.6rem; }   /* the section sits inside <main> since the homepage template (2026-10-30) */
/* privacy promise under the title of every tool: the homepage's glass cue pill */
.tool-privacy { display: inline-flex; gap: .55rem; align-items: flex-start; margin: 1.1rem auto 0; max-width: 40rem; padding: .6rem .95rem; border: 1px solid rgba(227, 200, 122, .38); border-radius: 14px;
  background: rgba(22, 42, 96, .6); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--lt-text); font-size: .95rem; line-height: 1.5; text-align: left; }
.tool-privacy svg { flex: none; margin-top: .2rem; color: var(--lt-gold-bright); }
.tool-section .answer-first { margin-top: 1.4rem; }
/* live results */
.calc-result.is-stale { opacity: .45; transition: opacity .2s; }
.calc-result { transition: opacity .2s; }
/* ---- charts ---- */
.viz { margin: 1.1rem 0 .4rem; }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz text { fill: #fff; font-family: var(--sans); font-size: 13px; }
/* a halo in the pane's color keeps labels readable where a grid or Today line passes behind them (the pane is royal glass now) */
.viz text { paint-order: stroke fill; stroke: #1a2e64; stroke-width: 3px; stroke-linejoin: round; }
.viz text.dark, .viz text.in { stroke: none; } /* labels written inside a bar need no halo */
.viz text.mut { fill: #ece8e1; font-size: 12px; }
.viz text.big { font-size: 15px; font-weight: 700; fill: #fff; }
.viz text.gold { fill: #e3c87a; font-weight: 700; }
.viz text.dark { fill: #0f1530; font-weight: 700; }
.viz .track { fill: rgba(255, 255, 255, .07); }
.viz .bar { fill: #c8a44e; }
.viz .bar.soft { fill: rgba(200, 164, 78, .45); }
.viz .bar.blue { fill: #4f7cc4; }
.viz .bar.muted { fill: rgba(255, 255, 255, .22); }
.viz .bar.ok { fill: #4caf7d; }
.viz .bar.hl { fill: #e3c87a; stroke: #fff; stroke-width: 1.5; }
.viz .cell { fill: #c8a44e; }
.viz .cell.off { fill: rgba(255, 255, 255, .16); }
.viz .cell.ex { fill: none; stroke: rgba(255, 255, 255, .35); stroke-dasharray: 2 2; }
.viz .axis { stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.viz .grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.viz .today { stroke: #ff8f7a; stroke-width: 2; stroke-dasharray: 4 3; }
.viz .mark { stroke: #fff; stroke-width: 2.5; }
.viz .line { fill: none; stroke-width: 2.5; }
.viz .line.a { stroke: #4f7cc4; } .viz .line.b { stroke: #c8a44e; } .viz .line.c { stroke: #4caf7d; }
.viz .dot { fill: #fff; }
.viz figcaption { color: var(--lt-muted); font-size: .92rem; margin-top: .35rem; }
.viz-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .92rem; color: var(--lt-muted); margin-top: .3rem; }
.viz-legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
/* range sliders */
.calc-slider { margin-top: .5rem; }
.calc-slider input[type=range] { width: 100%; accent-color: #c8a44e; min-height: 44px; }
.calc-slider .ends { display: flex; justify-content: space-between; font-size: .9rem; color: var(--lt-muted); margin-top: -.35rem; }
.plan-windows tr.past td { opacity: .55; }
.viz svg { max-width: 100%; height: auto; }
.viz text.tiny { font-size: 12px; }
.mgrid .mrow { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin-bottom: .35rem; }
.mgrid .cells { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; width: min(100%, 300px); }
.mgrid .cells i { display: block; aspect-ratio: 1; border-radius: 3px; background: #c8a44e; }
.mgrid .cells i.off { background: rgba(255, 255, 255, .16); }
.mgrid .cells i.ex { background: transparent; outline: 1px dashed rgba(255, 255, 255, .45); outline-offset: -1px; }
.mgrid .mlabel { font-size: .95rem; color: var(--lt-muted); }
.mgrid .mlabel.gold { color: #e3c87a; font-weight: 700; }
/* Extra Help / Medicare Savings Program cards */
.li-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin-top: 1rem; }
.li-card { border: 1px solid var(--lt-tile-line); border-radius: 12px; padding: .9rem 1rem; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); }
.li-card.on { border-color: rgba(76, 175, 125, .7); background: linear-gradient(160deg, rgba(76, 175, 125, .16), rgba(76, 175, 125, .06)); }
.li-card h4 { font-family: var(--sans); font-size: .98rem; font-weight: 700; letter-spacing: -.01em; color: #fff; margin: 0 0 .3rem; }
.li-card p { font-size: .95rem; margin: .2rem 0 .5rem; }
.pill { display: inline-block; font-size: .88rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; }
.pill.ok { background: rgba(76, 175, 125, .2); color: #8fe0b5; }
.pill.no { background: rgba(255, 255, 255, .08); color: #ece8e1; }

/* ---- explanations fold away under the tool (tap to open) ---- */
.info-list { display: grid; gap: .55rem; margin-top: 1.6rem; }
.info-intro { color: var(--lt-muted); font-size: .95rem; margin: 0 0 .2rem; }
/* each explanation folds like the homepage's accordion items: a glass tile, a glass chevron button that turns gold when open */
details.info-pop { border: 1px solid var(--lt-tile-line); border-radius: 12px; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); overflow: hidden; transition: border-color .25s; }
details.info-pop[open] { border-color: rgba(200, 164, 78, .5); }
details.info-pop > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .8rem 1.1rem; }
details.info-pop > summary::-webkit-details-marker { display: none; }
details.info-pop > summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px rgba(200, 164, 78, .3);
  background: linear-gradient(#e3c87a, #e3c87a) center / 10px 1.5px no-repeat, linear-gradient(#e3c87a, #e3c87a) center / 1.5px 10px no-repeat, var(--lt-tile); transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s; }
details.info-pop[open] > summary::after { background: linear-gradient(#14213b, #14213b) center / 10px 1.5px no-repeat, var(--lt-gold); transform: rotate(180deg); }
details.info-pop > summary:hover { background: rgba(200, 164, 78, .06); }
details.info-pop > summary:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: -3px; }
.info-h { font-size: 1.05rem !important; line-height: 1.35; margin: 0 !important; color: #fff; font-weight: 700; font-family: var(--sans); }
details.info-short > summary .info-h { color: #e3c87a; }
.info-body { padding: 0 1.1rem 1.1rem; }
.info-body > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { details.info-pop > summary::after { transition: none; } }
.year-fixed { font-weight: 700; color: #fff; padding: .55rem 0 .1rem; margin: 0; }
/* topics wait for a result (only when JavaScript runs; without it they are always shown) */
.tool-section.await-result:not(.has-result) .info-list { display: none; }
.tool-section.has-result .info-list { animation: info-in .35s ease-out; }
@keyframes info-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tool-section.has-result .info-list { animation: none; } }
.info-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: 0; margin: 0; color: #fff; }

/* ---- situational explanations: full-contrast text, nothing dimmed ---- */
.tool-section.await-result .info-list { display: none !important; }
.why { margin-top: 1.3rem; border-top: 1px solid rgba(200, 164, 78, .25); padding-top: 1rem; }
.why-title { font-family: var(--sans); font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em; color: #fff; margin: 0 0 .6rem; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.why-list li { color: #fff; line-height: 1.6; padding-left: 1.1rem; position: relative; }
.why-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: #c8a44e; opacity: .85; transform: rotate(45deg); border-radius: 1px; }   /* the homepage's diamond bullet */
.why-list strong { color: #fff; }
.why-src { white-space: nowrap; font-size: .9em; }
.calc-result .result-sub, .calc-result .cell-note, .calc-result .year-note, .calc-result figcaption, .calc-result .viz-legend, .calc-result .mlabel { color: #fff !important; }

/* ------------------------------------------------- guided roadmap */
/* quick path: one screen of big choices — the homepage's glass tiles (2026-10-30), gold-tinted when chosen */
.rm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; margin: .4rem 0 1rem; }
.rm-tile { position: relative; display: block; padding: .95rem 1rem .95rem 2.9rem; border: 1px solid var(--lt-tile-line); border-radius: 14px;
  background: var(--lt-tile); box-shadow: var(--lt-tile-shadow); -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass);
  cursor: pointer; min-height: var(--lt-tap); transition: border-color .2s, background .2s, box-shadow .2s; }
.rm-tile input { position: absolute; left: 1rem; top: 1.15rem; width: 20px; height: 20px; margin: 0; accent-color: var(--lt-gold); }
.rm-tile .t { display: block; font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; color: #fff; font-size: 1.02rem; line-height: 1.3; }
.rm-tile .s { display: block; font-size: .95rem; font-weight: var(--w-text, 500); color: var(--lt-text); margin-top: .2rem; line-height: 1.4; }
.rm-tile:hover { border-color: rgba(200, 164, 78, .55); background: var(--lt-tile-hover); }
.rm-tile:has(input:checked) { border-color: var(--lt-gold); background: var(--lt-tile-on); box-shadow: var(--lt-tile-on-shadow); }
.rm-tile:has(input:checked) .s { color: #fff; }
.rm-tile:has(input:focus-visible) { outline: 3px solid var(--lt-gold); outline-offset: 2px; }
.rm-alt { margin: 1rem 0 0; font-size: .98rem; }
.rm-alt a { color: var(--lt-gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.rm-alt + .rm-alt { margin-top: .5rem; }
/* explore screens */
.ex-off { display: none !important; }
button.rm-tile { width: 100%; text-align: left; font: inherit; color: inherit; padding-left: 1rem; }
button.rm-tile:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; }
.ex-topics .rm-tile .t { font-size: 1.08rem; }
.ex-result { margin-top: 0; border-top: 0; padding-top: 0; }
.ex-result .result-headline:focus { outline: none; }
.ex-compliance { margin: .6rem 0 .8rem; }
.ex-rules .info-body { padding: 0 1rem 1rem; border-top: 1px solid var(--lt-line); }
.ex-rules .info-body > :first-child { margin-top: .9rem; }
.ex-rules summary .t { padding-right: 1rem; }
.calc-slider .ends strong { color: var(--lt-gold-bright); font-size: 1rem; }
.ex-screen .rm-tiles { margin-top: .2rem; }
.linklike { background: none; border: 0; padding: .4rem 0; color: var(--lt-gold-bright); text-decoration: underline; font: inherit; cursor: pointer; min-height: var(--lt-tap); }
.linklike:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; border-radius: 4px; }
.rm-step h2:focus { outline: none; }
.rm-lead { color: var(--lt-text); margin: 0 0 1.1rem; }
.rm-sub { border: 1px solid var(--lt-tile-line) !important; border-radius: 12px; padding: .9rem 1rem !important; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow); }
.rm-nav { display: flex; gap: .6rem; justify-content: space-between; flex-wrap: wrap; margin-top: 1.2rem; }
.rm-nav [data-rm="next"] { margin-left: auto; min-width: 9rem; }
.rm-step-note { color: var(--lt-error); margin: .5rem 0 0; min-height: 1em; }
.rm-result { margin-top: 0; border-top: 0; padding-top: 0; }
.rm-result .result-headline:focus { outline: none; }
/* the answer's cards: the homepage's note cards (glass tile; the one to act on gets the gold glow and brighter hairline), the gold caps label */
.rm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; margin: 1rem 0 .4rem; }
.rm-card { border: 1px solid var(--lt-tile-line); border-radius: 12px; padding: .9rem 1rem; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); }
.rm-card.hl { border-color: var(--lt-note-line); background: var(--lt-note); box-shadow: 0 18px 44px rgba(5, 9, 20, .3), inset 0 1px 0 rgba(255, 255, 255, .24); }
.rm-card .k { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: #e8cf85; margin: 0 0 .3rem; font-weight: 700; }
.rm-card .h { font-family: var(--serif); font-size: 1.28rem; font-weight: 600; letter-spacing: 0; color: #fff; margin: 0 0 .25rem; line-height: 1.25; font-variant-numeric: lining-nums; }
.rm-card .s { font-size: .95rem; color: var(--lt-text); margin: 0; line-height: 1.45; }
.rm-h { margin-top: 1.8rem; }
/* the timeline: gold diamonds on a gold hairline (the homepage's bullet) */
.rm-timeline { list-style: none; margin: .4rem 0 0; padding: 0 0 0 1.1rem; border-left: 1px solid rgba(200, 164, 78, .4); display: grid; gap: .85rem; }
.rm-timeline li { position: relative; }
.rm-timeline li::before { content: ""; position: absolute; left: calc(-1.1rem - 6px); top: .42rem; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 1px; background: var(--lt-card); box-shadow: 0 0 0 1.5px var(--lt-gold); }
.rm-timeline li.do::before { background: var(--lt-gold); box-shadow: 0 0 0 1.5px var(--lt-gold), 0 0 10px rgba(200, 164, 78, .45); }
.rm-timeline .when { display: block; font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; }
.rm-timeline .tag { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lt-gold-bright); margin: .1rem 0 .15rem; }
.rm-timeline li.event .tag { color: #e6eefb; }
.rm-timeline p { margin: 0; color: #fff; line-height: 1.55; }
.rm-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.rm-detail { min-width: 0; border: 1px solid var(--lt-tile-line); border-radius: 12px; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); transition: border-color .25s; }
.rm-detail[open] { border-color: rgba(200, 164, 78, .5); }
.rm-detail > summary { cursor: pointer; list-style: none; padding: .85rem 3rem .85rem 1rem; position: relative; min-height: var(--lt-tap); }
.rm-detail > summary::-webkit-details-marker { display: none; }
.rm-detail > summary::after { content: ""; position: absolute; right: .9rem; top: .8rem; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px rgba(200, 164, 78, .3);
  background: linear-gradient(#e3c87a, #e3c87a) center / 10px 1.5px no-repeat, linear-gradient(#e3c87a, #e3c87a) center / 1.5px 10px no-repeat, var(--lt-tile); transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s; }
.rm-detail[open] > summary::after { background: linear-gradient(#14213b, #14213b) center / 10px 1.5px no-repeat, var(--lt-gold); transform: rotate(180deg); }
.rm-detail > summary:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; border-radius: 12px; }
.rm-detail summary .t { display: block; font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; color: #fff; }
.rm-detail summary .s { display: block; font-size: .95rem; color: var(--lt-text); }
.rm-detail-body { padding: 0 1rem 1rem; border-top: 1px solid var(--lt-line); }
.rm-detail-body .result-headline { font-size: 1.05rem; margin-top: .9rem; }
.rm-detail-body .result-figure { font-size: 1.8rem; }
/* ---- the tools (owner 2026-10-31: "simplify the calculators ... one inclusive road map ...
   each calculator individual with simpler names for navigation ... steps and whom to contact,
   official numbers and websites only, plus forms to ask for and fill out") ----
   A row of plain names in the homepage's glass tiles, the chosen one gold; every answer in the
   same order: key facts, numbered steps with how to do each, who to contact, the forms. */
.tool-nav { margin: 0 0 1.5rem; }
.tool-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.tool-nav li { display: flex; }
.tool-tab { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-height: 58px; padding: .55rem .85rem; border: 1px solid var(--lt-tile-line); border-radius: 12px;
  background: var(--lt-tile); box-shadow: var(--lt-tile-shadow); -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass);
  color: #fff; text-decoration: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.tool-tab .t { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; letter-spacing: 0; line-height: 1.25; color: #fff; }
.tool-tab .s { font-size: .84rem; color: var(--lt-muted); line-height: 1.3; }
.tool-tab:hover { border-color: rgba(200, 164, 78, .55); background: var(--lt-tile-hover); }
.tool-tab.on { border-color: var(--lt-gold); background: var(--lt-tile-on); box-shadow: var(--lt-tile-on-shadow); }
.tool-tab.on .t { color: var(--lt-gold-bright); }
.tool-tab.on .s { color: #fff; }
.tool-tab:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; }
.tool-out .t::after { content: "\00a0\2197"; color: var(--lt-gold-bright); }   /* a separate page */
@media (max-width: 720px) { .tool-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-result .rm-h-first { margin-top: 1rem; }
.ex-screen h2:focus, .ex-screen .result-headline:focus { outline: none; }   /* focus is moved here for screen readers; the heading is not a control */
/* steps: one tile each, the gold number in front, the date in gold caps, then what to do and how */
.rm-steps { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .7rem; counter-reset: rmstep; }
.rm-steps > li { position: relative; counter-increment: rmstep; padding: .85rem 1rem .9rem 3.5rem; border: 1px solid var(--lt-tile-line); border-radius: 12px;
  background: var(--lt-tile); box-shadow: var(--lt-tile-shadow); -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); }
.rm-steps > li::before { content: counter(rmstep); position: absolute; left: .95rem; top: .85rem; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lt-gold); color: #101427; font-family: var(--sans); font-weight: 800; font-size: 1rem; box-shadow: 0 0 0 1px rgba(200, 164, 78, .35), 0 2px 10px rgba(200, 164, 78, .3); }
.rm-steps .when { display: block; font-family: var(--sans); font-size: .86rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #e8cf85; margin: .1rem 0 .2rem; font-variant-numeric: tabular-nums; }
.rm-steps .what { margin: 0; color: #fff; line-height: 1.55; font-weight: var(--w-text, 500); }
.rm-steps .how { margin: 0; color: var(--lt-text); line-height: 1.55; }
.rm-steps .how strong { color: #e8cf85; }
.rm-steps a, .who-card a, .form-list a, .dir-lead a { color: var(--lt-gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.who-card a.tel { text-decoration: none; font-weight: 800; font-size: 1.06rem; white-space: nowrap; }
.rm-steps a.tel, .tel-plain { white-space: nowrap; }
.rm-none, .rm-note { color: var(--lt-text); margin: .35rem 0 0; }
/* who to contact: glass cards, the phone number large and gold */
.who-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: .7rem; margin: .65rem 0 0; }
.who-card { border: 1px solid var(--lt-tile-line); border-radius: 12px; padding: .9rem 1rem; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); min-width: 0; }
.who-card .k { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; letter-spacing: 0; color: #fff; margin: 0 0 .25rem; line-height: 1.3; text-transform: none; }
.who-card .what { font-size: .94rem; color: var(--lt-text); margin: 0 0 .5rem; line-height: 1.45; }
.who-card .line { margin: .2rem 0; color: #fff; line-height: 1.45; }
.who-card .tty, .who-card .nowrap { white-space: nowrap; }
.who-card .tty, .who-card .hrs { font-size: .9rem; color: var(--lt-muted); }
.who-card .web { margin: .5rem 0 0; font-size: .95rem; line-height: 1.5; }
/* forms: a gold "Fill out" or an outlined "Ask for" in front of each */
.form-list { list-style: none; margin: .65rem 0 0; padding: 0; display: grid; gap: .6rem; }
.form-list li { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 1rem; border: 1px solid var(--lt-tile-line); border-radius: 12px;
  background: var(--lt-tile); box-shadow: var(--lt-tile-shadow); -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); }
.form-list .badge { flex: none; min-width: 5.6rem; text-align: center; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .32rem .55rem; border-radius: 999px; margin-top: .12rem; }
.form-list .badge.fill { background: var(--lt-gold); color: #101427; }
.form-list .badge.ask { color: #e8cf85; box-shadow: inset 0 0 0 1.5px var(--lt-gold); }
.form-list .name { margin: 0; color: #fff; line-height: 1.45; }
.form-list .note { margin: .25rem 0 0; color: var(--lt-text); font-size: .94rem; line-height: 1.5; }
@media (max-width: 480px) {
  .form-list li { flex-direction: column; gap: .45rem; }
  /* phones: a smaller number and less room beside it, so the words get the width */
  .rm-steps > li { padding: .8rem .85rem .85rem 2.95rem; }
  .rm-steps > li::before { left: .7rem; top: .8rem; width: 28px; height: 28px; font-size: .92rem; }
}
/* the folded numbers */
.rm-deep { margin-top: 1.4rem; }
.rm-deep > .rm-detail-body > .why { margin-top: 1rem; }
.rm-deep > .rm-detail-body > .rm-details { margin-top: 1rem; }
/* the directory under the tools: the same cards and list, always there (and without JavaScript) */
.tool-directory h2 + .dir-lead { margin-top: -.3rem; }
.tool-directory .who-cards + h2 { margin-top: 2rem; }
.dir-lead { color: var(--lt-text); margin: 0 0 .5rem; max-width: 72ch; }
@media (max-width: 560px) {
  .rm-detail-body { padding: 0 .7rem .9rem; }
  /* tables fit a phone: numbers may wrap between words instead of running off the edge */
  .rm-detail-body .breakdown th, .rm-detail-body .breakdown td { padding: .55rem .65rem; }
  .rm-detail-body .breakdown caption { padding: .6rem .65rem; }
  .rm-detail-body .breakdown td.num, .rm-detail-body .breakdown th.num { white-space: normal; }
  .why-src { white-space: normal; } /* a long source name may wrap rather than push past the screen edge */
  .rm-detail > summary { padding-left: .8rem; }
  .rm-nav .btn { flex: 1 1 auto; }
}
@media print {
  .rm-nav, .tool-nav, .ex-screen[data-ex-screen="ask"] { display: none !important; }
  .rm-detail > summary::after { content: none; }
  .rm-steps > li::before { background: none; color: #000 !important; box-shadow: inset 0 0 0 1.5px #000; }
  .form-list .badge { background: none !important; box-shadow: inset 0 0 0 1px #000; }
}
.calc-hub-one { grid-template-columns: 1fr !important; }
.calc-tile.featured { border-color: var(--lt-gold); background: linear-gradient(135deg, rgba(200, 164, 78, .14), rgba(200, 164, 78, .03)); }
.calc-tile.featured h3 { font-size: 1.2rem; }
.rm-step { padding: 0 !important; margin: 0 !important; min-height: 0 !important; background: none !important; }
.rm-nav [hidden], .rm-panel [hidden] { display: none !important; }
.rm-step::before, .rm-step::after { content: none !important; display: none !important; } .rm-step { overflow: visible !important; }
.rm-panel { scroll-margin-top: 96px; }
@media (min-width: 560px) { .rm-cards { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------- navigator page
   A navigator's own page (2026-10-29, test run: Matthew Seeger), reached from
   the "tap to see bio" line on their homepage card. The same surface as every
   other boxed field; photo left, the card's quote and bio right. */
.nav-profile { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.4rem 2.2rem; align-items: start; }
.nav-profile-photo { border-radius: 16px; overflow: hidden; border: 1px solid rgba(200, 164, 78, .5); box-shadow: 0 18px 44px rgba(5, 9, 20, .45); background: var(--lt-card-2); }
.nav-profile-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.nav-profile-kicker { font-family: var(--serif); font-style: italic; font-size: 1.1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--lt-gold-bright); margin: .2rem 0 .7rem; }
.nav-profile-quote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.35rem; line-height: 1.4; color: var(--lt-gold-bright); margin: 0 0 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--lt-line); }
.nav-profile .bio { font-size: 1.02rem; line-height: 1.7; margin: 0 0 1.1rem; }
.nav-profile-facts { display: grid; gap: .6rem; margin: 0 0 1.4rem; }
.nav-profile-facts div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .6rem; font-size: 1rem; line-height: 1.5; }
.nav-profile-facts dt { color: var(--lt-gold-bright); font-weight: 700; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; padding-top: .25rem; }
.nav-profile-facts dd { margin: 0; }
.nav-profile-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
.nav-profile-note { color: var(--lt-muted); font-size: 1rem; line-height: 1.55; margin: -.3rem 0 1rem; }
@media (max-width: 760px) {
  .nav-profile { grid-template-columns: 1fr; }
  .nav-profile-photo { max-width: 320px; }
  .nav-profile-facts div { grid-template-columns: 1fr; gap: .15rem; }
}
/* ---- the tiles (owner 2026-10-31: "each has its own tile, the road map is the master calculator
   and bring the snap shot to this page as well ... organize it for simplicity") ----
   My roadmap across the top as the master tile, then one tile per tool, each with a short line
   saying what it answers. The chosen tile turns gold, as before. */
.tool-tiles { margin: 0 0 1.4rem; }
.tool-tiles ul { gap: .65rem; }
.tool-tiles .tool-tab { justify-content: flex-start; min-height: 84px; padding: .8rem .95rem .85rem; gap: .22rem; border-radius: 14px; }
.tool-tiles .tool-tab .t { font-size: 1.06rem; }
.tool-tiles .tool-tab .s { font-size: .88rem; }
.tool-tiles li.tile-master { grid-column: 1 / -1; }
.tool-tiles .tile-master .tool-tab { min-height: 0; padding: 1rem 1.15rem 1.05rem; border-color: rgba(200, 164, 78, .6);
  background: linear-gradient(135deg, rgba(200, 164, 78, .17), rgba(200, 164, 78, .03) 60%), var(--lt-tile); }
.tool-tiles .tile-master .tool-tab.on { border-color: var(--lt-gold); background: var(--lt-tile-on); box-shadow: var(--lt-tile-on-shadow); }
.tool-tiles .tile-master .tag { font-family: var(--sans); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lt-gold-bright); }
.tool-tiles .tile-master .t { font-size: 1.32rem; }
.tool-tiles .tile-master .s { font-size: .96rem; color: var(--lt-text); max-width: 64ch; }
.tool-tiles .tile-master .tool-tab.on .s { color: #fff; }
@media (max-width: 720px) { .tool-tiles .tool-tab { min-height: 76px; padding: .7rem .8rem .75rem; } .tool-tiles .tile-master .t { font-size: 1.2rem; } }
/* ten tiles under the master tile (owner 2026-11-01: "even more separate tiles"): two rows of five on a computer, two columns on a phone or tablet */
.tool-tiles ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .tool-tiles ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* your state: one list, under the birthday */
.state-pick select { width: 100%; max-width: 22rem; }
/* the office finder */
.tool-panel h2:focus, .ssa-out:focus { outline: none; }
.ssa-form > label { display: block; font-family: var(--sans); font-weight: 700; color: #fff; margin: 1rem 0 .4rem; }
.ssa-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.ssa-row input { flex: 0 1 11rem; min-width: 8.5rem; min-height: 48px; padding: .6rem .85rem; border-radius: 10px; border: 1px solid var(--lt-tile-line); background: rgba(255, 255, 255, .07);
  color: #fff; font: 700 1.2rem/1.2 var(--sans); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.ssa-row input:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; border-color: var(--lt-gold); }
.ssa-form .field-error:empty { display: none; }
.ssa-out .rm-h { margin-top: 1.4rem; }
.ssa-out { scroll-margin-top: 96px; }
.ssa-list { list-style: none; margin: .65rem 0 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.ssa-list .dist { font-size: .9rem; color: #e8cf85; white-space: nowrap; }
.ssa-src { font-size: .88rem; margin-top: 1.1rem; }
/* the Coverage Snapshot on this page: its own card, no second frame around it */
.snap-panel { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.snap-panel > h2, .snap-panel > .rm-lead { max-width: 820px; margin-left: auto; margin-right: auto; }
.snap-panel > .rm-lead { margin-bottom: 1rem; }
/* the directory: each state's free Medicare counseling and Medicaid office */
.state-list { list-style: none; margin: .65rem 0 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.state-list li { min-width: 0; padding: .8rem 1rem; border: 1px solid var(--lt-tile-line); border-radius: 12px; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); }
.state-list .st { margin: 0 0 .3rem; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: #fff; }
.state-list[hidden], .state-list li[hidden] { display: none; }
.state-list p { margin: .3rem 0 0; color: #fff; font-size: .95rem; line-height: 1.5; }
.state-list .lbl { display: block; font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #e8cf85; }
.state-list a { color: var(--lt-gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.state-list a.tel { text-decoration: none; font-weight: 800; white-space: nowrap; }
.state-list .tty { font-size: .9rem; color: var(--lt-muted); white-space: nowrap; }
.tool-directory .state-list + h2 { margin-top: 2rem; }
@media print { .ssa-form, .tool-tiles { display: none !important; } }

/* ---- dumbed down, more tiles (owner 2026-11-01: "make even more separate tiles and dumb it down
   even more; get rid of the hard of seeing font and match to the rest of the website; more
   directional suggested steps plus asking for proper documentation; brief descriptions for
   scenarios; keyboard entry instead of slide scales") ----
   Every question is a tile of its own, numbered in gold, the question in the site's serif and a
   plain line under it; every choice is a tile with a short line on what it means; amounts are
   typed. Every answer is tiles too: each step (its title in the serif, when, what, how to do it in
   order, the documents with a box to tick for each), each date, each contact, each form, each note. */
.ex .q-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; counter-reset: q; }
.ex .q-tiles > fieldset.q { counter-increment: q; min-width: 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--lt-tile-line); border-radius: 14px;
  background: var(--lt-tile); box-shadow: var(--lt-tile-shadow); -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); }
.ex .q-tiles > fieldset.q > legend { float: left; width: 100%; display: flex; gap: .7rem; align-items: flex-start; padding: 0; margin: 0 0 .55rem;
  font-family: var(--serif); font-size: 1.26rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: #fff; }
.ex .q-tiles > fieldset.q > legend::before { content: counter(q); flex: none; width: 30px; height: 30px; margin-top: .02rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--lt-gold); color: #101427; font: 800 .95rem/1 var(--sans); box-shadow: 0 0 0 1px rgba(200, 164, 78, .35), 0 2px 10px rgba(200, 164, 78, .3); }
.ex .q-tiles > fieldset.q > legend + * { clear: both; }
.q-hint { margin: 0 0 .75rem; color: var(--lt-muted); font-size: 1rem; line-height: 1.5; }
.ex .q-tiles .rm-tiles { margin: 0; }
.ex .q-tiles .rm-tiles.compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .55rem; }
.rm-tiles.compact .rm-tile { padding: .7rem .85rem .72rem 2.75rem; }
.rm-tiles.compact .rm-tile input { top: .9rem; }
.rm-tiles.compact .rm-tile .s { font-size: .92rem; }
/* typed amounts: a dollar sign, a big box, "a month" after it */
.money { display: flex; align-items: center; gap: .55rem; max-width: 24rem; }
.money .cur { flex: none; font: 700 1.3rem/1 var(--sans); color: var(--lt-gold-bright); }
.calc-form .money input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.money .per { flex: none; color: var(--lt-muted); white-space: nowrap; }
.money input::placeholder { font-weight: 400; color: rgba(236, 232, 225, .6); }
/* the answer's steps: a title in the serif, then how to do it and the documents */
.rm-steps .st { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.3; color: #fff; margin: .05rem 0 .3rem; }
.rm-steps .lbl, .paper-body .lbl { margin: .85rem 0 .35rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #e8cf85; }
.rm-steps .docs { margin-top: .85rem; border-top: 1px solid rgba(200, 164, 78, .24); }
.how-list { margin: 0; padding: 0 0 0 1.35rem; display: grid; gap: .35rem; }
.how-list li { padding-left: .2rem; line-height: 1.55; color: #fff; }
.how-list li::marker { color: var(--lt-gold-bright); font-weight: 800; }
.how-list a, .check-list a, .paper-body a, .note-tiles a, .date-tiles a { color: var(--lt-gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.how-list a.tel, .paper-body a.tel { white-space: nowrap; }
/* documents: an empty box in front of each, to tick off */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.check-list li { position: relative; padding-left: 1.75rem; line-height: 1.5; color: #fff; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .18em; width: 1.05rem; height: 1.05rem; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--lt-gold); background: rgba(255, 255, 255, .04); }
.alt-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.alt-list li { position: relative; padding-left: 1.1rem; line-height: 1.5; color: #fff; }
.alt-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--lt-gold); transform: rotate(45deg); border-radius: 1px; }
details.alt { margin-top: .7rem; }
details.alt > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--lt-gold-bright); font-weight: 700; line-height: 1.4; text-decoration: underline; text-underline-offset: 2px; }
details.alt > summary:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; border-radius: 6px; }
.doc-note { margin: .7rem 0 0; font-size: .96rem; line-height: 1.5; color: var(--lt-muted); }
.rm-steps .same { margin: 0; color: var(--lt-text); }
.state-ask { margin-top: .6rem; }
/* dates and notes: a tile each */
.date-tiles, .note-tiles { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.date-tiles li, .note-tiles li { min-width: 0; padding: .85rem 1rem; border: 1px solid var(--lt-tile-line); border-radius: 12px; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); }
.date-tiles .when { display: block; font: 700 .86rem/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #e8cf85; margin-bottom: .25rem; font-variant-numeric: tabular-nums; }
.date-tiles p, .note-tiles p { margin: 0; color: #fff; line-height: 1.55; }
.note-tiles .nt { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.3; margin-bottom: .3rem; }
.note-tiles .src { margin-top: .45rem; font-size: .9rem; }
/* Documents to have ready: one fold per application */
.paper-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: .4rem; }
details.paper { min-width: 0; border: 1px solid var(--lt-tile-line); border-radius: 14px; background: var(--lt-tile); box-shadow: var(--lt-tile-shadow);
  -webkit-backdrop-filter: var(--lt-tile-glass); backdrop-filter: var(--lt-tile-glass); transition: border-color .25s; }
details.paper[open] { border-color: rgba(200, 164, 78, .55); }
details.paper > summary { cursor: pointer; list-style: none; position: relative; padding: .9rem 3.3rem .95rem 1.05rem; min-height: 52px; }
details.paper > summary::-webkit-details-marker { display: none; }
details.paper > summary::after { content: ""; position: absolute; right: .95rem; top: 50%; margin-top: -14px; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px rgba(200, 164, 78, .3);
  background: linear-gradient(#e3c87a, #e3c87a) center / 10px 1.5px no-repeat, linear-gradient(#e3c87a, #e3c87a) center / 1.5px 10px no-repeat, var(--lt-tile); transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s; }
details.paper[open] > summary::after { background: linear-gradient(#14213b, #14213b) center / 10px 1.5px no-repeat, var(--lt-gold); transform: rotate(180deg); }
details.paper > summary:hover { background: rgba(200, 164, 78, .06); border-radius: 14px; }
details.paper > summary:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; border-radius: 14px; }
details.paper .t { display: block; font-family: var(--serif); font-size: 1.18rem; font-weight: 600; line-height: 1.3; color: #fff; }
details.paper .s { display: block; margin-top: .2rem; font-size: .96rem; line-height: 1.45; color: var(--lt-text); }
.paper-body { padding: .1rem 1.05rem 1.05rem; border-top: 1px solid var(--lt-line); }
.paper-src { margin: .9rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--lt-muted); overflow-wrap: anywhere; }
.papers-panel .form-list { margin-top: .5rem; }
/* Who to call: the state list waits for a state */
.contacts-panel .state-pick { margin: .6rem 0 .2rem; }
.contacts-panel .state-pick label { display: block; font-weight: 700; color: #fff; margin-bottom: .4rem; }
.contacts-panel .state-pick select { width: 100%; max-width: 22rem; min-height: 50px; background-color: rgba(255, 255, 255, .055); border: 1px solid rgba(200, 164, 78, .3); border-radius: 12px; padding: .8rem 2.6rem .8rem 1.05rem; color: var(--lt-text); font: inherit;
  appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e3c87a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.contacts-panel .state-pick select option { background: var(--lt-card); color: var(--lt-text); }
.contacts-panel .state-pick select:focus-visible { outline: none; border-color: var(--lt-gold); box-shadow: 0 0 0 3px rgba(200, 164, 78, .28); }
/* printed answers keep the page's footer statement (the footer itself is not printed) */
.print-only { display: none; }
@media print {
  .print-only { display: block !important; }
  .check-list li::before { box-shadow: inset 0 0 0 1.5px #000 !important; background: none !important; }
  details.paper > summary::after { content: none; }
}
@media (max-width: 480px) {
  .ex .q-tiles > fieldset.q { padding: .9rem .9rem 1rem; }
  .ex .q-tiles > fieldset.q > legend { font-size: 1.18rem; gap: .6rem; }
  .ex .q-tiles > fieldset.q > legend::before { width: 28px; height: 28px; font-size: .9rem; }
  .money .cur { font-size: 1.2rem; }
}

/* What the answer was built from, and answers that need a second look
   (owner 2026-11-01: "the input scenarios must match the output"). */
.ex-recap { margin: .7rem 0 0; padding: .7rem .95rem; border: 1px solid var(--lt-tile-line); border-radius: 12px; background: var(--lt-tile); color: #fff; font-size: .97rem; line-height: 1.55; font-weight: var(--w-text, 550); }
.ex-recap .lbl { display: block; margin-bottom: .2rem; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #e8cf85; }
.ex-flags { margin: .8rem 0 0; display: grid; gap: .55rem; }
.ex-flag { margin: 0; padding: .8rem 1rem; border: 1px solid var(--lt-note-line); border-left: 4px solid var(--lt-gold); border-radius: 0 12px 12px 0; background: var(--lt-note); color: #fff; line-height: 1.55; }
.ex-flag strong { color: #f3dc98; font-weight: 800; }
.ex-flag.stop { border-left-color: #f0b37e; }
.ex-flag a { color: var(--lt-gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.ex-flag a.tel { text-decoration: none; font-weight: 800; white-space: nowrap; }
/* Who to call: each state folds until it is chosen (opened by the script; opened by hand without it) */
.state-list details.st-fold > summary { cursor: pointer; list-style: none; }
.state-list details.st-fold > summary::-webkit-details-marker { display: none; }
.state-list details.st-fold > summary::after { content: " ▾"; color: var(--lt-gold-bright); font-size: .9em; }
.state-list details.st-fold[open] > summary::after { content: ""; }

/* ---- the tiles in groups (owner 2026-11-02: "break down each button with simple terms and short
   answers of the function of each calculator, or info questionnaire"): what kind of tool it is in
   gold capitals, its name, and a line on what goes in and what comes out ---- */
.tool-tiles .tile-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.tool-tiles .tile-row-master { grid-template-columns: 1fr; }
.tool-tiles .tile-group { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; letter-spacing: 0; color: #fff; margin: 1.3rem 0 .6rem; line-height: 1.3; }
.tool-tiles .tool-tab .tag { display: block; font-family: var(--sans); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #e8cf85; line-height: 1.2; }
.tool-tiles .tool-tab .s { font-size: .9rem; color: var(--lt-text); }
.tool-tiles .tool-tab.on .tag { color: #fff; }
@media (max-width: 720px) { .tool-tiles .tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tool-tiles .tile-row-master { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .tool-tiles .tile-row { grid-template-columns: 1fr; } }

/* ---- a focused tool's answer (owner 2026-11-02: "make each one separate rather than looking like
   the roadmap ... it need to be simple"): the short answer first, then a calendar or chart ---- */
.fx-short { border: 1px solid var(--lt-note-line); border-left: 3px solid var(--lt-gold); background: var(--lt-note); border-radius: 0 12px 12px 0; padding: .95rem 1.1rem 1rem; margin: 1rem 0 .4rem; }
.fx-short .lbl { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #e8cf85; margin: 0 0 .35rem; }
.fx-short .main { font-family: var(--serif); font-size: clamp(1.18rem, 2.4vw, 1.36rem); font-weight: 600; color: #fff; line-height: 1.38; margin: 0; }
.fx-short .more { margin: .5rem 0 0; color: #fff; line-height: 1.55; }
.fx-steps .fx-how { margin-top: .55rem; }
.fx-steps .fx-how > summary { cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; min-height: var(--lt-tap); color: var(--lt-gold-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.fx-steps .fx-how > summary::-webkit-details-marker { display: none; }
.fx-steps .fx-how > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--lt-gold); font-weight: 800; text-decoration: none; }
.fx-steps .fx-how[open] > summary::before { content: "\2212"; background: var(--lt-gold); color: #101427; }
.fx-steps .fx-how > summary:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; border-radius: 6px; }
.fx-steps .how .lbl, .fx-steps .docs .lbl, .fx-forms .lbl { font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #e8cf85; margin: .5rem 0 .2rem; }
.fx-steps .how-list { margin: .2rem 0 .3rem 1.1rem; color: #fff; line-height: 1.55; }
.fx-steps .how-list li + li { margin-top: .3rem; }
.fx-forms { margin: .45rem 0 0; color: #fff; line-height: 1.5; }
.fx-forms .lbl { display: block; }
.fx-forms a { color: var(--lt-gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.fx-next { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: 1.5rem 0 .4rem; }
.fx-next .lbl { width: 100%; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #e8cf85; }
.fx-next a { display: inline-flex; align-items: center; min-height: var(--lt-tap); padding: .45rem .9rem; border: 1px solid var(--lt-tile-line); border-radius: 999px; background: var(--lt-tile); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; }
.fx-next a::after { content: "\00a0\2192"; color: var(--lt-gold-bright); }
.fx-next a:hover { border-color: var(--lt-gold); background: var(--lt-tile-hover); }
.fx-next a:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; }
.ex-result { position: relative; }

/* ---- calendars (owner 2026-11-02: "add calendars for visual guidance"). Months as tiles that wrap
   on a phone, the window shaded; one month as a grid with the day that matters circled. Colours
   checked with the dataviz validator on the navy panel (#13265a): gold #ad8c32, blue #4a83e8,
   coral #d4614c; each comes with its name in words. ---- */
.cal { margin: .7rem 0 .5rem; }
.cal-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .45rem; }
.cal-months > li { position: relative; display: flex; flex-direction: column; gap: .12rem; min-height: 84px; padding: .55rem .55rem .6rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.cal-months > li.in { border-color: rgba(227, 200, 122, .55); }
.cal-months > li.k-win { background: linear-gradient(160deg, rgba(214, 178, 88, .5), rgba(173, 140, 50, .34)); border-color: rgba(227, 200, 122, .75); }
.cal-months > li.k-drug, .cal-months > li.k-ma { background: linear-gradient(160deg, rgba(96, 150, 240, .48), rgba(74, 131, 232, .3)); border-color: rgba(150, 190, 255, .7); }
.cal-months > li.k-oe { background: linear-gradient(160deg, rgba(214, 178, 88, .5), rgba(173, 140, 50, .34)); border-color: rgba(227, 200, 122, .75); }
.cal-months > li.k-end { background: rgba(212, 97, 76, .3); }
.cal-months > li.now { box-shadow: 0 0 0 2px #fff; }
.cal-months .bars { display: flex; gap: 2px; position: absolute; left: 0; right: 0; top: 0; height: 5px; }
.cal-months .bars i { flex: 1; }
.cal-months .m { font-family: var(--sans); font-weight: 800; font-size: 1.02rem; color: #fff; line-height: 1.15; }
.cal-months .y { font-size: .8rem; color: var(--lt-muted); line-height: 1.1; }
.cal-months .tag { font-size: .82rem; line-height: 1.25; color: #fff; font-weight: 600; margin-top: .15rem; }
.cal-months .now-tag { color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; }
.cal-legend i.k-win, .cal-months .bars i.k-win, .cal-legend i.k-oe, .cal-months .bars i.k-oe { background: #ad8c32; }
.cal-legend i.k-drug, .cal-months .bars i.k-drug, .cal-legend i.k-ma, .cal-months .bars i.k-ma { background: #4a83e8; }
.cal-legend { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .92rem; color: #fff; }
.cal-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.cal-legend i { display: inline-block; width: 1.4rem; height: .7rem; border-radius: 3px; }
.cal figcaption { color: #fff; font-size: .94rem; margin-top: .5rem; line-height: 1.5; }
.cal-one { max-width: 380px; }
.cal-month { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal-month caption { text-align: left; font-family: var(--sans); font-weight: 800; font-size: 1.02rem; color: #fff; padding: 0 0 .3rem 3px; }
.cal-month th { font-size: .78rem; font-weight: 800; color: var(--lt-muted); text-align: center; padding: .1rem 0; }
.cal-month td { text-align: center; height: 38px; border-radius: 8px; color: #fff; font-variant-numeric: tabular-nums; font-size: .95rem; background: rgba(255, 255, 255, .05); }
.cal-month td.blank { background: none; }
.cal-month td.in { background: rgba(173, 140, 50, .3); }
.cal-month td.mark .d { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 800; }
.cal-month td.k-end .d, .cal-key .dot.k-end { background: #e3c87a; color: #101427; box-shadow: 0 0 0 2px #fff; }
.cal-month td.k-now .d, .cal-key .dot.k-now { background: #fff; color: #101427; }
.cal-month td.k-start .d, .cal-key .dot.k-start { background: #4a83e8; color: #fff; }
.cal-key { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .4rem; }
.cal-key li { display: flex; gap: .6rem; align-items: flex-start; color: #fff; line-height: 1.45; }
.cal-key .dot { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .85rem; font-weight: 800; }

/* ---- charts (owner 2026-11-02: "graphs in perfect places where needed"): one hue with one mark
   picked out, thin columns, a hairline grid, a tooltip on hover and focus, the numbers in a table ---- */
.viz .col { fill: rgba(173, 140, 50, .55); }
.viz .col.hl { fill: #e3c87a; }
.viz .hit { fill: transparent; cursor: default; outline: none; }
.viz .hit:focus-visible { stroke: #fff; stroke-width: 2; stroke-dasharray: 3 3; }
.viz-tip { position: absolute; z-index: 5; max-width: min(280px, 90%); padding: .45rem .65rem; border-radius: 8px; background: #0f1b3d; border: 1px solid rgba(227, 200, 122, .6); color: #fff; font-size: .92rem; line-height: 1.4; pointer-events: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.viz-tip[hidden] { display: none; }
.viz-table { margin: .3rem 0 .4rem; }
.viz-table > summary { cursor: pointer; min-height: var(--lt-tap); display: inline-flex; align-items: center; color: var(--lt-gold-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.viz-table > summary:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; border-radius: 6px; }
.viz-table .data-table th[scope="row"] { color: #fff; font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.viz-table tr.hl th, .viz-table tr.hl td { background: rgba(200, 164, 78, .14); }
.viz-stat .stat, .viz-stack .stat { margin: .3rem 0 .5rem; }
.stat .n { font-family: var(--serif); font-size: clamp(2rem, 6vw, 2.6rem); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums lining-nums; }
.stat .u { font-size: 1.02rem; color: #fff; }
.stack { display: flex; gap: 2px; height: 28px; margin: .2rem 0 .6rem; }
.stack .seg { min-width: 6px; outline: none; }
.stack .seg:first-child { border-radius: 4px 0 0 4px; }
.stack .seg:last-child { border-radius: 0 4px 4px 0; }
.stack .seg:focus-visible { box-shadow: 0 0 0 2px #fff; }
.stack .k-std, .stack-key i.k-std { background: #4a83e8; }
.stack .k-irm, .stack-key i.k-irm { background: #ad8c32; }
.stack .k-pen, .stack-key i.k-pen { background: #d4614c; }
.stack-key { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.stack-key li { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; color: #fff; }
.stack-key i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.stack-key .am { font-variant-numeric: tabular-nums; font-weight: 700; }
.viz-meters .mh { margin: .4rem 0 .4rem; color: #fff; }
.meters { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .7rem; }
.meter .mt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .8rem; margin: 0 0 .3rem; color: #fff; line-height: 1.4; }
.meter .nm { font-weight: 600; }
.meter .st { font-weight: 800; font-size: .9rem; }
.meter.under .st::before { content: "\2713\00a0"; }
.meter.over .st::before { content: "\2715\00a0"; }
.meter .track { position: relative; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, .09); outline: none; }
.meter .track:focus-visible { box-shadow: 0 0 0 2px #fff; }
.meter .you { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #4a83e8; }
.meter .lim { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; border-radius: 2px; background: #e3c87a; box-shadow: 0 0 0 1px #13265a; }
.meter .ml { margin: .25rem 0 0; font-size: .88rem; color: var(--lt-muted); }
/* Plan choices: the comparison, as a table on a wide screen and as cards on a phone */
.cmp { width: 100%; border-collapse: collapse; margin: .6rem 0 .3rem; border: 1px solid var(--lt-tile-line); border-radius: 12px; overflow: hidden; background: var(--lt-tile); }
.cmp th, .cmp td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-top: 1px solid rgba(200, 164, 78, .16); color: #fff; line-height: 1.5; }
.cmp thead th { font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #e8cf85; border-top: 0; background: rgba(200, 164, 78, .08); }
.cmp tbody th { font-weight: 700; width: 24%; }
.change-tiles li { line-height: 1.55; }
@media (max-width: 640px) {
  .cmp { border-radius: 12px; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tr { display: block; padding: .75rem .9rem; border-top: 1px solid rgba(200, 164, 78, .16); }
  .cmp tr:first-child { border-top: 0; }
  .cmp tbody th, .cmp td { display: block; width: auto; padding: 0; border: 0; }
  .cmp td { margin-top: .45rem; }
  .cmp td::before { content: attr(data-label); display: block; font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #e8cf85; margin-bottom: .1rem; }
}
.rm-tiles.checks .rm-tile input { accent-color: var(--lt-gold); }
@media print {
  .viz-tip, .fx-next { display: none !important; }
  .cal-months > li, .cal-month td, .meter .track, .stack .seg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .fx-short { background: #fff !important; border-color: #999 !important; }
}

/* the words each answer uses, folded under it (owner 2026-11-02: "doesn't know the first thing about insurance") */
.fx-words { margin: .2rem 0 .6rem; }
.fx-words > summary { cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; min-height: var(--lt-tap); color: var(--lt-gold-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.fx-words > summary::-webkit-details-marker { display: none; }
.fx-words > summary::before { content: "?"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--lt-gold); font-weight: 800; text-decoration: none; }
.fx-words > summary:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; border-radius: 6px; }
.fx-words dl { margin: .3rem 0 0; display: grid; gap: .5rem; padding: .8rem 1rem; border: 1px solid var(--lt-tile-line); border-radius: 12px; background: var(--lt-tile); }
.fx-words dt { font-weight: 800; color: #fff; }
.fx-words dd { margin: .1rem 0 0; color: #fff; line-height: 1.5; }
/* a message that has been answered fades but keeps its space until "Show my answer" is pressed again (2026-11-02) */
.field-error.is-stale, .rm-step-note.is-stale { visibility: hidden; }
/* the Social Security chart's labels at 14px; the calendar's "This month" readable */
.viz-ss text, .viz-ss text.mut, .viz-ss text.gold { font-size: 14px; }
.cal-months .now-tag { font-size: .875rem; }
/* contact links stacked a little apart for older fingers */
.who-card .web a { display: inline-block; padding: .35rem 0; }

/* ---- tools on their category pages (owner 2026-11-02, asked and answered: "should i place them individually on the
   reading pages by category"; the Tools page an index; a "Tools on this page" box with an "I want to…" list; each
   Medicare tool in the section it belongs to, opened in place, one at a time; the office finder and the documents
   folded and brief; each questionnaire beside its section) ---- */
.tools-here-sec { padding-top: clamp(1.6rem, 4vw, 2.6rem); padding-bottom: 0; }
.tools-here { max-width: 860px; margin: 0 auto; padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 1.8rem); border: 1px solid var(--lt-line); border-radius: 18px; background: var(--lt-surface); box-shadow: var(--lt-surface-shadow); color: var(--lt-text); }
.tools-here h2 { font-family: var(--serif); font-size: clamp(1.35rem, 3.2vw, 1.7rem); font-weight: 600; margin: 0 0 .2rem; color: #fff; }
.tools-here .th-lead { margin: 0 0 .7rem; color: var(--lt-gold-bright); font-weight: 700; font-size: 1.05rem; }
.th-list, .ti-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.th-list a, .ti-list a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem .9rem; min-height: var(--lt-tap); padding: .6rem .9rem; border: 1px solid var(--lt-tile-line); border-radius: 12px;
  background: var(--lt-tile); color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
.th-list a:hover, .ti-list a:hover { border-color: rgba(200, 164, 78, .6); background: var(--lt-tile-hover); }
.th-list a:focus-visible, .ti-list a:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; }
.th-list .w { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.th-list .n { font-size: .9rem; color: var(--lt-gold-bright); font-weight: 700; white-space: nowrap; }
.th-list .n::after, .ti-list .t::after { content: "\00a0\2193"; }
.ti-list .t::after { content: "\00a0\2192"; }
.ti-list a[data-jump] .t::after { content: "\00a0\2193"; }
.ti-list .t { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.ti-list .s { flex-basis: 100%; font-size: .92rem; color: var(--lt-muted); line-height: 1.4; }
.th-private { margin: .8rem 0 0; font-size: .92rem; color: var(--lt-muted); }
.tools-index { margin: 0 0 2rem; }
.tools-index h2 { font-family: var(--serif); font-size: clamp(1.35rem, 3.2vw, 1.7rem); font-weight: 600; margin: 0 0 .3rem; }
.tools-index .ti-group { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; margin: 1.3rem 0 .55rem; color: #fff; }
.tool-group { max-width: 960px; margin: 1.6rem auto 0; }
.tool-group.tool-tiles .tile-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-group.tool-tiles .tile-row.one { grid-template-columns: minmax(0, 1fr); }
.tool-group .tool-tab { position: relative; text-align: left; font: inherit; cursor: pointer; padding-right: 5.2rem; }
.tool-group .tool-tab .go { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--lt-gold); color: var(--lt-gold-bright); font-size: .9rem; font-weight: 700; background: rgba(11, 24, 56, .35); }
.tool-group .tool-tab.on .go { background: var(--lt-gold); color: #0b1838; }
.tile-row > li.tool-slot { grid-column: 1 / -1; display: block; min-width: 0; }
.tool-slot > .panel.in-place { margin-top: .3rem; margin-bottom: .4rem; }
.tool-slot > .panel, .tool-home > .panel { scroll-margin-top: 90px; }
.js .tool-home > .panel { display: none; }
.tool-fold { margin: .8rem 0 0; border: 1px solid var(--lt-tile-line); border-radius: 14px; background: var(--lt-tile); color: #fff; scroll-margin-top: 90px; }
.tool-fold > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; padding: .85rem 3rem .85rem 1rem; position: relative; min-height: var(--lt-tap); }
.tool-fold > summary::-webkit-details-marker { display: none; }
.tool-fold > summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--lt-gold-bright); font-size: 1.5rem; font-weight: 700; }
.tool-fold[open] > summary::after { content: "\2212"; }
.tool-fold > summary .t { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; }
.tool-fold > summary .s { font-size: .88rem; color: var(--lt-muted); }
.tool-fold > summary:focus-visible { outline: 3px solid var(--lt-gold); outline-offset: 2px; border-radius: 14px; }
.tool-fold > .panel { margin: 0 .6rem .6rem; }
/* brief: the summary is the title; the office finder without the nationwide card; the documents three at a time */
.tool-fold > .panel > h2, .tool-fold > .panel > h2 + .rm-lead { display: none; }
.tool-fold[data-fold="offices"] .who-cards, .tool-fold[data-fold="offices"] .ssa-panel > .rm-h { display: none; }
.tool-fold.brief .paper-tiles > .paper:nth-child(n+4), .tool-fold.brief .papers-panel > .rm-h, .tool-fold.brief .papers-panel > .dir-lead, .tool-fold.brief .papers-panel > .form-list, .tool-fold.brief .papers-panel > .ssa-src { display: none; }
.tool-fold .show-all { margin: .8rem 0 0; }
.tool-src { max-width: 960px; margin: 1.4rem auto 0; }
.tool-src > .panel { margin-top: 0; }
.tools-home .notice, .tool-group + .notice { max-width: 960px; margin: 1.2rem auto 0; }
.cover-home .panel { margin-top: 0; }
@media (max-width: 720px) {
  .tool-group.tool-tiles .tile-row, .tool-group.tool-tiles .tile-row.two { grid-template-columns: minmax(0, 1fr); }
  .th-list .n { white-space: normal; }
}