/* Compact controls (5.47). Loaded last, so the sizes the screens share are set in one place.

   The owner found the buttons, bars and text boxes too big. A field is 38px now (it was 44), a full-width
   button 46 (it was 52), a chip 30 (it was 34). What a fingertip needs does not shrink: a chip, switch or
   button keeps a 44px reach strip, drawn by --k-tap as before, and a text field keeps the whole 38px because it
   is a target in itself and a thumb lands on it easily. */

:root {
  --k-ctl-lg: 42px;
  --k-ctl-md: 36px;
  --k-ctl-sm: 28px;
  --control-lg: 42px;
  --control-md: 36px;
  --control-sm: 28px;
}

.k-input,
.k-select { font-size: 15px; }
.k .k-field { margin-bottom: var(--k-3); }
.k .k-field > .k-label { margin-bottom: var(--k-1); }

/* --- Add -------------------------------------------------------------------------------------------- */
:root[data-style] .k .add-card { gap: var(--k-2); padding: var(--k-3); margin-bottom: var(--k-2); }
:root[data-style] .k .add-card--category .k-picker { min-height: var(--k-ctl-md); }

/* Account and date, side by side. */
.k .add-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k-2); }
.k .add-pair .k-field { min-width: 0; margin: 0; }
.k .add-pair #add-account-mark { display: none; }
.k .add-pair .k-picker { padding-left: var(--k-3); }
.k .add-pair .k-picker--select::after { margin-right: var(--k-3); }
.k .add-pair .field-date .k-input { min-height: var(--k-ctl-md); padding: 0 var(--k-3); }
.k .add-pair .k-picker--select .k-select { min-height: var(--k-ctl-md); }

/* The categories used most, in one line you can slide, not three lines of chips. */
.k .add-card--category .k-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--k-2); margin: 0 calc(var(--k-3) * -1) var(--k-1); padding: var(--k-2) var(--k-3); }
.k .add-card--category .k-quick::-webkit-scrollbar { display: none; }
.k .add-card--category .k-quick__chip { flex: none; min-height: var(--k-ctl-sm); padding: 0 var(--k-3); position: relative; font-size: 13px; }
.k .add-card--category .k-quick__chip::before { content: ""; position: absolute; inset: 50% 0 auto 0; height: var(--k-tap); transform: translateY(-50%); }

.k .k-switch-row { min-height: 0; padding: var(--k-1) 0; gap: var(--k-3); }
.k .k-switch-row__text { font-size: 14px; }
.k .k-switch-row__sub { font-size: 12px; margin-top: 0; }
.k .k-add-more { margin-top: 0; }

/* --- History: the open payment ---------------------------------------------------------------------- */
.k .txn-expanded { gap: var(--k-2); }
.k .hist-edit { display: grid; gap: var(--k-2); margin-top: var(--k-2); }
.k .hist-edit__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--k-2); align-items: stretch; }
.k .hist-amount { display: flex; align-items: center; gap: var(--k-1); min-width: 0; padding: 0 var(--k-3); min-height: var(--k-ctl-md); border: 1px solid var(--k-border-subtle); border-radius: var(--k-r-md); background: var(--k-glass-1); color: var(--k-text-2); font-size: 18px; }
.k .hist-amount:focus-within { border-color: var(--k-accent); box-shadow: 0 0 0 1px var(--k-accent); }
.k .hist-amount .rv-amount-input { flex: 1; min-width: 0; width: 100%; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--k-text); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
.k .hist-amount .rv-amount-input:focus-visible { outline: none; box-shadow: none; }
.k .hist-edit .direction-toggle { align-self: stretch; }
.k .hist-edit .dir-btn { min-height: var(--k-ctl-md); padding: 0 var(--k-3); }
.k .hist-edit__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k-2); }
.k .hist-edit .rv-field,
.k .hist-edit select.hist-catsel { width: 100%; min-height: var(--k-ctl-md); margin: 0; padding: 0 var(--k-3); font-size: 15px; }
.k .hist-edit .rv-field[type="checkbox"] { width: 22px; min-height: 22px; padding: 0; }
.k .hist-more { margin: 0; }
.k .hist-more > summary { min-height: 0; padding: var(--k-2) 0; color: var(--k-text-2); font-size: var(--k-label); }
.k .hist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2) var(--k-4); padding: var(--k-1) 0 0; }
.k .hist-actions .hist-save { flex: none; min-height: var(--k-ctl-md); padding: 0 var(--k-6); }

