/* Layout: section list | the form | checks and progress. Stacks on narrow screens. */
:root {
  /* Wealth Revolution look: the logo's own blue (#27a8e0) and charcoal grey on white and cool grey-blue.
     --brand is the logo blue and only paints lines, stripes and rings. --accent is a deeper blue of the same hue that stays readable as text and as a button. */
  --bg: #edf3f8; --surface: #ffffff; --surface-2: #f3f8fc; --ink: #25292e; --muted: #58646d; --line: #d3e0ea;
  --brand: #27a8e0; --accent: #0f6fa3; --accent-soft: #e1f2fa; --accent-ink: #ffffff; --ring: rgba(39, 168, 224, .30); --flash: #bfe6f7;
  --ok: #2d6a3e; --ok-soft: #dff0e3; --warn: #8f5200; --warn-soft: #fcefcf; --calc: #58646d; --calc-soft: #e9eff4;
  --new: #0f6fa3; --new-soft: #e1f2fa; --adv: #4b5563; --adv-soft: #e8ecf0; --bad: #b3261e; --bad-soft: #fbe3e0;
  --shade: rgba(16, 58, 86, .08); --plate: #ffffff; --backdrop: rgba(10, 28, 40, .55);
  --font: system-ui, "Segoe UI", sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e1a23; --surface: #15232e; --surface-2: #1b2c39; --ink: #e9f2f8; --muted: #9db0bd; --line: #2a3d4b;
  --accent: #5cbdea; --accent-soft: #123347; --accent-ink: #072232; --ring: rgba(39, 168, 224, .40); --flash: #1d5575;
  --ok: #86c79a; --ok-soft: #173325; --warn: #f0b35a; --warn-soft: #3a2c10; --calc: #9db0bd; --calc-soft: #22343f;
  --new: #5cbdea; --new-soft: #123347; --adv: #aab6c4; --adv-soft: #26323d; --bad: #f2867c; --bad-soft: #3d1f1c;
  --shade: rgba(0, 0, 0, .35); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0e1a23; --surface: #15232e; --surface-2: #1b2c39; --ink: #e9f2f8; --muted: #9db0bd; --line: #2a3d4b;
  --accent: #5cbdea; --accent-soft: #123347; --accent-ink: #072232; --ring: rgba(39, 168, 224, .40); --flash: #1d5575;
  --ok: #86c79a; --ok-soft: #173325; --warn: #f0b35a; --warn-soft: #3a2c10; --calc: #9db0bd; --calc-soft: #22343f;
  --new: #5cbdea; --new-soft: #123347; --adv: #aab6c4; --adv-soft: #26323d; --bad: #f2867c; --bad-soft: #3d1f1c;
  --shade: rgba(0, 0, 0, .35); color-scheme: dark; }
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); padding-block: 14px 40px; }
h1, h2, h3, p { margin: 0; }
button, select, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.top h1 { font-size: 16px; font-weight: 600; }
.grow { flex: 1 1 auto; }

.app { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; gap: 14px; margin-top: 14px; align-items: start; }
@media (max-width: 1080px) { .app { grid-template-columns: 190px minmax(0, 1fr); } .side { grid-column: 1 / -1; } }
@media (max-width: 720px) { .app { grid-template-columns: minmax(0, 1fr); } }

