/* ─────────────────────────────────────────────────────────────────────────
   The screens' own styles. The parts with a prototype counterpart are
   copied from it unchanged (Money/overzicht, Money/transacties, Werk/agenda,
   in that order, Dutch comments and all), so the app looks the same as the
   prototype; the app's own parts follow. Shared parts stay in the
   prototype's componenten.css, loaded before this file.
   ───────────────────────────────────────────────────────────────────────── */

/* ── from Money/overzicht ─────────────────────────────────────────────── */
.money-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
/* elke kolom een kaart op het bureau */
.money-grid > section, .priv-grid > * { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); padding: 14px 18px 12px; }
@media (max-width: 1100px) { .money-grid { grid-template-columns: 1fr; } }

/* waar het geld staat: de rekeningen, met de streep van hun bedrijf */
.ent-row { padding-left: 12px; }
.ent-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 2px 2px 0; background: var(--tone); }

/* wat eraan komt */
.up-list { display: flex; flex-direction: column; }
.up-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line-faint); font-size: 13px; }
.up-d { width: 48px; flex: none; color: var(--text-3); font-size: 12px; }
.up-row .grow { display: flex; flex-direction: column; min-width: 0; }
.up-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.up-s { font-size: 11.5px; color: var(--text-3); }
.up-a { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.up-dates { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.up-dates .link { display: inline-flex; align-items: center; gap: 4px; }

/* doelen: inkt is waar je staat, gearceerd is wat EC verwacht (EC.meter) */
.goals { display: flex; flex-direction: column; gap: 4px; }
.goal-row { padding: 12px 2px 14px; border-bottom: 1px solid var(--line-faint); }
.gr-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.gr-meter { margin-top: 10px; }
.gr-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; font-size: 12.5px; color: var(--text-2); }


/* tussen zakelijk en privé */
.flows { display: flex; flex-direction: column; border-top: 1px solid var(--line-faint); }
.flow-row { display: grid; grid-template-columns: 130px 14px 120px 150px 150px minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px 2px; font-size: 13px; border-bottom: 1px solid var(--line-faint); }
.flow-a, .flow-b { font-weight: 600; }
.flow-row .i { color: var(--text-3); }
.flow-w { color: var(--text-2); }
.flow-n { line-height: 1.4; }

/* privé */
.priv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.priv-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .priv-grid, .priv-grid.two { grid-template-columns: 1fr; } }
.pl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; }
.pl-row.total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-strong); font-weight: 700; }
.pl-sub { margin-top: -4px; }
.pl-meter { margin: 0 0 4px; }

/* ── from Money/transacties ───────────────────────────────────────────── */
.lg-ws.tx { --lg-cols: 44px minmax(0, 1fr) 86px 112px; }
.lg-amt.in { color: var(--money-in); }
.lg-st .tag + .lg-icon { margin-left: 4px; }
.lg-icon.attn { display: inline-flex; color: var(--signal); }
.lg-row.on .lg-icon.attn { color: var(--signal); }


/* ── het bureau: afstemmen. Links de bankregel, rechts het bewijs, ertussen
   wat overeenkomt. Ontbreekt de bon, dan is de rechterhelft leeg. ───────── */
.lg-match { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: start; }
.lg-card { position: relative; border-radius: 4px; border: 1px solid var(--line); background: var(--bg-elev); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 36px -24px rgba(0, 0, 0, 0.28); }
.lg-card-h { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line-faint); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.lg-card-h .i { color: var(--text-3); flex: none; }
.lg-card-h > span:not(.faint) { overflow: hidden; text-overflow: ellipsis; }
.lg-card-h .faint { margin-left: auto; font-weight: 500; font-size: 11.5px; }
.lg-card.bank .lg-card-h { background: var(--bg-tint); }
.lg-mrow { display: flex; flex-direction: column; justify-content: center; height: 47px; padding: 0 14px; border-bottom: 1px solid var(--line-faint); min-width: 0; }
.lg-mrow .k { font-size: 11px; color: var(--text-3); }
.lg-mrow .v { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-mrow.amt .v { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lg-mrow.in .v { color: var(--money-in); }
.lg-card-f { padding: 10px 14px; font-size: 11.5px; color: var(--text-3); line-height: 1.45; }
/* de vinkjes: op dezelfde hoogte als de regels links en rechts */
.lg-ticks { display: flex; flex-direction: column; padding-top: 41px; }
.lg-tick { position: relative; display: flex; align-items: center; justify-content: center; height: 47px; }
.lg-tick::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-strong); }
.lg-tick > * , .lg-tick { z-index: 0; }
.lg-tick .i, .lg-tick { font-size: 11px; font-weight: 700; color: var(--text-3); }
.lg-tick .i { position: relative; z-index: 1; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--desk); }
.lg-tick.ok .i { color: var(--text-inv); background: var(--ink); }
.lg-tick.ok::before { border-top-style: solid; border-color: var(--ink); }
.lg-tick.q { color: var(--signal); }
.lg-tick.q::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 1.5px dashed var(--signal); background: var(--desk); z-index: 0; }
.lg-tick.q { z-index: 1; }
/* de lege helft: hier hoort de bon */
.lg-card.empty { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 268px; padding: 20px 22px; text-align: center;
  border: 1.5px dashed color-mix(in srgb, var(--signal) 55%, transparent); background: transparent; box-shadow: none; }
