/* The shared look for every GIT mini app: the site's dark tokens, a system font stack (nothing loaded from outside,
   so it works offline and under the strict CSP), 44px touch targets and layouts that fit a 360px screen.
   Apps use only the classes in this file and never add inline styles. */
:root {
  color-scheme: dark;
  --black: #0E0E0F; --charcoal: #151516; --graphite: #1D1D1F;
  --line: #2A2A2D; --line-strong: #3E3E43;
  --bone: #ECE8E1; --muted: #9C9BA2;
  --marigold: #F5A524; --marigold-ink: #0E0E0F; --teal: #1B9C93;
  --ok: #5FD3C8; --err: #FF9576;
  --r: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--black); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bone);
  background: var(--black);
  overflow-wrap: anywhere;
  padding: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) var(--safe-area-inset-right, env(safe-area-inset-right, 0px))
    var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}
h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 1.1rem; }
p { margin: 0; }
a { color: var(--marigold); }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
::selection { background: var(--marigold); color: var(--marigold-ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Shell ---------- */
.kit-header { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .5rem 1rem; border-bottom: 1px solid var(--line); }
.kit-logo { width: 32px; height: 32px; flex: none; border-radius: 8px; }
.kit-title { font-size: 1.15rem; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Back to all the apps: a clear button at the top left (first in the row, though it comes last in the page).
   It's in the page from the start, so it works even if the app's script never runs; single-app store
   builds hide it (kit.js). */
.kit-back {
  order: -1; flex: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 .9rem 0 .7rem;
  border: 1.5px solid var(--line-strong); border-radius: 999px; color: var(--bone); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap;
}
.kit-back::before { content: "←"; font-size: 1.05rem; line-height: 1; }
.kit-back:hover { border-color: var(--bone); background: var(--bone); color: var(--black); }
/* On narrow phones the back button stands in for the logo, so long app names still fit. */
@media (max-width: 420px) { .kit-header:has(.kit-back:not([hidden])) .kit-logo { width: 24px; height: 24px; border-radius: 6px; } }
.kit-main { width: 100%; max-width: 560px; margin-inline: auto; padding: 1rem; display: grid; gap: 1rem; align-content: start; flex: 1 0 auto; }
.kit-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; padding: 1.25rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.kit-footer img { width: 20px; height: 20px; border-radius: 5px; }
.kit-footer a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); }
.kit-footer a:hover { color: var(--bone); }
/* The link from an app to its guide on the main site, after the app itself. */
.kit-guide { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; color: var(--marigold); font-size: .95rem; }
.kit-guide:hover { color: var(--bone); }

/* ---------- Layout ---------- */
.kit-card { background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; display: grid; gap: .75rem; min-width: 0; }
.kit-stack { display: grid; gap: .75rem; }
.kit-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.kit-row > * { min-width: 0; flex: 1 1 8rem; }
.kit-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.kit-grid-2 > * { min-width: 0; }

/* ---------- Forms ---------- */
.kit-field { display: grid; gap: .35rem; min-width: 0; }
.kit-label { font-weight: 600; }
.kit-input {
  width: 100%; min-width: 0; min-height: 44px; padding: .6rem .75rem;
  background: var(--graphite); color: var(--bone); border: 1.5px solid var(--line-strong); border-radius: 8px;
  font: inherit; font-size: 1rem; /* 16px or more, so iOS doesn't zoom in */
}
textarea.kit-input { resize: vertical; min-height: 6rem; }
.kit-input:focus { border-color: var(--marigold); }
.kit-input[aria-invalid="true"] { border-color: var(--err); }
.kit-hint { color: var(--muted); font-size: .85rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .6rem 1.2rem; border: 1.5px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn--primary { background: var(--marigold); color: var(--marigold-ink); }
.btn--primary:hover:not(:disabled) { background: var(--bone); }
.btn--ghost { border-color: var(--line-strong); background: transparent; color: var(--bone); }
.btn--ghost:hover:not(:disabled) { border-color: var(--bone); }
.btn--sm { min-height: 44px; padding: .4rem .9rem; font-size: .9rem; }
.btn--block { width: 100%; }
.kit-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border-radius: 8px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--bone); cursor: pointer;
}
.kit-icon-btn:disabled { opacity: .5; cursor: default; }
.kit-seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.kit-seg > button {
  min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--line-strong);
  background: transparent; color: var(--bone); font-weight: 600; cursor: pointer;
}
.kit-seg > button[aria-pressed="true"] { background: var(--bone); border-color: var(--bone); color: var(--black); }