/* A row of chips that slides must never make its card wider than the screen. */
:root[data-style] .k .add-card { grid-template-columns: minmax(0, 1fr); }
:root[data-style] .k .add-card > * { min-width: 0; }

/* The amount is one box holding the sign and the figure; the field inside it draws nothing of its own. */
:root[data-style] .k .hist-amount input.rv-amount-input { border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 0; padding: 0; }
/* Date and time look like the other fields. */
.k .hist-edit input[type="date"],
.k .hist-edit input[type="time"] { border: 1px solid var(--k-border-subtle); border-radius: var(--k-r-md); background-color: var(--k-glass-1); background-image: var(--k-sheen); color: var(--k-text); font-family: inherit; }
.k .hist-actions { gap: var(--k-2) var(--k-3); }
.k .hist-actions .hist-save { padding: 0 var(--k-5); }
:root[data-style] .k .hist-edit select.hist-catsel { border-radius: var(--k-r-md); height: var(--k-ctl-md); }
.k .hist-actions { gap: var(--k-2) var(--k-3); }
.k .hist-actions .link-btn { padding-inline: var(--k-1); }
/* The Spent / Received pair is as tall as the amount beside it, not taller. */
.k .hist-edit .direction-toggle { padding: 2px; min-height: var(--k-ctl-md); }
.k .hist-edit .dir-btn { min-height: calc(var(--k-ctl-md) - 6px); }
.k .hist-edit .direction-toggle { margin: 0; }

/* A button is shorter than a fingertip, its reach is not: an invisible 44px strip does the touching. */
.k .k-btn,
.k .btn-secondary,
.k .k-picker { position: relative; }
.k .k-btn::before,
.k .btn-secondary::before,
.k .k-picker::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--k-tap); transform: translateY(-50%); }


/* --- One rhythm for every screen (5.47.1) -----------------------------------------------------------
   The screens had grown their own paddings (12, 14, 16, 20, 24) and gaps (8, 12, 16, 20), so edges did not line
   up and the page felt crowded even where it was not. Now: a 16px gutter, 14/16 inside a card, 12px between
   cards, 24px before a heading and 8px after it, and a heading starts on the card's own edge. */
:root[data-style] .k .totals-card,
:root[data-style] .k .tl-hero,
:root[data-style] .k .tl-card,
:root[data-style] .k .hero,
:root[data-style] .k .hist-days-card,
:root[data-style] .k .plan-sums,
:root[data-style] .k .summary-viz,
:root[data-style] .k .k-context,
:root[data-style] .k .warn-card { padding: 14px 16px; }
:root[data-style] .k .totals-card,
:root[data-style] .k .tl-hero,
:root[data-style] .k .tl-card,
:root[data-style] .k .hero,
:root[data-style] .k .hist-days-card,
:root[data-style] .k .plan-sums,
:root[data-style] .k .tl-list,
:root[data-style] .k .segmented { margin-top: 0; margin-bottom: 12px; }
:root[data-style] .k .summary-viz,
:root[data-style] .k .k-context.summary-insight { margin-top: 12px; margin-bottom: 0; }
.k .section-head { margin: 24px 0 8px; }
.k .account-group-sec { margin-top: 20px; }
.k .account-group-label { padding-inline: 0; margin-bottom: 6px; }
.k .accounts-actions--top { margin-bottom: 8px; }

