@font-face { font-family: 'Manrope'; src: url('/fonts/Manrope-VariableFont_wght.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
:root { --navy: #0B2545; --navy-2: #13315C; --brass: #C9A227; --brass-2: #E3C55A; --steel: #5B7A99; --ink: #1B2A3A; --mute: #5d6b7a; --line: #dfe5ec; --bg: #f5f7fa; --card: #ffffff; --good: #2E7D5B; --warn: #B7791F; --bad: #B23B3B; --radius: 14px; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 15px; }
a { color: var(--navy-2); }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 0 0 .5em; }
h2 { font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 18px; font-weight: 700; }
.muted { color: var(--mute); }
.small { font-size: 13px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 800; color: var(--brass); margin-bottom: 8px; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 11px 18px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn-brass { background: var(--brass); color: var(--navy); }
.btn-brass:hover { background: var(--brass-2); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-outline { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--steel); }
/* header */
.topbar { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 20; border-bottom: 3px solid var(--brass); }
.topbar-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 12px 28px; }
.topbar img { height: 34px; display: block; }
.topbar nav { display: flex; gap: 6px; margin-left: 16px; }
.topbar nav a { color: #dfe7f1; text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.topbar nav a.active, .topbar nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.topbar .spacer { flex: 1; }
.topbar form { margin: 0; }
.topbar .user { color: #b9c6d6; font-size: 13px; }
/* footer */
.footer { background: var(--navy); color: #c8d3e0; font-size: 13px; padding: 18px 28px; border-top: 3px solid var(--brass); }
.footer-inner { max-width: 1440px; margin: 0 auto; display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
.footer strong { color: #fff; }
/* landing */
.hero { position: relative; color: #fff; min-height: 560px; display: flex; align-items: center; background: var(--navy) url('/img/hero_sailor_homecoming.jpg') center 30%/cover no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,37,69,.96) 0%, rgba(11,37,69,.86) 42%, rgba(11,37,69,.35) 100%); }
.hero-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 72px 28px; width: 100%; }
.hero h1 { color: #fff; font-size: 52px; font-weight: 800; max-width: 680px; letter-spacing: -.02em; }
.hero p.lead { font-size: 20px; color: #dfe7f1; max-width: 620px; margin: 0 0 28px; }
.hero .logo { height: 64px; margin-bottom: 26px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .chips { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.hero .chips span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); padding: 7px 12px; border-radius: 999px; font-size: 13px; }
.section { max-width: 1240px; margin: 0 auto; padding: 64px 28px; }
.section.alt { max-width: none; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.alt > .inner { max-width: 1240px; margin: 0 auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.photo { width: 100%; border-radius: var(--radius); display: block; box-shadow: 0 10px 30px rgba(11,37,69,.18); border: 3px solid #fff; }
.quote { font-size: 22px; font-weight: 600; color: var(--navy); border-left: 4px solid var(--brass); padding-left: 18px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; border-top: 4px solid var(--steel); }
.step b { color: var(--brass); font-size: 13px; letter-spacing: .12em; }
.step h4 { margin: 6px 0; }
.stat { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 22px; }
.stat .v { font-size: 34px; font-weight: 800; color: var(--brass-2); }
.stat .l { color: #c8d3e0; font-size: 13px; }
.pricing { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.price { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; display: flex; flex-direction: column; gap: 8px; }
.price.featured { border: 2px solid var(--brass); box-shadow: 0 10px 26px rgba(201,162,39,.18); }
.price .tier { font-weight: 800; color: var(--navy); }
.price .p { font-size: 28px; font-weight: 800; color: var(--navy); }
.price .alt { color: var(--mute); font-size: 13px; margin-top: -6px; }
.price .when { margin-top: auto; font-size: 13px; color: var(--steel); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.tl { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; position: relative; }
.tl .when { color: var(--brass); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.tl h4 { margin: 4px 0; font-size: 15px; }
.tl p { margin: 0; color: var(--mute); font-size: 13px; }
.tl.key { background: var(--navy); border-color: var(--navy); }
.tl.key h4 { color: #fff; } .tl.key p { color: #c8d3e0; }
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.chart-box { position: relative; height: 340px; }
.chart-box.sm { height: 240px; } .chart-box.md { height: 290px; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; color: var(--navy); font-weight: 800; border-bottom: 2px solid var(--navy); padding: 7px 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
table.data td { border-bottom: 1px solid var(--line); padding: 7px 8px; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.credits { font-size: 13px; color: var(--mute); }
/* login */
.login-body { background: var(--navy); min-height: 100vh; }
.login-wrap { display: grid; grid-template-columns: 1.2fr 1fr; min-height: 100vh; }
.login-photo { background: url('/img/hero_sailor_homecoming.jpg') center/cover; position: relative; }
.login-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,37,69,.15), rgba(11,37,69,.85)); }
.login-photo-caption { position: absolute; z-index: 1; left: 40px; bottom: 40px; color: #fff; font-size: 34px; font-weight: 800; max-width: 460px; }
.login-card { background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 56px; border-left: 4px solid var(--brass); }
.login-logo { height: 52px; align-self: flex-start; margin-bottom: 26px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; max-width: 380px; margin-top: 10px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--navy); font-size: 14px; }
.login-card input { font: inherit; padding: 12px 14px; border: 1px solid #c6d1dd; border-radius: 10px; }
.login-card input:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
.alert { background: #fdecec; color: var(--bad); border: 1px solid #f3c2c2; padding: 10px 12px; border-radius: 10px; max-width: 380px; font-weight: 600; }
.fineprint { font-size: 13px; color: var(--mute); max-width: 380px; margin-top: 26px; }
/* app */
.app { max-width: 1680px; margin: 0 auto; padding: 18px 22px 30px; display: grid; grid-template-columns: 330px minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-h { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-h h3 { margin: 0; font-size: 15px; }
.panel-b { padding: 14px 16px; }
.personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-column: 1 / -1; }
.persona { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; border-left: 4px solid var(--steel); transition: .15s; }
.persona:hover { border-color: var(--steel); box-shadow: 0 6px 16px rgba(11,37,69,.08); }
.persona.active { border-left-color: var(--brass); background: #fffaf0; border-color: var(--brass); }
.persona b { color: var(--navy); display: block; }
.persona span { font-size: 13px; color: var(--mute); }
.form fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 12px 0 4px; }
.form legend { font-weight: 800; color: var(--navy); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; padding-right: 8px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.form label { display: flex; flex-direction: column; font-size: 13px; color: var(--mute); font-weight: 600; gap: 3px; }
.form label.full { grid-column: 1 / -1; }
.form label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.form input, .form select { font: inherit; font-size: 13.5px; padding: 7px 9px; border: 1px solid #ccd6e0; border-radius: 8px; color: var(--ink); background: #fff; width: 100%; }
.form input[type=checkbox] { width: auto; }
.form input:focus, .form select:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
.run-bar { position: sticky; bottom: 0; background: #fff; padding: 12px 16px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.run-bar .btn { width: 100%; justify-content: center; }
.results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rhead { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 18px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; border-bottom: 4px solid var(--brass); }
.rhead h2 { color: #fff; font-size: 22px; margin: 0; }
.rhead .meta { color: #c8d3e0; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.chip.ok { background: rgba(46,125,91,.25); border-color: #57b48b; }
.chip.brass { border-color: var(--brass); color: var(--brass-2); }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; border-top: 4px solid var(--brass); }
.kpi .v { font-size: 26px; font-weight: 800; color: var(--navy); }
.kpi .l { font-size: 13px; color: var(--mute); font-weight: 600; }
.kpi .s { font-size: 13px; color: var(--steel); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols3 { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; }
.actions { margin: 0; padding-left: 20px; }
.actions li { margin: 4px 0; }
.bar { height: 10px; background: #e7ecf2; border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brass); border-radius: 99px; width: 0; }
.bar.steel > i { background: var(--steel); }
.bar.navy > i { background: var(--navy); }
.meter { display: grid; grid-template-columns: 120px 1fr 44px; gap: 10px; align-items: center; margin: 8px 0; font-size: 13px; }
.note { border-left: 3px solid var(--steel); padding: 6px 10px; margin: 8px 0; background: #f7f9fb; border-radius: 0 8px 8px 0; font-size: 13.5px; }
.note b { color: var(--navy); }
.note.warn { border-left-color: var(--warn); background: #fff8ec; }
.note.good { border-left-color: var(--good); background: #eef8f3; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.tag.out { background: #fff1d6; color: #8a5a00; } .tag.in { background: #e3f3ea; color: #1f6b48; }
.big { font-size: 30px; font-weight: 800; color: var(--navy); }
.copilot { position: sticky; top: 74px; display: flex; flex-direction: column; height: calc(100vh - 96px); min-height: 520px; }
.copilot .msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f9fb; }
.msg { max-width: 92%; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg .src { display: block; margin-top: 6px; font-size: 13px; color: var(--steel); font-weight: 700; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.suggest button { font: inherit; font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; cursor: pointer; color: var(--navy); }
.suggest button:hover { border-color: var(--brass); }
.ask { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ask input { flex: 1; font: inherit; padding: 9px 11px; border: 1px solid #ccd6e0; border-radius: 10px; }
.copilot .disc { font-size: 13px; color: var(--mute); padding: 0 14px 12px; }
.empty { padding: 50px 20px; text-align: center; color: var(--mute); }
.empty img { width: 100%; max-width: 560px; border-radius: 12px; margin-bottom: 16px; }
.hidden { display: none !important; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(11,37,69,.25); border-top-color: var(--navy); border-radius: 50%; animation: s 1s linear infinite; }
@keyframes s { to { transform: rotate(360deg); } }
@media (max-width: 1280px) { .app { grid-template-columns: 300px minmax(0,1fr); } .copilot { grid-column: 1 / -1; position: static; height: 560px; } .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .personas, .grid2, .grid3, .grid4, .steps, .pricing, .timeline, .cols2, .cols3, .login-wrap { grid-template-columns: 1fr; } .hero h1 { font-size: 36px; } .login-photo { min-height: 220px; } }
.spacer { flex: 1; }
.cols3 > *, .cols2 > * { min-width: 0; }
@media (max-width: 1800px) { .cols3 { grid-template-columns: 1fr 1fr; } .cols3 > :nth-child(3) { grid-column: 1 / -1; } }
/* intake wizard */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.app { grid-template-columns: 360px minmax(0, 1fr) 360px; }
.wizard { position: sticky; top: 74px; display: flex; flex-direction: column; max-height: calc(100vh - 96px); }
.wizard .form { overflow-y: auto; flex: 1; }
.wz-progress { padding: 12px 16px 6px; }
.wz-progress .bar > i { transition: width .25s; }
.wz-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }   /* v1.9.8: every step in one row, one column per step (the old grid was a column short, so the last step wrapped) */
.wz-dot { width: 100%; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--mute); }
.wz-dot b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; border: 2px solid var(--line); background: #fff; color: var(--steel); }
.wz-dot span { font-size: 13px; font-weight: 700; }
.wz-dot.done b { background: var(--navy); border-color: var(--navy); color: #fff; }
.wz-dot.active b { background: var(--brass); border-color: var(--brass); color: var(--navy); }
.wz-dot.active span { color: var(--navy); }
.wz-dot:focus-visible b { outline: 2px solid var(--brass); outline-offset: 2px; }
.wz-photo { margin: 8px 16px 0; min-height: 112px; border-radius: 12px; background: var(--navy) center/cover no-repeat; position: relative; overflow: hidden; display: flex; align-items: flex-end; border-bottom: 3px solid var(--brass); }
.wz-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,37,69,.15), rgba(11,37,69,.92)); }
.wz-photo > div { position: relative; padding: 10px 14px; }
.wz-photo .eyebrow { margin: 0; font-size: 13px; color: var(--brass-2); }
.wz-photo h4 { color: #fff; margin: 2px 0; font-size: 18px; }
.wz-photo p { color: #dfe7f1; margin: 0; font-size: 13px; }
.wz-photo.p1 { background-image: url('/img/army_homecoming.jpg'); background-position: center 30%; }
.wz-photo.p2 { background-image: url('/img/airman_laptop.jpg'); }
.wz-photo.p3 { background-image: url('/img/mobile_devices.jpg'); }
.wz-photo.p4 { background-image: url('/img/retiree_appreciation.jpg'); }
.wz-photo.p5 { background-image: url('/img/financial_counseling.jpg'); }
.wz-photo.p6 { background-image: url('/img/financial_class.jpg'); }
.form .wz-step { border-top: 0; padding-top: 4px; }
.wz-sub, .form .full.wz-sub { grid-column: 1 / -1; font-weight: 800; color: var(--navy); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.form .full { grid-column: 1 / -1; }
.err { color: var(--bad); font-size: 13px; font-weight: 700; min-height: 0; }
.err:empty { display: none; }
.stepErr { margin-top: 8px; font-size: 13px; }
.form input[aria-invalid=true] { border-color: var(--bad); background: #fff7f7; }
.wz-nav { display: flex; align-items: center; gap: 10px; }
.wz-nav .btn, .run-bar.wz-nav .btn { width: auto; }
.wz-nav #run { flex: 1; justify-content: center; }
.btn:disabled { opacity: .45; cursor: default; }
.rv { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
.rv.bad { border-color: #f0c98a; background: #fffaf0; }
.rv-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--navy); }
.rv-list { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; margin: 6px 0 0; font-size: 13px; }
.rv-list dt { color: var(--mute); }
.rv-list dd { margin: 0; font-weight: 700; text-align: right; color: var(--ink); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 800; color: var(--navy-2); text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--brass); }
@media (max-width: 1280px) { .app { grid-template-columns: 340px minmax(0,1fr); } }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .wizard { position: static; max-height: none; } .wz-dot span { display: none; } }
/* Ask REMfolio (security chat page) */
.chat-page { max-width: 1320px; margin: 0 auto; padding: 18px 22px 30px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.chat-hero { grid-column: 1 / -1; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy) url('/img/airman_laptop.jpg') center 35%/cover no-repeat; min-height: 150px; display: flex; align-items: flex-end; border-bottom: 4px solid var(--brass); }
.chat-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,37,69,.95) 0%, rgba(11,37,69,.75) 55%, rgba(11,37,69,.3) 100%); }
.chat-hero > div { position: relative; padding: 18px 22px; }
.chat-hero h1 { color: #fff; font-size: 28px; margin: 0 0 4px; }
.chat-hero p { color: #dfe7f1; margin: 0; max-width: 680px; }
.schat { display: flex; flex-direction: column; height: calc(100vh - 300px); min-height: 520px; }
.schat .msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #f7f9fb; }
.schat .msg { max-width: 82%; font-size: 14px; line-height: 1.55; }
.msg .closing-note { margin: 10px 0 0; padding-top: 7px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.4; color: var(--mute); font-style: italic; white-space: normal; }
.msg .why { margin-top: 8px; font-size: 13px; border-top: 1px dashed var(--line); padding-top: 6px; }
.msg .why summary { cursor: pointer; font-weight: 800; color: var(--navy-2); }
.msg .why ul { margin: 4px 0 0; padding-left: 18px; color: var(--mute); white-space: normal; }
.msg.guard { border-left: 3px solid var(--warn); }
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--steel); animation: dot 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.schat .disc { font-size: 13px; color: var(--mute); padding: 0 16px 12px; }
.starters { display: flex; flex-direction: column; gap: 8px; }
.starters button { text-align: left; font: inherit; font-size: 13.5px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--steel); border-radius: 10px; padding: 9px 12px; cursor: pointer; color: var(--navy); font-weight: 600; }
.starters button:hover { border-left-color: var(--brass); background: #fffaf0; }
.chat-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 74px; }
.chat-side ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink); }
.chat-side li { margin: 3px 0; }
.ask .count { align-self: center; font-size: 13px; color: var(--mute); min-width: 52px; text-align: right; }
@media (max-width: 900px) { .chat-page { grid-template-columns: 1fr; padding: 12px; } .chat-side { position: static; } .schat { height: 70vh; } .schat .msg { max-width: 95%; } .chat-hero h1 { font-size: 22px; } }
.wz-nav .btn { white-space: nowrap; }

/* Ask REMfolio rich answers (v0.11.0) */
.schat .msg.rich { white-space: normal; max-width: 92%; }
.msg .md p { margin: 0 0 8px; } .msg .md p:last-child { margin-bottom: 0; }
.msg .md ul, .msg .md ol { margin: 0 0 8px; padding-left: 20px; }
.msg .md .tbl { overflow-x: auto; margin: 6px 0 10px; }
.msg .md table { border-collapse: collapse; font-size: 13px; min-width: 60%; }
.msg .md th, .msg .md td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.msg .md th { background: #eef2f6; font-weight: 800; }
.msg .md td { font-variant-numeric: tabular-nums; }
.msg a { color: var(--navy-2); text-decoration: underline; }
.msg sup.cite { font-size: 13px; margin-left: 1px; }
.msg .sources { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; font-size: 13px; }
.msg .sources-h { font-weight: 800; color: var(--navy-2); margin-bottom: 2px; }
.msg .sources ol { margin: 0; padding-left: 22px; } .msg .sources li { margin: 2px 0; word-break: break-word; }

/* Ask REMfolio: composer visible on first load (v0.12.0). The chat panel fills the viewport, the message list
   scrolls inside it and the Ask box stays pinned at the bottom of the panel. */
.chat-body .chat-page { padding-top: 12px; padding-bottom: 16px; gap: 12px 18px; }
.chat-body .chat-hero { min-height: 0; border-bottom-width: 3px; }
.chat-body .chat-hero > div { padding: 10px 18px; }
.chat-body .chat-hero h1 { font-size: 21px; margin: 0 0 2px; }
.chat-body .chat-hero p { font-size: 13px; line-height: 1.4; max-width: 820px; }
.chat-body .schat { height: calc(100vh - 196px); height: calc(100dvh - 196px); min-height: 340px; }
.chat-body .schat .panel-h { padding-top: 8px; padding-bottom: 8px; }
.chat-body .schat .ask { position: sticky; bottom: 0; background: #fff; }
.chat-body .schat .disc { padding-bottom: 8px; }
.chat-body .chat-side { top: 70px; }
.chips { display: none; gap: 6px; padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; }
.chips[hidden] { display: none !important; }
.chips .chip { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.msg .md p.note { color: var(--warn); }
@media (max-width: 900px) {
  .chat-body .chat-page { padding: 8px 10px 12px; gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .chat-body .schat, .chat-body .chips { min-width: 0; max-width: 100%; }
  .chat-body .chat-hero > div { padding: 8px 12px; }
  .chat-body .chat-hero h1 { font-size: 17px; margin: 0; }
  .chat-body .chat-hero p { display: none; }
  .chat-body .schat { height: calc(100vh - 186px); height: calc(100dvh - 186px); min-height: 320px; }
  .chat-body .schat .panel-h { display: none; }
  .chips { display: flex; }
  .chat-body .ask input { font-size: 16px; min-width: 0; }   /* no iOS zoom on focus */
  .chat-body .ask .count { display: none; }
}

/* Ask REMfolio page notice (v0.12.2): one always-visible notice replaces per-answer disclaimers */
.chat-body .schat .notice { margin: 0; padding: 2px 16px 8px; font-size: 13px; line-height: 1.4; color: var(--mute); }
@media (max-width: 900px) { .chat-body .schat .notice { padding: 2px 10px 6px; font-size: 13px; } }
/* v1.2.0 Ask REMfolio: the question field sits directly under the heading, the explanation under the field, and the conversation
   area takes the rest of the screen. The two context checkboxes moved to My Accounts; the notice is on the About page. */
.chat-body .chat-hero > div { padding: 8px 18px; }
.chat-body .schat { height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 420px; }
.chat-body .schat .ask { position: static; border-top: 0; padding: 12px 16px 4px; }
.chat-body .schat .ask input { padding: 11px 13px; font-size: 15px; }
.ask-help { padding: 0 16px 10px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--ink); }
.ask-help p { margin: 0; }
.ask-status { margin: 4px 0 0; font-size: 13px; color: var(--mute); }
.ask-status[hidden] { display: none; }
.ask-status.on { color: var(--ink); }
.ask-status a { color: var(--navy-2); font-weight: 700; }
.chat-body .schat .chips { padding-top: 8px; }
.schat .msgs:empty::before { content: 'Your conversation will appear here.'; color: var(--mute); font-size: 13px; margin: auto; text-align: center; }
.edu-notice { font-size: 13px; color: var(--mute); max-width: 920px; margin: 0 auto; }
@media (max-width: 900px) {
  .chat-body .schat { height: calc(100vh - 140px); height: calc(100dvh - 140px); min-height: 360px; }
  .chat-body .schat .ask { padding: 8px 10px 2px; }
  .ask-help { padding: 0 10px 6px; font-size: 13px; }
  .chat-body .schat .msgs { min-height: 0; }
}
/* v1.2.0 Ask REMfolio context choices on My Accounts (and in the box before linking) */
.askctx-opts { display: grid; gap: 8px; margin: 8px 0; border: 0; padding: 0; min-width: 0; }
.askctx-opts legend { padding: 0; margin-bottom: 4px; }
.askctx-opts label { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--ink); }
.askctx-opts input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.askctx-opts .small { display: block; }
.consent-box .askctx-opts { border-top: 1px solid var(--line); padding-top: 8px; }
.askctx-state { min-height: 1.3em; }

/* My Accounts */
.acct-page { max-width: 1320px; margin: 0 auto; padding: 14px 28px 18px; display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - 120px); }
.acct-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.acct-head > div { flex: 1; min-width: 260px; }
.acct-head h1 { font-size: 22px; margin: 0; }
.acct-head p { margin: 2px 0 0; }
.acct-steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.acct-steps button { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 6px; font: inherit; font-size: 13px; font-weight: 700; color: var(--mute); cursor: pointer; }
.acct-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: #eef2f6; color: var(--steel); }
.acct-steps li.active button { border-color: var(--brass); color: var(--navy); } .acct-steps li.active b { background: var(--brass); color: var(--navy); }
.acct-steps li.done b { background: var(--navy); color: #fff; }
.acct-steps button:disabled { opacity: .5; cursor: default; }
.acct-notice { margin: 0; font-size: 13px; line-height: 1.4; color: var(--mute); }
.acct-page > .note { margin: 0; }
.connect-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.connect-card { text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; border-top: 4px solid var(--steel); min-height: 210px; }
.connect-card:hover { border-color: var(--steel); box-shadow: 0 4px 14px rgba(11,37,69,.08); }
.connect-card:focus-within, .connect-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.connect-card.primary { border-top-color: var(--brass); }
.connect-card.demo { border-top-color: var(--good); }
.connect-card h3 { margin: 0; font-size: 17px; }
.connect-card p { margin: 0; font-size: 13.5px; color: var(--mute); flex: 1; }
.connect-card .eyebrow { margin: 0; }
.connect-card .cta { align-self: flex-start; margin-top: 8px; background: var(--brass); color: var(--navy); font-weight: 800; font-size: 13.5px; padding: 8px 14px; border-radius: 9px; }
.connect-card.off { cursor: not-allowed; opacity: .7; } .connect-card.off .cta { background: #eef2f6; color: var(--mute); }
.connect-card code { font-size: 13px; background: #f1f4f8; padding: 0 4px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acct-step { display: flex; flex-direction: column; gap: 12px; }
.acct-nav { display: flex; gap: 10px; align-items: center; position: sticky; bottom: 0; background: var(--bg); padding: 8px 0; margin-top: auto; border-top: 1px solid var(--line); }
.acct-nav .spacer { flex: 1; }
#disconnect { color: var(--bad); }
.scroll-y { max-height: 300px; overflow: auto; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data.compact td, table.data.compact th { padding-top: 4px; padding-bottom: 4px; }
.acct-kpis { grid-template-columns: repeat(5, 1fr); }
.acct-kpis .kpi { padding: 10px 12px; } .acct-kpis .kpi .v { font-size: 22px; }
.acct-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.acct-cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acct-chart { height: 280px; }
.summary { margin: 0 0 10px; font-size: 14.5px; }
.cf { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.cf div { background: #f7f9fb; border-radius: 10px; padding: 8px 10px; } .cf b { display: block; font-size: 18px; color: var(--navy); } .cf span { font-size: 13px; color: var(--mute); }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.sugs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sug { border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: 10px; padding: 10px 14px; }
.sug-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sug-h h4 { margin: 0; font-size: 15.5px; flex: 1; min-width: 220px; }
.sug-type { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.sug-amt { font-weight: 800; color: var(--navy); background: #f7f1dc; border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.sug p { margin: 4px 0; font-size: 13.5px; }
.sug .why summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--navy-2); }
.sug .why ul { margin: 4px 0 0; font-size: 13px; color: var(--mute); }
.usehold { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--navy); padding: 0 16px 4px; }
@media (max-width: 1100px) { .connect-grid { grid-template-columns: 1fr 1fr; } .acct-kpis { grid-template-columns: repeat(3, 1fr); } .acct-cols, .acct-cols.three { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .acct-page { padding: 10px; } .connect-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .connect-card { min-height: 0; padding: 10px; gap: 4px; } .connect-card h3 { font-size: 14.5px; } .connect-card p { font-size: 13px; line-height: 1.35; } .connect-card .cta { font-size: 13px; padding: 6px 10px; } .connect-card .eyebrow { font-size: 13px; } .acct-notice { font-size: 13px; } .acct-steps span { display: none; } .acct-kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .acct-kpis .kpi { padding: 8px 10px; } .acct-kpis .kpi .v { font-size: 18px; } .acct-head p { display: none; } .hide-sm { display: none; } .acct-chart { height: 300px; } }
.btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 8px; }
#itemStatus .note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #itemStatus .note .btn { margin-left: auto; }
/* two-step sign-in */
.mfa-card { justify-content: flex-start; padding-top: 44px; overflow-y: auto; }
.mfa-card h1 { margin: 0 0 6px; }
.mfa-card > p, .mfa-card details, .mfa-steps, .mfa-codes, .mfa-offer { max-width: 420px; }
.mfa-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 16px; margin: 14px 0 0; }
.mfa-steps li { line-height: 1.45; }
.mfa-qr { margin: 10px 0 6px; }
.mfa-qr img { display: block; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.mfa-key { display: inline-block; font-size: 15px; letter-spacing: .06em; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; word-break: break-all; user-select: all; }
.mfa-card details summary { cursor: pointer; font-weight: 700; color: var(--navy-2); }
.mfa-alt { margin-top: 18px; }
.mfa-codes { columns: 2; padding-left: 26px; margin: 10px 0; font-size: 16px; }
.mfa-codes li { margin-bottom: 6px; }
.mfa-codes code { user-select: all; letter-spacing: .04em; }
.mfa-offer { border: 1px solid var(--line); border-left: 4px solid var(--steel); border-radius: 10px; padding: 12px 14px; margin: 8px 0 16px; }
.mfa-offer p { margin: 4px 0 10px; }
.mfa-card > .btn { align-self: flex-start; }
.mfa-out { margin-top: 22px; align-items: flex-start; }
.okmsg { background: #e9f5ef; color: var(--good); border: 1px solid #bfe0cf; padding: 10px 12px; border-radius: 10px; max-width: 420px; font-weight: 600; }
.sec-page { max-width: 760px; margin: 0 auto; padding: 24px 20px 40px; display: flex; flex-direction: column; gap: 18px; }
.sec-page h1 { margin: 0; }
.sec-page .panel-b { padding: 14px 16px; }
.sec-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.sec-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--navy); font-size: 14px; }
.sec-form input, .sec-form select { font: inherit; padding: 10px 12px; border: 1px solid #c6d1dd; border-radius: 10px; max-width: 100%; }
.pk-list { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.pk-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.pk-list li div { display: flex; flex-direction: column; gap: 2px; }
.pill-ok { background: #e9f5ef; color: var(--good); font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 999px; }
.footer a { color: #fff; }
@media (max-width: 900px) { .mfa-wrap .login-photo { display: none; } .mfa-card { padding: 28px 20px; border-left: 0; border-top: 4px solid var(--brass); } .mfa-codes { columns: 1; } }
/* v0.16.0 privacy: consent before Plaid Link, Delete all my data */
.footer a { color: inherit; text-decoration: underline; }
.btn-danger { background: var(--bad); color: #fff; border: 1px solid var(--bad); }
.btn-danger:hover { background: #962f2f; }
.btn-outline.btn-danger { background: #fff; color: var(--bad); border-color: #f3c2c2; }
.btn-outline.btn-danger:hover { border-color: var(--bad); }
.consent-box { border-top: 4px solid var(--brass); margin-top: 14px; }
.consent-box .panel-b p { margin: 0 0 10px; max-width: 760px; }
.consent-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--navy); margin: 6px 0 14px; max-width: 760px; cursor: pointer; }
.consent-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--navy); }
.consent-ok { color: var(--good); font-weight: 700; }
.del-steps { display: flex; flex-direction: column; gap: 18px; }
.del-steps ul { margin: 0 0 10px; padding-left: 20px; }
.del-steps li { margin-bottom: 6px; }
.mfa-contact-opt { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line, #d7dce3); border-radius: 8px; }
.mfa-contact-opt label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.mfa-contact-opt input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--navy); }
.stepno { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13px; margin-right: 6px; }
/* v0.16.3: full-screen household digital twin box. The bordered wizard card spans the full page width and at least the
   screen height; the questions fill it in a wide grid (up to 4 per row); no inner scroll box; the Back / Next bar is pinned
   to the bottom of the screen. The four sample households are small chips in the box header instead of large cards. */
.app { max-width: none; grid-template-columns: minmax(0, 1fr) 380px; }
.app > .wizard { grid-column: 1 / -1; }
.wizard { position: static; max-height: none; display: flex; flex-direction: column; min-height: calc(100vh - 100px); min-height: calc(100dvh - 100px); }
.wizard .form { overflow: visible; flex: none; }
.wizard .wz-head { padding: 12px 22px; flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
.wizard .wz-head h3 { font-size: 18px; white-space: nowrap; }
.wizard #wzcount { font-size: 13.5px; margin-left: auto; white-space: nowrap; }
.wz-samples { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; margin-left: 18px; }
.wz-samples-l { font-size: 13px; font-weight: 700; color: var(--mute); white-space: nowrap; }
.wizard .personas { display: flex; flex-wrap: wrap; gap: 6px; grid-column: auto; }
.wizard .persona { border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: #f7f9fb; white-space: nowrap; }
.wizard .persona b { font-size: 13px; font-weight: 700; display: inline; }
.wizard .persona:hover { border-color: var(--steel); box-shadow: none; background: #fff; }
.wizard .persona.active { background: #fffaf0; border-color: var(--brass); }
.wizard .persona:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.wizard .wz-progress { padding: 14px 22px 4px; }
.wizard .wz-steps { max-width: 900px; }
.wizard .wz-dot b { width: 30px; height: 30px; font-size: 13px; }
.wizard .wz-dot span { font-size: 13px; }
.wz-body { flex: 1 0 auto; display: grid; grid-template-columns: clamp(240px, 19vw, 340px) minmax(0, 1fr); gap: 24px; padding: 14px 22px 10px; align-items: start; }
.wizard .wz-photo { margin: 0; min-height: 240px; position: sticky; top: 74px; }
.wizard .wz-photo > div { padding: 14px 16px; }
.wizard .wz-photo .eyebrow { font-size: 13px; }
.wizard .wz-photo h4 { font-size: 22px; }
.wizard .wz-photo p { font-size: 14px; }
.wizard .form.panel-b { padding: 4px 0 8px; }
.wizard .form .row { grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 60px) / 4)), 1fr)); gap: 16px 20px; }
.wizard .form label { font-size: 14px; color: var(--ink); gap: 6px; }
.wizard .form label.check { font-size: 15px; min-height: 46px; align-self: end; }
.wizard .form input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--navy); }
.wizard .form input, .wizard .form select { font-size: 16px; padding: 11px 12px; min-height: 46px; border-radius: 10px; }
.wizard .form label.full select, .wizard .form label.full input { max-width: 760px; }
.wizard .err { font-size: 13px; }
.wizard .stepErr { font-size: 14px; }
.wizard .wz-sub, .wizard .form .full.wz-sub { font-size: 13px; margin-top: 6px; padding-top: 14px; }
.wizard #holdsum { font-size: 14px; }
.wizard #review { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.wizard .rv { margin: 0; padding: 10px 14px; }
.wizard .rv-h { font-size: 14.5px; }
.wizard .rv-list { font-size: 13.5px; gap: 3px 12px; }
.wizard .run-bar.wz-nav { position: sticky; bottom: 0; z-index: 5; margin-top: auto; padding: 12px 22px; box-shadow: 0 -6px 16px rgba(11,37,69,.08); }
.wizard .wz-nav .btn { min-width: 130px; justify-content: center; font-size: 15.5px; padding-top: 11px; padding-bottom: 11px; }
.wizard .wz-nav #run { flex: 0 1 320px; }
.results { scroll-margin-top: 84px; }
.empty { padding: 30px 20px; }
.empty img { max-width: 420px; }
@media (min-width: 1281px) { .copilot { top: 74px; } }
@media (max-width: 1280px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .copilot { grid-column: 1 / -1; position: static; height: 560px; }
}
/* the sample chips get their own line under the title when the header is too narrow for one line */
@media (max-width: 1360px) { .wz-samples { order: 3; flex-basis: 100%; margin-left: 0; } }
@media (max-height: 820px) and (min-width: 1181px) { .wizard .wz-photo { min-height: 180px; } }
/* narrow desktop windows or a zoomed-in browser (about 900-1180px): the photo card becomes a slim banner above the
   questions so the questions keep 3-4 columns, and the sample chips stay on one scrollable line */
@media (max-width: 1180px) and (min-width: 901px) {
  .wz-body { grid-template-columns: 1fr; gap: 12px; }
  .wizard .wz-photo { position: relative; top: auto; min-height: 0; }
  .wizard .wz-photo > div { padding: 10px 14px; }
  .wizard .wz-photo h4 { font-size: 19px; }
  .wz-samples { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
  .wizard .personas { flex-wrap: nowrap; }
}
/* short laptop screens: slimmer header and photo so the questions start higher */
@media (max-height: 820px) and (min-width: 901px) {
  .wizard .wz-head { padding-top: 8px; padding-bottom: 8px; }
  .wizard .wz-progress { padding-top: 10px; }
  .wizard .wz-steps { margin-top: 6px; }
  .wz-body { padding-top: 10px; }
  .wizard .form .row { gap: 10px 20px; }
}
@media (max-width: 900px) {
  .app { padding: 12px 12px 24px; gap: 14px; }
  .wizard { min-height: 0; }
  .wizard .wz-head { padding: 10px 14px; }
  .wz-samples { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .wizard .personas { flex-wrap: nowrap; }
  .wz-body { grid-template-columns: 1fr; gap: 10px; padding: 10px 14px 4px; }
  .wizard .wz-progress { padding-left: 14px; padding-right: 14px; }
  .wizard .wz-photo { position: relative; top: auto; min-height: 0; }
  .wizard .wz-photo > div { padding: 10px 14px; }
  .wizard .wz-photo h4 { font-size: 19px; }
  .wizard .wz-photo p { font-size: 13px; }
  .wizard .form .row { grid-template-columns: 1fr 1fr; gap: 12px 12px; }
  .wizard .run-bar.wz-nav { padding: 10px 14px; }
  .wizard .wz-nav .btn { min-width: 0; flex: 1; }
  .wizard .wz-nav .spacer { display: none; }
  .wizard .wz-nav #run { flex: 2 1 auto; }
}
@media (max-width: 560px) {
  .wizard .form .row { grid-template-columns: 1fr; }
  .wizard .wz-photo { background-image: none !important; background: var(--navy); }
  .wizard .wz-photo::before { display: none; }
}
/* phones: on the Household Profile page the tall wrapped header scrolls away so the questions get the screen */
@media (max-width: 900px) { body:has(main.app) .topbar { position: static; } }

/* v0.18.0: Household Profile page. The paged question wizard is a box in the LEFT 75% of the screen, starting right
   under the header; the Household digital twin (live summary plus the sample household chooser) is a sticky RIGHT 25%
   column. Results and the copilot stay full width below. Tablets and phones stack the wizard, then the summary. */
.intake { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.intake > .wizard { grid-column: auto; min-width: 0; }
.wizard .wz-head { flex-wrap: nowrap; }
.wizard .wz-title { margin: 0; font-size: 19px; color: var(--navy); white-space: nowrap; }
.wz-body { grid-template-columns: 1fr; gap: 12px; align-content: start; }
.wizard .wz-photo { position: relative; top: auto; min-height: 0; }
.wizard .wz-photo > div { padding: 12px 16px; }
.wizard .wz-photo h4 { font-size: 20px; }
.wizard .form .row { grid-template-columns: repeat(auto-fill, minmax(max(210px, calc((100% - 60px) / 4)), 1fr)); }
.twin { min-width: 0; display: flex; flex-direction: column; }
.twin .panel-h h3 { font-size: 16px; }
.twin-samples { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; background: #f7f9fb; }
.twin-samples label { font-size: 13px; font-weight: 700; color: var(--mute); }
.twin-samples select { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #ccd6e0; border-radius: 8px; background: #fff; color: var(--ink); width: 100%; }
.twin-samples select:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
.twin-b { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.tw { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.tw.ok { border-left-color: var(--navy); }
.tw.cur { border-left-color: var(--brass); background: #fffaf0; }
.tw-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tw-h .linkbtn { font-size: 13px; text-decoration: none; color: var(--navy); text-align: left; }
.tw-h .linkbtn:hover { text-decoration: underline; }
.tw-ok { color: var(--good); font-weight: 800; font-size: 13px; }
.tw dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; margin: 4px 0 0; font-size: 13px; }
.tw dt { color: var(--mute); white-space: nowrap; }
.tw dd { margin: 0; font-weight: 700; text-align: right; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 1101px) and (min-height: 700px) { .twin { position: sticky; top: 74px; } }
@media (max-height: 820px) and (min-width: 1101px) { .twin .panel-h { padding-top: 9px; padding-bottom: 9px; } .twin-samples { padding: 8px 12px; } .tw dl { font-size: 13px; line-height: 1.4; } .tw { padding: 4px 9px; } .twin-b { gap: 5px; padding: 6px 12px 8px; } }
@media (max-width: 1100px) { .intake { grid-template-columns: minmax(0, 1fr); } .twin-b { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
@media (max-width: 900px) { .intake { gap: 14px; } .wizard .wz-title { font-size: 17px; } }

/* v0.19.0: compact Household Profile pane. The left pane is sized to its content (no full-screen stretch); every
   question of a step fits on one screen at 1280x800 and up: slim photo banner, tighter spacing, 40px inputs (15px text),
   up to 4 per row, and long questions span 2 columns. Back / Next sit at the bottom of the pane (pinned to the screen
   bottom only on short or narrow screens). Saved / Saving indicator and Start over in the pane header. */
.wizard { min-height: 0; }
.wizard .wz-head { padding: 9px 18px; gap: 12px; }
.wizard .wz-title { font-size: 18px; }
.save-state { font-size: 13px; font-weight: 700; color: var(--mute); white-space: nowrap; }
.save-state.ok { color: var(--good); }
.save-state.busy { color: var(--steel); }
.save-state.bad { color: var(--bad); }
.wz-reset { font-size: 13px; white-space: nowrap; }
.wizard .wz-progress { padding: 8px 18px 0; }
.wizard .wz-steps { margin-top: 6px; }
.wizard .wz-dot b { width: 26px; height: 26px; font-size: 13px; }
.wizard .wz-dot span { font-size: 13px; }
.wz-body { flex: none; padding: 8px 18px 6px; gap: 8px; }
.wizard .wz-photo { min-height: 0; border-radius: 10px; border-bottom-width: 2px; }
.wizard .wz-photo > div { padding: 7px 14px; display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.wizard .wz-photo .eyebrow { font-size: 13px; flex-basis: 100%; }
.wizard .wz-photo h4 { font-size: 17px; margin: 0; }
.wizard .wz-photo p { font-size: 13px; }
.wizard .form.panel-b { padding: 2px 0 4px; }
.wizard .form .row { grid-template-columns: repeat(auto-fill, minmax(max(190px, calc((100% - 48px) / 4)), 1fr)); gap: 8px 16px; grid-auto-flow: row dense; }
/* v1.4.1: the Guard and Reserve groups start on their own row (no back-filling above their headings) */
.wizard .form #step_pay .row, .wizard .form #step_benefits .row, .wizard .form #step_spouse .row { grid-auto-flow: row; }
.wizard .form label { font-size: 13.5px; gap: 3px; line-height: 1.3; }
.wizard .form label.full { grid-column: span 2; }
.wizard .form label.check { font-size: 14px; min-height: 40px; }
.wizard .form input, .wizard .form select { font-size: 15px; padding: 8px 11px; min-height: 40px; border-radius: 9px; }
.wizard .form label.full select, .wizard .form label.full input { max-width: none; }
.wizard .wz-sub, .wizard .form .full.wz-sub { margin-top: 2px; padding-top: 8px; font-size: 13px; }
.wizard #holdsum { font-size: 13px; }
.wizard .stepErr { margin-top: 6px; }
.wizard #review { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wizard .rv { padding: 7px 12px; }
.wizard .rv-list { font-size: 13px; gap: 1px 12px; }
.wizard .run-bar.wz-nav { position: static; margin-top: 0; padding: 9px 18px; box-shadow: none; }
.wizard .wz-nav .btn { padding-top: 9px; padding-bottom: 9px; font-size: 15px; }
.wizard #review { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* the Review step lists every answer, so its Run bar stays pinned to the bottom of the screen */
.wizard.on-review .run-bar.wz-nav { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -6px 16px rgba(11,37,69,.08); }
@media (max-height: 699px), (max-width: 900px) { .wizard .run-bar.wz-nav { position: sticky; bottom: 0; box-shadow: 0 -6px 16px rgba(11,37,69,.08); } }
@media (max-width: 560px) { .wizard .form label.full { grid-column: 1 / -1; } .wizard .wz-head { flex-wrap: wrap; } .wizard .wz-head .spacer { display: none; } }
@media (max-width: 900px) { .wizard .form .row { grid-template-columns: 1fr 1fr; } .wizard .form label.full { grid-column: 1 / -1; } }
@media (max-width: 560px) { .wizard .form .row { grid-template-columns: 1fr; } }
/* v1.9.14: the pay grade list is two columns wide on wider screens so 'O-1E (prior enlisted/warrant)' shows in full (CLO wording review, 261101) */
.wizard .form label.wide { grid-column: span 2; }
@media (max-width: 560px) { .wizard .form label.wide { grid-column: auto; } }

/* v0.17.0: text and email sign-in codes (primary options), "Other ways to sign in", setup choices, step-up */
.mfa-primary { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 14px 0 6px; }
.mfa-primary form { margin: 0; max-width: none; }
.mfa-choice { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 18px; font-size: 17px; text-align: left; }
.mfa-choice-to { font-size: 14px; font-weight: 600; opacity: .9; }
.mfa-sub { font-size: 15px; margin: 22px 0 8px; color: var(--navy); }
.mfa-ways { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.mfa-way { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; text-decoration: none; color: var(--navy); background: #fff; }
.mfa-way:hover { border-color: var(--brass); }
.mfa-way strong { display: flex; align-items: center; gap: 8px; }
.mfa-tip { max-width: 420px; margin-top: 14px; }
.mfa-opts { display: flex; flex-direction: column; gap: 14px; max-width: 420px; margin-top: 12px; }
.mfa-opt { border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: 10px; padding: 12px 14px; margin: 0 !important; }
.mfa-opt h2 { font-size: 16px; margin: 0; }
.mfa-opt p { margin: 0; }
.mfa-resend { margin-top: 12px !important; }
.mfa-resend .linkbtn[disabled] { color: var(--muted, #6b7785); cursor: default; text-decoration: none; }
.pk-list li.pk-col { flex-direction: column; align-items: flex-start; }
.mfa-warn { background: #fff8e8; border: 1px solid #f0dfb4; border-radius: 10px; padding: 10px 12px; max-width: 760px; }

/* v0.17.2: "My Accounts" top-nav dropdown (My Accounts, Security) */
.nav-dd { position: relative; }
.nav-dd-btn { font: inherit; font-weight: 600; color: #dfe7f1; background: none; border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-dd-btn::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s; }
.nav-dd-btn.active, .nav-dd-btn:hover, .nav-dd.open .nav-dd-btn { background: rgba(255,255,255,.1); color: #fff; }
.nav-dd-btn:focus-visible, .nav-dd-menu a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.nav-dd.open .nav-dd-btn::after { transform: rotate(180deg); }
.nav-dd-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; padding: 6px; margin-top: 4px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(11,37,69,.22); z-index: 30; }
.nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.topbar nav .nav-dd-menu a { display: block; color: var(--navy); padding: 9px 12px; border-radius: 6px; white-space: nowrap; }
.topbar nav .nav-dd-menu a:hover, .topbar nav .nav-dd-menu a:focus-visible { background: var(--bg); color: var(--navy); }
.topbar nav .nav-dd-menu a[aria-current="page"] { background: rgba(201,162,39,.16); color: var(--navy); font-weight: 800; }
.nav-dd.open .nav-dd-menu { display: block; }
@media (hover: hover) and (min-width: 961px) { .nav-dd:hover .nav-dd-menu { display: block; } }

/* v0.20.0 owner-only access review page */
.admin-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14px; }
.admin-table th, .admin-table td { border: 1px solid #d9dee6; padding: 6px 10px; text-align: left; }
.admin-table th { background: #1f3a5f; color: #fff; font-weight: 600; }
.admin-table tr:nth-child(even) td { background: #f4f6f9; }

/* v0.21.0: Help (User Manual and FAQs) */
.help-page { max-width: 1240px; margin: 0 auto; padding: 22px 22px 40px; }
.help-head h1 { margin: 0 0 4px; font-size: 28px; color: var(--navy); }
.help-head p { margin: 0 0 18px; color: var(--mute); }
.help-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.help-toc { position: sticky; top: 74px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; max-height: calc(100vh - 96px); overflow-y: auto; }
.help-toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin: 0 0 8px; }
.help-toc ol { margin: 0; padding-left: 18px; font-size: 14px; }
.help-toc ol ol { padding-left: 14px; font-size: 13px; margin: 2px 0 6px; list-style: none; }
.help-toc li { margin: 3px 0; }
.help-toc a { color: var(--navy); text-decoration: none; }
.help-toc a:hover { text-decoration: underline; }
.help-article { min-width: 0; }
.help-sec { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 18px; scroll-margin-top: 80px; }
.help-sec h2 { margin: 0 0 10px; font-size: 22px; color: var(--navy); }
.help-sec h3 { margin: 18px 0 6px; font-size: 16.5px; color: var(--navy); scroll-margin-top: 80px; }
.help-sec p, .help-sec li { font-size: 15px; line-height: 1.6; }
.help-sec li { margin: 4px 0; }
.help-dl { display: grid; grid-template-columns: minmax(180px, 28%) minmax(0, 1fr); gap: 6px 18px; margin: 6px 0 10px; font-size: 14.5px; }
.help-dl dt { font-weight: 700; color: var(--navy); }
.help-dl dd { margin: 0; }
.help-fig { margin: 12px 0 14px; }
.help-fig img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; display: block; }
.help-fig figcaption { font-size: 13px; color: var(--mute); margin-top: 6px; }
.help-note { border-left: 3px solid var(--steel); background: #f7f9fb; padding: 8px 12px; border-radius: 0 8px 8px 0; font-size: 14px; }
.help-top { margin: 12px 0 0; font-size: 13px; }
.faq { max-width: 900px; }
.faq-group { margin-bottom: 20px; }
.faq-group h2 { font-size: 18px; color: var(--navy); margin: 0 0 8px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.faq-item summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--navy); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--steel); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 10px; }
.faq-a { padding: 0 16px 12px; font-size: 15px; line-height: 1.6; }
.faq-a p { margin: 0; }
@media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; max-height: none; } .help-dl { grid-template-columns: 1fr; gap: 2px; } .help-dl dd { margin-bottom: 8px; } .help-page { padding: 14px 12px 30px; } }
/* v0.23.0: linked facts in the Household Profile and the digital twin */
.form label.has-lk { position: relative; }
.form input.is-linked { background: #eef4fa; border-color: #9fb3c8; color: var(--navy); font-weight: 700; }
.lk { display: block; font-size: 13px; line-height: 1.35; color: var(--mute); margin-top: 2px; font-weight: 500; }
.lk.full { margin-top: 0; }
.lk .linkbtn { font-size: 13px; padding: 0; }
.lk-src { font-weight: 700; color: var(--navy); }
.lk-src.derived { color: #7a5c00; }
.lk-total { font-size: 14px; line-height: 1.4; color: var(--navy); background: #f3f6fa; border-radius: 6px; padding: 6px 10px; margin: 0 0 10px; } /* v1.9.14: Total from linked accounts (step 3) */
.lk-total .muted { font-size: 13px; }
.lk-src.typed { color: var(--ink); }
.lk.conflict { color: var(--warn); }
.lk-warn { font-weight: 700; }
.tw-linked { font-size: 13px; background: #eef4fa; border: 1px solid #c9d7e5; border-radius: 10px; padding: 6px 9px; color: var(--ink); }
.tw-linked.stale { background: #fff6e0; border-color: #e7c66b; }
.tw-legend { color: var(--mute); font-size: 13px; margin-top: 2px; }
.tw-src { font-size: 13px; }
.linked-used { margin: 0 0 10px; }

/* v0.24.0 Spending in the digital twin */
.spend-list { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 3px; }
.spend-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: .85rem; }
.spend-list .sp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spend-list .sp-amt { font-variant-numeric: tabular-nums; }
.sp-tag { font: inherit; font-size: 13px; border-radius: 999px; padding: 1px 8px; cursor: pointer; border: 1px solid #9fb8d6; background: #eef4fb; color: #1d3f66; min-width: 88px; }
.spend-list li.non .sp-tag { background: #f6f1e7; border-color: #d8c49a; color: #6a4e12; }
.sp-tag.changed { box-shadow: inset 0 0 0 1px currentColor; font-weight: 600; }
.sp-tag:focus-visible { outline: 2px solid #1d6fd1; outline-offset: 1px; }

/* v1.2.0 "2. Retirement Pay-Spending": the Spending summary now sits inside the step-2 card, and the category list is two drop-downs.
   Everything in the block uses the summary's own type (Manrope 12.5px, labels in --mute, values bold in --ink). */
.tw-spend { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.tw-spend .tw-h b { font-size: 13px; font-weight: 800; color: var(--navy); } /* v1.2.1: same size, weight and color as the card titles (.tw-h .linkbtn) */
.tw-spend dl { margin-top: 4px; }
.sp-dd { margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
.sp-dd summary { display: flex; align-items: center; gap: 6px; padding: 5px 8px; cursor: pointer; list-style: none; border-radius: 8px; font-size: 13px; }
.sp-dd summary::-webkit-details-marker { display: none; }
.sp-dd summary::before { content: ''; flex: none; width: 6px; height: 6px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); transition: transform .12s; margin: 0 2px 0 1px; }
.sp-dd[open] summary::before { transform: rotate(45deg); }
.sp-dd summary:hover { background: #f1f5f9; }
.sp-dd summary:focus-visible, .sp-tag:focus-visible { outline: 2px solid #1d6fd1; outline-offset: 1px; }
.sp-dd .sp-lbl { font-weight: 700; color: var(--ink); }
.sp-dd .sp-cnt { margin-left: auto; color: var(--ink); background: #eef2f6; border-radius: 999px; padding: 0 8px; font-weight: 700; }
.sp-dd .spend-list { margin: 0; padding: 2px 8px 8px; gap: 2px; }
.tw-spend .spend-list li { font-size: 13px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 8px; }
.tw-spend .sp-name { color: var(--mute); white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.tw-spend .sp-amt { font-weight: 700; color: var(--ink); text-align: right; }
.tw-spend .sp-none .sp-name { grid-column: 1 / -1; }
.tw-spend .sp-tag { font-family: inherit; font-size: 13px; font-weight: 700; min-width: 92px; padding: 1px 8px; }
.sp-note { margin: 6px 0 0; font-size: 13px; color: var(--mute); line-height: 1.4; }
@media (max-height: 820px) and (min-width: 1101px) { .sp-dd, .sp-dd summary, .tw-spend .spend-list li { font-size: 13px; } .tw-spend .sp-tag { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .sp-dd summary::before { transition: none; } }

/* v0.25.0 household ontology and alerts on the results */
.onto { margin: 10px 0; width: 100%; box-sizing: border-box; flex: 1 1 100%; }
.onto .alerts, .onto .alert { width: 100%; box-sizing: border-box; }
.onto .alerts { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.onto .alert { padding: 8px 12px; border-radius: 8px; font-size: .9rem; border: 1px solid #d8c49a; background: #fbf6ea; color: #4d3a10; max-width: none; font-weight: 400; }
.onto .alert.info { border-color: #b9cde6; background: #f0f5fb; color: #1d3f66; }
.onto-d { font-size: .88rem; border: 1px solid #dde3ea; border-radius: 8px; padding: 6px 12px; background: #fff; }
.onto-d summary { cursor: pointer; font-weight: 600; color: #1d3f66; }
.onto-counts { list-style: none; padding: 0; margin: 4px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; }
.onto-counts li { background: #eef2f6; border-radius: 999px; padding: 2px 10px; font-size: 13px; }

/* ---------- v0.26.0 results: plan at a glance (Level 1), See why (Level 2), Full details (Level 3) ---------- */
/* results and copilot side by side (about 75/25) down to 1101px; the copilot drops below on narrower screens */
.app { grid-template-columns: minmax(0, 3fr) minmax(290px, 1fr); }
@media (max-width: 1280px) { .app { grid-template-columns: minmax(0, 3fr) minmax(290px, 1fr); } .copilot { grid-column: auto; position: sticky; top: 74px; height: calc(100vh - 96px); } }
@media (max-width: 1100px) { .app { grid-template-columns: minmax(0, 1fr); } .copilot { grid-column: 1 / -1; position: static; height: 560px; } }
.results { gap: 12px; }
.rhead { padding: 10px 16px; }
.rhead h2 { font-size: 19px; }
.rh-note { color: #c8d3e0; }
.glance { display: flex; flex-direction: column; gap: 10px; }
.glance-top h3 { margin: 0 0 2px; font-size: 17px; color: var(--navy); }
.why-line { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink, #1b2a3a); }
.g-notes { list-style: none; margin: 0; padding: 8px 12px; border: 1px solid #e6cf86; background: #fbf6e6; border-radius: 10px; font-size: 13px; }
.g-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.g-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g-card.g-actions { margin-top: 12px; }
.g-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.g-head h4 { margin: 0; font-size: 14px; color: var(--navy); }
.g-body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.g-big { font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.g-sub { font-size: 13.5px; line-height: 1.4; }
.g-light { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 2px 9px; white-space: nowrap; border: 1px solid transparent; }
.g-light.good { background: #e5f4ea; color: #1d6b3a; border-color: #b9dfc6; }
.g-light.warn { background: #fdf1d8; color: #8a5a00; border-color: #efd28f; }
.g-light.bad { background: #fbe4e2; color: #a12a1f; border-color: #efb9b3; }
.g-light.info { background: #e8eef5; color: var(--navy); border-color: #cdd9e6; }
.g-bars { display: grid; gap: 4px; margin-top: 2px; }
.g-bar { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 6px; font-size: 13px; }
.g-bl { color: var(--mute); font-weight: 700; }
.g-stack { display: flex; height: 18px; border-radius: 5px; overflow: hidden; background: #eef2f6; }
.g-stack i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; font-weight: 800; color: #fff; min-width: 2px; }
.g-stocks { background: var(--navy); } .g-bonds { background: #5B7A99; } .g-cash { background: #b9c7d6; }
.g-stack .g-cash { color: var(--navy); }
.g-legend { display: flex; gap: 10px; font-size: 13px; color: var(--mute); }
.g-legend span { background: none; display: inline-flex; align-items: center; gap: 4px; }
.g-legend span::before { content: ''; width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.g-legend .g-stocks::before { background: var(--navy); } .g-legend .g-bonds::before { background: #5B7A99; } .g-legend .g-cash::before { background: #b9c7d6; }
.g-meter { position: relative; height: 10px; background: #eef2f6; border-radius: 999px; margin-top: 4px; }
.g-meter i { position: absolute; inset: 0 auto 0 0; background: var(--brass); border-radius: 999px; }
.g-meter b { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--navy); }
.g-scale { font-size: 13px; }
.g-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 1.4; }
.g-steps li::marker { font-weight: 800; color: var(--brass); }
.g-ctl { display: flex; gap: 8px; flex-wrap: wrap; }
.g-btn { font: inherit; font-size: 13px; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.g-btn:hover { border-color: var(--brass); }
.g-btn:focus-visible, .full-btn:focus-visible, .term:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.g-btn.ghost { color: var(--steel); }
.caret { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s; }
[aria-expanded="true"] > .caret { transform: rotate(90deg); }
.g-whys { display: grid; gap: 10px; }
.g-whys:not(:has(.g-why:not([hidden]))) { display: none; }
.g-why { background: #f7f9fb; border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; line-height: 1.45; }
.g-why h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--navy); }
.g-why h4 + h4, .g-why table + h4 { margin-top: 10px; }
.g-drivers, .g-steps-why { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.g-tbl, .g-src { margin-top: 8px; max-width: 640px; }
.src-tag { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: #e8eef5; color: var(--navy); white-space: nowrap; }
.src-tag.linked { background: #e5f4ea; color: #1d6b3a; } .src-tag.derived { background: #fdf1d8; color: #8a5a00; }
.full { padding: 0; }
.full-h { margin: 0; }
.full-btn { width: 100%; text-align: left; font: inherit; background: none; border: 0; padding: 12px 16px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; color: var(--navy); font-size: 15px; }
.full-btn .caret { align-self: center; }
.full-b { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; }
.full-b[hidden] { display: none; }
.full-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.onto-facts { margin-top: 8px; font-size: 13px; }
.onto-facts code { font-size: 13px; }
/* glossary tooltips: focusable, shown on hover or keyboard focus, Esc closes */
.term { border-bottom: 1px dotted currentColor; cursor: help; position: relative; }
.term .gtip { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: max-content; max-width: 280px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 400; line-height: 1.4; padding: 7px 10px; border-radius: 8px; box-shadow: 0 6px 18px rgba(11,37,69,.25); text-transform: none; letter-spacing: 0; white-space: normal; }
.term:hover .gtip, .term:focus .gtip { display: block; }
.rhead .term, .g-light .term { border-bottom-color: rgba(255,255,255,.6); }
@media (max-width: 900px) { .g-row { grid-template-columns: 1fr; } }
/* My Accounts suggestions (v0.26.0): plain headline first, See why, then Full details */
.sug .g-ctl { margin-top: 4px; }
.sug .g-why { margin-top: 6px; }
.sug .g-why details { margin-top: 6px; }
.sug .g-why summary { cursor: pointer; font-weight: 700; color: var(--navy-2, #13315C); }
.sug-lead { margin: 0 0 10px; font-size: 14px; }
.full-chips .chip { background: #eef2f6; color: var(--navy); border: 1px solid var(--line); }
.full-chips .chip.brass { background: #f7f1dc; color: #6b5410; border-color: #e6cf86; }
.full-chips .chip.ok { background: #e5f4ea; color: #1d6b3a; border-color: #b9dfc6; }
@media (min-width: 1101px) { .full-b .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } .full-b .kpi .v { font-size: 22px; } }

/* v0.27.1: longer step labels (TSP/Investments, VA/Pensions) stay on one line; the label shrinks a little before it could wrap or collide */
.wz-steps > li { min-width: 0; }
.wz-dot span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; }
@media (min-width: 901px) and (max-width: 1180px) { .wizard .wz-dot span { font-size: 13px; letter-spacing: -0.2px; } }

/* ---------- v0.28.0 Your assumptions: Goals and assumptions step, glance line, Assumptions used card, Change drawer ---------- */
.as-row { display: grid; grid-template-columns: minmax(200px, 38%) 1fr; gap: 2px 14px; align-items: center; padding: 4px 0 2px; border-top: 1px dashed var(--line); }
.as-row .as-l { font-size: 13px; font-weight: 700; color: var(--navy); }
.as-c { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wizard .form .as-c input, .as-dlg .as-c input { width: 84px; padding: 6px 8px; text-align: right; }
.as-unit { font-size: 13px; color: var(--mute); }
.as-tag { font-size: 13px; font-weight: 800; border-radius: 999px; padding: 1px 9px; white-space: nowrap; border: 1px solid transparent; }
.as-tag.sug { background: #eef2f6; color: var(--navy); border-color: #d6e0ea; }
.as-tag.mine { background: #f7f1dc; color: #6b5410; border-color: #e6cf86; }
.as-hint { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; color: var(--mute); }
.as-hint .as-sug { font-weight: 800; color: var(--navy); }
.as-eff { color: var(--ink); font-weight: 600; }
.as-warn { color: #8a5a00; font-weight: 700; font-size: 13px; margin: 2px 0 0; }
.as-row .err { grid-column: 1 / -1; }
.as-adv { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 6px; }
.as-adv > summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--navy-2); padding: 2px 0; }
.as-adv > summary:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.as-adv-body { display: grid; gap: 0; }
.as-adv .as-row:first-child { border-top: 0; }
.g-assume { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.g-assume .linkbtn { font-size: 13px; }
#gAssumed:empty, #gAssumed.hidden { display: none; }
.g-assume .caret { display: inline-block; vertical-align: middle; }
.g-assume .linkbtn { text-decoration: none; }
.g-assume .linkbtn:hover { text-decoration: underline; }
.as-tbl td, .as-tbl th { vertical-align: middle; }
.as-acts { white-space: nowrap; }
.as-acts .linkbtn + .linkbtn { margin-left: 10px; }
.src-tag.client { background: #f7f1dc; color: #6b5410; }
.g-why .g-btn { margin-top: 8px; }
.fixed-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.as-dlg { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; width: min(600px, 94vw); color: var(--ink); box-shadow: 0 20px 60px rgba(11, 37, 69, .35); }
.as-dlg::backdrop { background: rgba(11, 37, 69, .55); }
.as-dlg h3 { margin: 0 0 4px; }
.as-dlg-btns { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.as-dlg .as-row { grid-template-columns: 1fr; }
.as-dlg .as-adv { margin-top: 6px; }
@media (max-width: 700px) { .as-row { grid-template-columns: 1fr; } }

/* ---------- v0.29.0 Allocation preferences: range rows, tradeoff note ---------- */
.as-range .as-c input { width: 66px; }
.as-frame { font-size: 13px; color: var(--mute); font-style: italic; margin-top: 3px; }
.g-range { margin: 8px 0 0; padding: 10px 14px; border: 1px solid #e6cf86; border-left: 4px solid var(--brass); background: #fbf7e8; border-radius: var(--radius); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.g-range.hidden { display: none; }
.g-range h4 { margin: 0 0 4px; font-size: 14px; color: var(--navy); }
.g-range p { margin: 4px 0; }
.g-range .g-range-trade { font-weight: 600; }

/* Version 1.0: federal civilian and Both clients. Compact additions only; the wizard grid and card layout are unchanged. */
.fed-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; padding-top: 10px; }
.fed-more > summary { cursor: pointer; font-weight: 700; color: var(--navy-2, #13315C); font-size: 13.5px; }
#specialMsg { font-size: 13.5px; }
.g-card.g-pension { margin-top: 12px; }
.g-card.g-pension .g-body { flex: 0 0 auto; }
.civ-h { margin: 12px 0 4px; font-size: 14px; color: var(--navy); }
.civ-tbl, .civ-timing { width: 100%; max-width: none; }
.civ-timing tr.civ-plan td { background: #f7f1dc; font-weight: 700; }
.src-tag.civ-ok { background: #e5f4ea; color: #1d6b3a; } .src-tag.civ-derived { background: #fdf1d8; color: #8a5a00; } .src-tag.civ-unv { background: #fbe4e2; color: #a12a1f; }
.civ-rules summary { cursor: pointer; font-weight: 700; color: var(--navy-2, #13315C); font-size: 13.5px; margin-top: 10px; }
.ver-line { flex-basis: 100%; font-size: 13px; color: var(--mute); }
.footer .ver-line { color: #b9c6d6; } /* v1.5.2: readable on the navy footer (WCAG AA) */

/* ---------- v1.3.0 Budgeting: 12-month table (3 actual + 9 planned), compact cards, accessible variance colors ---------- */
.bd-page { max-width: 1480px; margin: 0 auto; padding: 18px 22px 30px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.bd-page > * { min-width: 0; }
.bd-top .wz-head { padding-bottom: 10px; }
.bd-h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--navy); }
.bd-intro { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; max-width: 900px; }
.bd-bar { flex-wrap: wrap; }
.bd-btn { padding: 7px 12px; font-size: 13px; }
/* v1.8.9 Free Budgeting Option A (read-only banner and locked controls) */
.bd-free { border-left: 3px solid var(--steel); }
.bd-free p { margin: 0 0 8px; }
.bd-free-act { display: flex; gap: 8px; flex-wrap: wrap; }
.bd-free #bdFreeLine { margin: 0; }
#bdExport { margin-right: 10px; }
.bd-page .bd-locked { cursor: not-allowed; opacity: .7; }
.bd-page .linkbtn.bd-locked, .bd-page .linkbtn.bd-locked:hover { color: var(--muted, #6b7785); text-decoration: none; }
#bdFree[hidden], #bdFree [hidden], #bdExport[hidden] { display: none !important; }   /* .btn and .panel set display, which would override the hidden attribute */
.bd-add select { font: inherit; font-size: 13px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); max-width: 260px; }
.bd-scroll { overflow-x: auto; border-bottom: 1px solid var(--line); }
.bd-scroll:focus-visible { outline: 2px solid var(--steel); outline-offset: -2px; }
.bd-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1380px; font-size: 13.5px; }
.bd-table th, .bd-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; font-weight: 400; }
.bd-table .bd-first { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; min-width: 205px; max-width: 205px; border-right: 1px solid var(--line); }
.bd-table thead th { background: #f1f4f8; color: var(--navy); font-weight: 800; position: sticky; top: 0; z-index: 1; }
.bd-table thead .bd-first { z-index: 3; background: #f1f4f8; }
.bd-grp th { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; text-align: center; }
.bd-grp .bd-as-is { background: #e9eef5; } .bd-grp .bd-to-be { background: #f7f1dc; }
.bd-grp td.bd-first { background: #f1f4f8; }
.bd-months .bd-mo { display: block; font-size: 13px; } .bd-months .bd-sub { display: block; font-size: 13px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.bd-months .bd-now { background: #fbf7e8; box-shadow: inset 0 -3px 0 var(--brass); }
.bd-table td.bd-actual { background: #fafbfd; }
.bd-table td.bd-now { background: #fffdf5; }
.bd-gh th, .bd-gh td { background: #eef2f7; color: var(--navy); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; text-align: left; }
.bd-gh .bd-tag { margin-left: 10px; font-size: 13px; font-weight: 700; color: var(--mute); text-transform: none; letter-spacing: 0; }
.bd-name { font-weight: 700; color: var(--ink); display: inline-block; margin-right: 8px; }
.bd-hint { display: block; font-size: 13px; color: var(--mute); font-weight: 400; margin-top: 2px; }
.bd-none { color: var(--mute); font-style: italic; }
.bd-amt { display: block; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bd-line { display: block; font-size: 13px; color: var(--mute); line-height: 1.35; min-height: 0; }
.bd-plan { white-space: nowrap; }
.bd-in { width: 86px; max-width: 100%; text-align: right; font: inherit; font-weight: 700; padding: 6px 7px; border: 1px solid #c3ced9; border-radius: 8px; background: #fff; color: var(--ink); font-variant-numeric: tabular-nums; }
.bd-in::placeholder { color: #8a97a5; font-weight: 400; }
.bd-in:focus-visible { outline: 2px solid var(--steel); outline-offset: 1px; border-color: var(--steel); }
.bd-in[aria-invalid="true"] { border-color: var(--bad); background: #fdecea; }
.bd-diff { display: inline-block; font-weight: 800; font-size: 13px; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.bd-diff.bad { background: #fdecea; color: #8c1d18; border: 1px solid #f0b8b3; }
.bd-diff.good { background: #e6f4ec; color: #1b5e3e; border: 1px solid #a9d6bd; }
.bd-diff.ok { background: #eef1f5; color: var(--mute); }
.bd-flag-bad { box-shadow: inset 3px 0 0 #b23b3b; } .bd-flag-good { box-shadow: inset 3px 0 0 #2e7d5b; }
.bd-sub-tot th, .bd-sub-tot td { background: #f7f9fb; font-weight: 800; border-top: 1px solid #cfd8e2; }
.bd-sub-tot .bd-first { background: #f7f9fb; }
.bd-total th, .bd-total td { background: #eef2f7; border-top: 2px solid var(--navy); }
.bd-total .bd-first, .bd-net .bd-first, .bd-income .bd-first { font-weight: 800; color: var(--navy); }
.bd-net td .bd-amt { color: var(--navy); }
.bd-income th, .bd-income td { background: #f3f8f5; }
.bd-income .bd-first { background: #f3f8f5; }
.bd-memo th, .bd-memo td { color: var(--mute); font-size: 13px; }
.bd-memo .bd-amt { font-weight: 600; color: var(--mute); }
.bd-fill { display: inline-block; vertical-align: middle; }
.bd-fill > summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--navy-2); text-decoration: underline; list-style: none; padding: 2px 4px; }
.bd-fill > summary::-webkit-details-marker { display: none; }
.bd-fill > summary:focus-visible { outline: 2px solid var(--steel); border-radius: 4px; }
.bd-fm { display: grid; gap: 4px; position: absolute; left: 8px; top: calc(100% - 8px); z-index: 6; padding: 8px; background: #fff; border: 1px solid var(--steel); border-radius: 10px; width: 196px; box-shadow: 0 10px 28px rgba(11, 37, 69, .25); }
.bd-fb { font: inherit; font-size: 13px; font-weight: 700; text-align: left; padding: 5px 8px; border: 1px solid var(--line); background: #fff; border-radius: 8px; color: var(--navy); cursor: pointer; }
.bd-fb:hover:not(:disabled) { border-color: var(--steel); } .bd-fb:disabled { opacity: .5; cursor: default; }
.bd-fp { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; }
.bd-fp .bd-fb { flex: 0 0 auto; }
.bd-pct { width: 44px; font: inherit; font-size: 13px; padding: 4px 5px; border: 1px solid #c3ced9; border-radius: 6px; text-align: right; }
.bd-legend { padding-top: 10px; }
.bd-headline { font-size: 15.5px; margin: 0 0 8px; line-height: 1.5; }
.bd-tone.bad { color: #8c1d18; } .bd-tone.good { color: #1b5e3e; } .bd-tone.ok { color: var(--navy); }
.bd-list { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.bd-list li { padding: 5px 10px; border-radius: 8px; border-left: 4px solid var(--steel); background: #f7f9fb; }
.bd-list li.bad { border-left-color: #b23b3b; background: #fdecea; color: #5c1410; }
.bd-list li.good { border-left-color: #2e7d5b; background: #e6f4ec; color: #14452d; }
.bd-ico { font-weight: 800; }
.bd-sofar { font-size: 14px; margin: 6px 0 0; }
.bd-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.bd-dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 0 0 10px; }
.bd-dl dt { color: var(--mute); font-size: 13px; } .bd-dl dd { margin: 0; font-weight: 800; color: var(--navy); text-align: right; }
.bd-set { width: 64px; font: inherit; padding: 5px 7px; border: 1px solid #c3ced9; border-radius: 8px; text-align: right; }
.bd-unc { display: grid; gap: 8px; }
.bd-ur { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bd-ur select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #c3ced9; border-radius: 8px; max-width: 100%; }
.bd-choices { margin-top: 10px; font-size: 13px; } .bd-choices summary { cursor: pointer; font-weight: 700; color: var(--navy-2); }
.bd-ch { display: flex; gap: 10px; justify-content: space-between; padding: 4px 0; }
@media (max-width: 700px) {
  .bd-page { padding: 12px 10px 24px; }
  .bd-table .bd-first { min-width: 150px; max-width: 150px; padding-left: 6px; }
  .bd-table { font-size: 13px; }
  .bd-add select { max-width: 100%; }
}
.bd-table .bd-first:has(.bd-fill[open]) { z-index: 8; }

/* v1.4.0 education-first: the plain-language notice and the panels that only exist when personalized allocation output is on */
.edu-note { margin: 10px 0; padding: 10px 14px; border-left: 4px solid var(--brass); background: #fbf7e6; border-radius: 6px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.edu-note strong { color: var(--navy); }
.chat-hero p.edu-note, .chat-hero .edu-note { max-width: 880px; color: var(--ink); margin: 8px 0 0; }
html[data-edu] .edu-hide { display: none !important; }
html[data-edu] .cols2.edu-one, html[data-edu] .cols3.edu-one { grid-template-columns: minmax(0, 1fr); }
html[data-edu] .cols3.edu-one > :nth-child(3) { grid-column: auto; }

/* v1.5.2: responsive top navigation. Every top-line item stays on screen at every width: spacing and type step down as the window
   narrows; Help and Administrator fold into a "More" menu below 1320px; below 961px a Menu (hamburger) button opens a panel with
   every item. The user's email (shortened with an ellipsis when needed) and Sign out are never pushed off the right edge.
   nav.js adds the Menu button and sets html.js-nav (v1.9.0: More is server-rendered at every width); without JavaScript the links simply wrap onto a second row. */
.topbar-inner { position: relative; gap: clamp(8px, 1.5vw, 24px); padding: 10px clamp(12px, 2vw, 28px); }
.topbar img { height: clamp(28px, 2.6vw, 34px); width: auto; }
.topbar nav { flex: 0 1 auto; min-width: 0; align-items: center; gap: clamp(0px, .3vw, 6px); margin-left: clamp(0px, 1vw, 16px); }
.topbar nav > a, .topbar .nav-dd-btn { white-space: nowrap; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.3; padding: 8px clamp(7px, .85vw, 12px); }
.topbar .user { flex: 0 1 auto; min-width: 0; max-width: clamp(96px, 14vw, 240px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar form { flex: none; }
.topbar form .btn { white-space: nowrap; padding-left: clamp(10px, 1vw, 16px); padding-right: clamp(10px, 1vw, 16px); }
.nav-toggle { display: none; }
.nav-dd-h { margin: 6px 12px 2px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.nav-dd-h:first-child { margin-top: 2px; }
.nav-dd-menu .nav-dd-h ~ .nav-dd-h { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
html:not(.js-nav) .topbar-inner { flex-wrap: wrap; }
html:not(.js-nav) .topbar nav { order: 3; width: 100%; overflow-x: auto; margin-left: 0; }
.nav-toggle { flex: none; font: inherit; font-weight: 700; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; padding: 8px 12px; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.nav-toggle:hover, .topbar.nav-open .nav-toggle { background: rgba(255,255,255,.12); }
.nav-toggle:focus-visible, .topbar nav a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; content: ""; position: relative; }
.nav-toggle .bars::before { position: absolute; top: -6px; } .nav-toggle .bars::after { position: absolute; top: 6px; }
.nav-panel-meta { display: none; }
@media (max-width: 960px) {
  .js-nav .topbar .nav-toggle { display: inline-flex; }
  .js-nav .topbar nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 8px 12px 14px; flex-direction: column; align-items: stretch; gap: 2px; background: var(--navy); border-bottom: 3px solid var(--brass); box-shadow: 0 14px 28px rgba(11,37,69,.3); max-height: calc(100vh - 72px); overflow-y: auto; z-index: 40; }
  .js-nav .topbar.nav-open nav { display: flex; }
  /* v1.9.0: the email and Sign out move into the Menu panel (nav.js puts them there) */
  .js-nav .topbar-inner > .user, .js-nav .topbar-inner > form[action="/logout"] { display: none; }
  .js-nav .topbar .nav-panel-who { display: block; margin-top: 6px; }
  .js-nav .topbar .nav-panel-signout { margin: 10px 0 0; }
  .js-nav .topbar .nav-panel-signout .btn { min-height: 44px; width: 100%; justify-content: center; }
  .js-nav .topbar nav > a, .js-nav .topbar .nav-dd-btn { font-size: 16px; padding: 12px 12px; min-height: 44px; display: flex; width: 100%; align-items: center; }
  .js-nav .topbar .nav-dd-btn { justify-content: space-between; }
  .js-nav .topbar .nav-dd-menu { position: static; margin: 2px 0 6px; min-width: 0; box-shadow: none; }
  .js-nav .topbar .nav-dd.open .nav-dd-menu { display: block; }
  .js-nav .topbar nav .nav-dd-menu a { padding: 12px; min-height: 44px; display: flex; align-items: center; }
  .js-nav .topbar .nav-panel-meta { display: block; margin: 8px 12px 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); color: #b9c6d6; font-size: 13px; overflow-wrap: anywhere; }
  .topbar .user { max-width: clamp(70px, 26vw, 200px); font-size: 13px; }
}
@media (max-width: 480px) { .nav-toggle-label { display: none; } .nav-toggle { padding: 8px 11px; } }
@media (max-width: 380px) { .topbar img { height: 26px; } .topbar-inner { gap: 6px; } .topbar form .btn { padding: 8px 9px; font-size: 13px; } }

/* v1.5.2: the educational statement at the bottom of every page, and its one-line reminder elsewhere */
.footer-statement { max-width: 1440px; margin: 12px auto 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; line-height: 1.5; color: #dbe4ef; }
.footer-statement strong { color: #fff; }
.edu-short { padding: 7px 12px; font-size: 13px; }
.edu-short a { color: var(--navy-2); font-weight: 700; }
.ack-page { max-width: 760px; }
.ack-lead { color: var(--mute); margin: 0 0 14px; }
.ack-h { font-size: 16px; margin: 0; }
.ack-statement { font-size: 16px; line-height: 1.6; margin: 0; color: var(--ink); }
.ack-form .consent-check { margin-top: 14px; }

/* ---- v1.5.6 Ask REMfolio: chat-style conversation ----
   One scrolling thread (questions right, answers left, newest at the bottom), a composer pinned under it, a question bar (previous / next /
   jump list / new conversation) and a Jump to latest button. On desktop the page is one screen: header, hero, chat, footer statement, with the
   thread as the only scroller. On phones and short windows the page scrolls as before and the chat panel is one screen tall. */
.schat { display: flex; flex-direction: column; }
.chat-body .schat .ask-help { flex: none; }
.chat-bar { flex: none; display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.chat-bar[hidden], .jump-latest[hidden] { display: none; }
.qnav { display: flex; gap: 6px; align-items: center; min-width: 0; flex: 1 1 260px; }
.qnav select { flex: 1 1 140px; min-width: 0; max-width: 440px; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid #8b9bab; border-radius: 8px; background: #fff; color: var(--ink); }
.chat-bar .btn:disabled { opacity: .55; cursor: default; }
.chat-bar .btn:focus-visible, .jump-latest:focus-visible, .ask textarea:focus-visible, .qnav select:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.thread { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-body .schat .msgs { flex: 1 1 auto; min-height: 0; position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 16px; gap: 14px; }
.chat-body .schat .msgs:focus-visible { outline: 2px solid var(--navy-2); outline-offset: -2px; }
.chat-body .schat .msgs:empty::before { content: 'Ask a question below, or pick one of the suggestions. Your conversation will appear here.'; color: var(--mute); font-size: 13px; margin: auto; text-align: center; max-width: 360px; }
.msg .qnum { display: block; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
.msg.user .qnum { color: #d7e0ea; }
.msg.bot .qnum { color: var(--mute); }
.msg:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.msg .src { color: #42607e; }
.msg.typing-msg { display: flex; align-items: center; gap: 4px; }
.jump-latest { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; background: var(--navy); color: #fff; border: 1px solid var(--brass); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(11,37,69,.28); }
.jump-latest:hover { background: var(--navy-2); }
.chat-body .schat .ask { flex: none; position: static; display: flex; align-items: flex-end; gap: 8px; padding: 10px 16px 2px; border-top: 1px solid var(--line); background: #fff; }
.chat-body .schat .ask textarea { flex: 1; min-width: 0; font: inherit; font-size: 15px; line-height: 1.4; resize: none; padding: 10px 13px; min-height: 44px; max-height: 150px; overflow-y: auto; border: 1px solid #8b9bab; border-radius: 10px; }
.chat-body .schat .ask .btn { min-height: 44px; }
.chat-body .schat .ask .count { align-self: center; }
.ask-keys { flex: none; margin: 0; padding: 2px 16px 8px; font-size: 13px; color: var(--mute); }
@media (pointer: coarse) { .ask-keys { display: none; } }
@media (min-width: 901px) and (min-height: 680px) {
  body.chat-body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  .chat-body .topbar { flex: none; }
  .chat-body .chat-page { flex: 1 1 auto; min-height: 0; width: 100%; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; padding-bottom: 10px; }
  .chat-body .schat { height: auto; min-height: 0; }
  .chat-body .chat-side { position: static; min-height: 0; overflow-y: auto; }
  .chat-body .footer { flex: none; padding: 6px 28px; font-size: 13px; }
  .chat-body .footer-inner { gap: 0 20px; }
  .chat-body .footer .ver-line { font-size: 13px; }
  .chat-body .footer-statement { margin-top: 4px; padding-top: 4px; font-size: 13px; line-height: 1.35; }
  .chat-body .chat-page { gap: 8px 18px; padding-top: 8px; padding-bottom: 8px; }
  .chat-body .ask-help { padding-bottom: 6px; font-size: 13px; line-height: 1.35; }
  .chat-body .ask-help p:first-child { display: inline; }
  .chat-body .ask-help .ask-status:not([hidden]) { display: inline; margin: 0 0 0 8px; }
  .chat-body .schat .ask { padding-top: 8px; }
  .ask-keys { padding-bottom: 4px; }
}
@media not all and (min-width: 901px) and (min-height: 680px) {
  .chat-body .schat { height: calc(100vh - 128px); height: calc(100dvh - 128px); min-height: 440px; }
}
.lbl-s { display: none; }
@media (max-width: 900px) {
  .chat-bar { padding: 6px 10px; flex-wrap: nowrap; gap: 6px; }
  .chat-bar .lbl { display: none; }
  .chat-bar .lbl-s { display: inline; }
  .chat-bar .btn-sm { padding: 6px 12px; min-height: 36px; }
  .schat.started .ask-help { display: none; }
  .chat-body .schat .msgs { padding: 10px; gap: 12px; }
  .chat-body .schat .ask { padding: 8px 10px 4px; }
  .ask-keys { padding: 0 10px 6px; }
  .qnav { flex: 1 1 auto; }
  .qnav select { max-width: none; min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; } }
/* v1.7.0 O&M status page */
.lvl { display: inline-block; font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 999px; }
.lvl-ok-tag { background: #e9f5ef; color: var(--good); }
.lvl-warn-tag { background: #fbf1dd; color: var(--warn); }
.lvl-fail-tag { background: #fdecec; color: var(--bad); }
.lvl-info-tag { background: #eaf0f6; color: var(--steel); }

/* v1.8.4 Ask REMfolio header: the intro is one line (a disclosure button) that opens the full text; the education disclaimer sits under the question box, always shown. */
.chat-body .schat .ask-help { padding-top: 0; padding-bottom: 2px; }
.ask-intro-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; margin: 0; padding: 2px 6px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; }
.ask-intro-toggle:hover { background: var(--bg); }
.ask-intro-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.ask-intro-line { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ask-intro-more { flex: none; font-weight: 700; color: var(--navy-2); }
.ask-intro-more::after { content: ''; display: inline-block; margin-left: 5px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; vertical-align: middle; }
.ask-intro-toggle[aria-expanded="true"] .ask-intro-more::after { border-top-color: transparent; border-bottom: 4px solid currentColor; border-top-width: 0; }
.ask-intro { padding: 4px 6px 2px; }
.ask-intro[hidden] { display: none; }
.chat-body .schat .ask-keys { padding-bottom: 0; }
.ask-disclaimer { flex: none; margin: 0; padding: 2px 16px 6px; font-size: 13px; line-height: 1.4; color: var(--mute); }
@media (max-width: 900px) { .ask-intro-toggle { font-size: 13px; } .ask-disclaimer { padding: 2px 10px 6px; font-size: 13px; } }

/* v1.8.5: live answers left (in the keyboard-hint line) and the optional upgrade note under the disclaimer */
.ask-keys .ask-allow{color:inherit}
.ask-keys .ask-allow.at-limit{font-weight:600}
.ask-upgrade{flex:none;margin:0;padding:0 16px 6px;font-size:13px;line-height:1.4;color:var(--mute)}
.ask-upgrade[hidden],.ask-allow[hidden]{display:none}
@media (max-width: 900px){.ask-upgrade{padding:0 10px 6px;font-size:13px}}
@media (pointer: coarse){.ask-keys:has(.ask-allow:not([hidden])){display:block}.ask-keys .ask-keys-hint,.ask-keys .ask-allow-sep{display:none}}
/* v1.8.6 install page and offline page */
.pwa-body { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.pwa-page { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 28px 20px 40px; }
.pwa-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.pwa-icon { border-radius: 16px; flex: none; }
.pwa-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 16px; }
.pwa-card h2 { font-size: 18px; }
.pwa-steps { margin: 0; padding-left: 22px; line-height: 1.7; }
.pwa-installed { background: #eaf5ef; border: 1px solid var(--good); color: var(--ink); border-radius: 10px; padding: 10px 14px; }
@media (max-width: 600px) { .pwa-head { flex-direction: column; gap: 10px; } .pwa-icon { width: 56px; height: 56px; } .pwa-page { padding: 18px 14px 32px; } }
/* v1.8.7 cost alarm: the owner's menu badge, the banner on Status and Costs, the rates form */
.nav-cost-alert { display: inline-block; background: var(--warn); color: #fff; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.nav-cost-alert:hover, .nav-cost-alert:focus { background: #8f5d14; color: #fff; }
.cost-alert { max-width: 760px; }
.cost-scroll { overflow-x: auto; }
#cost-high-rate td:first-child { white-space: nowrap; }   /* v1.8.14: keep the month (2026-10) on one line */
.cost-alert-t1, .cost-alert-t2 { background: #fdf3e1; color: #7a4f10; border-color: #efd29b; }
.cost-alert a { font-weight: 700; }
.cost-form { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.cost-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
.cost-form input { width: 9em; }
/* v1.8.8: in-app Install button (public/js/common.js) */
.app-install-btn { margin-right: 10px; white-space: nowrap; flex-shrink: 0; }
.app-install-btn[hidden] { display: none; }
.plans-faq dt { font-weight: 700; margin-top: 12px; }
.plans-faq dd { margin: 4px 0 0; }

/* v1.9.1 page frame (GUI Step 5, XC-3/XC-9): one page-header pattern on every signed-in page: a navy title band with a brass rule, as the top bar and footer.
   About and Ask REMfolio keep their photo heroes (already navy bands); the photo work waits for decision D2. */
.page-head { background: var(--navy); color: #fff; border-bottom: 3px solid var(--brass); border-radius: var(--radius); padding: 16px 22px; margin: 0 0 18px; }
.page-head h1, .page-head .wz-title, .wizard .page-head .wz-title, .help-head.page-head h1, .acct-head .page-head h1, .sec-page .page-head h1 { color: #fff; margin: 0; font-size: 22px; line-height: 1.2; }
@media (max-width: 640px) { .page-head h1, .page-head .wz-title, .wizard .page-head .wz-title, .help-head.page-head h1, .acct-head .page-head h1, .sec-page .page-head h1 { font-size: 19px; } .page-head { padding: 12px 14px; } }
.page-head p, .page-head .muted, .help-head.page-head p { color: #dfe7f1; margin: 4px 0 0; }
.page-head a, .page-head .linkbtn { color: #fff; }
.page-head .btn-outline, .page-head .btn-outline:hover { color: var(--navy); }
.page-head .linkbtn:hover, .page-head a:hover { color: var(--brass-2); }
.page-head .save-state { color: #dfe7f1; }
.page-head .save-state.ok { color: #9be3c0; }
.page-head .save-state.busy { color: #c8d3e0; }
.page-head .save-state.bad { color: #ffc2c2; }
.panel > .panel-h.page-head { border-radius: var(--radius) var(--radius) 0 0; margin: -1px -1px 0; border-bottom: 3px solid var(--brass); }
.acct-head > .page-head { margin: 0; }
.sec-page > .page-head { margin: 0; }
/* Darker brass for brass text on light backgrounds (WCAG AA 4.5:1 on white, #f5f7fa and #fffaf0); brass stays for rules, borders, buttons and text on navy. */
:root { --brass-text: #806512; }
.eyebrow, .step b, .tl .when, .g-steps li::marker { color: var(--brass-text); }
.hero .eyebrow, .page-head .eyebrow { color: var(--brass); }
.pill-ok, .lvl-ok-tag { color: #23634a; }
.lvl-info-tag { color: #43607c; }
.lvl-warn-tag { color: #7a5512; }
/* v1.9.1 (MO-4/XC-9): 13 px minimum text; every smaller size in this file was raised to 13 px. test/release191.test.js keeps it that way. */

/* v1.9.2 (D11): the Administrator group: the number of approvals waiting, and Remove a tester last, in red, set apart */
.nav-count { display: inline-block; min-width: 22px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 800; line-height: 20px; text-align: center; }
.topbar nav .nav-dd-menu a.nav-danger, .topbar nav .nav-dd-menu a.nav-danger:hover, .topbar nav .nav-dd-menu a.nav-danger:focus-visible { color: var(--bad); }
.topbar nav .nav-dd-menu a.nav-danger { border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 6px 6px; }
/* v1.9.2 (MA-7): Disconnect sits in the Linked accounts panel, away from Back and Next, styled as a destructive action */
.btn-danger-outline { color: var(--bad); border-color: #e3b7b7; }
.btn-danger-outline:hover { border-color: var(--bad); }
/* v1.9.2: the second-adult notice (CLO wording) at the top of the Second adult step */
.wizard .sp-notice { margin: 0 0 6px; padding: 10px 12px; border-left: 4px solid var(--steel); background: #eef3f8; border-radius: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
@media (max-width: 640px) { #s2 .panel-h { flex-wrap: wrap; } #s2 .panel-h .row-btns { width: 100%; } }   /* v1.9.2: Refresh and Disconnect wrap under the title on phones */

/* v1.9.4 Budgeting plan view (GUI Step 5): Fill reads as a button, Clear my plan sits at the end of the table card, away from the title;
   touch targets at least 40 px on touch screens; the six-month and one-month views (flags.budgetPlanView, off by default) */
.bd-fill > summary { display: inline-block; text-decoration: none; border: 1px solid var(--navy-2); border-radius: 6px; padding: 3px 10px; background: #fff; }
.bd-fill > summary:hover { background: #f1f4f8; }
.bd-actions { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); }
.bd-view { display: inline-flex; align-items: center; gap: 6px; }
.bd-month { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--navy); }
.bd-month select { min-height: 40px; }
.bd-table .bd-hid { display: none; }
.bd-table.bd-cmp { min-width: 0; }
@media (pointer: coarse) {
  .bd-fill > summary, .bd-fm .bd-fb, .bd-btn, #bdClear, .bd-add select { min-height: 40px; }
  .bd-fill > summary { display: inline-flex; align-items: center; }
}

/* v1.9.5 mobile pass (GUI Step 5: MA-10, MO-12, HP-18, XC-2, AR-9, HP-12) */
@media (max-width: 600px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack { border: 0; min-width: 0; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.stack tr { border: 1px solid var(--line, #d9dee6); border-radius: 8px; margin: 0 0 8px; padding: 4px 0; background: #fff; }
  table.stack td, table.stack tr:nth-child(even) td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 10px; text-align: right; overflow-wrap: anywhere; background: transparent; }
  table.stack td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left; font-weight: 700; color: var(--navy, #0b1f3a); }
  table.stack td[data-label=""]::before { content: none; }
  table.stack td[data-label=""] { justify-content: flex-end; }
  .cost-scroll { overflow-x: visible; }
}
.g-whys { grid-template-columns: minmax(0, 1fr); }
.g-why { min-width: 0; overflow-wrap: anywhere; }
.g-why table { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 900px) {
  .chips { flex-wrap: wrap; overflow-x: visible; padding-bottom: 4px; }
  .chips .chip { flex: 1 1 100%; white-space: normal; text-align: left; border-radius: 10px; }
}
@media (pointer: coarse) {
  button, .btn, select, summary, .linkbtn, .chips .chip, .wz-dot, .sp-tag, .g-btn, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="tel"], input:not([type]) { min-height: 40px; }
  .linkbtn, summary, .g-btn, .sp-tag { display: inline-flex; align-items: center; }
  .ask-intro-toggle, .topbar-inner > a:first-child, .panel-h > a { min-height: 40px; }
  .panel-h > a { display: inline-flex; align-items: center; }
  .topbar-inner > a:first-child { display: inline-flex; align-items: center; }
}
.wz-more { position: relative; display: inline-block; }
.wz-more > summary { list-style: none; cursor: pointer; padding: 2px 10px; border: 1px solid var(--line, #d9dee6); border-radius: 6px; background: #fff; color: var(--navy, #0b1f3a); font-weight: 800; line-height: 1; }
.wz-more > summary::-webkit-details-marker { display: none; }
.wz-more > summary:focus-visible { outline: 2px solid var(--steel, #3b6ea5); }
.wz-more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--line, #d9dee6); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 6px; min-width: 140px; }
.page-head .wz-more-menu .wz-reset, .wz-more-menu .wz-reset { display: block; width: 100%; text-align: left; padding: 8px 10px; color: var(--danger, #b42318); font-weight: 700; }
.page-head .wz-more-menu .wz-reset:hover { color: var(--danger, #b42318); background: #f7f9fb; }

/* v1.9.5-r5 (D8, CEO-approved and CLO-cleared): the REM figure on About with its caption directly under it */
.rem-fig { margin: 0; }
.rem-fig figcaption { font-size: 13px; color: var(--mute); margin-top: 8px; }

/* v1.9.8 quick wins (App Change Plan 261101, item 1; CEO Q2 A and Q3 A): Ask REMfolio has no side column. The first 4 suggestions are ONE compact row of
   tap-to-ask buttons above the question box at every width (4 equal columns, no sideways scrolling; on narrow screens a long question shows its first 3 lines,
   with the full question in the button's title and accessible name), the conversation uses the full page width, and "How answers are guarded" is a fold-out
   under the question box with its words unchanged. */
.chat-page, .chat-body .chat-page { grid-template-columns: minmax(0, 1fr); }
.chips, .chat-body .schat .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 8px 16px 0; }
.chips .chip { display: flex; align-items: center; min-width: 0; white-space: normal; text-align: left; border-radius: 10px; padding: 6px 10px; line-height: 1.3; }
.chips .chip-t, .chips .chip-s { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }   /* v1.9.8-b: 3 lines at every width (2 cut one question between 901 and about 1100 px) */
.chips .chip-s { display: none; }   /* v1.9.8-b (CLO): the short label is for phones only */
.chips .chip:hover { border-color: var(--brass); background: #fffaf0; }
.chips .chip:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.ask-guard { flex: none; margin: 0 16px 6px; font-size: 13px; color: var(--ink); }
.ask-guard > summary { cursor: pointer; font-weight: 700; color: var(--navy-2); padding: 2px 0; }
.ask-guard > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.ask-guard-b { max-height: 40vh; overflow-y: auto; padding: 4px 0 2px; }
.ask-guard-b ul { margin: 0; padding-left: 18px; }
.ask-guard-b li { margin: 3px 0; }
.ask-guard-b p { margin: 6px 0 0; }
@media (max-width: 900px) {
  .chips, .chat-body .schat .chips { gap: 4px; padding: 6px 10px 0; }
  .chips .chip { padding: 4px 6px; }
  .chips .chip-t { -webkit-line-clamp: 3; line-clamp: 3; }
  .chips .chip.has-s .chip-t { display: none; }
  .chips .chip.has-s .chip-s { display: -webkit-box; }
  .ask-guard { margin: 0 10px 6px; }
}

/* v1.9.8 quick wins (App Change Plan items 2 and 4): the step circles stay on one row at every width (the old grid wrapped the last step under
   the first; on phones the labels were already hidden, so each column holds just its number), and Budgeting gets a top scroll bar that mirrors the bottom one. */
.wz-steps, .wizard .wz-steps { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bd-topscroll { overflow-x: auto; overflow-y: hidden; height: 14px; border-bottom: 1px solid var(--line); }
.bd-topscroll[hidden] { display: none; }
.bd-topscroll-in { height: 1px; }
.bd-topscroll, .bd-scroll { scrollbar-width: thin; scrollbar-color: #8b9bab #eef2f6; }
.bd-topscroll::-webkit-scrollbar, .bd-scroll::-webkit-scrollbar { height: 10px; }
.bd-topscroll::-webkit-scrollbar-track, .bd-scroll::-webkit-scrollbar-track { background: #eef2f6; }
.bd-topscroll::-webkit-scrollbar-thumb, .bd-scroll::-webkit-scrollbar-thumb { background: #8b9bab; border-radius: 5px; }
.ask-guard > summary { list-style: none; }
.ask-guard > summary::-webkit-details-marker { display: none; }
.ask-guard > summary::before { content: '\25B8'; display: inline-block; width: 1em; }
.ask-guard[open] > summary::before { content: '\25BE'; }

/* v1.9.8-b (CLO, Nov 1): the AI line under the question box, shown by default in both modes (not under More, not in the fold-out); no vendor name */
.ask-ai { flex: none; margin: 0; padding: 2px 16px 0; font-size: 13px; line-height: 1.4; font-weight: 700; color: var(--ink); }
@media (max-width: 900px) { .ask-ai { padding: 2px 10px 0; } }
/* v1.9.15 (AC4): My Accounts columns. The account table scrolls sideways inside its panel instead of widening the page; gains and losses carry a sign, so colour is never the only cue. */
.scroll-x { overflow-x: auto; }
table.data td.gl-up { color: #1b6e3a; }
table.data td.gl-down { color: #a3261b; }
.gl-note { margin: 8px 12px 10px; line-height: 1.45; }
/* v1.9.17 (AC5): the Administrator Guide's page table scrolls sideways on a phone instead of widening the page */
.ag-scroll { overflow-x: auto; max-width: 100%; }
.ag-table td:first-child { white-space: nowrap; }
/* v1.9.17 (AC5): Tutorials (flags.tutorials, OFF) */
.tut-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.tut-list li { border: 1px solid #d9dee6; border-radius: 8px; padding: 12px 14px; }
.tut-list a { font-weight: 600; }
.tut-src { font-size: 14px; color: #4a5568; }
/* v1.9.18 (AC6, flag budgetSuggest OFF): the month-end suggestion panel */
.bd-sg-list { list-style: none; margin: .5rem 0; padding: 0; }
.bd-sg-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem 0; border-top: 1px solid var(--line, #e3e3e3); }
.bd-sg-act { display: flex; gap: .4rem; }
.bd-sg-all { margin-top: .5rem; }
/* v1.9.18: the suggestion panel scrolls into view below the sticky top bar (74px at most), never under it */
.bd-suggest { scroll-margin-top: 84px; }
/* Learn lesson picker (flag lessonPicker): a native pull-down. On a phone the label, list and Go button stack. */
.learn-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.learn-picker label { font-weight: 700; }
.learn-picker select { font: inherit; font-size: 16px; line-height: 1.3; padding: 8px 10px; min-height: 44px; border: 1px solid #8b9bab; border-radius: 8px; background: #fff; color: var(--ink); flex: 1 1 12rem; min-width: 0; max-width: 100%; }
.learn-picker select:focus { outline: 2px solid var(--brass); outline-offset: 2px; border-color: var(--brass); }
.learn-picker .btn { min-height: 44px; }
@media (max-width: 640px) {
  .learn-picker { flex-direction: column; align-items: stretch; }
  .learn-picker select, .learn-picker .btn { width: 100%; max-width: none; flex: 1 1 auto; justify-content: center; }
}
.learn-slide-pos { margin: 0; font-weight: 700; }
.learn-slide-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.learn-slide-nav .btn { min-height: 44px; }
@media (max-width: 640px) {
  .learn-slide-nav { flex-direction: column; align-items: stretch; }
  .learn-slide-nav .btn { width: 100%; justify-content: center; }
}