.lg-card.empty .i { color: var(--signal); width: 22px; height: 22px; }
.lg-card.empty b { font-size: 14px; color: var(--text); }
.lg-card.empty span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; max-width: 30ch; }
.lg-card.empty .btn { margin-top: 4px; }
.lg-card.empty.over { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 6%, transparent); }
.lg-card.empty.quiet { border-color: var(--line-strong); }
.lg-card.empty.quiet .i { color: var(--text-3); }

/* ── from Werk/agenda ─────────────────────────────────────────────────── */
.cal-nav { display: flex; gap: 4px; }
.cal-period { font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; min-width: 150px; }

.plan { flex: 1; min-height: 0; display: flex; gap: var(--card-gap); padding: 0 var(--gutter) var(--gutter); }
.plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); }

/* ── raster ───────────────────────────────────────────────────────────── */
.cal { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cal-head, .cal-allday { display: grid; grid-template-columns: 58px var(--cols); flex: none; }
.cal-head { border-bottom: 1px solid var(--line-faint); }
.cal-gut { display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 8px 6px 0; font-size: 10.5px; color: var(--text-3); }
.cal-gut .wk { font-weight: 700; }
.cal-allday .cal-gut { align-items: center; padding-bottom: 0; font-size: 10.5px; font-weight: 700; }
.cal-dh { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 10px 10px 9px; border-left: 1px solid var(--line-faint); text-align: left; }
.cal-dh:hover { background: var(--bg-hover); }
.cal-dh .dn { font-size: 12px; font-weight: 500; color: var(--text-2); }
.cal-dh .dd { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-dh.today .dn { color: var(--text); font-weight: 700; }
.cal-dh.today .dd { min-width: 26px; height: 26px; padding: 0 5px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--text-inv); font-size: 13.5px; }
.cal-dh .dl { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.cal-allday { border-bottom: 1px solid var(--line-strong); min-height: 30px; }
.cal-ad { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px 5px; border-left: 1px solid var(--line-faint); }
.due-chip {
  display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 4px; max-width: 100%; min-width: 0;
  font-size: 11px; font-weight: 500; color: var(--text-2); background: color-mix(in srgb, var(--ink) 5%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.due-chip.today { background: transparent; color: var(--signal); font-weight: 700; box-shadow: inset 0 0 0 1px var(--signal); }
.due-chip.ob { background: transparent; border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.due-more { font-size: 11px; color: var(--text-3); padding-left: 4px; }

.cal-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.cal-body { position: relative; display: grid; grid-template-columns: 58px var(--cols); margin-top: 8px; }
.cal-gut.hours { position: relative; display: block; padding: 0; }
.cal-gut.hours span { position: absolute; right: 9px; transform: translateY(-50%); font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cal-gut.hours .now-lbl { font-size: 10.5px; font-weight: 700; color: var(--signal); background: var(--bg-elev); padding: 1px 0 1px 4px; z-index: 5; }
.day-col {
  position: relative; border-left: 1px solid var(--line-faint);
  background-image: linear-gradient(var(--line-faint) 1px, transparent 1px);
  background-size: 100% var(--hour);
}
.day-col.we { background-color: color-mix(in srgb, var(--ink) 2%, transparent); }

/* ── blokken: de kleur van het bedrijf als streep en tint ─────────────────
   meeting      tint van de bedrijfskleur, streep links
   gepland werk wit, gestippelde rand in de bedrijfskleur, streep links
   voorbij      een lichte sluier eroverheen
   busy         een ander bedrijf terwijl je één context bekijkt: grijs */
.ev {
  position: absolute; z-index: 2; overflow: hidden; padding: 4px 22px 4px 10px; border-radius: 4px; cursor: pointer;
  font-size: 12px; line-height: 1.3; color: var(--text);
  background: color-mix(in srgb, var(--tone) var(--tint), var(--bg-elev));
  box-shadow: inset 3px 0 0 var(--tone);
  transition: box-shadow var(--d-fast) var(--ease);
}
.ev:hover { z-index: 3; box-shadow: inset 3px 0 0 var(--tone), 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent); }
.ev-t { display: flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-t .i { flex: none; color: var(--tone); }
.ev-s { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; font-variant-numeric: tabular-nums; }
.ev-code { position: absolute; top: 5px; right: 5px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; color: color-mix(in srgb, var(--tone) 75%, var(--text)); }
.ev.short { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; padding-right: 7px; }
.ev.short .ev-t { font-size: 11.5px; }
.ev.block {
  background: var(--bg-elev); cursor: grab;
  border: 1px dashed color-mix(in srgb, var(--tone) 60%, transparent);
}
.ev.past::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--bg-elev) 50%, transparent); pointer-events: none; z-index: 1; }
.ev.done .ev-t { text-decoration: line-through; }
.ev.busy { cursor: default; padding-right: 7px; box-shadow: none; border: 0; color: var(--text-3); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ev.busy .ev-t { font-weight: 500; font-size: 11px; }
.ev.fresh { animation: ev-in 700ms var(--ease-out); box-shadow: inset 3px 0 0 var(--tone), 0 0 0 2px var(--ink); }
@keyframes ev-in { 0% { transform: scale(0.94); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.ev-who { display: flex; align-items: center; gap: 3px; margin-top: 6px; }
.ev-who .faint { font-size: 11px; margin-left: 4px; }
.ev-flag { position: absolute; z-index: 2; right: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.ev-flag.bill { background: var(--bg-elev); color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.ev-flag.bill:hover { background: var(--signal); color: #fff; }
.ev-flag.tr { background: var(--ink); color: var(--text-inv); }
.ev-flag.rec { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--text-2); font-weight: 600; }
.ev.short .ev-flag { bottom: 50%; transform: translateY(50%); }
.ev-resize { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.ev-resize::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--tone); opacity: 0; transition: opacity var(--d-fast); }
.ev:hover .ev-resize::after { opacity: 0.7; }

/* nu: de signaalkleur */
.now-line { position: absolute; left: -1px; right: 0; height: 2px; margin-top: -1px; background: var(--signal); z-index: 4; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }


/* ════════════════════════════════════════════════════════════════════════
   The app's own screen parts (no prototype counterpart, or new since the
   switch to Ponto). Same tokens, same rhythm as componenten.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ── pages ───────────────────────────────────────────────────────────── */
.page.narrow { max-width: 760px; }
.page.wide { max-width: none; }
.stand.compact { margin-bottom: 16px; }
.stand.compact .stand-fig { font-size: 26px; line-height: 32px; }
.drop-empty { padding: 32px 16px; }
.pre-wrap { white-space: pre-wrap; line-height: 1.55; }
.rw-more { display: flex; justify-content: center; padding: 12px; }
.card-table tr.clickable { cursor: pointer; }
.card-table tr.clickable:hover td { background: var(--bg-hover); }
.select.bare { border: 0; background: transparent; padding: 0 18px 0 4px; height: auto; font: inherit; color: inherit; }

/* ── Home ────────────────────────────────────────────────────────────── */
.home-needs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.home-need { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 16px; border: 1px solid var(--card-line); border-radius: var(--card-r); background: var(--card); color: var(--text); text-decoration: none; }
.home-need::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: var(--tone); }
.home-need:hover { background: var(--bg-hover); }
.home-need.attn .row-ic { color: var(--signal); }
.home-need .col { display: flex; flex-direction: column; min-width: 0; }
.home-item .home-time { width: 46px; flex: none; color: var(--text-3); font-size: 12px; }

/* ── tasks ───────────────────────────────────────────────────────────── */
.task-row { display: flex; align-items: center; gap: 10px; }
.task-row.done .task-title { text-decoration: line-through; color: var(--text-3); }
.task-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; color: var(--text); }
.task-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-ent { flex: none; }
.task-due { flex: none; font-variant-numeric: tabular-nums; }
.title-input { font-size: 17px; font-weight: 600; border-color: transparent; background: transparent; padding-left: 4px; }
.title-input:hover, .title-input:focus { border-color: var(--line-strong); background: var(--bg-elev); }
.sub-row { gap: 8px; }

/* ── documents ───────────────────────────────────────────────────────── */
.drop-veil { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.drop-veil[hidden] { display: none; }
.drop-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 36px; border: 2px dashed var(--ink); border-radius: var(--r-xl); background: var(--bg-elev); }
.upload-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.upload-list li { display: flex; align-items: center; gap: 8px; }

/* ── settings ────────────────────────────────────────────────────────── */
.conn-opts { display: flex; flex-direction: column; gap: 8px; }
.conn-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--card-line); border-radius: 10px; background: var(--bg-elev); text-align: left; color: var(--text); width: 100%; }
.conn-opt:hover:not([disabled]) { border-color: var(--ink); }
.conn-opt[disabled] { opacity: 0.55; cursor: not-allowed; }
.conn-opt .col { display: flex; flex-direction: column; gap: 2px; }
.conn-card.bad { border-left: 3px solid var(--signal); padding-left: 12px; }
.conn-table td { vertical-align: top; }
.radio-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; font-size: 13px; cursor: pointer; }
.radio-row input { margin-top: 3px; }
.mfa-setup { display: flex; flex-direction: column; gap: 10px; }
.mfa-key { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em; padding: 8px 10px; border-radius: 6px; background: var(--fill); word-break: break-all; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-family: var(--f-mono); font-size: 13px; padding: 12px; border-radius: 8px; background: var(--fill); }
.act-day { font-size: 11.5px; font-weight: 700; color: var(--text-3); padding: 14px 0 4px; }
.steps-list { margin: 0 0 4px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; list-style: decimal; }

/* ── getting started ─────────────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 0; margin-top: 8px; list-style: none; padding: 0; }
.step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-faint); }
.step-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line-strong); color: var(--text-2); }
.step.done .step-n { background: var(--ink); color: var(--text-inv); border-color: var(--ink); }
.step.now .step-n { border: 2px solid var(--ink); color: var(--text); }
.step.skipped { opacity: 0.7; }
.step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.step-h { display: flex; align-items: center; gap: 8px; }
.step-t { font-weight: 600; font-size: 14px; }
.step.done .step-t { color: var(--text-2); }
.step-why { font-size: 13px; color: var(--text-2); line-height: 1.55; max-width: 62ch; }

/* ── search ──────────────────────────────────────────────────────────── */
.big-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; margin: 8px 0 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elev); }
.big-search input { flex: 1; border: 0; background: transparent; font-size: 16px; color: var(--text); outline: none; }
.search-results .row.on { background: var(--bg-hover); box-shadow: inset 3px 0 0 var(--ink); }

