/* ===== Colour schemes (accent presets) — work in both Space and Daylight ===== */
[data-accent="nebula"] { --g1: #7c5cff; --g2: #22d3ee; --b-light: #4a43e0; --b-dark: #8c9bff; }
[data-accent="aurora"] { --g1: #10b981; --g2: #22d3ee; --b-light: #0f766e; --b-dark: #5eead4; }
[data-accent="solar"]  { --g1: #f59e0b; --g2: #f43f5e; --b-light: #b45309; --b-dark: #fbbf24; }
[data-accent="mars"]   { --g1: #f43f5e; --g2: #fb923c; --b-light: #be123c; --b-dark: #fb7185; }
[data-accent="cosmos"] { --g1: #ec4899; --g2: #8b5cf6; --b-light: #a21caf; --b-dark: #f0abfc; }
[data-accent="mono"]   { --g1: #64748b; --g2: #e2e8f0; --b-light: #334155; --b-dark: #cbd5e1; }

.swatches { display: inline-flex; gap: .35rem; }
.sw { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; background: linear-gradient(135deg, var(--a), var(--b)); transition: transform .15s; }
.sw:hover { transform: scale(1.2); }
.sw.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.modebtn { min-width: 6.2rem; }
.scheme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .7rem; margin-top: .6rem; }
.scheme { text-align: left; border: 1.5px solid var(--line); background: var(--card-solid); border-radius: 14px; padding: .7rem; cursor: pointer; }
.scheme:hover { border-color: var(--brand); }
.scheme.on { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent); }
.scheme i { display: block; height: 1.6rem; border-radius: 8px; margin-bottom: .45rem; background: linear-gradient(90deg, var(--a), var(--b)); }
.scheme b { font-size: .95rem; }

/* ===== Ambient animation (space theme). Turned off by Settings → Animations or prefers-reduced-motion ===== */
.nebula, .shoot { display: none; }
html[data-fx~="nebula"] .nebula { display: block; position: fixed; inset: -20%; z-index: 0; pointer-events: none; filter: blur(30px);
  background: radial-gradient(40% 35% at 25% 30%, color-mix(in srgb, var(--g1) var(--neb, 20%), transparent), transparent 70%), radial-gradient(35% 30% at 75% 70%, color-mix(in srgb, var(--g2) var(--neb2, 15%), transparent), transparent 70%);
  animation: nebula 38s ease-in-out infinite alternate; }
@keyframes nebula { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
html[data-fx~="stars"] body::before { animation: twinkle 7s ease-in-out infinite; }
html[data-fx~="stars"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: calc(var(--star-op, .85) * .6); filter: var(--star-filter, none); background-size: 760px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380'%3E%3Cg fill='%23bcd4ff'%3E%3Ccircle cx='40' cy='90' r='1.3'/%3E%3Ccircle cx='150' cy='30' r='.9'/%3E%3Ccircle cx='230' cy='170' r='1.2'/%3E%3Ccircle cx='320' cy='60' r='.9'/%3E%3Ccircle cx='90' cy='250' r='1'/%3E%3Ccircle cx='200' cy='330' r='1.3'/%3E%3Ccircle cx='340' cy='290' r='.9'/%3E%3Ccircle cx='20' cy='350' r='.8'/%3E%3C/g%3E%3C/svg%3E");
  animation: twinkle 11s ease-in-out -4s infinite, drift 300s linear infinite; }
@keyframes twinkle { 0%, 100% { opacity: .3; } 50% { opacity: .95; } }
@keyframes drift { to { background-position: 760px 380px; } }
html[data-fx~="shoot"] .shoot { display: block; position: fixed; top: 14%; left: -12%; width: 150px; height: 2px; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff); transform: rotate(18deg); animation: shoot 19s linear infinite; }
html[data-fx~="shoot"] .shoot.s2 { top: 52%; width: 110px; animation-duration: 27s; animation-delay: -11s; }
@keyframes shoot { 0% { transform: translate(0, 0) rotate(18deg); opacity: 0; } 1.5% { opacity: .9; } 6% { transform: translate(115vw, 38vh) rotate(18deg); opacity: 0; } 100% { opacity: 0; } }

main.page-enter > * { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
main.page-enter > *:nth-child(2) { animation-delay: .05s; } main.page-enter > *:nth-child(3) { animation-delay: .1s; }
main.page-enter > *:nth-child(4) { animation-delay: .15s; } main.page-enter > *:nth-child(5) { animation-delay: .2s; }
main.page-enter > *:nth-child(n+6) { animation-delay: .25s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.card, .btn, .tpl, .chip, .scheme { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.tpl:hover, .scheme:hover { transform: translateY(-2px); }
.btn.primary { background-size: 200% 100%; }
.btn.primary:hover { box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--g1) 30%, transparent); transform: translateY(-1px); }   /* neutral shadow: a tinted glow turned into a pale line with light accents */

.bar > span { background: linear-gradient(90deg, var(--g1), var(--g2), var(--g1)); background-size: 200% 100%; animation: shimmer 4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.traj .track { animation: flow 3s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.traj .flame { transform-box: fill-box; transform-origin: right center; animation: flame .16s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scaleX(.75); } to { transform: scaleX(1.2); } }
.traj .bob { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-1.5px); } 50% { transform: translateY(1.5px); } }
.traj .ping, .mapdot .ping { transform-box: fill-box; transform-origin: center; animation: ping 2.6s ease-out infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
.live-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--pos); margin-right: .4rem; box-shadow: 0 0 0 0 var(--pos); animation: live 1.8s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 60%, transparent); } 100% { box-shadow: 0 0 0 .7rem transparent; } }
.feed .ev.fresh { animation: rise .5s ease both; }

body.no-anim *, body.no-anim *::before, body.no-anim *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== Die with zero ===== */
.dwz-grid { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-bottom: 1.2rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.1rem; }
.form-grid .span2 { grid-column: span 2; }
.verdict { border-left: 5px solid var(--vc); background-image: linear-gradient(120deg, color-mix(in srgb, var(--vc) 12%, transparent), transparent 60%); }
.verdict h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.verdict p { font-size: 1.08rem; line-height: 1.6; margin: .5rem 0; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.kpis > div { background: var(--chip); border-radius: 12px; padding: .7rem .9rem; }
.kpis small { display: block; color: var(--muted); font-weight: 600; font-size: .95rem; }
.kpis b { font-size: 1.3rem; letter-spacing: -.01em; }
.goal-row { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--line); }
.goal-row:first-child { border-top: 0; }
.goal-row .dot { width: .9rem; height: .9rem; border-radius: 50%; }
.goal-row small { color: var(--muted); display: block; }
.x-btn { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.2rem; border-radius: 8px; padding: .2rem .5rem; }
.x-btn:hover { background: var(--chip); color: var(--ink); }
.weeks-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.weeks-wrap canvas { max-width: 100%; border-radius: 12px; }
.weeks-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.stat-big { font-size: 2.4rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.legend-line { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .92rem; color: var(--muted); }
.legend-line i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.principles .card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.principles .card p { color: var(--muted); font-size: .98rem; line-height: 1.55; }
.principles .card small { display: block; margin-top: .6rem; color: var(--muted); font-style: italic; font-size: .92rem; }
.demo-chip { display: inline-block; background: var(--warn-soft); color: var(--warn-ink); font-weight: 700; font-size: .92rem; padding: .2rem .7rem; border-radius: 999px; }

/* ===== Community ===== */
.soc-hero { text-align: center; padding: 2.2rem 1.5rem; }
.soc-hero h2 { font-size: 1.8rem; margin-bottom: .5rem; }
.soc-hero p { color: var(--muted); font-size: 1.1rem; max-width: 40rem; margin: 0 auto 1.2rem; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0; text-align: left; }
.trio > div { background: var(--chip); border-radius: 14px; padding: 1rem 1.1rem; }
.trio b { display: block; margin-bottom: .2rem; }
.trio span { color: var(--muted); font-size: .95rem; }
.payload { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; background: #070b1e; color: #b7c4f5; padding: 1rem 1.2rem; border-radius: 12px; text-align: left; white-space: pre; overflow: auto; border: 1px solid var(--line); }
.blurred { filter: blur(6px); pointer-events: none; user-select: none; opacity: .7; }
.share-opts { display: flex; flex-direction: column; gap: .7rem; text-align: left; margin: 1rem auto; max-width: 34rem; }
.share-opts label { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.share-opts input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--brand); }
.share-opts small { color: var(--muted); display: block; }
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }
.stat-row:first-child { border-top: 0; }
.stat-row .meter { grid-column: 1 / -1; height: .5rem; background: var(--chip); border-radius: 99px; overflow: hidden; }
.stat-row .meter > span { display: block; height: 100%; background: var(--thrust); border-radius: 99px; }
.you-tag { background: var(--pos-soft); color: var(--pos-ink); font-weight: 700; font-size: .85rem; padding: .1rem .55rem; border-radius: 999px; margin-left: .4rem; }
.feed .ev { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--line); }
.feed .ev:first-child { border-top: 0; }
.feed .ev .ic { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--chip); font-size: 1.2rem; }
.feed .ev small { color: var(--muted); display: block; }
.kudos-btn { border: 1.5px solid var(--line); background: transparent; border-radius: 999px; padding: .4rem .9rem; cursor: pointer; font-weight: 700; color: var(--muted); white-space: nowrap; }
.kudos-btn:hover { border-color: var(--brand); color: var(--ink); }
.kudos-btn.on { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); }
.map-box svg { width: 100%; height: auto; display: block; }
.map-box .land { fill: color-mix(in srgb, var(--brand) 10%, transparent); stroke: color-mix(in srgb, var(--brand) 35%, transparent); stroke-width: .8; }
.hist { display: flex; align-items: flex-end; gap: .8rem; height: 11rem; margin-top: .5rem; }
.hist > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: .3rem; text-align: center; font-size: .85rem; }
.hist .col { width: 100%; border-radius: 8px 8px 0 0; background: var(--chip); min-height: 4px; }
.hist .col.me { background: var(--thrust); }
.locked { opacity: .6; border-style: dashed; }
.country { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: center; padding: .35rem 0; font-size: .98rem; }