/* Search and the filter chips: one size, one line. */
.k .hist-top { margin: 12px 0 8px; }
.k .hist-search { min-height: var(--k-ctl-md); padding: 0 var(--k-3); font-size: 14px; }
.k .hist-select-btn { min-height: var(--k-ctl-md); padding: 0 var(--k-4); font-size: 13px; }
.k select.hist-chip, .k button.hist-chip { min-height: var(--k-ctl-sm); padding: 0 var(--k-3); font-size: 13px; }
.k .hist-chips { margin-bottom: 8px; }

/* The big figures are a little quieter: a number can lead without shouting. */
.k .hero .hero-amount { font-size: clamp(2rem, 10.5vw, 2.6rem); }

/* Buttons: smaller type, lighter weight, full-width ones no taller than a field. */
.k .k-btn, .k .btn-secondary { font-size: 13px; }
.k .btn-block, .k .k-btn--primary.btn-primary { min-height: var(--k-ctl-lg); }
.k .hist-actions .hist-save { min-height: var(--k-ctl-sm); padding: 0 var(--k-4); font-size: 13px; }
.k .hist-actions .link-btn { font-size: 13px; }
.k .hist-edit .dir-btn { font-size: 11px; }

/* Quiet actions line up under the name they belong to, and the screen's own two sit at its edges. */
.k .account-actions-inline { margin: 0 0 0 48px; gap: var(--k-3); }
.k .account-actions-inline .k-btn { min-height: var(--k-ctl-sm); padding: 0; }
.k .accounts-actions--top { justify-content: space-between; }
.k .accounts-actions--top .k-btn--ghost { flex: none; padding: 0; min-height: var(--k-ctl-md); }
.k .accounts-actions--top .k-btn--secondary { flex: 1 0 100%; }

/* A card inside a card is a second frame round the same figures: the figures keep a hairline, not a box. */
:root[data-style] .k .tl-hero .tl-list,
:root[data-style] .k .hero .tl-list { border: 0; background: none; box-shadow: none; padding: 0; }

.k .account-actions-inline { justify-content: flex-start; }
:root[data-style] .k .hero-under { border: 0; background: none; box-shadow: none; padding: 0; margin: 12px 0 0; }
.k .coach-hub { width: 84px; height: 84px; }
:root[data-style] .k .add-form > .direction-toggle { margin: 0 0 12px; }
:root[data-style] .k .k-add-sms { margin: 0 0 12px; padding: 10px 14px; }
.k .add-form { padding-top: 0; }
:root[data-style] .k .hero .hero-under,
:root[data-style] .k #hist-hero .hero-under { border: 0; background: none; box-shadow: none; padding: 0; margin: 12px 0 0; }
/* A short word is reached from a little either side of it as well. */
.k .account-actions-inline .k-btn::before { left: -10px; right: -10px; }

/* --- 5.49 ------------------------------------------------------------------------------------------- */
/* The account list is a real select under a drawn row; the reach strip over it caught the tap, so it never opened. */
.k .k-picker--select::before { display: none; }

/* Every field is exactly one height, whatever it holds. */
.k .add-card .k-input:not(textarea),
.k .add-card .k-picker,
.k .add-card .k-picker--select .k-select,
.k .hist-edit .rv-field:not([type="checkbox"]),
.k .hist-edit select.hist-catsel,
.k .hist-amount { box-sizing: border-box; height: var(--k-ctl-md); min-height: var(--k-ctl-md); }

/* The open payment's last row: the three small actions together on the left, Save on the right, one centre line. */
.k .hist-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--k-3); padding: var(--k-2) 0 0; border-top: 1px solid var(--k-hairline); margin-top: var(--k-2); }
.k .hist-actions__more { display: flex; align-items: center; gap: var(--k-4); min-width: 0; flex-wrap: wrap; }
.k .hist-actions .link-btn { min-height: var(--k-ctl-sm); padding: 0; font-size: 13px; font-weight: 600; }
.k .hist-actions .hist-save { flex: none; min-height: var(--k-ctl-sm); height: var(--k-ctl-sm); padding: 0 var(--k-5); letter-spacing: .06em; }