/* ── transactions: what a line is ────────────────────────────────────── */
.reg-block { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--card-line); border-radius: 10px; background: var(--bg-elev); display: flex; flex-direction: column; gap: 10px; }
.reg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13.5px; }
.reg-head .reg-by { margin-left: auto; }
.reg-proposal { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 13px; }
.reg-form .field { margin: 0; }

/* ── budget ──────────────────────────────────────────────────────────── */
.bud-table th, .bud-table td { white-space: nowrap; }
.bud-table td:first-child { white-space: normal; min-width: 180px; }
.bud-group td { font-size: 11.5px; font-weight: 700; color: var(--text-3); padding-top: 14px; text-transform: none; }
.bud-total td, .bud-result td { font-weight: 700; border-top: 1px solid var(--line-strong); }
.bud-result td { border-top-width: 2px; }
.bud-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.checklist { display: flex; flex-direction: column; gap: 4px; }

/* ── inbox ───────────────────────────────────────────────────────────── */
.mail-frame { width: 100%; min-height: 420px; height: 60vh; border: 0; border-radius: 6px; background: #fff; margin-top: 16px; }
.sender-warn { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--attn-soft); color: var(--text); font-size: 13px; line-height: 1.5; }
.sender-warn .i { color: var(--signal); flex: none; margin-top: 2px; }
.sender-warn .col { display: flex; flex-direction: column; gap: 2px; }

