:root {
  --ink: #14213d;
  --muted: #6b7280;
  --line: #dfe3ea;
  --bg: #f6f7f9;
  --accent: #1f5f8b;
  --ok: #1f7a4d;
  --bad: #a52222;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 22px 0 12px; }
h2 { font-size: 18px; margin: 30px 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }

.topbar { background: var(--ink); color: #fff; padding: 12px 0; }
.topbar .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.brand { color: #fff; font-weight: 600; font-size: 16px; }
.topbar nav a { color: #cfd8e3; margin-right: 16px; font-size: 14px; }
.foot { color: var(--muted); font-size: 12px; padding: 26px 18px 40px; }
.crumb { margin-top: 18px; font-size: 14px; }

table { border-collapse: collapse; width: 100%; background: #fff; }
table.grid th, table.grid td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
table.grid thead th { background: #eef1f5; font-size: 13px; text-transform: none; }
table.grid.small td, table.grid.small th { font-size: 13px; padding: 6px 9px; }
table.summary { margin: 8px 0 22px; }
table.summary th, table.summary td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: left; }
table.summary thead th { background: #eef1f5; font-size: 13px; }
table.meta { background: #fff; margin-bottom: 18px; }
table.meta th, table.meta td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
table.meta th { width: 190px; color: var(--muted); font-weight: 600; }

.sub { color: var(--muted); font-size: 12.5px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.flag { color: var(--bad); font-weight: 600; font-size: 12.5px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
         background: #e6eef5; color: #1f4a6b; vertical-align: middle; }
.badge.bad { background: #fbe6e6; color: var(--bad); }
.badge.s-active { background: #e3f3e9; color: var(--ok); }
.badge.s-merged { background: #f3ecdc; color: #855c14; }
.badge.s-deregistered { background: #ececec; color: #5a5a5a; }

.filters { background: #fff; border: 1px solid var(--line); padding: 14px; margin-bottom: 16px; }
.frow { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.filters label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 4px; }

/* ---- query page: grouped filters and tick boxes ---- */
.filters fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.filters legend { font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em;
                  color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.filters .frow { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filters .frow label { min-width: 150px; }
.pickerblock { margin: 12px 0 0; }
.pickerblock > summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
         gap: 4px 16px; padding: 10px 12px; margin-top: 8px; background: #fff;
         border: 1px solid var(--line); }
/* Specificity beats ".filters label" so a tick box sits beside its words, not above them. */
.filters .tick { display: flex; flex-direction: row; align-items: center; gap: 8px;
                 font-size: 13.5px; color: var(--ink); min-width: 0; }
.filters .tick input { flex: 0 0 auto; }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px;
                          background: #fff; color: var(--ink); }
input[type=search] { min-width: 320px; }
button { font: inherit; padding: 8px 16px; border: 0; border-radius: 4px; background: var(--accent);
         color: #fff; cursor: pointer; }
button:hover { background: #17496b; }
button.danger { background: var(--bad); }
button.danger:hover { background: #7f1a1a; }
.linkbtn { font-size: 14px; padding: 8px 0; }

.count { font-size: 14px; color: var(--muted); }
.pager { display: flex; gap: 18px; align-items: center; margin: 16px 0 30px; font-size: 14px; }

.banner { padding: 10px 14px; border-radius: 4px; font-size: 14px; }
.banner.ok { background: #e3f3e9; color: var(--ok); }
.banner.bad { background: #fbe6e6; color: var(--bad); }
.note { background: #fff; border-left: 3px solid var(--accent); padding: 10px 14px; font-size: 14px; color: #333; }

.editor { background: #fff; border: 1px solid var(--line); padding: 8px 14px 14px; margin-bottom: 14px; }
.editor fieldset { border: 0; padding: 0; margin: 10px 0; }
.editor legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--ink); }
.editor label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted);
                margin-bottom: 10px; }
.editor label.wide { grid-column: 1 / -1; }
.editor label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.editor fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; }
.editor label.check, .editor .actions, .editor legend { grid-column: 1 / -1; }
.editor .actions { display: flex; gap: 10px; margin-top: 6px; }
.editor.contact legend { grid-column: 1 / -1; }
.adder { margin-top: 10px; }
.adder summary { cursor: pointer; color: var(--accent); font-size: 14px; padding: 8px 0; }

/* ---- Phase 2: overview, catalogue, actions, renewal drafts ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
        gap: 14px; margin: 14px 0 22px; }
.kpi { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent);
       padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.kpi.alert { border-left-color: var(--bad); }
.klabel { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.kval { font-size: 28px; font-weight: 700; line-height: 1.1; }
.ksub { font-size: 12.5px; color: var(--muted); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--line); padding: 14px 16px; margin-bottom: 16px; }
.card h2 { margin-top: 4px; }
.card h3 { font-size: 15px; }

.bar { background: #eef1f5; height: 8px; border-radius: 4px; overflow: hidden;
       margin-bottom: 4px; min-width: 90px; }
.bar span { display: block; height: 100%; background: var(--accent); }
.pill { display: inline-block; background: #eef1f5; border-radius: 10px; padding: 1px 8px;
        font-size: 12px; font-weight: 600; }
.pill.red { background: #fbe6e6; color: var(--bad); }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: 3px;
       padding: 0 5px; font-size: 11.5px; color: var(--muted); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 14px;
        padding: 4px 12px; font-size: 13.5px; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.inline { display: inline; }
button.small { padding: 4px 10px; font-size: 13px; }
button.ghost { background: #eef1f5; color: var(--ink); }
button.ghost:hover { background: #e0e5ec; }
.right { text-align: right; }
.up { color: var(--bad); }
.dim { opacity: .55; }
.banner.warn { background: #fdf4e3; color: #7a5310; }
.warn-text { color: #8a5a00; }
h3.tight { margin: 18px 0 6px; }
pre.mail { background: #f7f8fa; border: 1px solid var(--line); padding: 12px;
           white-space: pre-wrap; font: 13px/1.55 ui-monospace, Menlo, Consolas, monospace; }
.btnrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* ---- SVG charts (server-rendered, no library) ---- */
.chart { width: 100%; height: auto; display: block; margin: 4px 0 10px; }
.spark { width: 100%; max-width: 150px; height: 40px; display: block; flex: 0 0 auto; }
.donut { width: 104px; height: 104px; flex: 0 0 auto; }

/* ---- headline tiles with a figure and a chart ---- */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
        gap: 14px; margin: 14px 0 4px; }
.hero-tile { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent);
             padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.hero-tile.alert { border-left-color: var(--bad); }
.hero-figure { display: flex; align-items: center; gap: 14px; }
.hero-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kval.big { font-size: 32px; }
.kval .cur { font-size: 12px; color: var(--muted); margin-left: 5px; font-weight: 600; }
.delta { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.delta.good { color: var(--ok); }
.delta.bad { color: var(--bad); }
.delta.flat { color: var(--muted); }

/* ---- product catalogue: one row per product, expanding in place ---- */
.plist { background: #fff; border: 1px solid var(--line); margin-bottom: 14px; }
.phead, .prod > summary {
  display: grid; gap: 10px; align-items: center; padding: 9px 12px;
  grid-template-columns: minmax(170px, 2fr) 1fr 1.1fr 60px 92px 92px 22px;
}
.phead { background: #eef1f5; font-size: 11.5px; text-transform: uppercase;
         letter-spacing: .03em; color: var(--muted); }
.prod { border-top: 1px solid var(--line); }
.prod > summary { cursor: pointer; font-size: 14px; list-style: none; }
.prod > summary::-webkit-details-marker { display: none; }
.prod > summary:hover { background: #f7f9fb; }
.prod[open] > summary { background: #eef1f5; }
.pname { font-weight: 600; }
.pchev { color: var(--muted); text-align: right; transition: transform .15s; }
.prod[open] .pchev { transform: rotate(180deg); }
.pbody { padding: 8px 14px 14px; border-top: 1px dashed var(--line); background: #fcfdfe; }
.pbody .editor { border: 0; padding: 0; margin: 8px 0 0; }
.pstatus { margin-top: 10px; }
summary.addnew { display: flex; gap: 12px; align-items: baseline; padding: 11px 14px;
                 cursor: pointer; list-style: none; background: #fff;
                 border: 1px solid var(--line); }
summary.addnew::-webkit-details-marker { display: none; }
summary.addnew .pname { flex: 0 0 auto; }
details.prod > summary.addnew + .editor { border: 1px solid var(--line); border-top: 0;
                                          padding: 12px 14px; margin: 0; }

@media (max-width: 820px) {
  .phead { display: none; }
  .prod > summary { grid-template-columns: 1fr auto auto; }
  .prod > summary > span:nth-child(2),
  .prod > summary > span:nth-child(3) { display: none; }
}

/* ---- chart colour key ---- */
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 14px 0 0; font-size: 12.5px;
          color: var(--muted); }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .key i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.card h3 { font-size: 12.5px; margin: 16px 0 4px; color: var(--muted); font-weight: 600;
           text-transform: uppercase; letter-spacing: .03em; }

/* ---- date and time on a booked callback ---- */
.appt { display: inline-block; }
.appt > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
                  padding: 5px 11px; border: 1px solid var(--line); border-radius: 3px;
                  background: #fff; color: var(--ink); font-size: 13px; list-style: none; }
.appt > summary::-webkit-details-marker { display: none; }
.appt[open] > summary { border-color: var(--accent); color: var(--accent); }
.appt .picker { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
                padding: 10px 12px; margin-top: 6px; background: #fff;
                border: 1px solid var(--line); border-radius: 3px; }
.appt label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px;
              color: var(--muted); }
.appt input[type="datetime-local"] { padding: 6px 8px; border: 1px solid var(--line);
                                     border-radius: 3px; font: inherit; font-size: 13.5px; }
.when { color: var(--ink); font-weight: 600; }

/* ---- a waiting action, visible from whichever tab you land on ---- */
.nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0;
         padding: 9px 13px; background: #fff8e6; border: 1px solid #f0dca8;
         border-left: 4px solid #d8a72a; border-radius: 3px; font-size: 13.5px; }
.nudge a { color: var(--accent); font-weight: 600; }

.notelabel { display: flex; flex-direction: column; gap: 3px; font-size: 11px;
             text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
             font-weight: 600; flex: 1 1 260px; min-width: 0; }
.notelabel .notefield { width: 100%; font-size: 13.5px; }

/* ---- tabbed sections on a credit union's page ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 3px; margin: 18px 0 0;
        border-bottom: 2px solid var(--line); }
.tabs .tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px;
             font-size: 13.5px; color: var(--muted); text-decoration: none;
             border: 1px solid transparent; border-radius: 4px 4px 0 0; }
.tabs .tab:hover { color: var(--ink); background: #f5f7fa; }
.tabs .tab.on { color: var(--ink); font-weight: 600; background: #fff;
                border-color: var(--line); border-bottom: 2px solid #fff;
                margin-bottom: -2px; }
.tabs .count { background: #eef1f5; color: var(--ink); border-radius: 9px; padding: 1px 7px;
               font-size: 11.5px; font-weight: 600; }
.tabs .tab.on .count { background: var(--accent); color: #fff; }

/* ---- Phase 4: sign-in, accounts, quick answers ---- */
.signin-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.signin { background: #fff; border: 1px solid var(--line); padding: 26px 28px;
          max-width: 430px; width: calc(100% - 32px); }
.signin h1 { margin: 0 0 4px; font-size: 22px; }
.signin form { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.signin label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.signin button { width: 100%; padding: 10px; }

.whoami { margin-left: auto; display: flex; align-items: center; gap: 12px;
          color: #cfd8e3; font-size: 13.5px; }
.whoami .sub { color: #9fb0c4; }

tr.ansrow td { background: #fafbfc; }
.answers .qrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.moreans { display: inline-block; }
.moreans > summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.grouplabel { margin: 10px 0 4px; font-weight: 600; text-transform: uppercase;
              letter-spacing: .03em; font-size: 11px; }
.snooze { color: var(--muted); font-size: 11px; }
.notefield { min-width: 260px; }
.center { text-align: center; }
.yes { color: var(--ok); font-weight: 700; }
.no { color: #c3cad4; }
.inline-block { display: inline-block; margin: 0 16px 12px 0; vertical-align: top; }
.inline-block label, .pwform label { display: flex; flex-direction: column; gap: 4px;
                                     font-size: 13px; color: var(--muted); }
.phead-users, .prow-users { grid-template-columns: minmax(150px, 1.4fr) minmax(160px, 1.6fr)
                            1fr 1fr 70px 22px; }

/* v2: account page */
/* Always black on white, whatever the theme, and big enough for a phone held at arm's length. */
.qr svg { display: block; width: 240px; height: 240px; max-width: 100%; background: #fff; border: 1px solid var(--line); padding: 8px; box-sizing: content-box; }
.whoami a { color: inherit; text-decoration: underline dotted; }

/* v2: cover terms, reminder editing */
legend.minor { font-size: 13px; color: var(--muted); font-weight: 600; }
.termbar { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -6px 0 10px; }
.termbar details[open] { flex-basis: 100%; }
table.terms { margin: 0 0 22px; font-size: 13px; }
.mailedit textarea, .editor textarea { width: 100%; font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; }
ul.plain { list-style: none; padding-left: 0; font-size: 13.5px; }

/* v2: audit changes */
ul.changes { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12.5px; color: var(--muted); }
ul.changes .field { font-weight: 600; margin-right: 6px; }
ul.changes .before { text-decoration: line-through; opacity: .8; }
ul.changes .after { color: var(--ink, #1e2733); }
.pager { display: flex; gap: 16px; align-items: center; font-size: 13.5px; }

/* v2: pipeline, registers */
.prow-opp { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1.4fr 24px; gap: 10px; align-items: center; }
.shortcuts { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 14px; }
section.stage { margin-bottom: 14px; }
section.stage h2 { margin-top: 0; font-size: 16px; }
.stage-won h2 { color: var(--ok); } .stage-lost h2 { color: var(--muted); }
@media (max-width: 720px) { .prow-opp { grid-template-columns: 1fr; gap: 2px; } }