/* Fit (5.43.2): a small phone, or larger text, must never squeeze a name to a sliver or push a control off the
   screen. GENERATED by tools/release/make_fit.py from one list of rules, written once for a narrow screen and once
   for larger text; edit the script, not this file. It loads last, so it wins over the looks. */

/* --- a narrow screen --- */
@media (max-width: 360px) {

  /* Names say what they are: two lines, then an ellipsis, never one cut short beside a wide figure. */
  .commitment-name, .hist-name, .hist-sub, .k-row__title, .k-row__meta,
  .k-plan .plan-row .k-row__title, .k-plan .plan-row .k-row__meta, .k .hist-sub-text, .k .account-row .k-row__title, .cat-bar-name {
    white-space: normal;
    text-overflow: clip;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
  }

  /* Summary's list of costs: the name gets the whole line, the figures sit under it. */
  .commitment-row > summary { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3xs); }
  .commitment-row > summary .commitment-side { grid-column: 1 / -1; justify-content: space-between; flex-wrap: wrap; }

  /* A row is an icon, a name and a figure: when the three do not fit, the figure drops under the name. */
  .k-row { flex-wrap: wrap; row-gap: 4px; }
  .k-row__body { flex: 1 1 8.5rem; min-width: 0; }
  .k-row .k-row__value { white-space: nowrap; margin-left: auto; }
  .k-plan .plan-row { min-height: 0; }
  .k .btn-tiny { flex: none; }

  /* A suggestion with Add and Dismiss: the buttons drop under the words when the line is full. */
  .attention-row { flex-wrap: wrap; row-gap: 8px; }
  .attention-row > span:first-child { flex: 1 1 9rem; min-width: 0; }
  .attention-actions { flex-wrap: wrap; margin-left: auto; max-width: 100%; }

  /* Segmented controls (Spent, Received, Lent): labels may take two lines instead of running off the screen. */
  .k-seg { max-width: 100%; }
  .k-seg__btn { white-space: normal; line-height: 1.2; text-align: center; padding-inline: 10px; }

  /* Fields and pickers never wider than the screen. */
  .k-field, .k-picker, .k-input, .k-select { max-width: 100%; min-width: 0; }
  /* ...and a select sizes itself to its longest option, so a long account name ran it 500px wide (import review). */
  .field :is(input, select, textarea) { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .field select { text-overflow: ellipsis; }
  /* A full-width small button may take two lines ("Looks wrong? Download a report" ran out of its pill at 320). */
  .btn-tiny.btn-block { white-space: normal; line-height: 1.25; text-align: center; }
  :where(.k-field, .k-picker, .k-switch-row, .settings-row) > * { min-width: 0; }

  /* The tab bar: sentence case, no tracking and a size that follows the screen, so six words fit 320 at any text size. */
  .nav-btn > span:not(.nav-icon) { text-transform: none; letter-spacing: 0; font-size: min(var(--text-micro), 3.1vw); }

  /* The big figure's card: its small lines wrap instead of pushing past the card. */
  .hero, .hero > * { min-width: 0; overflow-wrap: anywhere; }
  .hero [class*="label"], .hero .hero-status, .hero .hero-sub { white-space: normal; }

  /* Spent, Received and Lent share the width of the card they sit in. */
  .amount-hero .k-seg { display: flex; width: 100%; }
  .amount-hero .k-seg__btn { flex: 1 1 0; min-width: 0; padding-inline: 4px; }

  /* Edit and Delete under a category's name when the line is full; a link may wrap. */
  .cat-row-main { flex-wrap: wrap; }
  .cat-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; flex-shrink: 1; }
  a.link-btn, .link-btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }

  /* The three links under Settings: when they do not fit one line each takes the line it needs, whole, with no dot left hanging. */
  .k.settings-k .settings-foot { flex-wrap: wrap; column-gap: 18px; }
  .k.settings-k .settings-foot > .link-btn { white-space: nowrap; }
  .k.settings-k .settings-foot .foot-dot { display: none; }
}