/* ── plan: the month, and the calendars to show ─────────────────────── */
.plan-screen .plan { height: 100%; }
/* the same width as every other workspace rail (Tasks, Inbox): without it the
   rail grows to fit its longest line, the footer, and covers the bar */
.plan .rw-rail { flex: none; width: var(--rail-w); }
.cal-check { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--tone); color: var(--text-inv); flex: none; }
.cal-check.on { background: var(--tone); }
.ev { text-align: left; border: 0; }
.ev.tentative { background: var(--bg-elev); box-shadow: inset 3px 0 0 var(--tone), inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent); }
.cal-month { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.cm-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line-faint); }
.cm-head span { padding: 8px 10px; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.cm-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cm-day { border-left: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); padding: 4px 5px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cm-day.out { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.cm-day.out .cm-n { color: var(--text-3); }
.cm-n { align-self: flex-start; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 1px 5px; border-radius: 4px; }
.cm-day.today .cm-n { background: var(--ink); color: var(--text-inv); }
.cm-ev { display: block; text-align: left; font-size: 11px; padding: 1px 5px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); background: color-mix(in srgb, var(--tone) 12%, var(--bg-elev)); box-shadow: inset 2px 0 0 var(--tone); }

@media (max-width: 900px) {
  .money-grid, .priv-grid { grid-template-columns: 1fr; }
  .flow-row { grid-template-columns: 1fr 1fr; }
  .lg-match { grid-template-columns: 1fr; }
  .lg-ticks { display: none; }
  .bud-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan { flex-direction: column; padding: 0 12px 12px; }
  .plan .rw-rail { width: auto; }
  .mail-frame { height: 50vh; }
  .reg-head .reg-by { margin-left: 0; width: 100%; }
}

/* ── Documents › To process (screens/intake.js) ──────────────────────────
   EC's block, the values with where each came from, the checks. The same
   parts as the design (artifact "EC Document Intelligence"). */
.intake-ws { position: relative; }
.tx-q { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin-top: 6px; text-wrap: balance; }
.sugg-k { font-size: 11.5px; font-weight: 700; color: var(--text-3); margin: 14px 0 2px; }
.sugg.ask { border-color: color-mix(in srgb, var(--signal) 35%, var(--line-faint)); }
.sugg.ask > .sugg-head .ec-mark { color: var(--signal); }
.sugg-choices .choice b { font-weight: 700; }
.pv { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line-strong); white-space: nowrap; }
.pv .i { width: 11px; height: 11px; }
.pv.inf { border-style: dashed; color: var(--text-3); }
.pv.you { background: var(--ink); border-color: var(--ink); color: var(--text-inv); }
.fx-r { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-faint); font-size: 13px; }
.fx-l { color: var(--text-3); }
.fx-v { min-width: 0; }
.fx-n { display: block; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-p { display: flex; gap: 4px; justify-content: flex-end; }
ul.checks { display: flex; flex-direction: column; }
ul.checks li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13px; line-height: 1.45; }
ul.checks li .i { margin-top: 2px; flex: none; }
ul.checks li.ok .i { color: var(--ink); }
ul.checks li.warn { color: var(--text-2); }
ul.checks li.warn .i { color: var(--text-3); }
ul.checks li.bad { color: var(--signal); font-weight: 600; }
.hist { display: flex; gap: 10px; font-size: 12.5px; padding: 4px 0; color: var(--text-2); }
.hist b { font-weight: 600; color: var(--text); }
.intake-edit .form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
@media (max-width: 900px) { .fx-r, .intake-edit .form-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Documents › Agreements: a version per row; one that waits for its date is dotted */
.ver { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--card-line); border-radius: 10px; font-size: 13px; margin-bottom: 6px; }
.ver .grow b { display: block; font-weight: 600; }
.ver .grow span.faint { display: block; }
.ver-n { flex: none; width: 30px; height: 24px; border-radius: 6px; background: var(--fill); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; }
.ver.prop { border-style: dashed; }

/* To process: always file this sender here · Agreements: Ask EC */
.opt-line { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.opt-line .check { flex: none; }
.ask-box { min-width: 0; flex: 1 1 340px; max-width: 520px; }
.ask-box .ec-mark { color: var(--signal); }
.ag-answer { margin: 10px 12px 4px; }
.ag-answer .tx-q { margin-top: 6px; }