/* ═══════════════════ Legacy Knowledge Base — premium dark theme ═══════════════════ */
:root{
  --bg:#070B14;            /* deep navy-black */
  --bg2:#0A101D;
  --panel:rgba(17,24,39,.66);
  --panel-solid:#111827;
  --panel2:rgba(30,41,59,.55);
  --line:rgba(148,163,184,.12);
  --line2:rgba(148,163,184,.22);
  --tx:#EDF0F4; --tx2:#B9C2CE; --dim:#7C8794;
  --gold:#D6AD52; --gold-2:#E9C878; --gold-3:#A87C2A;
  --gold-grad:linear-gradient(135deg,#E9C878 0%,#D6AD52 45%,#A87C2A 100%);
  --teal:#4FA3B8; --red:#C67B74; --ok:#6FB380; --warn:#D6AD52;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow:0 18px 50px -12px rgba(0,0,0,.55);
  --glow:0 0 32px rgba(214,173,82,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  background:var(--bg);color:var(--tx);
  font:15px/1.6 'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  display:flex;flex-direction:column;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* ambient background glows */
.bg-glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 520px at 82% -10%, rgba(214,173,82,.09), transparent 60%),
  radial-gradient(800px 600px at -12% 18%, rgba(37,66,120,.35), transparent 60%),
  radial-gradient(700px 700px at 50% 118%, rgba(30,49,88,.30), transparent 62%),
  var(--bg);}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{
  font:inherit;color:var(--tx);background:rgba(9,14,26,.75);
  border:1px solid var(--line2);border-radius:var(--r-sm);padding:9px 12px;width:100%;
  transition:border-color .18s, box-shadow .18s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,173,82,.14)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C8794' fill='none' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
h1,h2{font-family:'Fraunces',Georgia,serif;font-weight:600}
.hidden{display:none !important}
.dim{color:var(--dim)} .small{font-size:12px}
code{background:var(--panel2);padding:2px 6px;border-radius:5px;font-size:.88em;font-family:'JetBrains Mono',monospace}
::selection{background:rgba(214,173,82,.3)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.22);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* glass panel */
.glass{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}

/* ═══════ header ═══════ */
.top{display:flex;align-items:center;gap:24px;padding:16px 28px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
  background:rgba(7,11,20,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.brand h1{font-size:21px;line-height:1.1;letter-spacing:.01em;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand h1 em{font-style:normal;color:var(--tx);-webkit-text-fill-color:var(--tx);font-weight:500}
.brand p{font-size:11px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.tabs{display:flex;gap:4px;margin-left:auto;background:rgba(9,14,26,.6);border:1px solid var(--line);border-radius:14px;padding:4px}
.tabs button{padding:9px 20px;border-radius:10px;color:var(--tx2);font-weight:500;font-size:14px;transition:all .2s;display:flex;align-items:center;gap:7px}
.tabs button .t-ico{font-size:14px;filter:grayscale(.4);transition:filter .2s}
.tabs button:hover{color:var(--tx)}
.tabs button.active{background:var(--gold-grad);color:#131313;font-weight:600;box-shadow:0 4px 18px rgba(214,173,82,.35)}
.tabs button.active .t-ico{filter:none}
.icon-btn{font-size:18px;color:var(--dim);padding:8px 12px;border-radius:10px;transition:all .18s}
.icon-btn:hover{background:var(--panel2);color:var(--gold)}

main.tab{display:none;flex:1;width:100%;max-width:1480px;margin:0 auto;padding:26px 28px 40px;animation:fadeUp .35s ease}
main.tab.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* ═══════ chat ═══════ */
.chat-wrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;min-height:calc(100vh - 210px)}
.mode-banner{padding:10px 16px;border-radius:12px;font-size:13px;margin-bottom:14px;border:1px solid var(--line2);background:var(--panel)}
.mode-banner.warn{border-color:rgba(214,173,82,.5);color:var(--gold-2)}
.thread{flex:1;display:flex;flex-direction:column;gap:16px;padding-bottom:18px}
.msg{display:flex;animation:fadeUp .3s ease}
.msg.user{justify-content:flex-end}
.bubble{max-width:86%;padding:14px 18px;border-radius:18px;background:var(--panel);
  border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 6px 24px -8px rgba(0,0,0,.4)}
.msg.user .bubble{background:linear-gradient(140deg,rgba(214,173,82,.16),rgba(168,124,42,.08));border-color:rgba(214,173,82,.35);border-radius:18px 18px 4px 18px}
.msg.assistant .bubble{border-radius:18px 18px 18px 4px}
.bubble p{margin:6px 0;color:var(--tx2)} .bubble p:first-child{margin-top:0} .bubble p:last-child{margin-bottom:0}
.bubble strong{color:var(--tx)}
.bubble ul,.bubble ol{margin:6px 0 6px 20px;color:var(--tx2)}
.bubble table{border-collapse:collapse;margin:12px 0;font-size:13px;display:block;overflow-x:auto;max-width:100%;border-radius:10px}
.bubble th,.bubble td{border:1px solid var(--line2);padding:6px 10px;text-align:left}
.bubble th{background:rgba(214,173,82,.1);color:var(--gold-2);font-weight:600}
.bubble h1,.bubble h2,.bubble h3{font-size:15px;margin:14px 0 4px;color:var(--gold-2);font-family:'Inter Tight',sans-serif;font-weight:600}
.bubble figure{margin:14px 0;background:rgba(9,14,26,.6);border:1px solid var(--line2);border-radius:14px;padding:10px;transition:border-color .2s}
.bubble figure:hover{border-color:rgba(214,173,82,.4)}
.bubble figure img{max-width:100%;border-radius:9px;cursor:zoom-in;display:block}
.bubble figcaption{font-size:11.5px;color:var(--dim);padding:8px 4px 0}
.srcs{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px}
.srcs span{font-size:11px;color:var(--dim);background:rgba(9,14,26,.6);border:1px solid var(--line2);border-radius:20px;padding:3px 12px;cursor:pointer;transition:all .18s}
.srcs span:hover{color:var(--gold-2);border-color:rgba(214,173,82,.5)}
.starters{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.starters button{text-align:left;padding:11px 15px;background:rgba(9,14,26,.5);border:1px solid var(--line2);border-radius:12px;color:var(--tx2);font-size:13.5px;transition:all .18s}
.starters button:hover{border-color:rgba(214,173,82,.5);color:var(--tx);transform:translateX(3px)}
/* --- "Build this in Planner Pro" offer in a chat answer (2026-08-02) --- */
.plan-offer{display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px 12px;
  border:1px solid var(--gold);border-radius:12px;background:rgba(214,173,82,.10)}
.po-ico{font-size:18px;flex:none}
.po-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.po-body b{font-size:13.5px}
.po-body span{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.po-go{flex:none;background:var(--gold-grad);color:#131313;font-weight:700;font-size:12.5px;
  border:0;border-radius:10px;padding:8px 14px;cursor:pointer}
.po-go:disabled{opacity:.65;cursor:default}
.po-go:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.plan-offer-note{margin:6px 0 12px;font-size:12px;font-style:italic}

/* --- attach a saved client to the chat (2026-08-02) --- */
.client-attach{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0 0}
.client-attach .ca-pinned,.client-attach .ca-offer{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ca-label{font-size:12px;color:var(--dim)}
.ca-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--tx2);cursor:pointer}
.ca-chip:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.ca-chip:disabled{opacity:.6;cursor:default}
/* Pinned = their real figures are travelling with every question. Gold, so it
   is not something you forget is switched on. */
.ca-chip--on{border-color:var(--gold);background:rgba(214,173,82,.14);color:var(--gold);cursor:default}
.ca-sub{color:var(--dim);font-size:11px}
.ca-x{background:none;border:0;color:inherit;cursor:pointer;font-size:12px;padding:0 0 0 2px;line-height:1}
.ca-x:hover{opacity:.7}
/* Planning-party picker (linked households): tick-boxes in the offer row */
.ca-linkopt{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--tx2);
  padding:4px 8px;border:1px solid var(--line2);border-radius:999px;cursor:pointer}
.ca-linkopt:hover{border-color:var(--gold)}
.ca-linkopt input{accent-color:var(--gold);margin:0}
/* "Next: build for X ▸" pill after a party build (fixed so it survives the
   chat→planner tab switch; sits above the mobile nav bar) */
.pp-nextbuild{position:fixed;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:60;
  background:var(--gold-grad);color:#131313;font-weight:700;font-size:12.5px;
  border:0;border-radius:999px;padding:10px 16px;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.pp-nextbuild:hover{filter:brightness(1.06)}
@media (min-width: 941px){.pp-nextbuild{bottom:24px}}
.ca-err{font-size:12px;color:var(--status-bad,#e06c75)}
.ca-chip:focus-visible,.ca-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.composer{display:flex;gap:10px;padding:14px 0 8px;position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%)}
.composer textarea{resize:none;max-height:140px;border-radius:16px;padding:12px 16px;background:rgba(17,24,39,.9);backdrop-filter:blur(10px)}
.composer button{background:var(--gold-grad);color:#131313;font-weight:700;font-size:19px;border-radius:14px;width:52px;flex:none;box-shadow:0 6px 22px rgba(214,173,82,.35);transition:all .18s}
.composer button:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(214,173,82,.45)}
.composer button:disabled{opacity:.4;cursor:default;transform:none}
.typing{display:inline-block}.typing i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:4px;animation:blink 1.2s infinite;font-style:normal}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* ═══════ planner ═══════ */
.planner-grid{display:grid;grid-template-columns:340px 1fr;gap:22px}
.controls{padding:22px;height:fit-content;position:sticky;top:92px}
.controls h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin:20px 0 12px;font-family:'Inter Tight',sans-serif;font-weight:600}
.controls h2:first-child{margin-top:0}
.ctl-row{margin-bottom:12px}
.ctl-row.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.ctl-row label{display:flex;flex-direction:column;font-size:12.5px;color:var(--tx2)}
.slider-label{display:block;font-size:12.5px;color:var(--tx2)}
.ctl-row input,.ctl-row select{margin-top:auto;position:relative;top:0}
.ctl-row label > input,.ctl-row label > select,.ctl-row label > .flex-chk{margin-top:5px}
.ctl-row input:disabled{opacity:.4}
.flex-chk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx2);background:rgba(9,14,26,.5);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;cursor:pointer;transition:all .18s}
.flex-chk:has(input:checked){border-color:rgba(214,173,82,.55);color:var(--tx);background:rgba(214,173,82,.08)}
.flex-chk input{width:auto;accent-color:var(--gold);margin:0}
.term-row{display:flex;gap:10px;align-items:stretch;margin-top:5px}
.term-row input[type=number]{flex:1;min-width:0;margin-top:0}
.term-row .flex-chk{flex:none;white-space:nowrap}
.ctl-note{font-size:11px;color:var(--dim);line-height:1.5;margin:6px 0 2px;border-left:2px solid rgba(214,173,82,.35);padding-left:9px}
.ctl-note strong{color:var(--tx2)}
.goals{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.goals label{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--tx2);background:rgba(9,14,26,.5);border:1px solid var(--line2);border-radius:10px;padding:8px 11px;cursor:pointer;transition:all .18s}
.goals input{margin-top:3px}
.goal-t{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.goal-sub{font-style:normal;font-size:10.5px;color:var(--dim);line-height:1.35;font-weight:400}
.goals-priority{display:flex;flex-direction:column;gap:7px}
.goal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(9,14,26,.5);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;transition:all .18s}
.goal-row:has(input[value="high"]:checked){border-color:rgba(214,173,82,.55);background:rgba(214,173,82,.08)}
.goal-row-t{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--tx2);flex:1;min-width:0;line-height:1.3}
.goal-row-wide{flex-wrap:wrap}
.goal-inc{display:flex;align-items:center;gap:9px;width:100%;flex-basis:100%;font-size:11.5px;color:var(--tx2);cursor:pointer;margin-top:2px;padding:8px 12px;border:1px solid var(--line2);border-radius:9px;background:rgba(214,173,82,.05);transition:all .18s}
.goal-inc input{width:auto;accent-color:var(--gold);margin:0;flex:none}
.goal-inc-txt{line-height:1.35}
.goal-inc-txt b{font-weight:600;color:var(--tx)}
.goal-inc-txt em{font-style:normal;color:var(--dim);margin-left:5px}
.goal-inc:hover{border-color:var(--line)}
.goal-inc:has(input:checked){color:var(--gold-2);border-color:rgba(214,173,82,.45);background:rgba(214,173,82,.1)}
.goal-inc:has(input:checked) .goal-inc-txt b{color:var(--gold-2)}
.goal-inc:has(input:checked) .goal-inc-txt em{color:var(--gold-2);opacity:.85}
.prio-seg{display:flex;gap:3px;flex:none}
.prio-seg label{cursor:pointer;margin:0}
.prio-seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.prio-seg span{display:block;font-size:10.5px;padding:5px 8px;border-radius:8px;color:var(--dim);border:1px solid var(--line2);transition:all .18s;white-space:nowrap;text-align:center}
.prio-seg input:checked + span{background:rgba(214,173,82,.18);color:var(--gold-2);border-color:rgba(214,173,82,.55);font-weight:600}
.prio-seg input[value="high"]:checked + span{background:var(--gold-grad);color:#131313}
.prio-seg label:hover span{color:var(--tx)}
@media (max-width:940px){.goal-row{flex-wrap:wrap}.prio-seg{flex-basis:100%}.prio-seg label{flex:1}.prio-seg span{width:100%}}
.goals label:hover{border-color:var(--line2);background:rgba(9,14,26,.8)}
.goals label:has(input:checked){border-color:rgba(214,173,82,.55);color:var(--tx);background:rgba(214,173,82,.08)}
.goals input{width:auto;accent-color:var(--gold)}
.slider-label{margin:16px 0}
.slider-val{float:right;color:var(--gold-2);font-weight:600;font-family:'JetBrains Mono',monospace;font-size:12px}
.slider-ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim);margin-top:3px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;margin-top:10px;padding:0;background:none;border:none;height:22px}
input[type=range]:focus{box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(90deg,rgba(214,173,82,.65),rgba(214,173,82,.18));}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold-grad);margin-top:-6.5px;box-shadow:0 0 0 4px rgba(214,173,82,.18),0 2px 10px rgba(0,0,0,.5);cursor:grab;transition:box-shadow .18s}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 7px rgba(214,173,82,.22),0 2px 10px rgba(0,0,0,.5)}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:linear-gradient(90deg,rgba(214,173,82,.65),rgba(214,173,82,.18))}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:#D6AD52;box-shadow:0 0 0 4px rgba(214,173,82,.18)}
button.primary{width:100%;background:var(--gold-grad);color:#131313;font-weight:700;border-radius:12px;padding:13px;margin-top:18px;font-size:14.5px;letter-spacing:.02em;box-shadow:0 8px 26px rgba(214,173,82,.32);transition:all .18s}
button.primary:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(214,173,82,.42)}
button.ghost{border:1px solid var(--line2);border-radius:10px;padding:8px 16px;color:var(--tx2);font-size:13px;transition:all .18s;background:rgba(9,14,26,.4)}
button.ghost:hover{border-color:rgba(214,173,82,.5);color:var(--gold-2)}
.planner-qs{margin-top:14px;border:1px solid rgba(214,173,82,.5);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--gold-2);background:rgba(214,173,82,.06)}
.planner-qs ul{margin-left:16px}
.canvas{min-width:0}
.planner-empty{padding:70px 44px;text-align:center;border-style:dashed}
.pe-ico{font-size:40px;margin-bottom:14px;opacity:.85}
.planner-empty p{margin:8px auto;max-width:520px}
.scenario-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:rgba(9,14,26,.5)}
.seg button{padding:8px 16px;font-size:13px;color:var(--tx2);transition:all .18s}
.seg button.active{background:rgba(214,173,82,.14);color:var(--gold-2);font-weight:600}
.seg-full{width:100%}
.seg-full button{flex:1;text-align:center;padding:9px 8px;font-size:12.5px}
#plannerModeSeg{margin:10px 0 18px}
.manual-pick{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;padding-right:2px}
.manual-row{display:flex;flex-direction:column;gap:7px;background:rgba(9,14,26,.5);border:1px solid var(--line2);border-radius:10px;padding:8px 11px;transition:all .18s}
.manual-row:hover{border-color:var(--line2)}
.manual-row:has(input:checked){border-color:rgba(214,173,82,.55);background:rgba(214,173,82,.08)}
.manual-row label{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--tx2);cursor:pointer}
.manual-row:has(input:checked) label{color:var(--tx)}
.manual-row input{width:auto;accent-color:var(--gold);flex:none}
.manual-row span{flex:1;line-height:1.3}
.manual-row em{font-style:normal;font-size:10px;color:var(--dim);white-space:nowrap}
.term-pick{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim);padding-left:25px}
.term-pick select{width:auto;padding:3px 8px;font-size:11px;border-radius:7px}
.dimmed{opacity:.35;pointer-events:none;filter:grayscale(.5)}
.scenario-note{margin:-6px 0 16px;max-width:900px}
.chart-h{font-size:15px;margin:18px 0 8px;color:var(--gold-2);font-family:'Fraunces',serif;font-weight:600}
.prot-cap{font-size:12px;margin:-2px 0 10px;max-width:900px;line-height:1.55}
.rate-panel{margin-bottom:12px}
.rate-panel details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 16px;backdrop-filter:blur(8px)}
.rate-panel summary{cursor:pointer;font-size:13px;color:var(--tx2);user-select:none}
.rate-panel summary em{font-style:normal;color:var(--dim);font-size:11.5px}
.rate-panel summary:hover{color:var(--gold-2)}
.rate-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.rate-row .sw{width:12px;height:12px;border-radius:4px;flex:none}
.rate-row .rr-name{font-size:12.5px;width:170px;flex:none;color:var(--tx2);line-height:1.25}
.rate-row input[type=range]{flex:1;margin-top:0;height:18px}
.rate-row input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-4.5px}
.rate-row .rr-val{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold-2);width:92px;flex:none;text-align:right}
.rate-row .rr-reset{flex:none;font-size:11px;padding:4px 10px}
.rate-row.fixed em{font-style:normal;font-size:11.5px;color:var(--dim)}
@media (max-width:940px){.rate-row{flex-wrap:wrap}.rate-row .rr-name{width:auto;flex:1}.rate-row input[type=range]{flex-basis:100%;order:5}}
.chart-key{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px;padding:11px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);backdrop-filter:blur(8px)}
.chart-key .ck{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx2)}
.chart-key .ck[data-series]{cursor:pointer;user-select:none;border-radius:8px;padding:2px 6px;margin:-2px -2px;transition:background .15s,opacity .15s}
.chart-key .ck[data-series]:hover{background:rgba(148,163,184,.1)}
.chart-key .ck[data-series].off{opacity:.42;text-decoration:line-through}
.chart-key .ck svg{flex:none}
.chart-key .ck em{font-style:normal;color:var(--dim);font-size:11px}
/* Protection Comparison Suite: benefit-type tabs + comparison table */
#ppProtTabs:empty{display:none}
#ppProtTabs .prot-tab{cursor:pointer;user-select:none;border:1px solid var(--line);border-radius:14px;padding:3px 12px;transition:all .15s}
#ppProtTabs .prot-tab:hover{background:rgba(148,163,184,.1)}
#ppProtTabs .prot-tab.act{border-color:#C89B3C;color:#C89B3C;background:rgba(200,155,60,.08)}
#ppProtTable:empty{display:none}
.prot-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md)}
.prot-table th{color:var(--dim);font-weight:600;text-align:right;padding:6px 10px;font-size:11px}
.prot-table th:first-child,.prot-table td:first-child{text-align:left}
.prot-table td{text-align:right;padding:5px 10px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.prot-note{font-size:11px;color:var(--dim);margin-top:5px}
#aiCritique{margin-left:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;backdrop-filter:blur(10px);position:relative;overflow:hidden;transition:all .2s}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-grad);opacity:.55}
.card:hover{transform:translateY(-2px);border-color:var(--line2)}
.card .lb{font-size:10.5px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.card .v{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:600;letter-spacing:-.01em}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.legend .chip{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:8px 14px;font-size:13px;cursor:pointer;user-select:none;transition:all .18s;backdrop-filter:blur(8px)}
.legend .chip:hover{border-color:rgba(214,173,82,.4);transform:translateY(-1px)}
.legend .chip .sw{width:12px;height:12px;border-radius:4px;flex:none;box-shadow:0 0 10px -1px currentColor}
.legend .chip.off{opacity:.35;filter:grayscale(.7)}
.legend .chip small{color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:11px}
.chart-box{padding:14px;border-radius:var(--r-lg)}
.chart-box svg{width:100%;height:auto;display:block}
.hover-info{min-height:46px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 16px;margin-top:12px;font-size:13px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;backdrop-filter:blur(8px)}
.milestones{display:flex;flex-direction:column;gap:7px;font-size:13px;padding:2px 2px 4px}
.milestones .mrow{display:flex;gap:10px;align-items:baseline}
/* collapsible "Snapshot" (age-by-age milestones), hidden by default */
.snapshot{margin-top:14px;padding:12px 18px;border-radius:var(--r-md)}
.snapshot > summary{cursor:pointer;font-size:14px;color:var(--gold-2);font-family:'Fraunces',serif;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
.snapshot > summary::-webkit-details-marker{display:none}
.snapshot > summary::before{content:'▸';color:var(--gold);font-size:12px;transition:transform .18s}
.snapshot[open] > summary::before{transform:rotate(90deg)}
.snapshot > summary .dim{font-family:'Inter Tight',sans-serif;font-weight:400;font-size:12px}
.snapshot[open] > summary{margin-bottom:10px}
.milestones .mage{font-family:'JetBrains Mono',monospace;color:var(--dim);width:64px;flex:none;font-size:12px}
.milestones .mdot{width:8px;height:8px;border-radius:50%;flex:none;position:relative;top:-1px;box-shadow:0 0 8px currentColor}
.rat-h{font-size:17px;margin:26px 0 12px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}
.rationale{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.rat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;border-top:3px solid var(--gold);backdrop-filter:blur(10px);transition:all .2s}
.rat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.rat-card h3{font-size:15px;margin-bottom:3px;font-family:'Fraunces',serif}
.rat-card .alloc{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold-2);margin-bottom:4px}
.rat-card .proj{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);margin-bottom:9px}
.rat-card ul{margin:6px 0 8px 18px;font-size:13px;color:var(--tx2)}
.rat-card .assump{font-size:11.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:9px;margin-top:9px;line-height:1.5}
.rat-card details.assump-more{border-top:1px solid var(--line);margin-top:9px;padding-top:8px}
.rat-card details.assump-more>summary{font-size:11.5px;color:var(--dim);cursor:pointer;list-style:none;transition:color .18s}
.rat-card details.assump-more>summary::-webkit-details-marker{display:none}
.rat-card details.assump-more>summary::before{content:'▸ '}
.rat-card details.assump-more[open]>summary::before{content:'▾ '}
.rat-card details.assump-more>summary:hover{color:var(--tx2)}
.rat-card details.assump-more .assump{border-top:0;margin-top:6px;padding-top:0}
.rat-card .open-link{font-size:12px;color:var(--teal);cursor:pointer;transition:color .18s}
.rat-card .open-link:hover{color:var(--gold-2)}
.rat-card .badges{display:flex;gap:6px;margin:5px 0 9px;flex-wrap:wrap}
.rat-card .badge{font-size:10.5px;border:1px solid var(--line2);border-radius:20px;padding:2px 10px;color:var(--tx2)}
.rat-card .badge.g{border-color:rgba(111,179,128,.55);color:var(--ok)}

/* ═══════ products ═══════ */
.products-grid{display:grid;grid-template-columns:300px 1fr;gap:22px}
.prod-list{position:sticky;top:92px;height:calc(100vh - 130px);overflow-y:auto;padding-right:4px}
.prod-list input{margin-bottom:12px;border-radius:12px}
.prod-group{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);font-weight:600;margin:16px 4px 8px;padding-bottom:5px;border-bottom:1px solid var(--line2)}
.prod-group:first-child{margin-top:2px}
.prod-item{padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:9px;cursor:pointer;background:var(--panel);backdrop-filter:blur(8px);transition:all .18s}
.prod-item:hover{border-color:var(--line2);transform:translateX(3px)}
.prod-item.active{border-color:rgba(214,173,82,.6);background:rgba(214,173,82,.07);box-shadow:var(--glow)}
.prod-item h3{font-size:14px;font-weight:600}
.prod-item p{font-size:11.5px;color:var(--dim);margin-top:3px}
.prod-view{padding:30px 34px;min-height:400px;max-width:100%;overflow-x:hidden}
.prod-view h1{font-size:28px;margin-bottom:6px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.prod-view h2{font-size:19px;margin:28px 0 12px;color:var(--gold-2);border-bottom:1px solid var(--line);padding-bottom:8px}
.prod-view h3{font-size:15.5px;margin:18px 0 6px;font-family:'Inter Tight',sans-serif;font-weight:600}
.prod-view p{margin:9px 0;color:var(--tx2)}
.prod-view li{color:var(--tx2)}
.prod-view ul,.prod-view ol{margin:9px 0 9px 22px}
.prod-view table{border-collapse:collapse;margin:14px 0;font-size:13px;display:block;overflow-x:auto;max-width:100%}
.prod-view th,.prod-view td{border:1px solid var(--line2);padding:7px 11px;text-align:left;vertical-align:top}
.prod-view th{background:rgba(214,173,82,.09);color:var(--gold-2);white-space:nowrap;font-weight:600}
.prod-view tr:nth-child(even) td{background:rgba(148,163,184,.03)}
.prod-view img{max-width:100%;border-radius:10px;border:1px solid var(--line2);cursor:zoom-in;margin:10px 0;transition:all .2s}
.prod-view img:hover{border-color:rgba(214,173,82,.5);box-shadow:var(--glow)}
.prod-view blockquote{border-left:3px solid var(--gold);padding:6px 16px;margin:12px 0;color:var(--tx2);background:rgba(214,173,82,.05);border-radius:0 10px 10px 0}
.prod-view pre{background:rgba(9,14,26,.7);border:1px solid var(--line2);border-radius:10px;padding:14px;overflow-x:auto;font-size:12px;margin:12px 0;font-family:'JetBrains Mono',monospace}
.prod-view details{margin:16px 0;border:1px solid var(--line2);border-radius:12px;padding:12px 16px;background:rgba(9,14,26,.4)}
.prod-view summary{cursor:pointer;color:var(--dim);font-weight:600}
.fm-meta{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.fm-meta span{font-size:11px;background:rgba(9,14,26,.6);border:1px solid var(--line2);border-radius:20px;padding:3px 12px;color:var(--tx2)}

/* ═══════ product comparison (side-by-side) ═══════ */
.prod-modebar{margin-bottom:16px}
#prodModeSeg{display:inline-flex}
.cmp-intro{font-size:12.5px;margin:0 0 14px;max-width:820px}
.cmp-selects{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.cmp-select{background:rgba(9,14,26,.75);border:1px solid var(--line2);border-radius:12px;padding:11px 14px;font-size:14px;font-weight:600;color:var(--tx)}
.cmp-table-wrap{padding:6px;border-radius:var(--r-lg);overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.cmp-table th,.cmp-table td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);width:calc((100% - 150px)/3)}
.cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom:0}
.cmp-table th.cmp-attr{width:150px;color:var(--dim);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.08em;position:sticky;left:0;background:var(--panel-solid)}
.cmp-table tr:first-child th:not(.cmp-attr){color:var(--gold-2);font-family:'Fraunces',serif;font-size:15px;font-weight:600;border-bottom:2px solid rgba(214,173,82,.4)}
.cmp-table td{color:var(--tx2)}
.cmp-table tr:hover td,.cmp-table tr:hover th.cmp-attr{background:rgba(148,163,184,.04)}
.cmp-open{color:var(--teal);cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}
.cmp-open:hover{color:var(--gold-2)}
.cmp-table th.cmp-empty{color:var(--dim);font-family:inherit;font-weight:500;font-size:13px;border-bottom-color:var(--line)}
.cmp-table td.cmp-empty{color:var(--dim);opacity:.5}
@media (max-width:940px){
  .cmp-selects{grid-template-columns:1fr;gap:8px}
  .cmp-table{min-width:620px;table-layout:auto}
  .cmp-table th.cmp-attr{min-width:120px}
}

/* ═══════ concepts ═══════ */
.concepts-head{max-width:820px;margin:0 auto 22px;text-align:center}
.concepts-head h2{font-size:24px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block;margin-bottom:8px}
.concepts-head p{font-size:13.5px;line-height:1.65}
.concept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;max-width:1200px;margin:0 auto}
.concept-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:9px;transition:all .2s;position:relative;overflow:hidden}
.concept-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-grad);opacity:0;transition:opacity .2s}
.concept-card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow)}
.concept-card:hover::before{opacity:.8}
.concept-card h3{font-family:'Fraunces',serif;font-size:17.5px;font-weight:600;line-height:1.2}
.concept-card .c-cat{position:absolute;top:16px;right:18px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line2);border-radius:20px;padding:2px 10px;color:var(--dim)}
.concept-card .c-cat.quiz{color:#C67B74;border-color:rgba(198,123,116,.45)}
.concept-card .c-cat.story{color:#4FA3B8;border-color:rgba(79,163,184,.45)}
.concept-card .c-cat.calculator{color:#6FB380;border-color:rgba(111,179,128,.45)}
.concept-card .c-cat.interactive{color:#D6AD52;border-color:rgba(214,173,82,.45)}
.concept-card .c-tag{font-size:13.5px;color:var(--tx2);line-height:1.5;padding-right:70px}
.concept-card .c-best{font-size:12px;color:var(--dim)}
.concept-card .c-best strong{color:var(--gold-2);font-weight:600}
.concept-card ul{margin:0 0 0 18px;font-size:12.5px;color:var(--tx2)}
.concept-card .c-close{font-size:12px;color:var(--dim);font-style:italic;border-left:2px solid rgba(214,173,82,.4);padding-left:10px}
.concept-card .c-open{margin-top:auto;align-self:flex-start;background:var(--gold-grad);color:#131313;font-weight:700;font-size:13px;border-radius:10px;padding:9px 18px;box-shadow:0 6px 20px rgba(214,173,82,.28);transition:all .18s}
.concept-card .c-open:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(214,173,82,.4)}
/* inline concept card inside chat bubbles */
.bubble .concept-inline{display:flex;align-items:center;gap:14px;margin:12px 0;background:rgba(214,173,82,.07);border:1px solid rgba(214,173,82,.4);border-radius:14px;padding:13px 16px}
.bubble .concept-inline .ci-ico{font-size:22px;flex:none}
.bubble .concept-inline .ci-body{flex:1;min-width:0}
.bubble .concept-inline .ci-body b{display:block;font-size:14px;color:var(--tx)}
.bubble .concept-inline .ci-body span{font-size:12px;color:var(--tx2)}
.bubble .concept-inline .ci-open{flex:none;background:var(--gold-grad);color:#131313;font-weight:700;font-size:12.5px;border-radius:9px;padding:8px 14px;white-space:nowrap}
.bubble .concept-inline .ci-open:hover{filter:brightness(1.08)}

/* ═══════ embedded live dashboards (Market, Promotions) ═══════ */
/* Fixed-position so the iframe reliably fills the gap between the 74px sticky
   header and the bottom (or the 76px mobile nav) — independent of the page footer
   and the body's flex distribution, which otherwise squeeze the frame. */
main.tab.embed-tab{padding:0}
main.tab.embed-tab.active{display:flex;flex-direction:column;position:fixed;top:74px;left:0;right:0;bottom:0;max-width:none;margin:0;padding:16px 24px 20px;z-index:6}
.embed-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;margin-bottom:10px}
.embed-title{font-size:14px;color:var(--tx);font-weight:600;display:inline-flex;align-items:baseline;gap:8px;min-width:0}
.embed-title em{font-style:normal;font-size:12px;color:var(--dim);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.embed-full{flex:none;font-family:inherit;font-size:12px;color:var(--gold-2);background:transparent;cursor:pointer;border:1px solid var(--line2);border-radius:8px;padding:5px 12px;text-decoration:none;transition:all .18s;white-space:nowrap}
.embed-full:hover{border-color:rgba(214,173,82,.5);background:rgba(214,173,82,.08)}
.embed-frame{flex:1 1 auto;width:100%;min-height:0;border:0;border-radius:14px;background:#0b1120;box-shadow:0 10px 40px -14px rgba(0,0,0,.55)}
@media (max-width:940px){
  /* 76px here was 5px short of the nav's real 81px height and clipped the
     embedded app's lower edge on phones too — same fix as the 1580px block. */
  main.tab.embed-tab.active{top:74px;bottom:calc(84px + env(safe-area-inset-bottom));padding:10px 12px 10px}
  .embed-frame{border-radius:10px}
  .embed-title em{display:none}
}

/* ═══════ bottom nav (mobile) ═══════ */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:40;
  background:rgba(10,16,29,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  justify-content:space-around}
.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--dim);padding:6px 9px;border-radius:12px;transition:all .18s;font-weight:500}
.bottom-nav button span{font-size:20px;filter:grayscale(.6);transition:filter .18s}
.bottom-nav button.active{color:var(--gold-2);background:rgba(214,173,82,.1)}
.bottom-nav button.active span{filter:none}

/* ═══════ modal / lightbox / footer ═══════ */
.modal{position:fixed;inset:0;background:rgba(4,7,13,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
/* max-height + scroll: the Settings card outgrew the viewport once the Policies
   data-access section was added, and the overflow was simply unreachable —
   you had to shrink the browser to reach the buttons at the bottom. The card
   is a flex item in a padded, full-viewport .modal, so 100% here means "the
   viewport minus that padding". overscroll-behavior stops a scroll that
   reaches the end of the card from continuing on the page behind it. */
.modal-card{padding:26px;max-width:470px;width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain}
.modal-card h2{margin-bottom:8px;font-size:20px}
.modal-card label{display:block;font-size:13px;margin:14px 0 5px;color:var(--tx2)}
.modal-actions{display:flex;gap:10px;margin-top:16px}
.modal-actions .primary{width:auto;margin:0;padding:10px 22px}
.lightbox{position:fixed;inset:0;background:rgba(3,5,10,.92);backdrop-filter:blur(8px);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:zoom-out;padding:30px}
.lightbox img{max-width:96%;max-height:84%;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox p{color:var(--tx2);font-size:13px;margin-top:14px;max-width:900px;text-align:center}
footer{border-top:1px solid var(--line);color:var(--dim);font-size:11px;line-height:1.7;padding:18px 26px;text-align:center;margin-top:34px}
.foot-brand{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:600}

/* ═══════ responsive ═══════ */
@media (max-width: 1080px){
  .planner-grid{grid-template-columns:300px 1fr}
}
/* The header's own content (brand + the full tab pill-nav + the icon-button
   cluster: sign-in/user chip/flag/What's New/theme/Settings) needs ~1550px
   to fit on one line — .top never wraps and has no fallback, so ANYWHERE
   narrower silently pushed the icon cluster off-screen with no scrollbar.
   Found live (2 Aug 2026): Settings — which gates the Policies data-unlock —
   was completely unreachable at a completely ordinary 1100-1400px browser
   width, not just on a phone. Fixed by switching to the bottom-nav pattern
   (already built for phones) much earlier, well before the true mobile
   breakpoint below. Scoped to ONLY the nav-collapse rules, not the rest of
   that block's single-column/tighter-padding choices — those are genuinely
   mobile-specific and would waste space at a merely-narrower desktop width. */
@media (max-width: 1580px){
  .top .tabs{display:none}
  .bottom-nav{display:flex}
  main.tab{padding-bottom:96px}
  .composer{bottom:calc(64px + env(safe-area-inset-bottom))}
  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* The embedded tabs (Clients, Market, Promotions) are position:fixed with
     bottom:0 and z-index:6, while .bottom-nav is fixed at z-index:40 — so the
     moment this block makes the nav appear, it covers the bottom ~76px of the
     embedded app. Chat and the footer were given clearance above; these were
     missed when the breakpoint moved from 940px to 1580px (2 Aug 2026), which
     left the Clients tab with its lower strip hidden behind the nav on an
     ordinary laptop window.
     84px, not the 76px the mobile block used: the nav measures 81px tall
     (20px icon + 3px gap + label + 16px padding), so 76px still clipped it by
     5px. env() covers the home-indicator inset on a phone. */
  main.tab.embed-tab.active{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width: 940px){
  .top{padding:14px 18px}
  main.tab{padding:18px 16px 96px}
  .planner-grid,.products-grid{grid-template-columns:1fr}
  .controls,.prod-list{position:static;height:auto}
  .chat-wrap{min-height:calc(100vh - 250px)}
  .composer{bottom:calc(64px + env(safe-area-inset-bottom))}
  .prod-view{padding:22px 18px}
  .prod-list{max-height:none;overflow:visible}
  #aiCritique{margin-left:0}
  .bubble{max-width:94%}
  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .brand h1{font-size:18px}
  .brand p{font-size:10px;letter-spacing:.05em}
  .launch-panel{margin-top:3vh;padding:32px 22px}
  .bottom-nav button span{font-size:18px}
  .bottom-nav button{padding:6px 5px;font-size:9.5px}
}

/* ============ Planner Pro (beta) — namespaced .pp-* / .beta-tag; see PLANNER_PRO_SPEC.md ============ */
.beta-tag{font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(214,173,82,.5);border-radius:5px;padding:1px 4px;margin-left:4px;vertical-align:super}
.beta-tag-lg{font-size:10px;vertical-align:middle}
/* Planner Pro full-width layout: controls band on top, charts below (no 340px sidebar).
   Product cards flow side by side in a responsive grid and wrap; on narrow screens the
   minmax() collapses them to a single column automatically. */
.pp-stack{display:flex;flex-direction:column;gap:22px}
.pp-stack .controls.pp-wide{position:static;top:auto}
.pp-client{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;max-width:640px;margin-bottom:12px}
.pp-client label{display:flex;flex-direction:column;font-size:12.5px;color:var(--tx2)}
.pp-client label>input,.pp-client label>select{margin-top:5px}
.pp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-bottom:14px;align-items:start}
.pp-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.pp-actions select{flex:2 1 260px;min-width:220px}
.pp-actions .pp-add{width:auto;flex:0 1 auto;margin-bottom:0;padding:10px 16px}
.pp-actions .primary{width:auto;flex:1 1 180px;margin-top:0;padding:11px 22px}
@media (max-width:640px){.pp-actions .primary{flex-basis:100%}}
.pp-card{background:rgba(9,14,26,.5);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;border-top:2.5px solid var(--gold)}
.pp-card h4{margin:0 0 2px;font-size:13px;display:flex;align-items:center;gap:8px}
.pp-card h4 .pp-remove{margin-left:auto;background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px}
.pp-card h4 .pp-remove:hover{color:#C67B74;background:rgba(198,123,116,.1)}
.pp-card .pp-gen{font-size:10px;color:var(--dim);margin-bottom:8px}
.pp-card .ctl-row{margin-bottom:8px}
/* top-align the two-column control rows so the labels line up even when one column
   carries a min/helper note below its input (e.g. Premium mode vs Premium ($/yr)).
   Scoped to pp-cards so the main Planner's end-aligned rows are untouched. */
.pp-card .ctl-row.two{align-items:start}
.pp-card label{font-size:11px}
.pp-card .pp-min{font-size:10px;color:var(--dim);margin-top:2px}
/* below-product-minimum premium note turns red */
.pp-card .pp-min-warn{color:#E8695E;font-weight:600}
.pp-warn{font-size:11px;color:#D6AD52;background:rgba(214,173,82,.08);border:1px solid rgba(214,173,82,.25);border-radius:8px;padding:6px 9px;margin-top:6px}
.pp-warn-lead{font-weight:600;line-height:1.45}
.pp-warn-more{margin-top:5px}
.pp-warn-more>summary{cursor:pointer;opacity:.75;font-size:10.5px;letter-spacing:.02em}
.pp-warn-more>summary:hover{opacity:1}
.pp-warn-more p{margin:6px 0 0;line-height:1.45;opacity:.9}
/* Hard age-eligibility failure — RED banner, distinct from the amber .pp-warn advisories */
.pp-elig,.rat-elig,.manual-elig{font-size:12px;font-weight:600;color:#F28B82;background:rgba(232,105,94,.12);border:1px solid rgba(232,105,94,.5);border-radius:8px;padding:8px 11px;margin-top:8px;line-height:1.45}
.rat-elig{margin:2px 0 9px}
.manual-elig{font-size:11px;padding:6px 9px;margin-top:2px}
.pp-badge-est{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#C67B74;border:1px solid rgba(198,123,116,.45);border-radius:5px;padding:1px 5px;margin-left:6px}
/* Info circle (ⓘ) + hover/focus tooltip — surfaces a confirmed pricing quirk (SA bands, min-premium
   floor, level-pay) at a field's top-right without cluttering the card (Lexz 2026-07-09). */
.pp-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:6px;border-radius:50%;font-size:10px;line-height:1;color:var(--dim);border:1px solid rgba(150,160,170,.4);cursor:help;vertical-align:middle;user-select:none;flex:0 0 auto}
.pp-info:hover,.pp-info:focus{color:#E8C97A;border-color:#E8C97A;outline:none}
.pp-info .pp-tip{position:absolute;top:135%;right:0;z-index:60;display:none;width:min(280px,72vw);padding:9px 11px;border-radius:8px;background:#12171C;border:1px solid #2C353E;color:#C6CDD5;font-size:11px;font-weight:400;line-height:1.5;letter-spacing:normal;text-transform:none;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.55);white-space:normal}
.pp-info:hover .pp-tip,.pp-info:focus .pp-tip{display:block}
/* Minimum-premium floor — clear RED inline error under the SA field, like the insurer's own tool. */
.pp-card .pp-floor-err{display:block;margin-top:5px;font-size:11px;line-height:1.45;color:#F28B82;background:rgba(232,105,94,.12);border:1px solid rgba(232,105,94,.5);border-radius:8px;padding:7px 9px}
.pp-card input.pp-input-err{border-color:rgba(232,105,94,.7)!important}
.pp-add{width:100%;margin-bottom:8px}
.pp-actions button[disabled]{opacity:.45;cursor:not-allowed}
.pp-phase-editor{border-top:1px dashed var(--line2);margin-top:8px;padding-top:8px}
.pp-phase-editor .pp-phase-row{display:flex;gap:6px;align-items:center;font-size:11px;margin-bottom:5px}
/* always-visible account cash-flow sub-options (pay → holiday → draw) */
.pp-phase-fields{border-top:1px dashed var(--line2);margin-top:8px;padding-top:9px}
.pp-phase-fields .ctl-row{margin-bottom:8px}
.pp-phase-fields > .pp-min{margin-top:2px}

/* Planner Pro — Flex/Growth allocation group (side-by-side split + dividend slider below) */
.pp-alloc{display:flex;flex-direction:column;gap:2px;margin:2px 0}
.pp-alloc-row{margin-top:4px}
.pp-sub{display:flex;flex-direction:column;font-size:11px;color:var(--tx2);gap:3px}
.pp-div-slider.slider-label{margin:8px 0 2px}
.pp-div-slider.dim{opacity:.5}

/* ═══════════════ Light theme + What's New (ui-extras.js) ═══════════════ */
:root[data-theme="light"]{
  --bg:#F4F1EA; --bg2:#ECE7DC;
  --panel:rgba(255,255,255,.80);
  --panel-solid:#FFFFFF;
  --panel2:rgba(0,0,0,.05);
  --line:rgba(30,41,59,.14);
  --line2:rgba(30,41,59,.22);
  --tx:#20242B; --tx2:#454D59; --dim:#6B7280;
  --shadow:0 18px 46px -14px rgba(70,55,20,.20);
  --glow:0 0 32px rgba(214,173,82,.22);
}
:root[data-theme="light"] .bg-glow{
  background:
    radial-gradient(900px 520px at 82% -10%, rgba(214,173,82,.10), transparent 60%),
    radial-gradient(800px 600px at -12% 18%, rgba(180,158,108,.10), transparent 60%),
    radial-gradient(700px 700px at 50% 118%, rgba(214,173,82,.06), transparent 62%),
    var(--bg);
}
/* sunken/inset surfaces: dark uses rgba(9,14,26,.x); light gets a faint dark tint */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .cmp-select,
:root[data-theme="light"] .tabs,
:root[data-theme="light"] .bubble figure,
:root[data-theme="light"] .srcs span,
:root[data-theme="light"] .starters button,
:root[data-theme="light"] .flex-chk,
:root[data-theme="light"] .goals label,
:root[data-theme="light"] .goal-row,
:root[data-theme="light"] .seg,
:root[data-theme="light"] .manual-row,
:root[data-theme="light"] .prod-view pre,
:root[data-theme="light"] .prod-view details,
:root[data-theme="light"] .fm-meta span,
:root[data-theme="light"] button.ghost,
:root[data-theme="light"] .pp-card{
  background:rgba(0,0,0,.045);
}
:root[data-theme="light"] .goals label:hover{background:rgba(0,0,0,.075)}
:root[data-theme="light"] code{background:rgba(0,0,0,.06)}

/* What's New panel */
.icon-btn{position:relative}
.wn-dot{position:absolute;top:4px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--bg)}
.wn-card{max-width:560px;width:calc(100% - 40px)}
.wn-list{max-height:60vh;overflow-y:auto;margin:8px 0 4px;display:flex;flex-direction:column;gap:15px;padding-right:4px}
.wn-rel{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--panel2)}
.wn-rel-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wn-ver{font-weight:700;color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:13px}
.wn-rel-title{font-weight:600;color:var(--tx)}
.wn-date{margin-left:auto;font-size:12px;color:var(--dim)}
.wn-tags{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 4px}
.wn-tag{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:var(--tx2);background:rgba(214,173,82,.13);border:1px solid rgba(214,173,82,.32);border-radius:20px;padding:2px 10px}
.wn-items{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:5px}
.wn-items li{position:relative;padding-left:17px;font-size:13.5px;color:var(--tx2);line-height:1.5}
.wn-items li:before{content:'\203A';position:absolute;left:3px;top:-1px;color:var(--gold);font-weight:700}

/* light-mode fixes for the few hardcoded-dark surfaces (header, chat input, mobile nav, modal scrim) */
:root[data-theme="light"] .top{background:rgba(255,255,255,.82)}
:root[data-theme="light"] .composer textarea{background:rgba(255,255,255,.92)}
:root[data-theme="light"] .bottom-nav{background:rgba(255,255,255,.92)}
:root[data-theme="light"] .modal{background:rgba(40,34,20,.32)}

/* ═══════════════ login gate (auth.js) ═══════════════ */
/* fail-closed: while <html> has .kb-locked, only the glow + gate are visible */
html.kb-locked body > *:not(.bg-glow):not(#authGate){display:none !important}
.auth-gate{display:none}
html.kb-locked .auth-gate{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;min-height:100vh;padding:24px;
}
.auth-card{width:100%;max-width:390px;padding:30px 28px;display:flex;flex-direction:column;gap:4px}
.auth-brand{font-family:'Fraunces',serif;font-size:23px;line-height:1.15;font-weight:600;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-brand em{font-style:normal;color:var(--tx);-webkit-text-fill-color:var(--tx);font-weight:500}
.auth-sub{font-size:13.5px;color:var(--dim);margin:4px 0 14px}
.auth-label{display:block;font-size:12.5px;color:var(--tx2);margin-bottom:11px}
.auth-label input{margin-top:5px}
.auth-msg{font-size:12.5px;min-height:0;margin:2px 0}
.auth-msg.auth-err{color:var(--red);background:rgba(198,123,116,.10);border:1px solid rgba(198,123,116,.32);
  border-radius:9px;padding:8px 11px;margin:6px 0}
.auth-msg.auth-ok{color:var(--ok);background:rgba(111,179,128,.10);border:1px solid rgba(111,179,128,.32);
  border-radius:9px;padding:8px 11px;margin:6px 0}
.auth-submit{width:100%;margin-top:8px}
.auth-submit:disabled{opacity:.6;cursor:default}
.auth-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:13px;font-size:12px;flex-wrap:wrap}
.auth-foot a{color:var(--gold);text-decoration:none}
.auth-foot a:hover{text-decoration:underline}
.auth-legal{font-size:11px;text-align:center;max-width:390px}
/* signed-in chip in the header */
.user-chip{display:flex;flex-direction:column;line-height:1.15;padding:5px 11px;border-radius:11px;
  background:var(--panel2);border:1px solid var(--line);max-width:170px}
.user-chip .uc-name{font-size:12.5px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip .uc-role{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--gold)}
#signOutBtn[hidden]{display:none}
@media (max-width:720px){.user-chip{max-width:110px}.user-chip .uc-name{font-size:11.5px}}
/* display name: show nicely capitalised even when derived from an email prefix */
.user-chip .uc-name{text-transform:capitalize}
/* account panel inside the Settings modal */
.acct-panel{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.acct-h{font-size:15px;margin-bottom:2px}
.acct-email{margin-bottom:10px}
/* Sign out moved out of the header toolbar into Settings (2026-07-26) — it sat
   beside the theme/settings icons where a mis-click ended the session. */
/* Chat transcripts (admin only). Collapsed rows — client details must not be
   on screen until an admin deliberately opens one. */
.adm-msgs{display:flex;flex-direction:column;gap:6px}
.adm-msg{border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.adm-msg>summary{display:flex;gap:10px;align-items:baseline;padding:9px 12px;cursor:pointer;font-size:13px}
.adm-msg-who{font-weight:600;flex:0 0 auto}
.adm-msg-q{flex:1 1 auto;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-msg-when{flex:0 0 auto;font-size:12px}
.adm-msg-body{padding:4px 12px 12px}
.adm-msg-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin:8px 0 3px}
.adm-msg-body pre{white-space:pre-wrap;word-break:break-word;font-size:12.5px;line-height:1.5;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px;margin:0}

/* Chat transcripts: the whole section collapses (2026-07-30) — a year of retention
   means this list gets long, and even the one-line excerpts shouldn't be on screen
   until an admin deliberately opens it. Uses <details> like the per-row collapse
   above, one level up, for the same reason and the same interaction. */
.adm-trans{margin-top:26px}
.adm-trans>summary{cursor:pointer;list-style:none}
.adm-trans>summary::-webkit-details-marker{display:none}
.adm-trans>summary h3{display:inline-flex;align-items:center;gap:8px;font-size:15px;margin:0 0 11px;
  padding-bottom:7px;border-bottom:1px solid var(--line);width:100%}
.adm-trans>summary h3::before{content:"▸";color:var(--dim);font-size:12px;transition:transform .15s}
.adm-trans[open]>summary h3::before{transform:rotate(90deg)}
.adm-trans-body{padding-top:2px}
.adm-trans-controls{display:flex;gap:8px;margin-bottom:12px}
.adm-sortbtn{font-size:12.5px;padding:6px 13px;border-radius:20px;border:1px solid var(--line2);
  color:var(--tx2);background:transparent;cursor:pointer;transition:all .15s}
.adm-sortbtn:hover{border-color:var(--gold);color:var(--tx)}
.adm-sortbtn.on{background:rgba(214,173,82,.14);border-color:var(--gold);color:var(--gold-2);font-weight:600}
.adm-trans-more{margin:14px 0 0;text-align:center}
.adm-loadmore{font-size:12.5px;padding:7px 16px;border-radius:20px;border:1px solid var(--line2);
  color:var(--tx2);background:transparent;cursor:pointer;transition:all .15s}
.adm-loadmore:hover{border-color:var(--gold);color:var(--tx)}
.adm-loadmore:disabled{opacity:.6;cursor:default}
.adm-msg-group{margin-bottom:16px}
.adm-msg-group:last-child{margin-bottom:0}
.adm-msg-groupname{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-2);
  font-weight:600;margin:0 0 6px;padding-left:2px}
.adm-msg-group .adm-msg{margin-bottom:6px}
.adm-msg-group .adm-msg:last-child{margin-bottom:0}
.acct-signout{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
#acctSignOut{color:var(--tx2)}
#acctSignOut:hover{color:#E4A0A0;border-color:#E4A0A0}
.acct-panel label{display:block;font-size:13px;margin:12px 0 5px;color:var(--tx2)}
.acct-btn{margin-top:9px}

/* ── device grants: request / approve a device without sharing the passphrase ── */
.pol-sub{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.pol-or{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:var(--tx2);font-size:12px}
.pol-or::before,.pol-or::after{content:"";flex:1;height:1px;background:var(--line)}
/* The fingerprint is read off this screen and typed on another, so it wants to
   be big, monospaced and unambiguous — not a decorative code chip. */
.pol-fp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;letter-spacing:.14em;
  text-align:center;padding:14px 10px;margin:10px 0;border:1px solid var(--line);border-radius:10px;
  background:rgba(127,127,127,.06);user-select:all}
.pol-warn{margin:12px 0;padding:10px 12px;border-radius:8px;color:var(--tx2);
  background:rgba(198,123,116,.08);border:1px solid rgba(198,123,116,.28)}
.pol-grants{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pol-grant{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 11px;border:1px solid var(--line);border-radius:9px}
#polApproveFp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;letter-spacing:.1em;
  text-transform:uppercase}

/* ═══════════════ admin usage dashboard (admin.js) ═══════════════ */
.adm-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:20px;flex-wrap:wrap}
.adm-head h2{font-size:20px;margin-bottom:4px}
.adm-head p{max-width:640px;font-size:13px}
.adm-head button{margin-left:auto;flex-shrink:0}
.adm-cards{margin-bottom:18px}
.adm-k{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.adm-v{font-size:25px;font-weight:600;color:var(--tx);font-family:'JetBrains Mono',monospace;margin:5px 0 2px}
.adm-s{font-size:11.5px;min-height:15px}
.adm-h{font-size:15px;margin:26px 0 11px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.adm-empty{padding:14px 2px;font-size:13px}
.adm-note{padding:14px 17px;margin-bottom:6px;font-size:13.5px;color:var(--tx2);border-left:3px solid var(--gold)}
.adm-foot{margin-top:26px}
/* table */
.adm-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.adm-table{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
.adm-table th{text-align:left;padding:10px 13px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--line);white-space:nowrap}
.adm-table td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.adm-table tbody tr:last-child td{border-bottom:none}
.adm-table .r{text-align:right;font-family:'JetBrains Mono',monospace}
.adm-em{display:block;font-size:11px;font-style:normal;margin-top:2px}
.adm-role{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--gold);
  background:rgba(214,173,82,.12);border:1px solid rgba(214,173,82,.3);border-radius:20px;padding:2px 9px}
/* bar lists */
.adm-bars{display:flex;flex-direction:column;gap:7px}
.adm-bar-row{display:flex;align-items:center;gap:12px;font-size:12.5px}
.adm-bar-lbl{flex:0 0 210px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-bar-track{flex:1;height:8px;background:var(--panel2);border-radius:20px;overflow:hidden;min-width:60px}
.adm-bar-fill{display:block;height:100%;background:var(--gold-grad);border-radius:20px}
.adm-bar-n{flex:0 0 120px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--tx)}
.adm-bar-n em{font-family:'Inter Tight',sans-serif;font-size:11px;font-style:normal}
/* errors */
.adm-errs{display:flex;flex-direction:column;gap:6px}
.adm-err{display:flex;align-items:baseline;gap:11px;padding:9px 13px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);font-size:12.5px}
.adm-err-name{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--red);flex-shrink:0}
.adm-err-msg{flex:1;color:var(--tx2);word-break:break-word}
.adm-err-when{flex-shrink:0;font-size:11px}
.adm-qerr{margin-top:14px}
@media (max-width:720px){
  .adm-bar-lbl{flex-basis:120px}
  .adm-bar-n{flex-basis:84px}
  .adm-head button{margin-left:0}
}
/* "Sign in" entry point shown while the gate is not enforced */
.signin-btn{font-size:12.5px;padding:7px 14px;white-space:nowrap}
.signin-btn.hidden{display:none}

/* ═══════════════ advisor QC flags (flag.js) ═══════════════ */
/* the small ⚑ that appears on a chat answer or a Planner Pro card */
.flag-mini{position:absolute;top:8px;right:10px;font-size:12px;line-height:1;color:var(--dim);
  background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:3px 7px;opacity:0;
  transition:opacity .15s,color .15s,border-color .15s}
.msg:hover .flag-mini,.pp-card:hover .flag-mini,.flag-mini:focus{opacity:1}
.flag-mini:hover{color:var(--gold);border-color:rgba(214,173,82,.45)}
.msg,.pp-card{position:relative}
@media (hover:none){.flag-mini{opacity:.55}}   /* touch: no hover, so keep it visible */
/* panel */
.flag-card{max-width:500px}
.flag-sub{margin:-4px 0 14px;font-size:13px}
.flag-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.flag-chip{font-size:13px;padding:7px 14px;border-radius:20px;border:1px solid var(--line2);
  color:var(--tx2);background:transparent;transition:all .15s}
.flag-chip:hover{border-color:var(--gold);color:var(--tx)}
.flag-chip.on{background:rgba(214,173,82,.14);border-color:var(--gold);color:var(--gold-2);font-weight:600}
.flag-note-l{display:block;font-size:13px;color:var(--tx2);margin-bottom:14px}
.flag-note-l input{margin-top:6px}
.flag-ctx{border:1px solid var(--line);border-radius:10px;padding:9px 13px;background:var(--panel2);margin-bottom:6px}
.flag-ctx summary{font-size:12.5px;color:var(--dim);cursor:pointer;list-style:none}
.flag-ctx summary::-webkit-details-marker{display:none}
.flag-ctx summary:before{content:'▸ ';color:var(--gold)}
.flag-ctx[open] summary:before{content:'▾ '}
.flag-ctx pre{margin:9px 0 2px;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.65;
  color:var(--tx2);white-space:pre-wrap;word-break:break-word}
/* open-flags queue in the admin dashboard */
.adm-flags{display:flex;flex-direction:column;gap:10px}
.adm-flag{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 15px;background:var(--panel)}
.adm-flag-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-sev{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:20px;padding:2px 9px}
.adm-sev-high{color:var(--red);background:rgba(198,123,116,.14);border:1px solid rgba(198,123,116,.35)}
.adm-sev-normal{color:var(--gold);background:rgba(214,173,82,.12);border:1px solid rgba(214,173,82,.3)}
.adm-sev-low{color:var(--dim);background:var(--panel2);border:1px solid var(--line)}
.adm-flag-kind{font-size:13px;font-weight:600;color:var(--tx)}
.adm-flag-what{font-size:12px;font-family:'JetBrains Mono',monospace}
.adm-flag-when{margin-left:auto;font-size:11.5px}
.adm-flag-note{margin:9px 0 0;font-size:13px;color:var(--tx2);line-height:1.55}
.adm-flag-repro{margin-top:9px}
.adm-flag-repro summary{font-size:11.5px;color:var(--dim);cursor:pointer}
.adm-flag-repro pre{margin-top:7px;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.6;
  color:var(--tx2);white-space:pre-wrap;word-break:break-word;max-height:230px;overflow:auto;
  background:var(--panel2);border-radius:8px;padding:9px 11px}
.adm-flag-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px}
.adm-flag-acts .adm-act{font-size:11.5px;padding:5px 11px}
.adm-flag-status{margin-left:auto;font-size:11.5px}