/* Kain na design system: component styles from the design's bundle.css,
   with the app's own layout at the end. Colours, sizes and type come from
   kn-tokens.css (generated from design/tokens.json). Everything is scoped
   to .kn, so classic pages that load app.css are untouched. */

@font-face {
  font-family: "Albert Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/albert-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Albert Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/albert-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.kn, .kn * { box-sizing: border-box; }
.kn { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.kn :focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; }
:where(.kn) a { color: inherit; }
:where(.kn) :is(button, input, select, textarea) { font: inherit; color: inherit; }

/* ---------- Layout: field + sheet ---------- */
.kn-screen { width: 100%; background: var(--paper); position: relative; overflow: hidden; }
.kn-field { display: flex; flex-direction: column; gap: var(--space-14); padding: 4px var(--space-16) var(--space-28); background: var(--field-today); }
.kn-field--today { background: var(--field-today); }
.kn-field--add { background: var(--field-add); }
.kn-field--found { background: var(--field-found); }
.kn-field--missing { background: var(--field-missing); }
.kn-field--recipe { background: var(--field-recipe); }
.kn-field--out { background: var(--field-out); }
.kn-field--week { background: var(--field-week); }
.kn-sheet { position: relative; margin-top: -20px; display: flex; flex-direction: column; gap: var(--space-14);
  padding: var(--space-20) var(--space-16) var(--space-28); background: var(--paper); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }

/* ---------- Top bar ---------- */
.kn-topbar { display: flex; align-items: center; gap: 4px; min-height: 52px; margin: 0 -10px; }
.kn-topbar__title { flex: 1; text-align: center; font-size: 16px; font-weight: 700; }
.kn-iconbtn { width: var(--size-control); height: var(--size-control); border: 0; border-radius: var(--radius-button); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.kn-back { height: var(--size-control); padding: 0 10px 0 4px; display: inline-flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 600; text-decoration: none; color: var(--ink); }

/* ---------- Numbers and text ---------- */
.kn-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kn-big__num { font-size: 92px; line-height: .92; font-weight: 800; letter-spacing: -.045em; }
.kn-big--l .kn-big__num { font-size: 72px; }
.kn-big--m .kn-big__num { font-size: 56px; }
.kn-big__unit { font-size: 20px; font-weight: 600; }
.kn-second { font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.kn-title { font-size: 40px; line-height: 1.02; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.kn-title--l { font-size: 34px; }
.kn-title--m { font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.kn-lead { font-size: 17px; line-height: 1.4; font-weight: 500; margin: 0; }
.kn-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.kn-label__aside { font-weight: 400; }
.kn-h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 8px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.kn-h2__aside { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.kn-meta { font-size: 13px; line-height: 1.4; color: var(--muted); }
.kn-link { min-height: var(--size-control); display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--aubergine); text-decoration: underline; text-underline-offset: 3px; }
.kn-link--plain { text-decoration: none; }
.kn-link--muted { color: var(--muted); }

/* ---------- List rows ---------- */
.kn-list { display: flex; flex-direction: column; }
.kn-row { display: flex; align-items: center; gap: var(--space-10); min-height: var(--size-row); padding: 8px 0; border-top: 1px solid var(--divider); text-decoration: none; color: var(--ink); }
.kn-row:first-child { border-top: 0; }
.kn-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kn-row__title { font-size: 16px; font-weight: 600; }
.kn-row__sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.kn-kcal { font-size: 17px; font-weight: 700; white-space: nowrap; }

/* ---------- Source tags (outlined meaning = where a food came from) ---------- */
.kn-tag { height: 24px; padding: 0 8px; border-radius: var(--radius-tag); display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink); background: var(--divider); }
.kn-tag--off { background: var(--mint); }
.kn-tag--nevo { background: var(--sky); }
.kn-tag--chat { background: var(--butter); }
.kn-tag--recipe, .kn-tag--food { background: var(--lilac); }
.kn-tag--ai, .kn-tag--partner { background: var(--pink); }

/* ---------- Buttons ---------- */
.kn-btn { flex: 1; min-width: 0; height: var(--size-button); padding: 0 18px; border: 0; border-radius: var(--radius-button);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer; }
.kn-btn--primary { background: var(--aubergine); color: var(--on-aubergine); }
.kn-btn--white { background: var(--paper); color: var(--ink); }
.kn-btn--outline { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-outline); }
.kn-btn--fit { flex: 0 0 auto; }
.kn-btn-sm { height: var(--size-control); padding: 0 16px; border: 0; border-radius: var(--radius-control); display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700; text-decoration: none; flex-shrink: 0; cursor: pointer; background: var(--aubergine); color: var(--on-aubergine); }
.kn-btn-sm--outline { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-outline); }

/* The Log button: tap logs to the meal; the chevron changes the meal. */
.kn-log { flex: 1; min-width: 0; display: flex; height: var(--size-button); border-radius: var(--radius-button); background: var(--aubergine); color: var(--on-aubergine); overflow: hidden; }
.kn-log__main { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; white-space: nowrap; color: inherit; text-decoration: none; }
.kn-log__meal { width: 52px; border: 0; border-left: 1px solid rgba(255,255,255,.25); background: transparent; color: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ---------- Choices ---------- */
.kn-chips { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.kn-chip { height: var(--size-control); padding: 0 14px; border: 0; border-radius: var(--radius-control); background: var(--paper); box-shadow: var(--shadow-outline);
  font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.kn-chip[aria-pressed="true"] { background: var(--aubergine); color: var(--on-aubergine); box-shadow: none; font-weight: 700; }
.kn-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-8); }
.kn-seg__opt { height: var(--size-button); border: 0; border-radius: var(--radius-button); background: var(--paper); box-shadow: var(--shadow-outline); font-size: 16px; font-weight: 500; cursor: pointer; }
.kn-seg--short .kn-seg__opt { height: var(--size-segment); font-size: 15px; }
.kn-seg__opt[aria-checked="true"] { background: var(--aubergine); color: var(--on-aubergine); box-shadow: none; font-weight: 700; }
.kn-mode { display: flex; gap: var(--space-2); padding: 3px; border-radius: var(--radius-button); background: var(--divider); }
.kn-mode__opt { flex: 1; height: 40px; border-radius: var(--radius-control); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; }
.kn-mode__opt[aria-checked="true"] { background: var(--paper); box-shadow: var(--shadow-segment); font-weight: 700; color: var(--ink); }

/* ---------- Amounts ---------- */
.kn-amount { display: flex; gap: var(--space-8); align-items: center; }
.kn-amount__step { width: var(--size-button); height: var(--size-button); border: 0; border-radius: var(--radius-button); background: var(--paper); box-shadow: var(--shadow-outline);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.kn-amount__field { flex: 1; min-width: 0; height: var(--size-button); border-radius: var(--radius-button); box-shadow: var(--shadow-input-active);
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; font-size: 17px; font-weight: 600; }
.kn-amount__field input { width: 90px; border: 0; background: transparent; font-size: 24px; font-weight: 700; text-align: right; outline: none; }
.kn-stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.kn-stepper__btn { width: var(--size-control); height: var(--size-control); border: 0; border-radius: var(--radius-control); background: var(--paper); box-shadow: var(--shadow-outline);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kn-stepper__field { width: 72px; height: var(--size-control); border-radius: var(--radius-control); box-shadow: var(--shadow-input-active); display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 16px; font-weight: 700; }
.kn-stepper__field input { width: 36px; border: 0; background: transparent; text-align: right; font-weight: 700; outline: none; }
.kn-stepper__count { width: 28px; text-align: center; font-size: 18px; font-weight: 700; }
.kn-part { display: flex; align-items: center; gap: var(--space-10); min-height: var(--size-part-row); border-top: 1px solid var(--divider); }
.kn-part:first-child { border-top: 0; }

/* ---------- Macros ---------- */
.kn-macros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.kn-track { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kn-track__head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.kn-track__name { font-size: 15px; font-weight: 600; }
.kn-track__left { font-size: 13px; color: var(--muted); white-space: nowrap; }
.kn-track__bar { display: block; height: 8px; border-radius: var(--radius-bar); }
.kn-track__fill { display: block; height: 100%; border-radius: var(--radius-bar); }
.kn-track__of { font-size: 12px; color: var(--muted); }
.kn-track--protein .kn-track__bar { background: var(--protein-track); } .kn-track--protein .kn-track__fill { background: var(--protein-fill); }
.kn-track--carbs .kn-track__bar { background: var(--carbs-track); } .kn-track--carbs .kn-track__fill { background: var(--carbs-fill); }
.kn-track--fiber .kn-track__bar { background: var(--fiber-track); } .kn-track--fiber .kn-track__fill { background: var(--fiber-fill); }
.kn-track--fat .kn-track__bar { background: var(--fat-track); } .kn-track--fat .kn-track__fill { background: var(--fat-fill); }
.kn-macroline { font-size: 15px; color: var(--muted); }

/* ---------- Camera card ---------- */
.kn-camera { position: relative; height: 220px; border-radius: var(--radius-sheet); background: linear-gradient(160deg, var(--camera-top) 0%, var(--camera) 100%); overflow: hidden; }
.kn-camera__frame { position: absolute; left: calc(50% - 110px); top: 40px; width: 220px; height: 112px; }
.kn-camera__corner { position: absolute; width: 24px; height: 24px; border: 0 solid rgba(255,255,255,.9); }
.kn-camera__corner--tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 8px; }
.kn-camera__corner--tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 8px; }
.kn-camera__corner--bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 8px; }
.kn-camera__corner--br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 8px; }
.kn-camera__line { position: absolute; left: 20px; right: 20px; top: 55px; height: 2px; background: var(--mint); }
.kn-camera--found .kn-camera__frame, .kn-camera--missing .kn-camera__frame { border: 3px solid var(--mint); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.kn-camera--missing .kn-camera__frame { border-color: var(--butter); }
.kn-camera__badge { width: 52px; height: 52px; border-radius: var(--radius-round); background: var(--mint); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.kn-camera--missing .kn-camera__badge { background: var(--butter); }
.kn-camera__status { position: absolute; left: 10px; right: 10px; bottom: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-control); background: var(--camera-status);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #ffffff; font-size: 13px; font-weight: 600; }
.kn-camera__dot { width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--mint); display: inline-block; margin-right: 6px; }
.kn-camera--missing .kn-camera__dot { background: var(--butter); }
.kn-camera__code { font-family: var(--font-mono); font-size: 12px; color: var(--mint); }
.kn-camera--missing .kn-camera__code { color: var(--butter); }
.kn-camera__hint { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9); }

/* ---------- Bars at the bottom ---------- */
.kn-tabbar { display: flex; height: var(--size-tabbar); padding-bottom: 14px; background: var(--paper); box-shadow: var(--shadow-bar-top); }
.kn-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 500; }
.kn-tab__icon { height: var(--size-control); display: flex; align-items: center; }
.kn-tab[aria-current="page"] { color: var(--ink); font-weight: 700; }
.kn-tab--add { color: var(--ink); font-weight: 700; }
.kn-tab--add .kn-tab__icon { width: 60px; border-radius: var(--radius-tab); background: var(--aubergine); color: var(--on-aubergine); justify-content: center; }
.kn-footer { display: flex; gap: var(--space-8); padding: 12px var(--space-16) 26px; background: var(--paper); box-shadow: var(--shadow-bar-top); }

/* ---------- Switch ---------- */
.kn-switch { width: 52px; height: 32px; border: 0; border-radius: var(--radius-round); background: var(--line); padding: 3px; display: flex; justify-content: flex-start; flex-shrink: 0; cursor: pointer; }
.kn-switch[aria-checked="true"] { background: var(--aubergine); justify-content: flex-end; }
.kn-switch__knob { width: 26px; height: 26px; border-radius: var(--radius-round); background: var(--paper); }

/* ---------- Notes ---------- */
.kn-note { max-width: 290px; display: flex; flex-direction: column; gap: 4px; }
.kn-note__bubble { padding: 14px; font-size: 16px; line-height: 1.45; }
.kn-note__meta { font-size: 13px; color: var(--muted); }
.kn-note--theirs { align-self: flex-start; } .kn-note--theirs .kn-note__bubble { background: var(--pink); border-radius: 18px 18px 18px 6px; }
.kn-note--mine { align-self: flex-end; text-align: right; } .kn-note--mine .kn-note__bubble { background: var(--lilac); border-radius: 18px 18px 6px 18px; text-align: left; }
.kn-shared { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; box-shadow: var(--shadow-outline); text-decoration: none; color: var(--ink); }
.kn-shared__title { font-size: 17px; font-weight: 700; }
.kn-avatar { width: 36px; height: 36px; border-radius: var(--radius-round); background: var(--pink); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }

/* Pressed: darken slightly, never scale */
.kn-btn:active, .kn-btn-sm:active, .kn-log:active, .kn-chip:active, .kn-iconbtn:active, .kn-tab:active { filter: brightness(0.94); }
.kn [disabled], .kn [aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ======================================================================
   The app's layout around the components
   ====================================================================== */

/* The .kn root is the screen itself; the page behind it is white too. */
html:has(.kn-screen), body:has(.kn-screen) { background: #fff; }
.kn { font-size: 16px; line-height: 1.45; }
.kn h1, .kn h2, .kn h3, .kn p { margin: 0; }
.kn button { cursor: pointer; }
/* app.css is loaded on every page; undo its element rules inside .kn. */
.kn :where(input) { width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; }
.kn :where(input):focus { border: 0; }
.kn [hidden] { display: none !important; }
.kn .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* One column, phone width, centred on anything wider. Root screens leave
   room for the tab bar, task screens for the footer. */
.kn-screen { max-width: 480px; margin: 0 auto; min-height: 100dvh; overflow: visible; overflow-x: clip;
  padding-bottom: calc(var(--size-tabbar) - 14px + max(14px, env(safe-area-inset-bottom))); }
.kn-screen--task { padding-bottom: calc(var(--size-button) + 38px + max(0px, env(safe-area-inset-bottom) - 14px)); }
.kn-field { padding-top: max(4px, env(safe-area-inset-top)); }
/* Under a see-through status bar, a strip in the screen's header colour keeps
   what scrolls up from running into the clock; app.js sets --bar. */
.kn-bar body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--bar, #e6daf7); z-index: 60; pointer-events: none; }
.kn-sheet { padding-bottom: var(--space-28); }

/* Field numbers: shrink on narrow phones and with large text, never wrap mid-number. */
.kn-big__num { font-size: min(92px, 22vw); white-space: nowrap; }
.kn-big--l .kn-big__num { font-size: min(72px, 18vw); }
.kn-big--m .kn-big__num { font-size: min(56px, 15vw); }
.kn-big__unit { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.kn-field__block { display: flex; flex-direction: column; gap: 6px; }
.kn-over { color: var(--over); }

/* Day navigation in the top bar: previous, the day, next. */
.kn-topbar__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-iconbtn[aria-disabled="true"] { opacity: .3; }
.kn-iconbtn svg, .kn-back svg { flex-shrink: 0; }

/* Sections on the sheet. */
.kn-section { display: flex; flex-direction: column; gap: var(--space-6); }
.kn-section + .kn-section { margin-top: var(--space-14); }
.kn-empty { min-height: var(--size-control); display: flex; align-items: center; font-size: 15px; color: var(--muted); text-decoration: none; }
.kn-addrow { min-height: var(--size-control); display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--aubergine); text-decoration: none; }

/* A logged entry: a ListRow that swipes left to reveal Remove. */
.kn .swipe { position: relative; overflow: hidden; border-top: 1px solid var(--divider); border-bottom: 0; }
.kn .kn-list > .swipe:first-child { border-top: 0; }
.kn .swipe-action { position: absolute; inset: 0; margin: 0; display: flex; justify-content: flex-end; background: var(--aubergine); }
.kn .swipe-action button { border: 0; background: none; color: var(--on-aubergine); font-size: 15px; font-weight: 700; padding: 0 20px; }
.kn .entry { position: relative; border-top: 0; background: var(--paper); touch-action: pan-y; }
.kn .entry.settling { transition: transform 220ms cubic-bezier(.2, .9, .3, 1); }
.kn .swipe.gone { animation: kn-collapse 260ms ease forwards; }
@keyframes kn-collapse { to { height: 0; opacity: 0; border-width: 0; } }
.kn-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A note from the partner, at the end of Today. */
.kn-notes { display: flex; flex-direction: column; gap: var(--space-14); }
.kn-note__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kn-note__x { width: var(--size-control); height: var(--size-control); border: 0; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; margin: -10px -10px -10px 0; }

/* ---------- Tab bar and footer: fixed to the bottom ---------- */
.kn-tabbar, .kn-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; }
.kn-tabbar { height: auto; padding-bottom: max(14px, env(safe-area-inset-bottom)); justify-content: center; }
.kn-tabbar > .kn-tab { max-width: 96px; }
.kn-tab { min-height: calc(var(--size-tabbar) - 14px); }
.kn-tab__icon svg { display: block; }
.kn-footer { justify-content: center; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
.kn-footer > * { max-width: 448px; }
.kn-footer .kn-btn--outline { flex: 0 0 auto; }

/* The Log button's meal menu: a native select over the chevron, so the
   meal is a real form field and the OS draws the picker. */
.kn-log__meal { position: relative; }
.kn-log__meal select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; font-size: 16px; cursor: pointer; }
.kn-log__main { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; }
.kn-log__kcal { opacity: .8; font-weight: 600; }

/* ---------- Undo bar: just above the tab bar or the footer ---------- */
.kn .toast { position: fixed; z-index: 10; left: 16px; right: 16px; margin: 0 auto; max-width: 448px;
  bottom: calc(var(--size-tabbar) - 14px + max(14px, env(safe-area-inset-bottom)) + 8px);
  min-height: 48px; padding: 4px 8px 4px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); color: var(--on-aubergine); border-radius: var(--radius-button); font-size: 15px; font-weight: 600;
  transform: none; animation: none; white-space: normal; }
.kn-screen--task .toast { bottom: calc(var(--size-button) + 38px + max(0px, env(safe-area-inset-bottom) - 14px) + 8px); }
.kn .toast[hidden] { display: none; }
.kn .toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn .toast button { min-height: var(--size-control); padding: 0 8px; border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Logging screens ---------- */
.kn-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kn-total .kn-big__num { font-size: min(56px, 15vw); }
.kn-leaves { font-size: 15px; color: var(--ink); }
.kn-error { font-size: 15px; color: var(--ink); font-weight: 600; }
/* The amount is one compact pill, sized to its value, rather than a field
   stretched across the sheet between two big buttons. */
.kn .kn-amount { width: max-content; max-width: 100%; gap: 0; border-radius: var(--radius-button); background: var(--paper); box-shadow: var(--shadow-outline); }
.kn .kn-amount:focus-within { box-shadow: var(--shadow-input-active); }
.kn .kn-amount__step { width: 52px; height: 52px; background: transparent; box-shadow: none; color: var(--aubergine); }
.kn .kn-amount__field { flex: 0 1 auto; height: 52px; min-width: 96px; padding: 0 6px; gap: 5px; box-shadow: none; border-radius: 0;
  border-left: 1px solid var(--divider); border-right: 1px solid var(--divider); cursor: text; }
.kn .kn-amount__field input { width: 2ch; max-width: 6ch; font-size: 22px; text-align: right; }
.kn-amount__unit { white-space: nowrap; }
.kn-units { margin-top: var(--space-4); }
.kn-units label, .kn-seg label { display: contents; }
.kn-units input, .kn-seg input { position: absolute; opacity: 0; pointer-events: none; }
.kn-seg input:checked + .kn-seg__opt { background: var(--aubergine); color: var(--on-aubergine); box-shadow: none; font-weight: 700; }
.kn-seg input:focus-visible + .kn-seg__opt { outline: 2px solid var(--aubergine); outline-offset: 2px; }
.kn-seg__opt { display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.kn-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kn-remove { border: 0; background: none; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .kn .entry.settling { transition: none; }
  .kn .swipe.gone { animation: none; }
}

/* Icons: 2px everywhere; 1.8 in the tab bar, 2.2 on the current tab. */
.kn-tab svg { stroke-width: 1.8; }
.kn-tab[aria-current="page"] svg { stroke-width: 2.2; }
.kn-tab--add svg { stroke-width: 2.2; }
.kn-footer__second { order: -1; }
.kn-remove { align-self: flex-start; }
.kn-field .kn-tag { background: var(--paper); }
.kn-seg__opt[aria-pressed="true"] { background: var(--aubergine); color: var(--on-aubergine); box-shadow: none; font-weight: 700; }