.nav { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px; position: sticky; top: env(safe-area-inset-top, 0px); }
@media (max-width: 720px) { .nav { flex-direction: row; overflow-x: auto; position: static; } }
.nav button { white-space: normal; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.nav button:hover { background: var(--accent-soft); }
.nav button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav .n { font: 11px var(--mono); color: var(--muted); }
.nav .ck { color: var(--ok); font-weight: 700; margin-left: 4px; }
.nav button[aria-current="true"] .ck { color: inherit; }
.nav .sep { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 2px; }
@media (max-width: 720px) { .nav .sep { display: none; } }

.main { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 18px; min-width: 0; }
.main > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.main h2 { font-size: 19px; font-weight: 600; }
.tier { font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
.tier.c { background: var(--calc-soft); color: var(--calc); }
.grid + .note, .tablewrap + .note, .addrow + .note { margin-top: 14px; }
.note { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; color: var(--muted); margin-bottom: 14px; font-size: 13px; }
.note b { color: var(--ink); font-weight: 500; }
.note.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.note.new { background: var(--new-soft); border-color: transparent; color: var(--new); }
.note.new b { color: var(--new); }
.block-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.block-title:first-of-type { margin-top: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 14px; }
.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f.wide { grid-column: 1 / -1; }
.f > span.l { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
.f .box { position: relative; display: flex; }
.f input, .f select, .f textarea { width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 7px 96px 7px 9px; min-height: 34px; }
.f select { padding-right: 96px; }
.f textarea { padding-right: 9px; min-height: 56px; resize: vertical; }
.f .st { position: absolute; right: 24px; pointer-events: auto; top: 50%; transform: translateY(-50%); }
.f input:not([list]) { padding-right: 82px; }
.f input:not([list]) ~ .st { right: 10px; }
.f.s-empty input, .f.s-empty select { background: var(--surface-2); border-style: dashed; }
.f.s-heard input, .f.s-heard select, .f.s-heard textarea { border-color: var(--accent); background: var(--accent-soft); }
.f.s-verify input, .f.s-verify select { border-color: var(--warn); background: var(--warn-soft); }
.f.s-confirmed input, .f.s-confirmed select, .f.s-confirmed textarea { border-color: var(--ok); }
.f.s-calc input, .f.s-preset input, .f.s-preset select { background: var(--calc-soft); color: var(--calc); border-color: var(--line); }
.f.flash input, .f.flash select { animation: flash 1.4s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 4px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .f.flash input, .f.flash select { animation: none; } }

.badge { font: 500 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 0; cursor: default; white-space: nowrap; }
.badge.empty { background: transparent; color: var(--muted); }
.badge.heard { background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.badge.verify { background: var(--warn); color: var(--surface); cursor: pointer; }
.badge.confirmed { background: var(--ok-soft); color: var(--ok); }
.badge.calc, .badge.preset { background: var(--calc-soft); color: var(--calc); }
.badge.suggest { background: var(--accent); color: var(--accent-ink); cursor: pointer; }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th { text-align: left; font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); padding: 7px 8px; white-space: nowrap; }
td { padding: 5px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
td input, td select { width: 100%; min-width: 104px; border: 1px solid transparent; background: transparent; border-radius: 4px; padding: 5px 6px; }
td input:hover, td select:hover { border-color: var(--line); }
tr.s-heard td { background: var(--accent-soft); }
tr.s-verify td { background: var(--warn-soft); }
tr.flash td { animation: rowflash 1.6s ease-out; }
@keyframes rowflash { from { background: var(--flash); } }
@media (prefers-reduced-motion: reduce) { tr.flash td { animation: none; } }
td select { min-width: 132px; }
td.num input { text-align: right; font-variant-numeric: tabular-nums; min-width: 124px; }
tfoot td { background: var(--surface-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.addrow { margin-top: 8px; background: none; border: 1px dashed var(--accent); color: var(--accent); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.addrow:hover { background: var(--accent-soft); }
.x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.x:hover { color: var(--ink); background: var(--calc-soft); }


.side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px; box-shadow: 0 1px 3px var(--shade); }
.card h3 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 7px 12px; cursor: pointer; font-weight: 500; }
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }
.rowcard { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px 16px; margin-bottom: 12px; background: var(--surface); }
.rowcard.s-heard { background: var(--accent-soft); border-color: var(--accent); }
.rowcard.s-verify { background: var(--warn-soft); border-color: var(--warn); }
.rowcard.flash { animation: cardflash 1.6s ease-out; }
@keyframes cardflash { from { box-shadow: 0 0 0 4px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .rowcard.flash { animation: none; } }
.rowhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rowhead b { font-weight: 600; }
.rowcard .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 22px; }
.rowcard.rc-kids .grid { grid-template-columns: repeat(auto-fill, minmax(max(140px, calc((100% - 132px) / 7)), 1fr)); }      /* name, surname, gender, date of birth, age, stage and cost on one row when the card is wide enough, wrapping when it is not */
.rowcard .f input, .rowcard .f select { padding-right: 9px; background: var(--surface); }
.rowcard .f input[readonly] { background: var(--calc-soft); color: var(--calc); }
.sumstrip { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.sumstrip span { color: var(--muted); }
.sumstrip b { margin-left: 6px; font-weight: 600; }
.lnk { font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.lnk:hover { text-decoration: underline; }
.lookup { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 12px; padding: 0; white-space: nowrap; }
.lookup:hover { text-decoration: underline; }
.f > span.l .rt { display: inline-flex; gap: 8px; align-items: center; }
.sub { font-size: 13px; color: var(--muted); margin: -4px 0 10px; }

.empty-list { padding: 14px; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; margin-bottom: 10px; }
.top .grow { flex: 1 1 auto; }
.top .titlebar { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.top .tleft { display: flex; align-items: center; gap: 8px 20px; min-width: 0; }
.top .tmid { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 18px; }
@media (min-width: 1300px) {     /* wide enough: the client's name and the save state are centred, directly above the meeting, voice and listen buttons (same three-column grid as the button row) */
  .top .titlebar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 24px; }
  .top .tmid { max-width: 26vw; text-align: center; }
}
.top .chips { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 18px; }     /* the key dates and what Claude and OpenAI have cost: together at the far right of the title row; they wrap among themselves, never the whole group onto a row of its own */
@media (max-width: 900px) { .top .chips { flex: 1 1 100%; justify-content: flex-start; } }
.top .who { color: var(--muted); }
.top .who b { color: var(--ink); font-weight: 500; }
.top .actions { flex: 1 1 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 24px; }     /* a row of its own: settings on the left, the meeting in the middle, saving on the right */
.top .actions .grp { display: flex; flex-wrap: wrap; gap: 8px; }
.top .actions .left { justify-self: start; }
.top .actions .mid { justify-self: center; justify-content: center; }
.top .actions .right { justify-self: end; justify-content: flex-end; }
@media (max-width: 900px) { .top .actions { grid-template-columns: minmax(0, 1fr); } .top .actions .grp { justify-self: start; justify-content: flex-start; } }
.btn.small { padding: 5px 10px; font-size: 13px; }
.savestate { font-size: 12px; color: var(--muted); }
.warn { color: var(--warn); font-size: 12px; margin-top: 2px; }
.len { align-self: flex-start; font: 500 11px var(--mono); padding: 1px 6px; border-radius: 4px; white-space: nowrap; background: var(--calc-soft); color: var(--muted); }
.len.short { background: var(--warn-soft); color: var(--warn); }
.len.ok { background: var(--ok-soft); color: var(--ok); }
.len.bad { background: var(--bad-soft); color: var(--bad); }
.len[hidden] { display: none; }
.f.has-warn input, .f.has-warn select { border-color: var(--warn); }
.help { font-size: 13px; color: var(--muted); margin: 0 0 12px; max-width: 70ch; }
.blocknote { font-size: 12.5px; font-style: italic; color: var(--muted); margin: 8px 0 0; }
.checks { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.checks button { text-align: left; background: var(--warn-soft); color: var(--warn); border: 0; border-radius: 6px; padding: 6px 9px; cursor: pointer; }
.checks .ok { color: var(--ok); }
.side .meta { font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.side .meta b { color: var(--ink); font-weight: 500; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.summary b { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary span { font-size: 11px; color: var(--muted); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 8px; font-size: 13px; z-index: 10; max-width: 90vw; }
.link-btn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.addrow + .f, .sumstrip + .addrow { margin-top: 10px; }
.addrow { margin-bottom: 12px; }

/* ---- colour and spacing refinements ---- */
.top { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-bottom: 3px solid var(--brand); border-radius: 10px; padding: 8px 18px 8px 10px; gap: 8px 20px; box-shadow: 0 1px 3px var(--shade); }
.top .brand { display: block; flex: none; height: 76px; width: auto; padding: 3px 8px; border-radius: 6px; background: var(--plate); }
.top h1 { font-size: 17px; font-weight: 600; letter-spacing: .01em; color: var(--ink); padding-left: 20px; border-left: 1px solid var(--line); line-height: 34px; }
.top .who, .top .savestate { color: var(--muted); }
.top .who b { color: var(--ink); }
.top .btn.ghost { background: var(--surface); color: var(--accent); border-color: var(--line); }
.top .btn.ghost:hover { background: var(--accent-soft); border-color: var(--brand); filter: none; }
@media (max-width: 720px) { .top .brand { height: 58px; } .top h1 { padding-left: 0; border-left: 0; } }
.btn:hover { filter: brightness(1.06); }
.nav .sep { color: var(--accent); }
.nav .sep:nth-of-type(2) { color: var(--adv); }
.nav button[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
.nav button[aria-current="true"] .n { color: var(--accent-ink); }
.main { border-top: 4px solid var(--brand); box-shadow: 0 1px 3px var(--shade); }
.main h2 { font-size: 22px; }
.tier { background: var(--accent-soft); color: var(--accent); }
.tier.c { background: var(--adv-soft); color: var(--adv); }
.block-title { color: var(--accent); display: flex; align-items: center; gap: 10px; text-transform: uppercase; }
.block-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.card h3 { color: var(--accent); }
.rowhead b { color: var(--accent); }
.rowcard { border-left: 4px solid var(--brand); }
.rowcard.s-heard { border-left-color: var(--brand); }
.addrow { border-color: var(--accent); color: var(--accent); }
.addrow:hover { background: var(--accent-soft); }
.lnk, .lookup, .link-btn { color: var(--accent); }
.f.s-heard input, .f.s-heard select, .f.s-heard textarea { border-color: var(--accent); background: var(--accent-soft); }
.badge.heard, .badge.suggest { background: var(--accent); color: var(--accent-ink); }
tfoot td, .sumstrip { background: var(--accent-soft); }
.sumstrip { border-color: transparent; }
.sumstrip b { color: var(--accent); }
th { background: var(--accent-soft); color: var(--accent); }
.summary b { color: var(--accent); }
:focus-visible { outline-color: var(--accent); }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); outline: none; }

/* Pages with little information get more room. */
.main.roomy { padding: 30px 34px 38px; }
.roomy .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px 32px; }
.roomy .f { gap: 7px; }
.roomy .f > span.l { font-size: 13px; }
.roomy .f input, .roomy .f select { min-height: 44px; font-size: 15px; }
.roomy .f textarea { min-height: 110px; font-size: 15px; }
.roomy .block-title { margin: 34px 0 16px; }
.roomy .block-title:first-of-type, .roomy header + .block-title { margin-top: 8px; }
.roomy .help { margin-bottom: 18px; }
.roomy .note { padding: 14px 16px; }

/* 12-column pages: each field says how many columns it takes. */
.grid.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.g12 > .f { grid-column: span var(--s, 4); }
@media (max-width: 1100px) { .g12 > .f { grid-column: span 6; } .g12 > .f.wide { grid-column: span 12; } }
@media (max-width: 640px) { .g12 > .f { grid-column: span 12; } }
.nonebox { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.nonebox input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.f > span.l { align-items: baseline; }

/* A page that fits one screen: tighter rhythm. */
.main.roomy.fit { padding: 20px 30px 24px; }
.fit header { margin-bottom: 4px; }
.fit .grid { gap: 14px 22px; }
.fit .f { gap: 5px; }
.fit .f input, .fit .f select { min-height: 40px; }
.fit .f textarea { min-height: 40px; height: 40px; }
.fit .block-title { margin: 18px 0 10px; }
.fit header + .block-title { margin-top: 10px; }

dialog { border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 22px 24px; width: min(480px, 92vw); box-shadow: 0 12px 40px var(--shade); }
dialog::backdrop { background: var(--backdrop); }
dialog h2 { margin: 0 0 8px; font-size: 18px; }
dialog .f { margin-top: 12px; }
dialog .f input, dialog .f select { padding-right: 9px; background: var(--surface); }
.dlg-actions { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
/* Keep label rows the same height so boxes line up, even when a row has a tick box. */
.f > span.l { min-height: 22px; align-items: center; }
.main .f .nonebox input { width: 14px; height: 14px; min-height: 0; padding: 0; border: 0; background: none; }
.f.s-preset .st { display: none; }
.f.s-preset input, .f.s-preset select { padding-right: 9px; }
.f.s-calc input { padding-right: 74px; }
.f[data-field="next_day"].s-calc input { padding-right: 9px; }                                      /* the Day box is narrow: no badge inside it, so "Wednesday" is not cut off */
.f[data-field="next_day"].s-calc .st { display: none; }
.vm-stopnotes { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 4px; padding: 2px 9px; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.vm-stopnotes:hover { filter: brightness(1.08); }
/* The line under the top bar while the microphone is on: what is being heard, and how loud. */
.heard { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--muted); min-width: 0; }
.heard[hidden] { display: none; }
.heard b { color: var(--ink); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.lvlw { flex: none; display: flex; align-items: center; gap: 6px; }
.lvlw[hidden] { display: none; }
.lvlt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lvl { flex: none; width: 70px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.lvl i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .08s linear; }

/* the list of choices that opens by itself under a dropdown the voice mode is waiting on */
.vm-pick { position: fixed; z-index: 45; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 4px; background: var(--surface); border: 2px solid var(--brand); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.vm-pick button { display: block; width: 100%; box-sizing: border-box; padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; text-align: left; white-space: nowrap; cursor: pointer; }
.vm-pick button:hover { background: var(--accent-soft); }
.vm-pick button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.calbtn { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 12px; padding: 0; white-space: nowrap; }
.calbtn:hover { text-decoration: underline; }
.calpick { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* A box or block whose rule is not met (no personal risk cover, no group risk, not a priority, not a business owner) stays on screen, greyed out. */
.off { opacity: .45; filter: grayscale(1); user-select: none; }
.f.off { pointer-events: none; }
div.off { pointer-events: none; }

/* The Client priorities page: one area per priority. A priority takes a green haze, a priority that is not wanted a red haze. */
:root { --go: #1f9d55; --stop: #d6362b; --maybe: #e0a800; --maybe-ink: #7a5a00; --hz: 16%; --hz-head: 30%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --go: #4cc38a; --stop: #ff6b5e; --maybe: #f2c94c; --maybe-ink: #f2c94c; --hz: 20%; --hz-head: 34%; } }
:root[data-theme="dark"] { --go: #4cc38a; --stop: #ff6b5e; --maybe: #f2c94c; --maybe-ink: #f2c94c; --hz: 20%; --hz-head: 34%; }
:root { --haze-ok: color-mix(in srgb, var(--go) var(--hz), var(--surface)); --haze-ok-head: color-mix(in srgb, var(--go) var(--hz-head), var(--surface));
  --haze-bad: color-mix(in srgb, var(--stop) var(--hz), var(--surface)); --haze-bad-head: color-mix(in srgb, var(--stop) var(--hz-head), var(--surface));
  --haze-maybe: color-mix(in srgb, var(--maybe) var(--hz), var(--surface)); --haze-maybe-head: color-mix(in srgb, var(--maybe) var(--hz-head), var(--surface)); }
.main.priorities { container-type: inline-size; }
.main.roomy.priorities { padding: 24px 22px 32px; }
.prio { border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; overflow: hidden; background: var(--surface); transition: background .4s, border-color .4s; }
.prio > header { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 6px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.prio h3 { font-size: 15.5px; font-weight: 650; }
.prio .sub { color: var(--muted); font-size: 12.5px; flex: 1 1 auto; }
.prio .chip { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--calc-soft); color: var(--calc); white-space: nowrap; }
.prio.p1 { background: var(--haze-ok); border: 2px solid var(--go); }
.prio.p1 > header { background: var(--haze-ok-head); border-bottom-color: var(--go); }
.prio.p2 { background: var(--haze-bad); border: 2px solid var(--stop); }
.prio.p2 > header { background: var(--haze-bad-head); border-bottom-color: var(--stop); }
.prio.p3 { background: var(--haze-maybe); border: 2px solid var(--maybe); }
.prio.p3 > header { background: var(--haze-maybe-head); border-bottom-color: var(--maybe); }
.prio.p1 .chip { background: var(--surface); border: 1px solid var(--ok); color: var(--ok); font-weight: 600; }
.prio.p3 .chip { background: var(--surface); border: 1px solid var(--maybe); color: var(--maybe-ink); font-weight: 600; }
.prio.p2 .chip { background: var(--surface); border: 1px solid var(--bad); color: var(--bad); font-weight: 600; }
.pbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 225px); gap: 10px 14px; padding: 10px 12px 12px; align-items: start; }
.pbody > .pl { grid-column: 1; }
.pbody > .sum { grid-column: 2; grid-row: 1 / span 2; }
.pbody > .area { grid-column: 1; }
.pbody.wideq > .sum { grid-row: 1; }
.pbody.wideq > .area { grid-column: 1 / -1; }
@container (max-width: 640px) { .pbody { grid-template-columns: minmax(0, 1fr); } .pbody > .sum, .pbody.wideq > .sum { grid-column: 1; grid-row: auto; } .pbody > .area, .pbody.wideq > .area { grid-column: 1; } }
.pl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pl > .note { margin-bottom: 0; }
.prio .grid, .roomy .prio .grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px 14px; }
.prio .grid.g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.prio .f { gap: 3px; }
.prio .f input, .prio .f select { min-height: 32px; padding-top: 5px; padding-bottom: 5px; }
.prio .f.wide { grid-column: 1 / -1; }
.prio .f textarea { min-height: 52px; }
/* in an area the status tags that say nothing ("not asked", "confirmed") are left off: the dashed box says not asked, and the room goes to the answer */
.prio .f.s-empty .st, .prio .f.s-confirmed .st, .prio .f.s-preset .st, .prio .f > span.l .badge.empty, .prio .f > span.l .badge.confirmed { display: none; }
.prio .f.s-empty input:not([list]), .prio .f.s-confirmed input:not([list]), .prio .f.s-preset input:not([list]) { padding-right: 9px; }
.prio .f.s-empty select, .prio .f.s-confirmed select, .prio .f.s-preset select { padding-right: 26px; }
.prio .f.s-empty .msb, .prio .f.s-confirmed .msb { padding-right: 26px; }
.prio .f > span.l { min-height: 0; }
/* the box of a life quote's request has the block's title for its label */
.lc .f[data-field$="_req"] > span.l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prio .block-title { margin: 14px 0 8px; }
.prio .block-title:first-child { margin-top: 0; }
.prio .area { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-width: 0; }
.prio .area.flat { padding: 0; border: 0; background: none; }
.prio .help { color: var(--ink); background: var(--accent-soft); border-left: 3px solid var(--brand); border-radius: 6px; padding: 7px 10px; font-size: 13px; margin: 0 0 6px; }
.dempty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.dempty .addrow, .drow ~ .addrow, .prio .addrow { margin: 4px 0 2px; width: auto; align-self: flex-start; }
.prio .lc .addrow { margin-bottom: 2px; }
.prio.p1 .area, .prio.p2 .area, .prio.p3 .area, .prio.p1 .sum, .prio.p2 .sum, .prio.p3 .sum { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.prio .tablewrap { overflow-x: auto; }
.sum { display: flex; flex-direction: column; gap: 4px; padding: 7px 10px 8px; border-radius: 8px; background: var(--accent-soft); min-width: 0; align-self: start; font-size: 12.5px; }
.sum .sh { display: flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.sum .info { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font: 600 9.5px var(--font); cursor: help; text-transform: none; letter-spacing: 0; }
.sum .sh .link-btn { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 12px; text-transform: none; letter-spacing: 0; }
.sum .sh .link-btn:disabled { opacity: .5; cursor: default; }
.prio.p1 .sum .sh, .prio.p2 .sum .sh, .prio.p3 .sum .sh { color: var(--ink); }
.sum ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.sum li.none { color: var(--muted); list-style: none; margin-left: -18px; }
.sum .src, .sum .when { color: var(--muted); font-size: 11px; }
.sum .src { padding-top: 4px; border-top: 1px solid var(--line); }
/* a business assurance area that does not apply is one grey line */
.prio.na { border-style: dashed; background: var(--surface-2); }
.prio.na > header { background: none; border-bottom: 0; }
.prio.na .sub { font-size: 12.5px; }

/* the Life quotes: BrightRock Fractured and Standard side by side, the same three rows in each */
.lanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin: 2px 0 6px; }
.lanes > div { padding: 8px 10px; min-width: 0; border-top: 1px solid var(--line); }
.lanes > .lh { border-top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; background: var(--surface-2); }
.lanes > .lh.br { background: var(--accent-soft); border-radius: 7px 0 0 0; }
.lanes > .lh.std { border-left: 1px solid var(--line); border-radius: 0 7px 0 0; }
.lh b { font-size: 14px; } .lh.br b { color: var(--accent); }
.lh span { font-size: 12px; color: var(--muted); }
.lh .btn { font-size: 12.5px; padding: 3px 9px; margin-top: 2px; }
.lanes > .lc.std { border-left: 1px solid var(--line); }
.lanes > .lc.both { grid-column: 1 / -1; }
.lc .block-title { margin: 0 0 6px; }
.lc .note { margin-bottom: 0; }
.lc .rowcard { margin-bottom: 6px; }
@container (max-width: 640px) { .lanes { grid-template-columns: minmax(0, 1fr); } .lanes > .lc.std { border-left: 0; } .lanes > .lc.br::before, .lanes > .lc.std::before { display: block; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .lanes > .lc.br::before { content: 'BrightRock: Fractured'; } .lanes > .lc.std::before { content: 'Standard'; } .lanes > .lh.std { border-left: 0; border-top: 1px solid var(--line); border-radius: 0; } .lanes > .lh.br { border-radius: 7px 7px 0 0; } }

/* a quote list: one short row for each quote, its boxes side by side and wrapping */
.rowcard.drow { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px 8px; border-left-width: 3px; }
.drow .dcells { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px 8px; }
.drow .dtools { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 18px; }
.drow .dtools .x { padding: 4px 8px; }
.drow .f input, .drow .f select { min-height: 32px; padding-top: 5px; padding-bottom: 5px; }
.drow .f > span.l { min-height: 0; }

/* what to ask for in a standard quote: one table */
details.sqd { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin: 4px 0 6px; }
details.sqd > summary { cursor: pointer; padding: 7px 12px; font-weight: 600; font-size: 13.5px; }
details.sqd[open] > summary { border-bottom: 1px solid var(--line); }
details.sqd .tablewrap { border: 0; border-radius: 0; padding: 6px 8px 8px; }
table.sqt { border-collapse: collapse; width: 100%; min-width: 760px; }
table.sqt th, table.sqt td { text-align: left; padding: 3px 4px; vertical-align: top; }
table.sqt thead th { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
table.sqt tbody th { font: 600 13px var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); background: none; white-space: nowrap; padding-top: 9px; }
table.sqt .pair { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4px; }
table.sqt .pair > .f:only-child { grid-column: 1 / -1; }
table.sqt .f input, table.sqt .f select { min-height: 30px; padding: 3px 6px; font-size: 13px; }
table.sqt .dash { color: var(--muted); display: inline-block; padding-top: 7px; }

/* the top of the BrightRock Risk Calculation page */
.brstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); font-size: 13px; margin-bottom: 4px; }
.brstrip b { color: var(--accent); }
.brstrip .grow { flex: 1; }
.brstrip .btn { font-size: 12.5px; padding: 3px 9px; }

/* Medical, will & short-term: two blocks side by side */
.halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; margin-top: 8px; }
@media (max-width: 860px) { .halves { grid-template-columns: minmax(0, 1fr); } }
.half { min-width: 0; }
.half .block-title:first-child { margin-top: 18px; }

/* Risk Calculation & Quotes: the two parts, and the income protection block with its instalment protector. */
.ipgrid { display: grid; grid-template-columns: minmax(190px, 260px) minmax(0, 1fr); gap: 14px 28px; align-items: start; margin-bottom: 14px; }
@media (max-width: 720px) { .ipgrid { grid-template-columns: minmax(0, 1fr); } }
.ipleft { display: flex; flex-direction: column; gap: 14px; }
.protector { display: flex; flex-direction: column; gap: 10px; border-left: 3px solid var(--brand); padding-left: 16px; min-width: 0; }
.protector h5, .household h5 { margin: 0; font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.prows { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.protector .phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.pmaster { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.prow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: end; }
.prow .tgl { margin-bottom: 7px; }
.prow .f input { padding-right: 9px; }
.prow.unprot .f .box input { text-decoration: line-through; opacity: .55; }
.prow.unprot .f > span.l { opacity: .6; }
/* a switch: green when on (protected), grey when off, amber when some are on */
.tgl { position: relative; flex: none; width: 40px; height: 22px; padding: 0; border: 0; border-radius: 99px; background: var(--line); cursor: pointer; transition: background .15s; }
.tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; }
.tgl.on { background: var(--go); }
.tgl.on::after { left: 21px; }
.tgl.mixed { background: var(--maybe); }
.tgl.mixed::after { left: 12px; }
.tgl:disabled { opacity: .5; cursor: default; }
.tgl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tgl, .tgl::after { transition: none; } }
.protector .sumline { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; font-variant-numeric: tabular-nums; }
.protector .sumline b { color: var(--ink); }
.household { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.household .f { max-width: 260px; }
.f.neg input { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.ipcheck { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-variant-numeric: tabular-nums; }
.ipcheck b { color: var(--ink); }

/* Tick-box dropdown (the policy schedule lists), and the Admin page. */
.ms { position: relative; width: 100%; }
.msb { width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 30px 8px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; min-height: 36px; }
.msb::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.msb.open { border-color: var(--accent); }
.msb.wrap { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; padding-right: 112px; }      /* the schedule requests have long wording: it wraps, so all of it can be read */
.msb.ph { color: var(--muted); }
.msb:disabled { cursor: default; background: var(--calc-soft); color: var(--calc); }
.f.s-empty .msb { background: var(--surface-2); border-style: dashed; color: var(--muted); }
.msp { position: absolute; z-index: 30; left: 0; min-width: 100%; width: max-content; max-width: min(460px, 90vw); top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; padding: 6px; box-shadow: 0 10px 28px rgba(16, 58, 86, .22); display: flex; flex-direction: column; gap: 2px; }
.msp label { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.msp label:hover { background: var(--accent-soft); }
.msp label.dis { opacity: .45; cursor: not-allowed; background: none; }
.msp input { width: auto; padding: 0; margin: 0; }
.msp hr { border: 0; border-top: 1px solid var(--line); margin: 3px 0; width: 100%; }
.admin { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
@media (max-width: 860px) { .admin { grid-template-columns: minmax(0, 1fr); } }
.admcol { min-width: 0; }
.admcol .f textarea { min-height: 300px; line-height: 1.6; }
.apstatus { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.apstatus .link-btn { background: none; border: 0; cursor: pointer; color: var(--accent); font-size: 12.5px; }
.apstatus .link-btn:disabled { opacity: .5; cursor: default; }