/* --- larger text --- */
/* Names say what they are: two lines, then an ellipsis, never one cut short beside a wide figure. */
:root:is([data-text="large"], [data-text="largest"]) .commitment-name,
:root:is([data-text="large"], [data-text="largest"]) .hist-name,
:root:is([data-text="large"], [data-text="largest"]) .hist-sub,
:root:is([data-text="large"], [data-text="largest"]) .k-row__title,
:root:is([data-text="large"], [data-text="largest"]) .k-row__meta,
:root:is([data-text="large"], [data-text="largest"]) .k-plan .plan-row .k-row__title,
:root:is([data-text="large"], [data-text="largest"]) .k-plan .plan-row .k-row__meta,
:root:is([data-text="large"], [data-text="largest"]) .k .hist-sub-text,
:root:is([data-text="large"], [data-text="largest"]) .k .account-row .k-row__title,
:root:is([data-text="large"], [data-text="largest"]) .cat-bar-name {
  white-space: normal;
  text-overflow: clip;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

/* Summary's list of costs: the name gets the whole line, the figures sit under it. */
:root:is([data-text="large"], [data-text="largest"]) .commitment-row > summary { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3xs); }

:root:is([data-text="large"], [data-text="largest"]) .commitment-row > summary .commitment-side { grid-column: 1 / -1; justify-content: space-between; flex-wrap: wrap; }

/* A row is an icon, a name and a figure: when the three do not fit, the figure drops under the name. */
:root:is([data-text="large"], [data-text="largest"]) .k-row { flex-wrap: wrap; row-gap: 4px; }

:root:is([data-text="large"], [data-text="largest"]) .k-row__body { flex: 1 1 8.5rem; min-width: 0; }

:root:is([data-text="large"], [data-text="largest"]) .k-row .k-row__value { white-space: nowrap; margin-left: auto; }

:root:is([data-text="large"], [data-text="largest"]) .k-plan .plan-row { min-height: 0; }

:root:is([data-text="large"], [data-text="largest"]) .k .btn-tiny { flex: none; }

/* A suggestion with Add and Dismiss: the buttons drop under the words when the line is full. */
:root:is([data-text="large"], [data-text="largest"]) .attention-row { flex-wrap: wrap; row-gap: 8px; }

:root:is([data-text="large"], [data-text="largest"]) .attention-row > span:first-child { flex: 1 1 9rem; min-width: 0; }

:root:is([data-text="large"], [data-text="largest"]) .attention-actions { flex-wrap: wrap; margin-left: auto; max-width: 100%; }

/* Segmented controls (Spent, Received, Lent): labels may take two lines instead of running off the screen. */
:root:is([data-text="large"], [data-text="largest"]) .k-seg { max-width: 100%; }

:root:is([data-text="large"], [data-text="largest"]) .k-seg__btn { white-space: normal; line-height: 1.2; text-align: center; padding-inline: 10px; }

/* Fields and pickers never wider than the screen. */
:root:is([data-text="large"], [data-text="largest"]) .k-field,
:root:is([data-text="large"], [data-text="largest"]) .k-picker,
:root:is([data-text="large"], [data-text="largest"]) .k-input,
:root:is([data-text="large"], [data-text="largest"]) .k-select { max-width: 100%; min-width: 0; }

/* ...and a select sizes itself to its longest option, so a long account name ran it 500px wide (import review). */
:root:is([data-text="large"], [data-text="largest"]) .field :is(input, select, textarea) { max-width: 100%; min-width: 0; box-sizing: border-box; }

:root:is([data-text="large"], [data-text="largest"]) .field select { text-overflow: ellipsis; }

/* A full-width small button may take two lines ("Looks wrong? Download a report" ran out of its pill at 320). */
:root:is([data-text="large"], [data-text="largest"]) .btn-tiny.btn-block { white-space: normal; line-height: 1.25; text-align: center; }

:root:is([data-text="large"], [data-text="largest"]) :where(.k-field, .k-picker, .k-switch-row, .settings-row) > * { min-width: 0; }