/* ---------- Results and messages ---------- */
.kit-result { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kit-status { font-size: .95rem; }
.is-error { color: var(--err); }
.is-muted { color: var(--muted); }
.is-done { color: var(--muted); text-decoration: line-through; }
.kit-note { color: var(--muted); font-size: .9rem; }
.kit-credit { color: var(--muted); font-size: .8rem; }
.kit-credit a { color: inherit; }
.kit-break { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; } /* long text that keeps its line breaks */
.kit-big { font-size: 2.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
dl.kit-kv { margin: 0; }
.kit-kv > div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.kit-kv dt { color: var(--muted); }
.kit-kv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }

/* ---------- Lists and tables ---------- */
.kit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kit-list-item { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.kit-list-item > :first-child { flex: 1; min-width: 0; }
.kit-days > li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.kit-table-wrap { overflow-x: auto; max-width: 100%; }
.kit-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.kit-table th, .kit-table td { padding: .45rem .5rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.kit-table th:first-child, .kit-table td:first-child { text-align: left; }
.kit-table th { color: var(--muted); font-weight: 600; }

/* ---------- Calculator ---------- */
.kit-display { text-align: right; font-size: 2rem; min-height: 3rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kit-keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.kit-key {
  min-height: 56px; min-width: 0; border-radius: 8px; background: var(--graphite); color: var(--bone);
  border: 1px solid var(--line); font-size: 1.35rem; cursor: pointer;
}
.kit-key--op { color: var(--marigold); }
.kit-key--eq { grid-column: 1 / -1; background: var(--marigold); color: var(--marigold-ink); font-weight: 700; }

/* ---------- Canvas, camera and media ---------- */
.kit-canvas { display: block; max-width: 100%; height: auto; margin-inline: auto; background: #fff; border-radius: 8px; }
.kit-media { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #000; border-radius: 8px; }
.kit-media--square { aspect-ratio: 1 / 1; }
/* A small list thumbnail drawn at twice its size for sharp screens; it keeps its shape inside 48 x 48. */
.kit-thumb { display: block; flex: none; width: auto; height: auto; max-width: 48px; max-height: 48px; border-radius: 4px; }

/* ---------- Receipt rows: name, qty, rate, line total, remove button ---------- */
/* Narrow screens put the name on its own line; from 480px everything sits on one line. The quantity and rate boxes
   keep at least 4.5rem, and a huge line total wraps rather than squeezing them. */
.kit-items { display: grid; gap: .5rem; }
.kit-item-row {
  display: grid; gap: .5rem; align-items: center;
  grid-template-columns: minmax(4.5rem, 1fr) minmax(4.5rem, 1fr) minmax(0, max-content) 44px;
}
.kit-item-row > * { min-width: 0; }
.kit-item-row > :first-child { grid-column: 1 / -1; }
@media (min-width: 480px) {
  .kit-item-row { grid-template-columns: minmax(0, 2fr) minmax(4.5rem, 1fr) minmax(4.5rem, 1fr) minmax(0, max-content) 44px; }
  .kit-item-row > :first-child { grid-column: auto; }
}

/* ---------- Day switcher and goal bar (Calorie Counter) ---------- */
.kit-daynav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kit-daynav > h2 { flex: 1; min-width: 0; text-align: center; }
.kit-bar { display: block; width: 100%; height: 12px; border: 0; border-radius: 999px; overflow: hidden; background: var(--graphite); accent-color: var(--marigold); appearance: none; -webkit-appearance: none; }
.kit-bar::-webkit-progress-bar { background: var(--graphite); border-radius: 999px; }
.kit-bar::-webkit-progress-value { background: var(--marigold); border-radius: 999px; }
.kit-bar::-moz-progress-bar { background: var(--marigold); border-radius: 999px; }
.kit-bar.is-over::-webkit-progress-value { background: var(--err); }
.kit-bar.is-over::-moz-progress-bar { background: var(--err); }

/* ---------- Checkboxes ---------- */
.kit-check { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.kit-check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--marigold); }

/* The hidden text box copyText uses when the clipboard API is missing (not display:none, or it can't be selected). */
.kit-copy-buffer { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 16px; }

/* Store builds: things that only make sense on the website. */
html.kit-native .kit-web-only { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  html, body { background: #fff; color: #000; }
  body { padding: 0; }
  .kit-card { background: #fff; border-color: #ccc; }
  .kit-back, .kit-guide, .kit-footer a, button, .btn, .kit-web-only, .kit-no-print { display: none !important; }
}