@media (max-width: 1100px) { .dwz-grid, .principles, .trio, .weeks-wrap { grid-template-columns: minmax(0, 1fr); } .weeks-side { position: static; } .form-grid { grid-template-columns: minmax(0, 1fr); } .form-grid .span2 { grid-column: auto; } }

.tpl.confirm { cursor: default; border-color: var(--neg); background: var(--neg-soft); }
.confirm-btns { display: flex; gap: .5rem; margin-top: .6rem; }
.btn.danger { background: var(--neg); color: var(--on-neg, #fff); border-color: transparent; }
.tpl .x.edit { right: 2rem; font-size: .95rem; }
.tpl b { padding-right: 3.2rem; }

h1, h2, h3 { font-family: var(--font-head, inherit); }

/* ===== Help tooltips ===== */
.tip { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 50%; border: 1.5px solid var(--muted); color: var(--muted); font: 700 .72em/1 var(--font, system-ui); margin-left: .4em; cursor: help; vertical-align: middle; position: relative; text-transform: none; letter-spacing: 0; }
.tip:hover, .tip:focus { color: var(--brand); border-color: var(--brand); outline: none; }
.gl { position: relative; border-bottom: 1.5px dotted var(--muted); cursor: help; }
.tip::after, .gl::after { display: none; content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + .55rem); transform: translateX(-50%); width: max-content; max-width: min(19rem, 60vw); padding: .65rem .85rem; border-radius: 10px; background: #0b1030; color: #e8eeff; font: 500 .9rem/1.4 var(--font, system-ui); text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; border: 1px solid rgba(140, 155, 255, .4); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 300; }
.tip:hover::after, .tip:focus::after, .gl:hover::after, .gl:focus::after { display: block; opacity: 1; animation: tipin .15s ease-out; }
@keyframes tipin { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%); } }
.f-label .tip, .t-label .tip, h2 .tip { font-size: .7em; }

/* ===== Theme picker ===== */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .8rem; margin-top: .7rem; }
.theme-card { text-align: left; border: 2px solid var(--line); background: var(--card-solid); border-radius: 14px; padding: .6rem; cursor: pointer; color: var(--ink); }
.theme-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.theme-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
.theme-card .prev { display: block; height: 3.4rem; border-radius: 9px; margin-bottom: .5rem; background: linear-gradient(135deg, var(--p0) 0 45%, transparent 45%), linear-gradient(90deg, var(--p1), var(--p2)); position: relative; overflow: hidden; border: 1px solid rgba(128, 128, 128, .3); }
.theme-card .prev::after { content: ""; position: absolute; left: .5rem; bottom: .5rem; width: 38%; height: .5rem; border-radius: 9px; background: rgba(255, 255, 255, .85); }
.theme-card b { display: block; font-size: .98rem; }
.theme-card small { color: var(--muted); font-size: .92rem; line-height: 1.3; display: block; }
.acc-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.acc-row .chip i { width: 1rem; height: 1rem; background: linear-gradient(135deg, var(--a), var(--b)); }

.intro { display: flex; gap: 1.2rem; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; border-left: 4px solid var(--brand); }
.intro h2 { margin-bottom: .4rem; }
.intro ol { margin: .4rem 0 0; padding-left: 1.2rem; line-height: 1.7; }
.intro a { color: var(--brand); font-weight: 600; }

.fbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .7rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.fchips { display: flex; flex-wrap: wrap; gap: .4rem; }
.fbtns { display: flex; gap: .5rem; }
.fbar .save-rep { flex-basis: 100%; }