/* The tab bar: sentence case, no tracking and a size that follows the screen, so six words fit 320 at any text size. */
:root:is([data-text="large"], [data-text="largest"]) .nav-btn > span:not(.nav-icon) { text-transform: none; letter-spacing: 0; font-size: min(var(--text-micro), 3.1vw); }

/* The big figure's card: its small lines wrap instead of pushing past the card. */
:root:is([data-text="large"], [data-text="largest"]) .hero,
:root:is([data-text="large"], [data-text="largest"]) .hero > * { min-width: 0; overflow-wrap: anywhere; }

:root:is([data-text="large"], [data-text="largest"]) .hero [class*="label"],
:root:is([data-text="large"], [data-text="largest"]) .hero .hero-status,
:root:is([data-text="large"], [data-text="largest"]) .hero .hero-sub { white-space: normal; }

/* Spent, Received and Lent share the width of the card they sit in. */
:root:is([data-text="large"], [data-text="largest"]) .amount-hero .k-seg { display: flex; width: 100%; }

:root:is([data-text="large"], [data-text="largest"]) .amount-hero .k-seg__btn { flex: 1 1 0; min-width: 0; padding-inline: 4px; }

/* Edit and Delete under a category's name when the line is full; a link may wrap. */
:root:is([data-text="large"], [data-text="largest"]) .cat-row-main { flex-wrap: wrap; }

:root:is([data-text="large"], [data-text="largest"]) .cat-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; flex-shrink: 1; }

:root:is([data-text="large"], [data-text="largest"]) a.link-btn,
:root:is([data-text="large"], [data-text="largest"]) .link-btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }

/* The three links under Settings: when they do not fit one line each takes the line it needs, whole, with no dot left hanging. */
:root:is([data-text="large"], [data-text="largest"]) .k.settings-k .settings-foot { flex-wrap: wrap; column-gap: 18px; }

:root:is([data-text="large"], [data-text="largest"]) .k.settings-k .settings-foot > .link-btn { white-space: nowrap; }

:root:is([data-text="large"], [data-text="largest"]) .k.settings-k .settings-foot .foot-dot { display: none; }

/* --- reach, at every size: a fingertip is 44px --- */
/* A dotted label that explains itself when tapped has a 44px invisible reach around it. */
.explainable { position: relative; }
.explainable::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(calc(100% + 12px), 44px); height: 44px; transform: translate(-50%, -50%); }
/* The little dots under a card of insights: the dot is small, the reach is not. */
.recap-dot::after { left: 50%; right: auto; width: max(100%, 44px); transform: translate(-50%, -50%); }
/* --- legible, at every size and in every colouring (found by scanning all of them) --- */
/* The last four digits of a card, and a link inside a quiet note, were drawn too faint to read. */
.card-tag__digits { opacity: .92; }
.muted-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
/* A grey pill sits one step lower, so its words clear 4.5 to 1 in every colouring. */
.pill { background: var(--surface-alt, var(--surface-hi)); }
/* The small coloured label above a note: mixed with more of the page's ink, so it reads on every colouring. */
:root:is([data-style="tactile"], [data-style="instrument"]) .k-context--alert .k-context__k,
:root:is([data-style="tactile"], [data-style="instrument"]) .k-context--attention .k-context__k { color: color-mix(in srgb, var(--t-alarm) 18%, var(--k-text)); }
.k-context__note { color: color-mix(in srgb, var(--k-text-2) 75%, var(--k-text)); }

/* Six tabs, none under a fingertip wide. */
.nav-btn { flex: 1 1 auto; min-width: 44px; margin-inline: 0; border-inline-width: 1px; }
/* On any phone the six tab names are written small and in full, never capitals that run out of room and end in dots. */
@media (max-width: 430px) {
  #tabs .nav-btn > span:not(.nav-icon) { text-transform: none; letter-spacing: 0; font-size: min(var(--text-micro), 3.1vw); text-overflow: clip; }
}