/* Plan: what is still to pay, then the paid ones tucked under a line. */
.k .plan-flag { margin-bottom: 12px; }

/* --- 5.50: the coming months, with what the bank will hold ----------------------------------------- */

/* --- 5.51: how a list is ordered -------------------------------------------------------------------- */
.k .sort-pick { height: var(--k-ctl-md); min-height: var(--k-ctl-md); padding: 0 var(--k-6) 0 var(--k-3); border-radius: var(--k-r-pill); border: 1px solid var(--k-border-subtle); background-color: var(--k-glass-1); color: var(--k-text-2); font: inherit; font-size: 12px; font-weight: 600; width: auto; }
.k .accounts-actions--top .sort-pick { margin-left: auto; }

/* Coach is a button at the top of Plan since 5.52 (it left the tab bar so Add can sit in the middle). */
.plan-coach { display: flex; align-items: center; gap: var(--k-3); width: 100%; margin: 0 0 var(--k-3); padding: 8px 12px; border: 0; border-radius: 16px; font: inherit; color: var(--k-text); text-align: left; background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-hairline); cursor: pointer; }
.plan-coach__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex: none; color: var(--k-accent-ink); background: var(--k-accent-text); }
.plan-coach__ic svg { width: 18px; height: 18px; }
.plan-coach__t { display: grid; gap: 1px; flex: 1; min-width: 0; }
.plan-coach__t b { font-size: 15px; font-weight: 650; }
.plan-coach__t small { font-size: 12.5px; color: var(--k-text-3); }
.plan-coach__go { display: grid; color: var(--k-text-3); }
.plan-coach__go svg { width: 16px; height: 16px; }
.plan-coach:active { transform: scale(0.985); }

/* Policies (5.84): the list, one policy's details, its form. The rows are Plan's own (k-row, totals-card); these add only
   what is new: the colour of a premium date that is close or late, and details that wrap instead of running off the card. */
.pol .pol-meta.is-soon, .pol .pol-meta.is-warn, .pol .pol-tone.is-soon, .pol .pol-tone.is-warn { color: var(--warn); }
.pol .pol-meta.is-bad, .pol .pol-tone.is-bad { color: var(--out); }
.pol .pol-fact { gap: 16px; align-items: flex-start; }
.pol .pol-fact > span:last-child { text-align: right; max-width: 64%; overflow-wrap: anywhere; white-space: normal; font-weight: 600; }
.pol .pol-fact a { display: inline-block; padding: 12px 0; margin: -12px 0; color: inherit; text-decoration: underline; }
.pol .btn-primary { margin-top: var(--space-sm); }
.pol .btn-tiny { min-height: 44px; }
.pol .pol-total .k-row__title { font-weight: 650; }
.pol .section-fold { margin: var(--space-xs) 0; }
.plan-policies-card .k-row { min-height: 56px; }
.plan-policies-card .k-row__value svg { width: 16px; height: 16px; }
.fixed-form .policy-open, #fixed-form .policy-open { min-height: 44px; }
/* The rest of the year on Plan sits in a fold, and a fold takes the side padding off its rows (it was made for the Add form);
   these rows are a list like the three above them and keep the same padding. */
:root[data-style="haven"] .hv-plan-forecast .hv-fold .hv-row { padding-inline: 16px; }
/* "The whole year" is a button like any other: a thumb needs 44 px (the gate's tap-target audit caught 35). */
:root[data-style="haven"] .hv-plan-forecast .hv-detailsbtn { min-height: 44px; }

/* One-time bills (5.85): the list and its form use Plan's own rows; only the colour of a date that is close or late is new. */
.bills .bill-meta.is-warn { color: var(--warn); }
.bills .bill-meta.is-bad { color: var(--out); }
.bills .btn-tiny, .bills .btn-secondary { min-height: 44px; }
.bills .btn-primary { margin-top: var(--space-sm); }
.bills .bill-total .k-row__title { font-weight: 650; }
.bills .section-fold { margin: var(--space-xs) 0; }