/* ===== Die with zero flow ===== */
.card.setup { max-width: 62rem; margin: 0 auto; }
.steps { display: flex; gap: .5rem; flex-wrap: wrap; }
.steps span { padding: .35rem .9rem; border-radius: 999px; background: var(--chip); color: var(--muted); font-weight: 600; font-size: .92rem; }
.steps span.on { background: var(--brand-soft); color: var(--ink); outline: 1.5px solid var(--brand); }
details.more { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
details.more summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.how > div { background: var(--chip); border-radius: 14px; padding: 1rem 1.2rem; }
.how b { display: block; font-size: 1.1rem; margin: .5rem 0 .2rem; }
.how p { color: var(--muted); }
.num-badge { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(90deg, var(--btn-g1, var(--g1)), var(--btn-g2, var(--g2))); color: var(--on-primary, #fff); font-weight: 800; }
.kpis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wish { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; padding: 1rem 0; border-top: 1px solid var(--line); }
.wish:first-child { border-top: 0; }
.wish .dot { display: none; }
.wish .wt-f { flex: 1 1 100%; min-width: 0; }
.wish .field input, .wish .field select { width: 100%; min-width: 0; }
.wish-btns { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
@media (max-width: 1100px) { .kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .how { grid-template-columns: minmax(0, 1fr); } }

/* ===== Community additions ===== */
.feed .ev.pinned { background: color-mix(in srgb, var(--brand) 12%, transparent); border-radius: 12px; padding: .85rem; margin-bottom: .4rem; border-top: 0; }
.feed .ev.fresh { animation: rise .5s ease both, flash 1.6s ease-out; }
@keyframes flash { 0% { background: color-mix(in srgb, var(--pos) 25%, transparent); } 100% { background: transparent; } }
.pulse-tile { background: var(--chip); border-radius: 14px; padding: .9rem 1.1rem; }
.avg-list { display: flex; flex-direction: column; }
.avg-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 5rem 7rem; gap: .9rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }
.avg-row:first-child { border-top: 0; }
.avg-bar { height: .7rem; background: var(--chip); border-radius: 99px; overflow: hidden; }
.avg-bar span { display: block; height: 100%; border-radius: 99px; }
.avg-bar .up { background: linear-gradient(90deg, color-mix(in srgb, var(--pos) 40%, transparent), var(--pos)); }
.avg-bar .dn { background: linear-gradient(90deg, color-mix(in srgb, var(--neg) 40%, transparent), var(--neg)); }
.you-col { color: var(--muted); font-size: .92rem; text-align: right; }
.mixrow { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .9rem; align-items: center; padding: .45rem 0; }
.mixbar { display: flex; height: 1.1rem; border-radius: 99px; overflow: hidden; background: var(--chip); }
.mixbar span { display: block; height: 100%; }
@media (max-width: 860px) { .avg-row { grid-template-columns: minmax(0, 1fr) 4.5rem; } .avg-bar, .you-col { grid-column: 1 / -1; } .mixrow { grid-template-columns: minmax(0, 1fr); } }

/* ===== Display mode (big-screen showcase) ===== */
body.display-mode .sidebar { display: none; }
body.display-mode .app { grid-template-columns: minmax(0, 1fr); }
body.display-mode main { max-width: none; padding: 1.4rem 3vw 2rem; }
.disp { position: relative; min-height: calc(100vh - 3rem); display: flex; flex-direction: column; gap: 1.2rem; }
.disp-x { position: fixed; top: .8rem; right: .8rem; z-index: 60; opacity: .35; border: 1px solid var(--line); background: var(--card-solid); color: var(--ink); border-radius: 999px; padding: .4rem .9rem; cursor: pointer; font-weight: 600; transition: opacity .2s; }
.disp-x:hover { opacity: 1; }
.disp-top { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; }
.disp-brand { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--thrust); -webkit-background-clip: text; background-clip: text; color: transparent; }
.disp-hero { position: relative; text-align: center; padding: 1.2rem 0 .4rem; isolation: isolate; }
.disp-hero .hero-label { font-size: 1.1rem; }
.disp-num { font-size: clamp(3.5rem, 11vw, 9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin: .2rem 0 .6rem; text-shadow: 0 0 40px color-mix(in srgb, var(--g2) 55%, transparent); animation: glowpulse 3.6s ease-in-out infinite; }
@keyframes glowpulse { 0%, 100% { text-shadow: 0 0 28px color-mix(in srgb, var(--g2) 35%, transparent); transform: scale(1); } 50% { text-shadow: 0 0 70px color-mix(in srgb, var(--g1) 80%, transparent), 0 0 24px color-mix(in srgb, var(--g2) 60%, transparent); transform: scale(1.012); } }
.orbits { position: absolute; left: 50%; top: 50%; width: min(70vw, 56rem); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.orbits i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--g2) 40%, transparent); animation: spin 40s linear infinite; }
.orbits i:nth-child(2) { inset: 12%; animation-duration: 60s; animation-direction: reverse; border-color: color-mix(in srgb, var(--g1) 40%, transparent); }
.orbits i:nth-child(3) { inset: 26%; animation-duration: 28s; }
.orbits i::after { content: ""; position: absolute; top: -.4rem; left: 50%; width: .8rem; height: .8rem; border-radius: 50%; background: var(--g2); box-shadow: 0 0 18px var(--g2); }
@keyframes spin { to { transform: rotate(360deg); } }
.disp-callout { text-align: center; min-height: 3.6rem; display: grid; place-items: center; }
.callout { font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 700; padding: .5rem 1.6rem; border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, transparent); border: 1px solid var(--line); opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.callout.in { opacity: 1; transform: none; }
.disp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.4rem; align-items: stretch; flex: 1; }
.traj.big { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; display: grid; place-items: center; margin: 0; }
.disp-grid .chart-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; }
.disp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.disp-tiles > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.3rem; text-align: center; animation: tilefloat 6s ease-in-out infinite; }
.disp-tiles > div:nth-child(2) { animation-delay: -1.5s; } .disp-tiles > div:nth-child(3) { animation-delay: -3s; } .disp-tiles > div:nth-child(4) { animation-delay: -4.5s; }
@keyframes tilefloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.disp-tiles small { display: block; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.disp-tiles b { font-size: clamp(1.5rem, 3vw, 2.6rem); letter-spacing: -.02em; }
@media (max-width: 1100px) { .disp-grid { grid-template-columns: minmax(0, 1fr); } .disp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Display mode: extra life ===== */
#dispFx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.disp > * { position: relative; z-index: 1; }
.disp-x { z-index: 70; }
body.display-mode .nebula { display: block; animation-duration: 14s; }
body.display-mode .shoot { display: block; background: linear-gradient(90deg, transparent, #fff); animation-duration: 7s; }
body.display-mode .shoot.s2 { animation-duration: 11s; }
body.display-mode .ticker { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--card-solid); border-top: 1px solid var(--line); overflow: hidden; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem; padding: .5rem 0; }
body.display-mode .tk-track span { color: var(--brand); } body.display-mode .tk-track b { color: var(--ink); }
body.display-mode main { padding-bottom: 4.5rem; }
.rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: -1; pointer-events: none; }
.rings b { position: absolute; left: -14rem; top: -14rem; width: 28rem; height: 28rem; border-radius: 50%; border: 2px solid var(--g2); opacity: 0; animation: ringout 5s ease-out infinite; }
.rings b:nth-child(2) { animation-delay: 2.5s; border-color: var(--g1); }
@keyframes ringout { 0% { transform: scale(.25); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
.disp-tiles > div { background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%) no-repeat, var(--card); background-size: 250% 100%, auto; animation: tilefloat 6s ease-in-out infinite, sheen 7s linear infinite; }
@keyframes sheen { from { background-position: 150% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
.disp .tw { animation: twk 3.2s ease-in-out infinite; }
@keyframes twk { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.disp-hero .pill { animation: pillglow 4s ease-in-out infinite; }
@keyframes pillglow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 22px color-mix(in srgb, var(--g2) 45%, transparent); } }
.traj.big svg { width: 100%; height: auto; }
.disp .traj .bob, .disp .traj .flame { animation: none; }
.disp #dr .flame { transform-box: fill-box; transform-origin: right center; animation: flame .12s ease-in-out infinite alternate; }

.dob { display: flex; gap: .6rem; flex-wrap: wrap; }
.dob select { min-width: 6.5rem; } .dob select[data-dob="m"] { min-width: 9.5rem; } .dob input { width: 7rem; }

.linkbtn { border: 0; background: none; color: var(--brand); font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; font-size: inherit; }
label.field small { font-weight: 500; line-height: 1.4; }

.feed .ev.mine { background: color-mix(in srgb, var(--pos) 10%, transparent); border-radius: 12px; padding: .85rem; margin: .3rem 0; border-top: 0; }

/* grid children may always shrink below their content (stops long tables / numbers pushing the page sideways) */
.grid > *, .dwz-grid > *, .set-grid > *, .principles > *, .trio > *, .how > *, .disp-grid > *, .weeks-wrap > *, .g-hero > *, .g-main > *, .g-2 > *, .summary > *, .g-tiles > * { min-width: 0; }
.card { min-width: 0; }

/* small screens: the sidebar becomes a compact top bar, so its control strip must wrap instead of forcing the page wide */
@media (max-width: 860px) {
  .sidebar { gap: .5rem; }
  .side-foot { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 0; padding: 0 .4rem; gap: .5rem; order: 4; }
  .side-foot .row { flex: 0 1 auto; gap: .35rem; }
  .side-foot .row > span:first-child { display: none; }
  .brand { flex: 1 1 auto; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .head-actions { width: 100%; }
  .fbar { flex-direction: column; align-items: flex-start; }
  .card { padding: 1.1rem 1.1rem; }
  .hero-num { font-size: 2.4rem; }
  .table-wrap { max-width: 100%; }
}

/* long names / search text must wrap or truncate instead of stretching the page */
/* only user-written text may break mid-word; layout containers must keep their natural width */
.nm, .tc, .tpl b, .tpl .d, .goal-row b, .list .it .nm, .ev > div, .ins-p, .note-box, .fchips .tag-soft, .wish .wt, .kpis b, .summary .s b { overflow-wrap: anywhere; }
.fchips .tag-soft { max-width: 100%; white-space: normal; }
.chip { max-width: 100%; }
.panel h2, .card h2, .tpl b, .goal-row b, .list .it .nm { overflow-wrap: anywhere; }
td .nm, td .sm { white-space: normal; max-width: 22rem; overflow-wrap: break-word; }   /* table cells wrap very long names instead of widening the table */
.hist-fix { display: none; }

h1, .page-head p, .page-head > div { overflow-wrap: anywhere; min-width: 0; }
.set-row input, .set-row select, input[type=file] { max-width: 100%; }
.set-row > div { min-width: 0; }
input[type=file] { font-size: .9rem; }

/* large text: stack side-by-side sections so nothing has to squeeze */
.legend .li { grid-template-columns: .8rem minmax(0, 1fr) auto auto; }

.bigtext .g-hero, .bigtext .g-main, .bigtext .g-2, .bigtext .dwz-grid, .bigtext .set-grid { grid-template-columns: minmax(0, 1fr); }
.bigtext .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.bigtext .g-tiles, .bigtext .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bigtext .hero-stats { grid-template-columns: minmax(0, 1fr); }
.bigtext .kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* very large text on a phone: minimum widths must never exceed the screen */
.f-row .grow { min-width: min(14rem, 100%); }
.templates { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }   /* four across on a normal desktop, even once the page has a scrollbar */
.theme-grid { grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr)); }
.verdict .tag-soft, .insight .tag-soft { white-space: normal; }
.disp-hero { overflow: hidden; }
.disp-tiles > div { min-width: 0; overflow-wrap: anywhere; }
.disp-tiles b { display: block; overflow-wrap: anywhere; }
@media (max-width: 860px) { .disp-num { font-size: clamp(2.4rem, 13vw, 5rem); } .callout { font-size: 1.15rem; padding: .5rem 1rem; } .orbits { width: 90vw; } .rings b { left: -9rem; top: -9rem; width: 18rem; height: 18rem; } }

.tpl.on .d, .tpl.on .x { color: var(--ink); }
.tpl.on .d { opacity: .85; }

/* donut + legend: side by side only when the card is wide enough, otherwise stacked */
.donut-wrap { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); justify-items: center; }
.donut-wrap .legend { width: 100%; justify-self: stretch; }
.intro .btn { white-space: nowrap; flex: none; }

td .nm.tc, td .nm { overflow-wrap: break-word; }

/* phone: dashboard tiles hold long dollar figures in a 2-column grid */
@media (max-width: 560px) {
  .tile .t-num { font-size: clamp(1.15rem, 5.6vw, 1.5rem); overflow-wrap: anywhere; }
  .bigtext .tile .t-num { font-size: 1.15rem; }
}

/* checkboxes/radios keep their size inside flex labels with long text */
input[type="checkbox"], input[type="radio"] { flex: none; }

/* forecast settings: top-aligned fields, readable helper text, history button */
.f-row.top { align-items: flex-start; }
.field small.avgline { font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--ink); margin-top: .1rem; }
.field small.avgline b { font-weight: 750; }
.field small.avgline .linkbtn { font-weight: 750; }
.hist-row { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }

/* escape chart: switchable forecast lines */
.line-pick { margin: .2rem 0 1rem; }
.line-pick .chips { margin-top: .4rem; }
.line-chip { display: inline-flex; align-items: center; gap: .45rem; }
.line-chip i { width: .8rem; height: .8rem; border-radius: 50%; flex: none; }
.line-chip:not(.on):not(.fixed) { opacity: .62; }
.line-chip:not(.on):not(.fixed) i { opacity: .55; }
.line-chip.on::after { content: "✓"; font-weight: 800; margin-left: .15rem; }
.line-chip.fixed { cursor: default; border-style: dashed; }
.line-chip:disabled { cursor: not-allowed; opacity: .4; }
.line-group { margin-top: .7rem; }
.line-group > b { display: block; font-size: .92rem; color: var(--muted); font-weight: 650; }
.line-group .chips { margin-top: .35rem; }
.hist-row { display: block; }
.hist-row .chips { margin-top: .4rem; }

/* "the app made an assumption for you" callouts */
.field small.avgline.assume { display: block; margin-top: .35rem; padding: .55rem .75rem; border-radius: 10px; border-left: 4px solid var(--warn-ink, #d97706); background: color-mix(in srgb, var(--warn-ink, #d97706) 14%, transparent); color: var(--warn-ink, #d97706); font-weight: 600; }
.field small.avgline.assume b { color: inherit; font-weight: 800; }
.assume-text { color: var(--warn-ink, #d97706); }

/* reports: nothing shown until a report is picked */
.rep-empty { text-align: center; padding: 2.6rem 1.4rem; margin-top: 1.4rem; border-style: dashed; }
.rep-empty .re-icon { font-size: 2.6rem; margin-bottom: .4rem; }
.rep-empty .sub { max-width: 34rem; margin: .4rem auto 1.2rem; }

/* entries: CSV import panel */
.imp-panel summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; }
.imp-panel summary::-webkit-details-marker { display: none; }
.imp-panel[open] summary { margin-bottom: .6rem; }
.imp-steps { margin: .4rem 0 1rem 1.2rem; display: grid; gap: .3rem; }
.imp-cols td { vertical-align: top; }
.imp-cols td:first-child { white-space: nowrap; }
.imp-cols { width: 100%; min-width: 0; table-layout: fixed; }
.imp-cols th, .imp-cols td { white-space: normal; overflow-wrap: break-word; }
.imp-cols th:nth-child(1), .imp-cols td:nth-child(1) { width: 7.5rem; }
.imp-cols th:nth-child(3), .imp-cols td:nth-child(3) { width: 8.5rem; }
@media (max-width: 700px) { .imp-cols th:nth-child(3), .imp-cols td:nth-child(3) { display: none; } .imp-cols th:nth-child(1), .imp-cols td:nth-child(1) { width: 6rem; } }

/* die with zero: recommended-settings bar */
.rec-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; border-radius: 12px; border: 1px dashed var(--line); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.rec-bar > div { flex: 1 1 18rem; min-width: 0; }
.edit-done { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

/* Die With Zero book promotion */
.book-link { color: var(--brand); font-weight: 700; text-decoration: none; white-space: nowrap; border-bottom: 1px dotted currentColor; }
.book-link:hover { border-bottom-style: solid; }
.book-card { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 1.2rem 0; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--card-solid)), var(--card-solid)); }
.book-card .bk-ico { font-size: 2.6rem; line-height: 1; }
.book-card .bk-txt { flex: 1 1 18rem; min-width: 0; }
.book-card h2 { margin: 0 0 .25rem; }
.book-card p { margin: 0; color: var(--muted); }
.book-card .btn { flex: 0 1 auto; max-width: 100%; text-align: center; text-decoration: none; }

/* die with zero: how spending changes with age */
.shape-note { margin-top: .7rem; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 7%, transparent); font-weight: 500; line-height: 1.5; }
.shape-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin: .7rem 0; }
.shape-steps > div { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.shape-steps small { color: var(--muted); font-size: .9rem; }
.shape-steps b { font-size: 1.15rem; }

/* die with zero: ways to fix a plan that runs out */
.fix-box { margin: 1rem 0 1.1rem; }
.fix-title { display: block; margin-bottom: .6rem; }
.fix-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; }
.fix-card { display: flex; gap: .7rem; padding: .85rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.fix-card .fx-ico { font-size: 1.6rem; line-height: 1.2; }
.fix-card > div > b { display: block; margin-bottom: .2rem; }
.fix-card p b { display: inline; }
.fix-card p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.fix-card > div { min-width: 0; }

/* bucket list: add form, field widths, explainer */
.goal-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin: .6rem 0 .2rem; }
.goal-form .gf-title { flex: 1 1 100%; min-width: 0; }
.goal-form .gf-title input { font-size: 1.05rem; }
.goal-form .gf-add { margin-left: auto; }
.f-sm { flex: 0 0 7rem; min-width: 0; }
.f-md { flex: 1 1 9rem; max-width: 14rem; min-width: 0; }
.goal-form .field input, .goal-form .field select { width: 100%; min-width: 0; }
.why-card { margin-bottom: 1.2rem; }
.why-card > p { max-width: 62rem; }
.why-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.why-steps > div { padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.why-steps > div > b { display: block; margin: .35rem 0 .15rem; }
.why-steps p b { display: inline; }
.why-steps p { margin: 0; font-size: .95rem; color: var(--muted); line-height: 1.5; }

.why-total { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin-top: 1rem; }
.why-total > div { padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.why-total small { display: block; color: var(--muted); font-size: .95rem; }
.why-total b { font-size: 1.25rem; }
.why-note { margin: .8rem 0 0; font-size: .95rem; }

/* community: member progress card */
.prog-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .8rem; margin: .9rem 0 1rem; }
.prog-tiles > div { display: flex; flex-direction: column; gap: .1rem; padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); min-width: 0; }
.prog-tiles small { color: var(--muted); font-size: .95rem; }
.prog-tiles b { font-size: 1.7rem; line-height: 1.15; }
.prog-tiles span { font-size: .95rem; }
.prog-ctl { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .8rem; }
.prog-ctl .f-label { margin: 0; }
.chart-cap { font-weight: 650; margin: .3rem 0 .4rem; }
.tbl-h { margin: 1.3rem 0 .1rem; font-size: 1.05rem; }
th.hl, td.hl { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.prog-tbl th, .prog-tbl td { padding-left: .6rem; padding-right: .6rem; white-space: nowrap; }
.prog-tbl th:first-child, .prog-tbl td:first-child { white-space: normal; }
.prog-tbl th { font-size: .85rem; letter-spacing: .02em; }
.prog-tbl th, .prog-tbl td { padding-left: .45rem; padding-right: .45rem; }

/* community: sharing options — keep the descriptions readable */
.share-opts { max-width: 40rem; gap: 1rem; }
.share-opts label > span > b { font-size: 1.1rem; }
.share-opts small { font-size: 1rem; line-height: 1.55; margin-top: .15rem; }

/* secondary text everywhere: a size up (colour is darkened per theme in main.js) */
.card .sub, .sub, .page-head p { font-size: 1.05rem; line-height: 1.5; }
small, .sm { font-size: .92rem; }
.tile .t-label { font-size: 1rem; }
.tile .t-note { font-size: 1rem; line-height: 1.45; }
label.field { font-size: .95rem; }
.f-label { font-size: .95rem; }
.summary small, .kpis small, .hero-stats small, .prog-tiles small, .why-total small { font-size: .95rem; }
.fix-card p, .why-steps p, .shape-steps small { font-size: 1rem; }
.chart-cap, .muted { line-height: 1.5; }

/* bucket / wish list: the three community choices */
.f-lg { flex: 1 1 13rem; min-width: 0; }
.gf-share, .wish-share { flex: 1 1 100%; min-width: 0; padding: .8rem 1rem; border-radius: 12px; border: 1px dashed var(--line); background: color-mix(in srgb, var(--brand) 6%, transparent); }
.gf-sel { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem; }
.gf-sel .field select { width: 100%; min-width: 0; }
.share-prev { margin: .6rem 0 0; font-size: 1rem; color: var(--ink); }
.priv { font-weight: 500; font-size: .9rem; }
.ms-pct { font-size: .95rem; font-weight: 600; margin-left: .2rem; }
.ms .pace { display: block; margin-top: .1rem; font-weight: 600; font-size: .95rem; }
.ms .pace.behind { color: var(--neg-ink); }
.ms .pace.ahead { color: var(--pos-ink); }
.ms .pace.on { color: var(--muted); }
.hd { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .5rem; vertical-align: baseline; }
.hold-h { margin: 1rem 0 .3rem; font-size: 1rem; color: var(--muted); font-weight: 700; }

/* country mix bars: taller, with labels and a hover card */
.mixbar { height: 1.7rem; }
.mixbar > span { display: grid; place-items: center; transition: filter .12s, transform .12s; cursor: default; outline: none; }
.mixbar > span i { font-style: normal; font-size: .9rem; font-weight: 700; color: inherit; background: var(--pill, transparent); padding: 0 .25rem; border-radius: 99px; }
.mixbar > span:hover, .mixbar > span:focus-visible { filter: brightness(1.18) saturate(1.15); transform: scaleY(1.12); }
.mix-tip { position: fixed; z-index: 2000; display: none; pointer-events: none; background: var(--card-solid); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem; box-shadow: 0 8px 28px rgba(0,0,0,.3); font-size: .95rem; max-width: 20rem; }
.mix-tip > b { display: block; margin-bottom: .15rem; }
.mix-tip > span { display: flex; align-items: center; gap: .45rem; }
.mix-tip i { width: .75rem; height: .75rem; border-radius: 50%; flex: none; }

/* community libraries (ideas, reports) */
.lib-ctl, .lib-filters { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; margin: .6rem 0 .2rem; }
.lib-ctl .grow { flex: 1 1 16rem; min-width: 0; }
.lib-filters .field { flex: 1 1 11rem; min-width: 0; }
.lib-filters select, .lib-ctl select { width: 100%; }
.lib-count { margin: .8rem 0 .3rem; color: var(--muted); font-weight: 600; }
.idea-row { grid-template-columns: 1.1rem minmax(0, 1fr) auto; }
.idea-row small { line-height: 1.5; }
@media (max-width: 700px) { .idea-row { grid-template-columns: 1.1rem minmax(0, 1fr); } .idea-row .btn { grid-column: 2; justify-self: start; } }

/* stop-working card */
.stop-banner { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.2rem; border-radius: 14px; border: 1px solid var(--line); border-left: 6px solid var(--brand); background: color-mix(in srgb, var(--brand) 9%, transparent); margin-top: .4rem; }
.stop-banner > b { font-size: 1.3rem; line-height: 1.3; }
.stop-banner > span { font-size: 1.05rem; line-height: 1.5; }
.stop-banner.early { border-left-color: var(--warn-ink, #d97706); background: color-mix(in srgb, var(--warn-ink, #d97706) 10%, transparent); }
.stop-banner.late { border-left-color: var(--pos-ink, #16a34a); background: color-mix(in srgb, var(--pos-ink, #16a34a) 10%, transparent); }
.stop-bars { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.sb { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3rem 4.6rem; gap: .7rem; align-items: center; }
.stop-bars.ctry .sb { grid-template-columns: 9rem minmax(0, 1fr) 2.2rem 4.6rem; }
.sb-l { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-track { height: 1.1rem; border-radius: 99px; background: var(--chip); overflow: hidden; }
.sb-track > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--g1), var(--g2)); opacity: .75; }
.sb.me .sb-track > span { opacity: 1; box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 4px var(--brand); }
.sb.me .sb-l { color: var(--brand); }
.sb b { text-align: right; }
.sb-tags { display: flex; gap: .3rem; min-width: 0; }
.sb-tags em { font-style: normal; font-size: .85rem; font-weight: 700; padding: .1rem .5rem; border-radius: 99px; white-space: nowrap; }
.med-tag { background: var(--chip); color: var(--ink); }
@media (max-width: 700px) { .sb, .stop-bars.ctry .sb { grid-template-columns: 6rem minmax(0, 1fr) 2.6rem; } .sb-tags { grid-column: 1 / -1; } }

/* share page */
.share-layout { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.share-stage { position: sticky; top: 1rem; }
.share-prev-wrap { display: grid; place-items: center; border-radius: 18px; background: color-mix(in srgb, var(--ink) 6%, transparent); padding: .8rem; }
.share-prev-wrap canvas { width: 100%; height: auto; max-height: 70vh; width: auto; max-width: 100%; border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.share-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.share-h { margin: 1.2rem 0 .3rem; font-size: 1.05rem; }
.share-opts2 { display: grid; gap: .5rem; }
textarea { width: 100%; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; resize: vertical; }
.share-gallery { display: grid; gap: 1.2rem; min-width: 0; }
.share-gallery .card { margin: 0; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .9rem; margin-top: .6rem; }
.share-thumb { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; text-align: center; background: none; border: 2px solid transparent; border-radius: 14px; padding: .35rem; cursor: pointer; color: var(--ink); font: inherit; font-size: .92rem; font-weight: 650; }
.share-thumb canvas { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.share-thumb:hover { border-color: var(--line); }
.share-thumb.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.share-thumb.locked canvas { opacity: .55; }
@media (max-width: 1250px) { .share-layout { grid-template-columns: minmax(0, 1fr); } .share-stage { position: static; } }

/* a floor for readable text: sub lines under values, table notes and tags */
.sm, td .sm, span.sm { font-size: .95rem; }
.tag-soft, .tag-warn, .tag-bad { font-size: .92rem; }
.t-label, .t-note { font-size: 1rem; }

/* share page v2: controls on top, one small design picker */
.share-ctl { margin-bottom: 1.2rem; display: grid; gap: 1rem; }
.share-ctl-row { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-end; }
.share-opts2 { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: .3rem; }
.share-layout { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
.share-grid { grid-template-columns: repeat(auto-fill, minmax(4.7rem, 1fr)); gap: .45rem; }
.share-thumb { padding: .2rem; gap: .25rem; border-radius: 10px; }
.share-thumb span { font-size: .85rem; line-height: 1.2; font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.share-thumb canvas { border-radius: 6px; }
.share-prev-wrap.transparent canvas, .share-thumb.transparent canvas { background: repeating-conic-gradient(rgba(128,128,128,.45) 0 25%, rgba(255,255,255,.35) 0 50%) 50% / 22px 22px; box-shadow: none; }
@media (max-width: 1250px) { .share-layout { grid-template-columns: minmax(0, 1fr); } .share-stage { position: static; } .share-prev-wrap { max-width: 26rem; margin: 0 auto; } }

/* report tiles: the whole tile is one real button, with small remove / edit buttons beside it */
.tpl-main { display: block; width: 100%; margin: 0; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tpl-main::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.tpl-main:focus-visible { outline: none; }
.tpl:has(.tpl-main:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.tpl .x { z-index: 2; }
th[data-act] { cursor: pointer; }
th[data-act]:focus-visible, tr[data-act]:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

/* community: "What I share" folds away once you have joined */
.share-card { margin-bottom: 1.2rem; }
.share-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font-size: 1.05rem; }
.share-card > summary::-webkit-details-marker { display: none; }
.share-card > summary .btn { pointer-events: none; }
.share-card[open] > summary { margin-bottom: .8rem; }
.share-card-body .share-opts { margin-left: 0; }

/* keyboard users: a skip link, and a visible ring on everything that can take focus */
.skip { position: fixed; left: .8rem; top: -4rem; z-index: 3000; padding: .7rem 1.1rem; border-radius: 10px; background: var(--brand); color: var(--on-primary, #fff); font-weight: 700; border: 0; cursor: pointer; transition: top .15s; }
.skip:focus { top: .8rem; outline: 3px solid var(--ink); outline-offset: 2px; }
#main:focus { outline: none; }
[tabindex]:not([tabindex="-1"]):focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.switch input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* lists: a dollar amount never splits from its minus sign, and a side-by-side chart card fills its height */
.list .it > span:last-child:not(:first-child), .list .it .num { white-space: nowrap; }   /* amounts stay on one line; a row that is just one block of text must wrap */
.g-main > .card:first-child { display: flex; flex-direction: column; }
.g-main > .card:first-child .chart-box { flex: 1 1 auto; min-height: 22rem; height: auto; }
@media (max-width: 1100px) { .g-main > .card:first-child .chart-box { flex: none; height: 22rem; min-height: 0; } }
.growth-note { margin-top: .7rem; }
.growth-note small.avgline { margin-top: 0; }
.growth-note small.avgline { display: block; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--ink); }
.growth-note small.avgline b { font-weight: 750; }
.growth-note small.avgline.assume { margin-top: .35rem; padding: .55rem .75rem; border-radius: 10px; border-left: 4px solid var(--warn-ink, #d97706); background: color-mix(in srgb, var(--warn-ink, #d97706) 14%, transparent); color: var(--warn-ink, #d97706); font-weight: 600; }
.growth-note small.avgline.assume b { color: inherit; font-weight: 800; }
.growth-note .linkbtn { font-weight: 750; }

/* "Possible futures": fits its card — the scenario name wraps, the numbers stay on one line */
.scn th, .scn td { padding: .7rem .6rem; }
.scn td:first-child { white-space: normal; min-width: 8.5rem; }
.scn .badge { white-space: normal; align-items: flex-start; line-height: 1.3; }
.scn td .sm { display: block; }
.g-wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .g-wide-left { grid-template-columns: minmax(0, 1fr); } }

/* main data tables: the first column keeps room for a readable name; tags sit under it */
table.tbl-main th, table.tbl-main td { padding: .7rem .8rem; }
table.tbl-main td:first-child, table.tbl-main th:first-child { min-width: 13rem; white-space: normal; }
.row-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.row-tags .tag-soft { font-size: .85rem; padding: .1rem .5rem; }

/* inline field errors */
label.field.has-error input, label.field.has-error select, label.field.has-error .money { border-color: var(--neg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--neg) 30%, transparent); }
.field-err { color: var(--neg-ink, var(--neg)); font-weight: 650; font-size: .95rem; display: block; margin-top: .25rem; }
.field-err::before { content: "⚠ "; content: "⚠ " / ""; }   /* the icon is for sighted users — a screen reader just reads the message */
/* side-by-side fields: the message floats just under its own field, so neighbours stay lined up */
label.field.has-error { position: relative; }
.field-err.float { position: absolute; left: 0; top: calc(100% + .3rem); z-index: 8; width: max-content; max-width: min(22rem, 78vw); margin: 0;
  background: var(--card-solid); border: 1px solid var(--neg); border-radius: 8px; padding: .3rem .65rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

/* wide tables: keep the first column (the row's name) in view while the rest scrolls sideways */
@media (min-width: 701px) {
  .table-wrap th:first-child, .table-wrap td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card-solid); }
  .table-wrap thead th:first-child, .table-wrap tfoot td:first-child { z-index: 3; }
  .table-wrap tbody tr:hover td:first-child { background: linear-gradient(var(--brand-soft), var(--brand-soft)), var(--card-solid); }
  .table-wrap tbody tr.typed td:first-child { background: linear-gradient(color-mix(in srgb, var(--rc) 9%, transparent), color-mix(in srgb, var(--rc) 9%, transparent)), var(--card-solid); }
  .table-wrap tbody tr.typed:hover td:first-child { background: linear-gradient(color-mix(in srgb, var(--rc) 18%, transparent), color-mix(in srgb, var(--rc) 18%, transparent)), var(--card-solid); }
}
@media (min-width: 701px) {
  .table-wrap.scrolled-x th:first-child, .table-wrap.scrolled-x td:first-child { box-shadow: 8px 0 8px -8px rgba(0, 0, 0, .5); }
  .table-wrap.scrolled-x tbody tr.typed td:first-child { box-shadow: inset 4px 0 0 var(--rc), 8px 0 8px -8px rgba(0, 0, 0, .5); }
}

/* the designs gallery is one card now (heading, hint, thumbnails) — keep them close together */
.share-gallery.card { gap: 0; align-content: start; }
.share-gallery .share-grid { margin-top: 0; }

/* phones: fit the text-size / theme / privacy buttons on one row so the header takes less of the screen */
@media (max-width: 480px) {
  .side-foot { gap: .4rem; }
  .side-foot .row { gap: .25rem; }
  .side-foot .mini-btn { padding: .45rem .55rem; }
}

/* tables on phones: keep the columns that matter (name, value, change) and tuck the rest away */
.show-sm-i { display: none; }
td .show-sm, .show-sm { display: none; }
@media (max-width: 600px) {
  .show-sm-i { display: inline; }
  .show-sm-i.nobr { white-space: nowrap; }
  .hide-sm { display: none; }
  td .show-sm, .show-sm { display: block; white-space: nowrap; }
  td .show-sm.wrap-ok { white-space: normal; }
  table.tbl-main td:not(.r) { white-space: normal; }   /* names and notes may wrap; figures never do */
  section.card:has(> .table-wrap) { padding: .5rem; }
  table.tbl-main td:first-child, table.tbl-main th:first-child { min-width: 0; }
  table.tbl-main th, table.tbl-main td, th, td { padding: .7rem .6rem; }
  th { font-size: .82rem; letter-spacing: .03em; }
}

/* figures never break in the middle (or just after a minus sign); tiles scale the figure to fit instead */
.num, .num b, b.num { white-space: nowrap; }
.tile, .summary .s, .kpis > div { container-type: inline-size; }
@media (max-width: 560px) {
  .tile .t-num, .bigtext .tile .t-num { font-size: clamp(11px, 15cqw, 1.5rem); }
  .summary .s b { font-size: clamp(11px, 15cqw, 1.6rem); }
  .kpis b.num { font-size: clamp(11px, 15cqw, 1.3rem); }
  .summary .s-pct { display: block; }
}

/* the empty-state welcome: three short steps under the buttons */
.welcome { max-width: 52rem; }
.welcome-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2.2rem 0 0; padding: 0; text-align: left; }
.welcome-steps li { background: var(--chip); border-radius: 14px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.welcome-steps .n { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .95rem; background: linear-gradient(90deg, var(--btn-g1, var(--g1)), var(--btn-g2, var(--g2))); color: var(--on-primary, #fff); }
.welcome-steps b { font-size: 1.05rem; margin-top: .3rem; }
.welcome-steps span:not(.n) { color: var(--muted); font-size: .98rem; }
@media (max-width: 720px) { .welcome-steps { grid-template-columns: minmax(0, 1fr); } }

/* big text on a phone: let list rows drop their amount onto a second line, and let long buttons wrap */
@media (max-width: 600px) {
  .bigtext .list .it { flex-wrap: wrap; }
  .bigtext .list .it > span:last-child:not(:first-child) { margin-left: auto; text-align: right; white-space: normal; }   /* the amount and its tag may sit on separate lines; each stays whole */
  .intro .btn { white-space: normal; flex: 1 1 auto; }
}

/* the big net-worth figure scales to its card on a phone, whatever the text size */
.g-hero > .card:first-child { container-type: inline-size; }
@media (max-width: 560px) {
  .g-hero .hero-num { font-size: clamp(1.1rem, 13cqw, 2.4rem); white-space: nowrap; }
}

/* phones: the legend's percentage column doesn't need a fixed width; with big text each row stacks amount over percentage */
@media (max-width: 560px) {
  .legend .li .p { min-width: 0; }
  .bigtext .legend .li { grid-template-columns: .8rem minmax(0, 1fr) auto; row-gap: 0; }
  .bigtext .legend .li > i { grid-row: 1 / span 2; align-self: center; }
  .bigtext .legend .li > span:first-of-type { grid-column: 2; grid-row: 1 / span 2; }
  .bigtext .legend .li > b { grid-column: 3; grid-row: 1; text-align: right; }
  .bigtext .legend .li > .p { grid-column: 3; grid-row: 2; text-align: right; font-size: .85em; }
}

/* locked controls look locked */
.seg button:disabled { opacity: .55; cursor: default; }
input:disabled, select:disabled { opacity: .72; cursor: not-allowed; }
.money:has(input:disabled) > i { opacity: .72; }
.wish-hint a { color: var(--brand); font-weight: 600; }

/* backup nudge on the dashboard and the backup row in Settings */
.backup-nudge { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.backup-nudge > span:first-child { flex: 1 1 22rem; min-width: 0; }
.nudge-btns, .row-btns { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Update page: habit line, reminder panel, pre-filled boxes, and the "update due" dot in the menu */
.habit-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; flex-wrap: wrap; margin: -.4rem 0 1.1rem; }
.habit-info { color: var(--muted); font-size: .98rem; }
.habit-info b { color: var(--ink); }
.remind > summary { cursor: pointer; font-weight: 700; color: var(--brand); list-style: none; padding: .35rem .2rem; }
.remind > summary::-webkit-details-marker { display: none; }
.remind[open] { flex: 1 1 100%; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .4rem 1rem 1rem; }
.remind-body { margin-top: .4rem; }
.remind-btns { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .9rem; }
.remind-note { margin-top: .7rem; font-size: .95rem; }
.upd-in.prefilled { color: var(--muted); }
.due-dot { margin-left: auto; width: .6rem; height: .6rem; border-radius: 50%; background: var(--warn-ink, #f5b942); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn-ink, #f5b942) 28%, transparent); flex: none; }

/* Update page: boxes wide enough for a pre-filled value like 489,643.72 */
.money:has(> .upd-in) { min-width: 10.5rem; }
@media (max-width: 600px) { .money:has(> .upd-in) { min-width: 8.8rem; } }

/* work out my number, what-ifs and the guided setup */
.calc > summary { cursor: pointer; font-weight: 700; color: var(--brand); list-style: none; padding: .5rem .2rem; margin-top: .6rem; }
.calc > summary::-webkit-details-marker { display: none; }
.calc[open] { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0 1rem 1rem; margin-top: .8rem; }
.calc[open] > summary { padding-left: 0; }
.calc-result { display: flex; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; margin-top: .9rem; }
.calc-result b { font-size: 1.8rem; letter-spacing: -.02em; }
.calc-result small { flex: 1 1 100%; }
.calc-btns { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.page-link, .page-head p a { color: var(--brand); font-weight: 600; }
.levers { display: grid; gap: .8rem; margin-top: .8rem; }
.lever { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center; }
.lever .lv-text { display: flex; flex-direction: column; min-width: 0; }
.lever .lv-gain { font-weight: 700; text-align: right; white-space: nowrap; }
.lever .lv-bar { grid-column: 1 / -1; height: .5rem; border-radius: 99px; background: var(--chip); overflow: hidden; }
.lever .lv-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.lever.top .lv-text b::after { content: " · biggest effect"; color: var(--pos-ink); font-weight: 700; font-size: .92rem; }
.setup-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.setup-form { display: flex; flex-direction: column; gap: 1rem; }
.setup-res { display: flex; flex-direction: column; gap: 1rem; }
.setup-stat { display: flex; flex-direction: column; gap: .15rem; }
.setup-stat b { font-size: 1.9rem; letter-spacing: -.02em; }
.setup-warn { margin: 0; }
.setup-fine { font-size: .93rem; margin: 0; }
@media (max-width: 860px) { .setup-grid { grid-template-columns: minmax(0, 1fr); } }

/* quick search */
.search-btn { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; padding: .55rem .8rem; margin: .2rem 0 .4rem; border-radius: 12px; border: 1px solid var(--line-side, rgba(255,255,255,.14)); background: rgba(255,255,255,.06); color: var(--side-ink); font: inherit; font-size: .98rem; cursor: pointer; }
.search-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
kbd { font: inherit; font-size: .82rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; border: 1px solid var(--line); background: var(--chip); color: var(--muted); white-space: nowrap; }
.search-btn kbd { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--side-ink); }
#palette.pal-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(4, 6, 20, .55); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; }
.pal { width: min(38rem, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--card-solid); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.55); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.pal-in input { flex: 1; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.1rem; outline: none; min-width: 0; }
#palList { list-style: none; margin: 0; padding: .4rem; overflow-y: auto; flex: 1; }
.pal-grp { padding: .6rem .7rem .2rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#palList [role=option] { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: 10px; cursor: pointer; }
#palList [role=option].on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.pal-ic { width: 1.4rem; display: grid; place-items: center; flex: none; color: var(--muted); }
.pal-ic svg { width: 1.2rem; height: 1.2rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pal-ic i { width: .8rem; height: .8rem; border-radius: 4px; display: block; }
.pal-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pal-t b { font-weight: 600; overflow-wrap: anywhere; }
.pal-t small { color: var(--muted); }
.pal-none { padding: 1.2rem; color: var(--muted); text-align: center; }
.pal-foot { display: flex; gap: 1.2rem; padding: .6rem 1.1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); flex-wrap: wrap; }
.kbd-list { display: grid; gap: .5rem; }
.kbd-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; align-items: center; }
@media (max-width: 560px) { .kbd-row { grid-template-columns: minmax(0, 1fr); gap: .2rem; } #palette.pal-scrim { padding-top: 5vh; } }

/* phones and small tablets: the menu becomes a tab bar at the bottom, with a More sheet */
:root { --tabbar-space: 0px; }
.sticky-save { position: sticky; bottom: var(--tabbar-space); z-index: 5; }
#tabbar, #moreSheet { display: none; }
@media (max-width: 860px) {
  :root { --tabbar-space: calc(3.9rem + env(safe-area-inset-bottom, 0px)); }
  .sidebar .nav, .sidebar .side-foot { display: none; }
  .sidebar { padding: .6rem .9rem; }
  .sidebar .search-btn { width: auto; margin: 0 0 0 auto; padding: .5rem .8rem; }
  .sidebar .search-btn kbd { display: none; }
  body { padding-bottom: var(--tabbar-space); }
  #tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--card-solid); border-top: 1px solid var(--line); padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom, 0px)); gap: .2rem; box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
  #tabbar > * { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .3rem .2rem; min-height: 3.2rem; border: 0; border-radius: 12px; background: none; color: var(--muted); font: inherit; font-size: .76rem; font-weight: 650; text-decoration: none; position: relative; cursor: pointer; }
  #tabbar svg { width: 1.45rem; height: 1.45rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  #tabbar [data-act="moreOpen"] circle { fill: currentColor; stroke: none; }
  #tabbar .on { color: var(--brand); background: var(--brand-soft); }
  #tabbar .due-dot { position: absolute; top: .35rem; right: calc(50% - 1.35rem); margin: 0; }
  #toast { bottom: calc(var(--tabbar-space) + 1rem) !important; }
  html[data-fx~="ticker"] .ticker { bottom: var(--tabbar-space); }
  body.display-mode #tabbar { display: none; }
  body.display-mode { padding-bottom: 0; }
  #moreSheet.sheet-scrim { display: flex; position: fixed; inset: 0; z-index: 60; background: rgba(4, 6, 20, .55); align-items: flex-end; justify-content: center; }
  .sheet { width: min(32rem, 100%); max-height: 85vh; overflow-y: auto; background: var(--card-solid); color: var(--ink); border: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -16px 50px rgba(0,0,0,.5); }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; font-size: 1.15rem; }
  .sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .sheet-grid a { display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem; border-radius: 14px; background: var(--chip); color: var(--ink); text-decoration: none; font-weight: 600; }
  .sheet-grid a.on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
  .sheet-grid svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .sheet-tools { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); align-items: center; }
  .sheet-fs { display: inline-flex; gap: .3rem; }
}
@media print { #tabbar, #moreSheet { display: none !important; } }


/* small-screen fixes found by the layout tests */
.calc .f-row > .field { min-width: 0; }
.calc select, .calc .money { max-width: 100%; min-width: 0; }
.calc select { width: 100%; }
.tpl .x { min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tpl-foot button { min-height: 32px; padding-inline: .5rem; }

/* ===== fixes found by the automated checks (npm test) ===== */
/* tinted backgrounds are solid mixes of the card colour, so text on them keeps its contrast wherever the card sits */
:root, [data-theme] {
  --neg-soft: color-mix(in srgb, var(--neg) 16%, var(--card-solid));
  --pos-soft: color-mix(in srgb, var(--pos) 14%, var(--card-solid));
  --warn-soft: color-mix(in srgb, var(--warn) 15%, var(--card-solid));
}
/* a switched-off line chip is shown by its missing tick and dimmed dot — its words stay fully readable */
.line-chip:not(.on):not(.fixed) { opacity: 1; }
/* the side menu scrolls by itself when the window is short, so Text size, Theme and Privacy are always reachable */
@media (min-width: 861px) {
  .sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; height: 100vh; height: 100dvh; }
}
@media (min-width: 861px) and (max-height: 940px) { .sidebar { gap: 1.1rem; padding-block: 1rem; } .nav a { padding: .6rem .85rem; } }
@media (min-width: 861px) and (max-height: 780px) { .sidebar { gap: .7rem; padding-block: .8rem; } .nav a { padding: .45rem .75rem; } .nav { gap: .1rem; } .brand small { display: none; } .side-foot { gap: .45rem; } }
/* the Wall Street ticker sits at the bottom of the window, so things that stick there sit above it */
:root { --ticker-space: 0px; }
html[data-fx~="ticker"] { --ticker-space: 2.6rem; }
body.display-mode { --ticker-space: 0px; }
.sticky-save { bottom: calc(var(--tabbar-space) + var(--ticker-space)); }
/* brand-coloured words on a brand-tinted chip: pulled a little toward the text colour so every accent stays readable */
:root, [data-theme] { --brand-text: color-mix(in srgb, var(--brand) 70%, var(--ink)); }

/* "What would get you there sooner?" — the Safe / Balanced / Aggressive slider */
.lv-risk { margin-top: 1rem; padding: .9rem 1rem 1rem; border-radius: 14px; background: var(--chip); display: grid; gap: .45rem; }
.lv-risk > label { font-weight: 700; }
.lv-risk input[type=range] { width: 100%; accent-color: var(--brand); margin: .2rem 0 0; }
.lv-ticks { display: flex; justify-content: space-between; font-size: .92rem; color: var(--muted); margin-bottom: .35rem; }
.lv-ticks .on { color: var(--ink); font-weight: 700; }
.lv-risk + .levers { margin-top: 1.1rem; }

/* the "where would the extra money go" picker must fit a phone */
.lv-pick .f-row > .field { min-width: 0; }
.lv-pick select, .lv-pick input { max-width: 100%; min-width: 0; }
.lv-pick .field.grow { flex: 1 1 14rem; }
.lv-fine { margin-top: 1rem; font-size: .92rem; line-height: 1.45; }

/* Die with zero: intro video (big when setting up, small once set up) */
.vid-card { margin-bottom: 1.2rem; }
.vid-card.big { padding: 1rem; }
.vid-poster { position: relative; display: grid; align-content: center; justify-items: start; gap: .5rem; width: 100%; aspect-ratio: 16 / 9; max-height: 26rem; padding: clamp(1rem, 4vw, 2.4rem); border: 0; border-radius: 16px; cursor: pointer; text-align: left; color: #fff;
  background: radial-gradient(120% 140% at 85% 10%, color-mix(in srgb, var(--g2) 36%, #0b0f1a), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--brand) 40%, #0b0f1a), #0b0f1a); }   /* kept dark enough that the white words stay readable in every theme */
.vid-poster:hover .vid-play, .vid-mini:hover .vid-play { transform: scale(1.08); }
.vid-poster .vid-kicker { font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.vid-poster .vid-title { font-size: clamp(1.4rem, 4.2vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; max-width: 24ch; overflow-wrap: anywhere; }
.vid-poster .vid-sub { font-size: 1.05rem; opacity: .9; max-width: 38ch; }
.vid-play { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #fff; color: #111; font-size: 1.15rem; padding-left: .2rem; transition: transform .15s; }
.vid-poster .vid-play { position: absolute; right: clamp(1rem, 4vw, 2.4rem); bottom: clamp(1rem, 4vw, 2.4rem); width: 4.4rem; height: 4.4rem; font-size: 1.6rem; }
.vid-cap { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: .7rem; }
.vid-card.small { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; }
.vid-card.small .vid-text { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; }
.vid-mini { border: 0; padding: 0; background: linear-gradient(135deg, var(--brand), var(--g2)); border-radius: 12px; width: 3.6rem; height: 2.6rem; display: grid; place-items: center; cursor: pointer; }
.vid-mini .vid-play { width: 1.9rem; height: 1.9rem; font-size: .8rem; }
.vid-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.vid-card.small .vid-frame { max-width: 40rem; }
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ===== sync between devices ===== */
.sync-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 .3rem; }
.sync-status { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: .5rem 0; }
.sync-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; background: var(--pos); }
.sync-dot.warn { background: var(--warn); } .sync-dot.bad { background: var(--neg); }
.sync-key { font: 700 1.15rem/1.6 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; word-spacing: .2em; padding: .8rem 1rem; border: 2px dashed var(--brand); border-radius: 12px; background: var(--chip); margin: .6rem 0; overflow-wrap: anywhere; user-select: all; }
.sync-keybox { margin: .8rem 0; }
.sync-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin: .8rem 0; }
.sync-side { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--chip); }
.check-row { display: flex; align-items: center; gap: .6rem; margin: .8rem 0; cursor: pointer; }
.check-row input { width: 1.2rem; height: 1.2rem; }

/* ===== the live community card ===== */
.demo-chip.off { background: var(--chip); color: var(--muted); }
.demo-chip.sample { background: var(--warn-soft); color: var(--warn-ink); }
.demo-chip.live { background: var(--pos-soft); color: var(--pos-ink); }
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem 1.6rem; margin-top: 1rem; }
.live-grid h3 { font-size: 1rem; margin: 0 0 .5rem; }
.live-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.live-list li { display: flex; align-items: center; gap: .6rem; justify-content: space-between; }
.live-list li > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.live-bar { flex: 0 0 5rem; height: .5rem; border-radius: 99px; background: var(--chip); overflow: hidden; }
.live-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.live-sent { margin-top: 1rem; }

/* Risk level: badges in the Holdings table, the mix bar, the drawer picker */
.risk-badge { --rk: var(--muted); display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .65rem; border-radius: 99px; border: 1.5px solid var(--rk); background: color-mix(in srgb, var(--rk) 14%, transparent); color: var(--ink); font: inherit; font-size: .95rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
.risk-badge small { font-weight: 700; font-size: .9rem; opacity: .7; }
.risk-badge.guess { border-style: dashed; background: transparent; }
.risk-badge.r-safe { --rk: var(--pos); } .risk-badge.r-balanced { --rk: var(--warn); } .risk-badge.r-bold { --rk: var(--neg); }
.risk-badge.r-none { --rk: var(--brand); border-style: dashed; background: transparent; color: var(--brand); }
.risk-badge:hover { background: color-mix(in srgb, var(--rk) 24%, transparent); }
.risk-mix { margin-bottom: 1.2rem; display: grid; gap: .6rem; }
.rm-bar { display: flex; height: .75rem; border-radius: 99px; overflow: hidden; background: var(--chip); }
.rm-bar span { display: block; height: 100%; }
.rm-safe { background: var(--pos); } .rm-balanced { background: var(--warn); } .rm-bold { background: var(--neg); } .rm-none { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.rm-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .98rem; }
.rm-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; vertical-align: -.05rem; }
.risk-pick { margin-bottom: 1rem; padding: .15rem 0; border-radius: 12px; }
.risk-pick .chips { margin-bottom: .3rem; }
.risk-pick.hl { padding: .7rem .8rem; background: color-mix(in srgb, var(--brand) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, transparent); }

/* Tags: column, manager, add box */
.tag-btn { border: 0; cursor: pointer; font-family: inherit; }
.tag-btn:hover, .tag-btn.on { background: color-mix(in srgb, var(--brand) 22%, var(--chip)); color: var(--ink); }
td .row-tags { margin-top: 0; }
.chip.dashed { border-style: dashed; }
.tag-mgr { margin-top: .6rem; padding: .9rem 1rem; border-radius: 14px; background: var(--chip); display: grid; gap: .7rem; }
.tag-add { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.tag-add input { flex: 1 1 12rem; min-width: 0; }
.tag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.tag-list li { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.tag-list li .tag-soft { background: var(--card-solid); }
.tag-list li small { flex: 1 1 auto; }
.tm-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }

/* plain links in the page use the theme's brand colour — the browser's default dark-mode blue fell below 4.5:1 on some themes' tinted panels */
main a:not([class]) { color: var(--brand-text); text-underline-offset: 2px; }
.risk-pick .req { font-weight: 600; color: var(--muted); }
.risk-pick.missing { padding: .6rem .7rem; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--neg); }
.adds-pick { margin-bottom: 1rem; display: grid; gap: .35rem; }

/* Holdings: filters and the insight card sit side by side on wide screens, stacked below that */
.hold-top { display: block; }
@media (min-width: 1180px) {
  .hold-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-bottom: 1.2rem; }
  .hold-top > .card { margin-bottom: 0 !important; }
}
.calc-locked { padding: .8rem 1rem; border-radius: 14px; border: 1px dashed var(--line); background: var(--chip); margin-top: 1rem; }
[data-fold-for][hidden] { display: none !important; }
/* focus is always clearly visible: textareas like other fields, and the palette's search line */
textarea:focus { outline: 3px solid var(--brand); outline-offset: 1px; }
.pal-in:focus-within { box-shadow: inset 0 -2px 0 var(--brand); }

/* ===== Rows of controls line up ===== */
/* Every one-line box (text, number, date, time, dropdown) and every normal button shares one height, so boxes sitting side by
   side have matching top and bottom edges. Date boxes used to be 2px taller and dropdowns 3px shorter than text boxes. */
:root { --ctl-h: 2.85rem; }
input[type=text], input[type=search], input[type=number], input[type=date], input[type=time], select { height: var(--ctl-h); }
input[type=time] { background: var(--card-solid); border: 1.5px solid var(--line); border-radius: 12px; padding: .6rem .85rem; font-size: 1rem; min-width: 0; }
.btn:not(.sm) { min-height: var(--ctl-h); padding-block: .45rem; }

/* Update values: the note box sits level with the value box, not centred against the "vs current" line under it */
tbody tr.typed:has(.upd-in) td { vertical-align: top; }

/* Forecast settings: when one label wraps onto two lines, the boxes under the labels still start at the same height */
.f-row.top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: 0 1.4rem; align-items: start; }
.f-row.top > label.field { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: .3rem; }

/* "New tag" box and its Add button: the button grows to the box's height instead of floating in the middle */
.tag-add .btn { align-self: stretch; }

/* Die with zero plan form: when one label wraps onto two lines (big text, narrow screens), the boxes in that row still line up */
.form-grid { row-gap: 0; }
.form-grid > * { margin-bottom: .9rem; }
.form-grid > label.field { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: .3rem; align-content: start; }

/* email reminders (Update page) */
.remind-email { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.remind-email h3 { font-size: 1rem; margin: 0 0 .5rem; }
.remind-email .f-row { align-items: flex-end; }

/* Bucket list form: "Add to wish list" and "Add to bucket list" sit side by side at the end of the row */
.goal-form .gf-add { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-left: auto; }