/* Pantry shell styles: Tarik Base v6 components shared by every screen (tokens from tokens.css, by name).
   Every font size is in rem, so the phone's text size scales all text; spacing stays in px.
   A feature's own styles live in its script (Pantry.css). */
@font-face { font-family: Manrope; src: url(../fonts/Manrope.woff2) format('woff2'); font-weight: 200 800; }

*, *::before, *::after { box-sizing: border-box; }
/* an installed app: a pull down at the top never reloads the page (the browser's pull-to-refresh) */
html, body { overscroll-behavior-y: none; }
html { font-size: 100%; background: var(--canvas); -webkit-text-size-adjust: none; text-size-adjust: none; }
/* no scrollbar line at the page's right edge (Samsung Internet drew one while scrolling); the page still scrolls */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--canvas); color: var(--ink);
  font: 500 1rem/1.5 var(--font-sans); font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
/* screen motion (app/core.js): copies of the screen left and the screen shown move over the real one, which is
   already in place under them; the stage takes no taps and sits under the toast */
#stage { position: fixed; inset: 0; z-index: 15; overflow: hidden; contain: strict; pointer-events: none; background: var(--canvas); }
.stage-layer { position: absolute; inset: 0; }
.stage-top { background: var(--canvas); }

/* top bar: eyebrow over the Archivo title */
.top { padding: 18px 20px 0; display: flex; align-items: center; gap: 8px; }
.top.back { padding-left: 8px; align-items: flex-start; }
/* the back button lines up with the title's first line, whatever the text size and however many lines it wraps to */
.top.back > .ibtn { margin-top: calc(0.75rem * 1.3 + 2px + 1.8125rem * 0.53 - 22px); }
.top > div { min-width: 0; }
.eyebrow { margin: 0; font: 600 0.75rem/1.3 var(--font-sans); color: var(--ink-muted); }
.title {
  margin: 2px 0 0; font: var(--display-weight) 1.8125rem/1.06 var(--font-display); font-stretch: var(--display-stretch);
  letter-spacing: -0.017em; overflow-wrap: anywhere;
}
.disp { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); }

svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ibtn {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0;
  color: var(--ink); background: none; border: 0; border-radius: var(--r-md);
}
.ibtn.box { width: 48px; height: 48px; background: var(--surface-2); }

/* buttons: one neutral primary per screen */
.btn {
  min-height: 48px; width: 100%; padding: 10px 16px; border: 0; border-radius: var(--r-button);
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  font: 700 1rem/1.25 var(--font-sans); background: var(--action); color: var(--on-action);
  transition: transform var(--fast), background-color var(--fast);
}
.btn svg.i { width: 20px; height: 20px; }
.btn:active { background: var(--action-pressed); transform: scale(0.98); }
.btn.sec { background: var(--surface-2); color: var(--ink); }
.bottom {
  position: sticky; bottom: 0; margin-top: auto; padding: 12px 20px calc(18px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: center; background: var(--canvas);
}

/* list rows: name over a muted line, value at the end; a long name ends with an ellipsis */
.sec:not(.btn) { margin: 24px 20px 0; }
.rows { list-style: none; margin: 4px 0 0; padding: 0; }
.rows > li + li { border-top: 1px solid var(--hairline); }
.fr {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 0;
  background: none; border: 0; color: var(--ink); text-align: left;
}
.fr .t { flex: 1; min-width: 0; }
.fr .name, .fr .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr .name { font: 600 0.9375rem/1.3 var(--font-sans); }
.fr .sub { font: 500 0.8125rem/1.35 var(--font-figure); color: var(--ink-muted); }
.fr .k { flex: none; font: 700 0.875rem/1.3 var(--font-figure); }

.note { margin: 8px 0 0; font: 500 0.875rem/1.5 var(--font-sans); color: var(--ink-muted); }
.banner {
  display: flex; gap: 12px; align-items: flex-start; margin: 12px 20px 0; padding: 12px 14px;
  background: var(--surface-2); border-radius: var(--r-card); font: 500 0.875rem/1.45 var(--font-sans);
}
.banner svg.i { width: 20px; height: 20px; margin-top: 1px; color: var(--danger); }

/* toast: one line above the bottom bar, outside the screen so it survives navigation (Pantry.toast) */
#toast { position: fixed; left: 20px; right: 20px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 20; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; pointer-events: auto;
  background: var(--surface-3); border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-3); font: 500 0.875rem/1.4 var(--font-sans);
}
.toast { touch-action: none; transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); }
.toast-art { flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
.toast-art svg { width: 32px; height: 32px; }
.toast > span:not(.toast-art) { flex: 1; min-width: 0; }
.toast-act { flex: none; min-height: 44px; padding: 0 4px; background: none; border: 0; font-weight: 700; }