/* Safeish — sky-blue on cool neutrals (default). User-selectable alternate
   (sage) overrides a small set of tokens via `html[data-theme="sage"]` block
   below this :root. Status tokens (safe / caution / harm / unknown) stay
   constant — verdict meaning, not theme decoration. The accent token name
   `--amk-green` is historical from the sage default; kept for diff
   minimization — semantically it is "primary accent". */

:root {
  /* surfaces */
  --amk-bg: #EEF2F5;
  --amk-bg-deep: #DFE6EB;
  --amk-surface: #FBFCFD;
  --amk-surface-alt: #E6ECF1;
  --amk-ink: #1F1A12;
  --amk-ink-2: #5C5141;
  --amk-ink-3: #998A72;
  --amk-hairline: rgba(31,26,18,0.08);
  --amk-hairline-strong: rgba(31,26,18,0.14);

  /* Primary accent — sky blue. Used across FAB, count badges, toggles, lang
     pill, focus borders, chip backgrounds, premium card wash, version banner.
     Token name kept as --amk-green for diff minimization (historical sage). */
  --amk-green: #3D7DA6;
  --amk-green-deep: #2A5C7E;
  --amk-green-soft: #D8E6EF;
  --amk-green-ink: #1F4661;

  /* status */
  --amk-safe: #3FA66B;
  --amk-safe-soft: #DCEFE0;
  --amk-safe-ink: #1E6B3E;
  --amk-caution: #E0A555;
  --amk-caution-soft: #F8E8CF;
  --amk-caution-ink: #8C5A1E;
  --amk-harm: #C84A3A;
  --amk-harm-soft: #F3D6CE;
  --amk-harm-ink: #7A2917;
  --amk-unknown: #A89A85;
  --amk-unknown-soft: #E9E2D1;
  --amk-unknown-ink: #5C5341;

  /* type */
  --amk-font: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  --amk-font-display: "Lora", Georgia, serif;
  --amk-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* radii */
  --amk-r-chip: 14px;
  --amk-r-card: 26px;
  --amk-r-sheet: 32px;
  --amk-r-pill: 999px;

  /* shadows */
  --amk-shadow-card: 0 1px 2px rgba(80,55,20,0.04), 0 8px 24px rgba(80,55,20,0.07);
  --amk-shadow-soft: 0 2px 14px rgba(80,55,20,0.08);
  --amk-shadow-pop: 0 12px 36px rgba(80,55,20,0.18);
}

/* ─── Theme overrides ─── applied via `html[data-theme="<id>"]`.
   index.html inline FOUC guard sets the attribute pre-CSS-parse. */

html[data-theme="sage"] {
  --amk-green: #6D7F4F;
  --amk-green-deep: #4F5F39;
  --amk-green-soft: #E5EAD9;
  --amk-green-ink: #3B4528;
  --amk-bg: #EFF0E6;
  --amk-bg-deep: #E2E4D5;
  --amk-surface: #FFFBF2;
  --amk-surface-alt: #EFE7D5;
}

html[data-theme="warm"] {
  /* Burnt-orange on warm cream. Palette restored from the pre-sage v.10
     era (commit e81f7a5^). Cream surfaces are slightly more orange-tinted
     than sage's green-tinted cream. */
  --amk-green: #E26B2C;
  --amk-green-deep: #B14A14;
  --amk-green-soft: #FBE4D2;
  --amk-green-ink: #5A2208;
  --amk-bg: #F5EFE4;
  --amk-bg-deep: #EBE3D2;
  --amk-surface: #FFFBF2;
  --amk-surface-alt: #EFE7D5;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--amk-bg);
  color: var(--amk-ink);
  font-family: var(--amk-font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hide scrollbar on the main page scroll while keeping the page scrollable.
   Scoped away from demo-mode body — that one keeps a reserved gutter so the
   centered phone frame doesn't shift when content grows. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body:not(.amk-demo) { scrollbar-width: none; }
body:not(.amk-demo)::-webkit-scrollbar { display: none; }

button { font-family: inherit; }

/* App shell */

.amk-app {
  max-width: 560px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--amk-bg);
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Header */

.amk-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Pin header height so the upload screen (no right-side control)
     matches the screens that have a back-button. Padding + content
     would otherwise produce a shorter header on upload. */
  min-height: 65px;
  padding: calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 14px calc(18px + env(safe-area-inset-left));
  background: color-mix(in srgb, var(--amk-bg) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--amk-hairline);
}

.amk-header__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.amk-header__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.amk-header__brand:hover .amk-header__title { color: var(--amk-green-deep); }
.amk-header__brand:active { transform: scale(0.98); }

.amk-header__mark {
  /* Dark accent-tinted rounded-square block with white leaf — reads as
     the app's icon mark next to the wordmark. Dark mark + accent-colored
     text inverts the prior accent-mark + dark-text pairing. Uses the
     accent's `-ink` variant (not pure ink) so the mark stays harmonized
     with each theme. */
  width: 25px; height: 25px;
  border-radius: 9px;
  background: var(--amk-green-ink);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
}
.amk-header__mark svg, .amk-header__mark [data-lucide] {
  width: 15px; height: 15px; stroke-width: 2;
  display: block;
}

.amk-header__title {
  /* Logo-style mark — Pacifico. Brush-script wordmark; ships single
     weight (400). Smaller px than Parisienne since Pacifico's x-height
     is larger and strokes are heavier — reads at similar presence at
     24px to the prior sans 20px. Scoped here only; rest of display type
     still uses Lora via --amk-font-display. Color uses the normal accent
     (--amk-green, not the deep variant) so the wordmark reads brighter
     beside the dark icon mark. */
  font-family: "Pacifico", "Parisienne", cursive;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1;
  color: var(--amk-green-ink);
}
.amk-header__sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--amk-ink-3);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: 2px;
}

.amk-header__controls {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 70%;
  justify-content: flex-end;
}

.amk-allergens-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--amk-hairline-strong);
  border-radius: var(--amk-r-pill);
  background: var(--amk-surface);
  overflow: hidden;
}
.amk-allergens-wrap:focus-within { border-color: var(--amk-green); }

.amk-allergens {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--amk-ink);
  min-width: 0;
  flex: 1 1 auto;
}

.amk-allergens::placeholder { color: var(--amk-ink-3); font-weight: 400; }
.amk-allergens:focus { outline: none; }

.amk-allergens__save {
  border: 0;
  border-left: 1px solid var(--amk-hairline);
  background: var(--amk-surface-alt);
  padding: 0 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--amk-ink-2);
  cursor: pointer;
  flex-shrink: 0;
}
.amk-allergens__save:hover { background: var(--amk-green-soft); color: var(--amk-green-deep); }

/* Upload screen */

.amk-upload {
  /* Bottom padding matches .amk-result (24px) so the footer-note has the
     same gap from content on every screen. Gap kept in step with the
     section-title margin on profile/settings (28px). */
  padding: 24px 16px;
  display: flex; flex-direction: column; gap: 28px;
}

.amk-hero {
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  padding: 28px 22px;
  box-shadow: var(--amk-shadow-card);
}

/* Greeting strip — upload / profile / settings header. */
.amk-greet { padding: 0 4px; }
/* Profile + settings put the greet inside a block-flow container (no
   flex gap), so it carries its own vertical spacing. Matches the 28px
   section-title rhythm. */
.amk-profile > .amk-greet { margin-bottom: 28px; }
.amk-profile > .amk-greet:not(:first-child) { margin-top: 28px; }
.amk-greet__hi {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.6px;
  line-height: 1.05;
}
.amk-greet__tagline {
  font-size: 14px;
  color: var(--amk-ink-2);
  margin-top: 4px;
}

/* Tip card — friendly nudges between drop zone and recent scans. */
.amk-tip {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 14px;
  background: var(--amk-bg);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-chip);
  box-shadow: none;
  position: relative;
}

.amk-tip__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--amk-r-pill);
  background: color-mix(in srgb, var(--amk-green) 18%, transparent);
  color: var(--amk-green-deep);
}
.amk-tip__icon svg,
.amk-tip__icon [data-lucide] { width: 24px; height: 24px; stroke-width: 1.8; }

.amk-tip__text { flex: 1; min-width: 0; padding-right: 36px; }
.amk-tip__kicker {
  font-size: 10px;
  font-weight: 700;
  color: var(--amk-green-deep);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.amk-tip__body {
  font-size: 13px;
  color: var(--amk-ink);
  margin-top: 2px;
  line-height: 1.45;
}

.amk-tip__refresh {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: var(--amk-r-pill);
  border: 0;
  background: transparent;
  color: var(--amk-green-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1), opacity 0.18s, background 0.18s;
}
.amk-tip__refresh:hover { opacity: 1; background: color-mix(in srgb, var(--amk-green) 14%, transparent); }
.amk-tip__refresh:active { transform: rotate(180deg); }
.amk-tip__refresh svg,
.amk-tip__refresh [data-lucide] { width: 16px; height: 16px; stroke-width: 2; }

/* Recent scans — horizontal scroll of mocked history cards. */
.amk-recent {}
.amk-recent .amk-section-title,
.amk-following .amk-section-title { margin-top: 4px; padding-bottom: 8px; }
/* Recent-scans header carries a trailing icon button (Clear all); switch
   from baseline-align to center so the 36px circle sits on the h2's midline
   instead of hanging from its baseline. */
.amk-recent .amk-section-title { align-items: center; }

/* Asymmetric bleed: first card aligns with other content blocks above
   (greet, drop, tip — all at .amk-upload's 16px content edge); the right
   edge extends past the screen so trailing cards naturally peek when more
   exist. Peek is the only cue we need. */
.amk-recent__row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin-right: -16px;
  padding: 0 16px 6px 0;
  scrollbar-width: none;
}
.amk-recent__row::-webkit-scrollbar { display: none; }

.amk-recent__card {
  flex: 0 0 auto;
  width: 124px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-chip);
  padding: 10px;
  scroll-snap-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: transform 0.08s, box-shadow 0.18s;
}
.amk-recent__card:hover { box-shadow: var(--amk-shadow-soft); transform: translateY(-1px); }
.amk-recent__card:active { transform: translateY(0); }

.amk-recent__thumb {
  width: 100%;
  height: 60px;
  border-radius: 10px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--amk-surface-alt) 0, var(--amk-surface-alt) 6px, var(--amk-bg-deep) 6px, var(--amk-bg-deep) 12px);
}
.amk-recent__thumb svg,
.amk-recent__thumb [data-lucide] {
  width: 34px;
  height: 34px;
  stroke-width: 1.6;
  /* Subtle drop shadow with 1px blur — Android Chrome renders 0-blur
     drop-shadow as pixel-sharp (no platform anti-aliasing), looks
     harder than iOS/desktop. 1px blur keeps the offset feel but
     softens the edge consistently. */
  filter: drop-shadow(1px 2px 1px rgba(20, 14, 6, 0.25));
}
.amk-recent__thumb--safe    { background: linear-gradient(135deg, var(--amk-safe-soft), color-mix(in srgb, var(--amk-safe) 18%, transparent)); color: var(--amk-safe-ink); }
.amk-recent__thumb--caution { background: linear-gradient(135deg, var(--amk-caution-soft), color-mix(in srgb, var(--amk-caution) 18%, transparent)); color: var(--amk-caution-ink); }
.amk-recent__thumb--avoid   { background: linear-gradient(135deg, var(--amk-harm-soft), color-mix(in srgb, var(--amk-harm) 18%, transparent)); color: var(--amk-harm-ink); }
.amk-recent__thumb--unknown { background: linear-gradient(135deg, var(--amk-unknown-soft), color-mix(in srgb, var(--amk-unknown) 18%, transparent)); color: var(--amk-unknown-ink); }

.amk-recent__brand {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--amk-ink-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Brand unknown — italic + softer weight so it reads as a placeholder
   ("we don't know") rather than a real brand name. */
.amk-recent__brand--unknown {
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}
.amk-recent__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--amk-ink);
  margin-top: 2px;
  letter-spacing: -0.1px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amk-recent__time {
  font-size: 10.5px;
  color: var(--amk-ink-3);
  margin-top: 4px;
}

/* Clear-all icon button (right of "Recent scans" header). Matches the
   tip-card refresh button format: 30px transparent circle, muted ink,
   tints on hover. Destructive intent stays gated by the confirm modal. */
.amk-recent__clear {
  width: 30px;
  height: 30px;
  border-radius: var(--amk-r-pill);
  border: 0;
  background: transparent;
  color: var(--amk-ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: opacity 0.18s, background 0.18s, color 0.18s;
}
.amk-recent__clear:hover { opacity: 1; color: var(--amk-harm-ink); background: color-mix(in srgb, var(--amk-harm) 12%, transparent); }
.amk-recent__clear:active { transform: scale(0.94); }
.amk-recent__clear svg,
.amk-recent__clear [data-lucide] { width: 16px; height: 16px; stroke-width: 2; }

.amk-recent__empty {
  font-size: 13px;
  color: var(--amk-ink-3);
  padding: 16px;
  background: var(--amk-surface);
  border: 1px dashed var(--amk-hairline-strong);
  border-radius: var(--amk-r-chip);
  text-align: center;
}

/* Watchlist (Following) — compact card with single-line rows. No inner
   scroll: nested vertical scroll inside a vertically-scrolling page
   collides with the page's own gesture on mobile. The block grows
   inline and rides the outer page scroll instead. Tight row padding
   keeps it small at typical follow counts. */
.amk-following__card {
  padding: 4px 4px;
}
.amk-following__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--amk-hairline);
}
.amk-following__row:first-child { border-top: 0; }
/* Width priority: name keeps its natural content size (flex-basis: auto),
   count starts at zero and only grows into whatever space is left
   (flex-basis: 0 + flex-grow). As the row narrows the count loses its
   grown space first; the name only truncates after the count is gone.
   Each span owns its own overflow so the ellipsis paints in the matching
   color (ink for the name, muted for the count). */
.amk-following__name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.15px;
  color: var(--amk-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.amk-following__count {
  flex: 1 1 0;
  min-width: 0;
  font-size: 11px;
  color: var(--amk-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amk-following__x {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--amk-ink-3);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.12s, color 0.12s;
}
.amk-following__x:hover { background: var(--amk-surface-alt); color: var(--amk-ink); }
.amk-following__x svg,
.amk-following__x [data-lucide] { width: 14px; height: 14px; stroke-width: 2; }
.amk-following__empty {
  font-size: 13px;
  color: var(--amk-ink-3);
  padding: 14px 12px;
  text-align: center;
  line-height: 1.4;
}
.amk-following__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
}
.amk-following__pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--amk-hairline);
  border-radius: 999px;
  color: var(--amk-ink-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.amk-following__pager-btn:hover {
  background: var(--amk-surface-alt);
  color: var(--amk-ink);
}
.amk-following__pager-btn--active {
  background: var(--amk-green);
  border-color: var(--amk-green);
  color: #fff;
}
.amk-following__pager-btn--active:hover {
  background: var(--amk-green);
  color: #fff;
}
.amk-following__pager-btn--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.amk-following__pager-btn svg,
.amk-following__pager-btn [data-lucide] { width: 14px; height: 14px; stroke-width: 2; }

/* Version-mismatch modal — mandatory full-viewport overlay with a strong
   backdrop blur so the stale UI behind is unreadable and untappable. No
   close affordance: only the Reload button. Sits above every other layer
   (tab bar 60, loading overlay 80, etc). */
.amk-versionmodal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--amk-ink) 45%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: amk-versionmodal-fade 0.18s ease-out;
}
@keyframes amk-versionmodal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.amk-versionmodal__sheet {
  width: 100%;
  max-width: 360px;
  padding: 28px 24px 22px;
  background: var(--amk-surface);
  border-radius: var(--amk-r-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
  text-align: center;
  animation: amk-versionmodal-slide 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes amk-versionmodal-slide {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.amk-versionmodal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--amk-r-pill);
  background: color-mix(in srgb, var(--amk-green) 16%, var(--amk-surface));
  color: var(--amk-green-deep, color-mix(in srgb, var(--amk-green) 70%, var(--amk-ink)));
  margin-bottom: 14px;
}
.amk-versionmodal__icon i,
.amk-versionmodal__icon [data-lucide],
.amk-versionmodal__icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
}
.amk-versionmodal__title {
  margin: 0 0 6px;
  font-family: var(--amk-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.2px;
  color: var(--amk-ink);
}
.amk-versionmodal__body {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--amk-ink-2);
}
.amk-versionmodal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--amk-r-pill);
  background: var(--amk-green);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.18s;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--amk-green) 36%, transparent);
}
.amk-versionmodal__btn:hover  { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--amk-green) 40%, transparent); }
.amk-versionmodal__btn:active { transform: translateY(0); }

/* Signature line (Yanrika/Yuni only) — inherits footer font, kept subtle
   on its own line below the demo/links row. Soft-red heart prefix. */
.amk-footer-note__sig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11px;
  font-style: italic;
  color: var(--amk-ink-3);
  line-height: 1;
}
.amk-footer-note__heart {
  width: 11px;
  height: 11px;
  stroke-width: 2;
  color: #C84A3A;
  fill: currentColor;
  opacity: 0.7;
  display: inline-block;
  flex-shrink: 0;
}

.amk-footer-note {
  text-align: center;
  font-size: 11px;
  color: var(--amk-ink-3);
  margin-top: 14px;
  /* Clear the floating tab bar AND the FAB bump that sits 14px above it.
     Worst case (iOS PWA with safe-area-inset ≈ 34px): tabbar top sits ~94px
     from viewport bottom, FAB top ~108px. 110px + safe-area gives breathing
     room without leaving an obvious empty band on flat-bottom devices. */
  margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
  opacity: 0.7;
}

.amk-hero__kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--amk-green-deep);
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.amk-hero__title {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 8px 0 6px;
  text-wrap: balance;
}

.amk-hero__body {
  font-size: 14px;
  color: var(--amk-ink-2);
  line-height: 1.5;
  max-width: 36ch;
}

/* Install gate — full-screen wall when running outside standalone PWA. */

.amk-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.amk-gate__card {
  max-width: 360px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--amk-shadow-card);
}
.amk-gate__icon {
  width: 56px; height: 56px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-green);
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto 14px;
}
.amk-gate__icon [data-lucide], .amk-gate__icon svg { width: 26px; height: 26px; }
.amk-gate__title {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
  margin: 0 0 8px;
}
.amk-gate__body {
  font-size: 13.5px;
  color: var(--amk-ink-2);
  line-height: 1.5;
  margin: 0 0 18px;
}
.amk-gate__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--amk-green);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px var(--amk-green-deep);
}
.amk-gate__btn [data-lucide], .amk-gate__btn svg { width: 16px; height: 16px; }
.amk-gate__btn:active { transform: translateY(1px); }
.amk-gate__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--amk-cream-2, var(--amk-green-soft));
  color: var(--amk-green-ink);
  font-size: 12.5px;
  line-height: 1.4;
}
.amk-gate__hint [data-lucide], .amk-gate__hint svg { width: 14px; height: 14px; }

/* Quota strip — daily scans left + pack credits, taps through to credits screen */

.amk-quota {
  position: relative;
  width: 100%;
  padding: 12px 16px 10px;
  /* DIAG: flat solid bg to isolate whether the dark left-edge band comes
     from the gradient or from the border/shadow. Restore the radial +
     linear "warm wash" after diagnosis. */
  background: var(--amk-green-soft);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  box-shadow: var(--amk-shadow-card);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: inherit;
  color: inherit;
  transition: transform 0.08s, box-shadow 0.18s;
}
.amk-quota:hover { box-shadow: var(--amk-shadow-pop); transform: translateY(-1px); }
.amk-quota:active { transform: translateY(0); }

/* Quota card — two sections divided by a hairline:
   1. Daily (title + premium chip, ring + caption)
   2. Credits (count + Get more pill button) */
.amk-quota__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.amk-quota__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--amk-ink-2);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
/* 3-column grid keeps the ring centered regardless of how wide the
   left (title) and right (premium pill) cells render — flex+space-between
   let title length push the ring off-center. */
.amk-quota__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.amk-quota__row > .amk-quota__title { justify-self: start; }
.amk-quota__row > .amk-quota__premium { justify-self: end; }
.amk-quota__caption {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--amk-ink-2);
  line-height: 1.35;
}
.amk-quota__divider {
  height: 1px;
  background: var(--amk-hairline);
  margin: 6px 0 4px;
}
.amk-quota__reset {
  font-size: 12px;
  color: var(--amk-ink-2);
  letter-spacing: 0.1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.amk-quota__reset-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--amk-ink-1);
  opacity: 0.85;
}
.amk-quota__reset-chev svg { width: 14px; height: 14px; display: block; }
.amk-quota__buyrow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.amk-quota__credits {
  font-size: 12.5px;
  color: var(--amk-ink-2);
  font-weight: 500;
}
/* Get-more is a proper pill button — icon + label form one rigid unit so the
   chevron cannot drift relative to the text. */
.amk-quota__buy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--amk-ink-2);
  white-space: nowrap;
}
.amk-quota__buy svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Compact daily-quota ring. */
.amk-quota__ring {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}
.amk-quota__ring svg { display: block; overflow: visible; }
.amk-quota__ring-bg { stroke: var(--amk-bg-deep); }
.amk-quota__ring-fg {
  stroke: var(--amk-green);
  transition: stroke-dasharray 0.4s cubic-bezier(.2,.7,.3,1);
}
.amk-quota__ring-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
}
.amk-quota__ring-num {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--amk-ink);
  line-height: 1;
}
.amk-quota__of {
  font-variant-numeric: tabular-nums;
  color: var(--amk-ink-2);
}

.amk-quota__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.amk-quota__label {
  font-size: 12px;
  color: var(--amk-ink-3);
  line-height: 1.3;
}
.amk-quota__label strong {
  font-weight: 700;
  color: var(--amk-ink-2);
}

.amk-quota__premium {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--amk-r-pill);
  background: linear-gradient(135deg, var(--amk-green) 0%, var(--amk-green-deep) 100%);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.amk-quota__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--amk-r-pill);
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
  animation: amk-pulse-dot 2.4s ease-in-out infinite;
}

.amk-quota__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.amk-quota__sub {
  font-size: 12px;
  color: var(--amk-ink-3);
}

.amk-quota__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--amk-green-deep);
  white-space: nowrap;
}
/* Chevron sits flush with the cta text — was floating because its inline-block
   SVG baselined to the wrap line, not the text mid-height. */
.amk-quota__cta svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Buttons */

.amk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  padding: 0 22px;
  border: none;
  border-radius: var(--amk-r-pill);
  background: var(--amk-green);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.18s, background 0.18s;
  font-family: inherit;
}

.amk-btn:hover { background: var(--amk-green-deep); }
.amk-btn:active { transform: scale(0.98); }
.amk-btn:disabled { background: var(--amk-ink-3); cursor: default; }

.amk-btn--ghost {
  background: var(--amk-surface);
  color: var(--amk-ink);
  border: 1px solid var(--amk-hairline);
  height: 48px;
}
.amk-btn--ghost:hover { background: var(--amk-surface-alt); }

.amk-btn--full { width: 100%; }

/* Pinned-to-bottom CTA — used by the upload screen so a tall image preview
   doesn't push the scan button below the fold. */
.amk-btn--sticky {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  margin-top: auto;
  box-shadow: 0 14px 28px -10px rgba(31, 26, 18, 0.35);
}

.amk-btn-row { display: flex; gap: 8px; padding: 0 16px; margin-top: 14px; }
.amk-btn-row .amk-btn { flex: 1; }

/* Spinner */

.amk-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: amk-spin 0.7s linear infinite;
}
@keyframes amk-spin { to { transform: rotate(360deg); } }

/* Errors */

.amk-error {
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: var(--amk-harm-soft);
  border: 1px solid color-mix(in srgb, var(--amk-harm) 30%, transparent);
  border-radius: var(--amk-r-chip);
  color: var(--amk-harm-ink);
  font-size: 13.5px;
  line-height: 1.45;
}

/* Result screen */

.amk-result { padding: 24px 16px; }
/* Result page renders no .amk-footer-note (excluded at app.js:218 since it
   already shows "Scanned <date>" at the bottom). Without the footer's
   110+safe margin, the FAB covers the last content. Match the clearance
   here so the result page bottom-spacing matches every other screen. */
.amk-result:not(.amk-profile) {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
}

/* Result page header — product name on one line, brand on a second
   smaller line beneath it. No surrounding card. */
.amk-result-header {
  margin: 0 0 14px;
  padding: 0 2px;
  font-family: var(--amk-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.3px;
  line-height: 1.15;
  color: var(--amk-ink);
}
.amk-result-header__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Brand riffs the same display-italic family as the name, just lighter
   weight, muted ink, and smaller so it reads as a secondary attribution. */
.amk-result-header__brand {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.2px;
  color: var(--amk-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header row pairs the product name (flex-grow) with the NOVA badge pinned
   to the top-right. Badge stays aligned to the first line of the name even
   when product name wraps across multiple lines. */
.amk-result-headrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
}
.amk-result-headrow > .amk-result-header {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.amk-result-headrow > .amk-nova {
  flex-shrink: 0;
  margin-top: 0;
}
/* Bottom-of-result scan-date line. Sits above the global Developer-demo footer.
   Subtle, centered. Shown for every scan; pulls from history `ts` when the
   result is being re-opened, else `Date.now()` on a fresh scan. */
.amk-result-scanned {
  margin: 20px 0 4px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: var(--amk-ink-3);
}

/* NOVA badge — single unified pill split into two halves:
   - left (stamp): solid tier color, white "NOVA n" mark
   - right (label): lighter tint of the same tier color, dark text
   One rounded container, no visible seam. Echoes the Open Food Facts visual
   while staying unambiguous (the wordmark stops the digit reading as a count). */
.amk-nova {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 6px;
  /* Outline-only, single row. Result-page pill = help-icon + tier name.
     Modal rows = "NOVA 4" stamp + tier name. Neutral grays (not the warm
     ink ramp) so the pill reads as quiet meta-info, distinct from the
     warm-toned body text. */
  border: 1px solid #d8d8d8;
  background: transparent;
  color: #5a5a5a;
  cursor: help;
  white-space: nowrap;
  line-height: 1;
}
.amk-nova > i,
.amk-nova > [data-lucide],
.amk-nova > svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  color: #9a9a9a;
}
.amk-nova__stamp {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 3px;
  background: transparent;
  color: #5a5a5a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0;
}
.amk-nova__brand {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  margin: 0;
  opacity: 1;
}
.amk-nova__digit {
  font-size: inherit;
  font-weight: 800;
}
.amk-nova__label {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1px;
  padding: 0;
  background: transparent;
  color: #7a7a7a;
}
/* Fully muted — tier color signal lives in the verdict block, not here. */
/* Button reset — `<button>` brings its own padding, bg, appearance,
   and system font-family. Only reset what's not already covered by .amk-nova
   itself; using `font: inherit` here would clobber font-size and line-height
   set on .amk-nova (tag+class beats class) and re-inflate the pill. Border
   and color stay on .amk-nova / .amk-nova--{kind} so the outline+tier color
   render. */
button.amk-nova {
  margin: 0;
  font-family: inherit;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
button.amk-nova:focus { outline: none; }
button.amk-nova:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--amk-ink) 25%, transparent);
  outline-offset: 2px;
}

/* NOVA explainer modal — touch-friendly sheet with all four tiers + their
   plain descriptions. Backdrop click or the X closes (logic in app.js click
   delegation). Sheet caps its width on tablet/desktop and slides up from the
   bottom on mobile so the user's thumb stays close to the close affordance. */
.amk-novamodal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  /* Top-aligned on mobile so the sheet stays in view even on tall content
     / short viewports (bottom-anchored variant rendered off-screen). */
  align-items: flex-start;
  justify-content: center;
  background: color-mix(in srgb, var(--amk-ink) 45%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: 16px;
  animation: amk-novamodal-fade 0.16s ease-out;
  overflow-y: auto;
}
@media (min-width: 600px) {
  .amk-novamodal { align-items: center; }
}
@keyframes amk-novamodal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.amk-novamodal__sheet {
  width: 100%;
  max-width: 460px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--amk-surface);
  border-radius: var(--amk-r-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  animation: amk-novamodal-slide 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes amk-novamodal-slide {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.amk-novamodal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--amk-hairline);
}
.amk-novamodal__title {
  margin: 0;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.2px;
  color: var(--amk-ink);
}
/* Parent grid defines the shared column track; each row uses subgrid so col 1
   width is computed across all rows (= widest badge) instead of per-row.
   Keeps per-row card styling (padding, border, active state). */
.amk-novamodal__rows {
  padding: 12px 16px 18px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 10px;
  column-gap: 12px;
}
.amk-novamodal__row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--amk-r-card);
  border: 1px solid transparent;
}
.amk-novamodal__row .amk-nova {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.amk-novamodal__row .amk-nova__label {
  flex: 1;
}
.amk-novamodal__row--active {
  background: color-mix(in srgb, var(--amk-ink) 3%, var(--amk-surface));
  border-color: var(--amk-hairline);
}
.amk-novamodal__desc {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--amk-ink-2);
}

.amk-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 8px;
  padding: 6px 12px 6px 8px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--amk-ink-2);
  cursor: pointer;
}

.amk-back:hover { background: var(--amk-surface-alt); color: var(--amk-ink); }

.amk-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-pill);
  color: var(--amk-ink-2);
  cursor: pointer;
  flex-shrink: 0;
}

.amk-share:hover { background: var(--amk-surface-alt); color: var(--amk-ink); }
.amk-share:active { transform: scale(0.96); }

.amk-product {
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--amk-shadow-card);
}

.amk-product__head { display: flex; gap: 14px; align-items: flex-start; }

.amk-product__thumb {
  width: 64px; height: 80px;
  flex-shrink: 0;
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, var(--amk-surface-alt) 0, var(--amk-surface-alt) 6px, var(--amk-bg-deep) 6px, var(--amk-bg-deep) 12px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--amk-font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--amk-ink-3);
  text-align: center;
  padding: 4px;
}

.amk-product__brand {
  font-size: 11px;
  font-weight: 700;
  color: var(--amk-ink-3);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.amk-product__name {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 4px 0 0;
  text-wrap: balance;
}

.amk-product__size {
  font-size: 12px;
  color: var(--amk-ink-2);
  margin-top: 4px;
  font-family: var(--amk-font-mono);
}

/* Confidence bar */

.amk-confidence {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  box-shadow: var(--amk-shadow-card);
}

.amk-confidence__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.amk-confidence__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--amk-ink-3);
}

.amk-confidence__value {
  font-family: var(--amk-font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--amk-ink);
}

.amk-confidence__bar {
  height: 6px;
  background: var(--amk-bg-deep);
  border-radius: var(--amk-r-pill);
  overflow: hidden;
  position: relative;
}

.amk-confidence__fill {
  height: 100%;
  border-radius: var(--amk-r-pill);
  transition: width 0.4s cubic-bezier(.2,.7,.3,1), background 0.2s;
}

.amk-confidence--high .amk-confidence__value { color: var(--amk-safe-ink); }
.amk-confidence--high .amk-confidence__fill  { background: var(--amk-safe); }

.amk-confidence--mid  .amk-confidence__value { color: var(--amk-caution-ink); }
.amk-confidence--mid  .amk-confidence__fill  { background: var(--amk-caution); }

.amk-confidence--low  .amk-confidence__value { color: var(--amk-harm-ink); }
.amk-confidence--low  .amk-confidence__fill  { background: var(--amk-harm); }

.amk-confidence__note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--amk-ink-2);
  padding: 10px 12px;
  background: var(--amk-bg-deep);
  border-radius: var(--amk-r-chip);
  border-left: 3px solid;
}

.amk-confidence--mid .amk-confidence__note { border-left-color: var(--amk-caution); background: var(--amk-caution-soft); color: var(--amk-caution-ink); }
.amk-confidence--low .amk-confidence__note { border-left-color: var(--amk-harm); background: var(--amk-harm-soft); color: var(--amk-harm-ink); }

/* Verdict hero */

.amk-verdict {
  border-radius: var(--amk-r-chip);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid;
}
.amk-verdict__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
/* Confidence note inside the verdict — plain text with a subtle hairline
   separator above so it visually divorces from the verdict main row. */
.amk-confidence-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;   /* +2 on top of the verdict's 12px gap → ~14px above */
  padding-top: 12px; /* 10 → 12 below the separator */
  border-top: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.9;
}
.amk-confidence-note__head {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.amk-confidence-note__body {
  font-size: 13px;
  line-height: 1.45;
}

.amk-verdict__kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  opacity: 0.8;
}

.amk-verdict__label {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.8px;
  margin-top: 2px;
}

.amk-verdict__summary {
  font-size: 13px;
  margin-top: 7px;
  line-height: 1.45;
  opacity: 0.9;
}

@keyframes amk-skel-pulse {
  0%, 100% { opacity: 0.06; }
  50%      { opacity: 0.16; }
}

/* Skeleton placeholder pills for the header product name + brand. Height
   matches the parent .amk-result-header line-height (1.15) exactly — a
   block span filled with real text renders at font-size × 1.15, so pulse
   at 1.15em occupies the same vertical box. Pill width is the only
   visible difference between pulse and filled state. */
.amk-result-header__name--pulse {
  display: block;
  width: 60%;
  max-width: 220px;
  height: 1.15em;
  border-radius: 6px;
  background: currentColor;
  opacity: 0.10;
  animation: amk-skel-pulse 1.4s ease-in-out infinite;
}
.amk-result-header__brand--pulse {
  display: block;
  margin-top: 4px;
  width: 40%;
  max-width: 140px;
  height: 1.15em;
  border-radius: 6px;
  background: currentColor;
  opacity: 0.08;
  animation: amk-skel-pulse 1.4s ease-in-out infinite;
}

/* Verdict card while streaming: flat surface tone (matches ingredient rows),
   no radial/linear gradient. Label uses primary ink (dark) for contrast on
   the white surface, icon pill uses brand accent so the loading state reads
   as "your scanner is working" rather than borrowing a verdict color.
   Subtle shimmer sweeps across the card surface as a low-key "loading"
   signal — overflow + position-relative on this scope so the ::after
   sweep is clipped to the card's rounded corners. */
/* Streaming verdict card: just a centered loading slogan (display-italic
   font, same treatment as the upload-screen greeting) over a soft surface
   with a subtle shimmer sweep. Min-height reserves space close to the
   final verdict card's natural size so the done re-render doesn't push
   the Findings section. */
.amk-verdict[data-stream-verdict] {
  background: var(--amk-green-soft);
  color: var(--amk-ink);
  position: relative;
  overflow: hidden;
  /* Matches the final verdict card height with a 2-line summary so the
     done re-render swaps in without pushing Findings below. */
  min-height: 104.7px;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}
.amk-verdict[data-stream-verdict]::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      transparent 30%,
      rgba(0, 0, 0, 0.06) 50%,
      transparent 70%
    );
  background-size: 220% 100%;
  animation: amk-shimmer 1.8s linear infinite;
  pointer-events: none;
}
.amk-verdict__loading {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.4px;
  line-height: 1.15;
  color: var(--amk-green);
  text-align: center;
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 100ms ease, transform 100ms ease;
}
.amk-verdict__loading--out {
  opacity: 0;
  transform: translateY(-8px);
}

@keyframes amk-shimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}

.amk-verdict__icon {
  width: 64px; height: 64px;
  border-radius: var(--amk-r-pill);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
/* Triangle's centroid sits below the SVG center — nudge up for optical balance. */
.amk-verdict--caution .amk-verdict__icon svg { transform: translateY(-3px); }

/* Verdict background mirrors the quota card on upload: radial glow at top-right
   over a 135deg linear wash. Uses each severity's hue so the kind colors the
   whole card without losing readability of the white-on-color icon. */
.amk-verdict--avoid {
  background:
    radial-gradient(ellipse 320px 220px at 95% 0%, color-mix(in srgb, var(--amk-harm) 20%, transparent) 0%, color-mix(in srgb, var(--amk-harm) 6%, transparent) 40%, transparent 80%),
    linear-gradient(135deg, var(--amk-harm-soft) 0%, color-mix(in srgb, var(--amk-harm) 14%, var(--amk-harm-soft)) 100%);
  color: var(--amk-harm-ink);
  border-color: color-mix(in srgb, var(--amk-harm) 24%, transparent);
}
.amk-verdict--avoid    .amk-verdict__icon { background: var(--amk-harm); box-shadow: 0 6px 20px color-mix(in srgb, var(--amk-harm) 36%, transparent); }
.amk-verdict--caution {
  background:
    radial-gradient(ellipse 320px 220px at 95% 0%, color-mix(in srgb, var(--amk-caution) 22%, transparent) 0%, color-mix(in srgb, var(--amk-caution) 6%, transparent) 40%, transparent 80%),
    linear-gradient(135deg, var(--amk-caution-soft) 0%, color-mix(in srgb, var(--amk-caution) 14%, var(--amk-caution-soft)) 100%);
  color: var(--amk-caution-ink);
  border-color: color-mix(in srgb, var(--amk-caution) 24%, transparent);
}
.amk-verdict--caution  .amk-verdict__icon { background: var(--amk-caution); box-shadow: 0 6px 20px color-mix(in srgb, var(--amk-caution) 36%, transparent); }
.amk-verdict--safe {
  background:
    radial-gradient(ellipse 320px 220px at 95% 0%, color-mix(in srgb, var(--amk-safe) 20%, transparent) 0%, color-mix(in srgb, var(--amk-safe) 6%, transparent) 40%, transparent 80%),
    linear-gradient(135deg, var(--amk-safe-soft) 0%, color-mix(in srgb, var(--amk-safe) 14%, var(--amk-safe-soft)) 100%);
  color: var(--amk-safe-ink);
  border-color: color-mix(in srgb, var(--amk-safe) 24%, transparent);
}
.amk-verdict--safe     .amk-verdict__icon { background: var(--amk-safe); box-shadow: 0 6px 20px color-mix(in srgb, var(--amk-safe) 36%, transparent); }
.amk-verdict--unknown {
  background:
    radial-gradient(ellipse 320px 220px at 95% 0%, color-mix(in srgb, var(--amk-unknown) 20%, transparent) 0%, color-mix(in srgb, var(--amk-unknown) 6%, transparent) 40%, transparent 80%),
    linear-gradient(135deg, var(--amk-unknown-soft) 0%, color-mix(in srgb, var(--amk-unknown) 14%, var(--amk-unknown-soft)) 100%);
  color: var(--amk-unknown-ink);
  border-color: color-mix(in srgb, var(--amk-unknown) 24%, transparent);
}
.amk-verdict--unknown  .amk-verdict__icon { background: var(--amk-unknown); box-shadow: 0 6px 20px color-mix(in srgb, var(--amk-unknown) 36%, transparent); }

/* Mark chips (halal / bpom) */

.amk-marks { display: flex; gap: 8px; }

.amk-mark {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--amk-r-chip);
  border: 1px solid;
  font-size: 11px;
}

.amk-mark__icon { flex-shrink: 0; display: flex; }

.amk-mark__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.amk-mark__sub {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 1px;
  font-family: var(--amk-font-mono);
}

.amk-mark--halal {
  background: var(--amk-safe-soft);
  border-color: color-mix(in srgb, var(--amk-safe) 24%, transparent);
  color: var(--amk-safe-ink);
}

.amk-mark--bpom {
  background: var(--amk-green-soft);
  border-color: color-mix(in srgb, var(--amk-green) 24%, transparent);
  color: var(--amk-green-deep);
}

/* Counts ribbon */
/* Status dot — used in counts + ingredient rows */

.amk-dot {
  width: 9px; height: 9px;
  border-radius: var(--amk-r-pill);
  flex-shrink: 0;
}
.amk-dot--avoid   { background: var(--amk-harm); }
.amk-dot--caution { background: var(--amk-caution); }
.amk-dot--safe    { background: var(--amk-safe); }
.amk-dot--unknown { background: var(--amk-unknown); }

/* Section title */

.amk-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 10px;
  margin-top: 28px;
}

.amk-section-title h2 {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: 1.1;
  margin: 0;
}

.amk-section-title__meta {
  font-family: var(--amk-font-mono);
  font-size: 11px;
  color: var(--amk-ink-3);
}

/* Collapsible toggle group — <details>/<summary> wraps section-title +
   card. Hides the native marker on all browsers; chevron rotates on
   open. Section title doubles as the click target. */
.amk-toggle-section { display: block; }
.amk-toggle-section[hidden] { display: none; }
.amk-toggle-section > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.amk-toggle-section > summary::-webkit-details-marker { display: none; }
.amk-toggle-section > summary::marker { display: none; }
/* Grid layout locks the chevron column to a fixed width so the chevron
   never shifts position as the count badge grows from 1 to 2 digits.
   Center-align all three children vertically — h2, count pill, and the
   lucide SVG all have different baselines so baseline-align looks off. */
.amk-section-title--summary {
  display: grid;
  grid-template-columns: 1fr auto 22px;
  align-items: center;
  gap: 8px;
}
/* Multi-badge wrapper for sections that surface counts per severity kind
   (e.g. Findings with mixed avoid + caution). Single direct __count badges
   still fit the auto grid column without needing this wrapper. */
.amk-section-title__counts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.amk-section-title--summary h2 {
  line-height: 1.1;
}
.amk-section-title__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--amk-ink-3);
  transition: transform 200ms ease;
}
.amk-section-title__chev i,
.amk-section-title__chev [data-lucide],
.amk-section-title__chev svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.amk-toggle-section[open] > summary .amk-section-title__chev {
  transform: rotate(180deg);
}
.amk-section-title__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border-radius: 999px;
  background: var(--amk-green);
  color: #fff;
  font-family: var(--amk-font-mono);
  font-size: 11px;
  font-weight: 700;
}
/* Result page only: tier color lives on verdict block + per-ingredient
   left-border, so the count goes neutral here. Profile shares the
   `.amk-result` layout wrapper but adds `.amk-profile` so we can exclude
   it and let the base green pill show through. */
.amk-result:not(.amk-profile) .amk-section-title__count {
  background: transparent;
  color: var(--amk-ink-2);
  border: 1px solid var(--amk-hairline-strong);
}
/* Icon-prefixed variant for Findings — small lucide glyph + count. Icon
   disambiguates the color so users don't need a separate legend. */
.amk-section-title__count--labeled {
  width: auto;
  padding: 0 9px;
  gap: 4px;
}
.amk-section-title__count--labeled i,
.amk-section-title__count--labeled [data-lucide],
.amk-section-title__count--labeled svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}
/* Zero-state: same footprint so the chevron never shifts, but muted
   styling so it reads as "nothing set" rather than "1 set". */
.amk-section-title__count--zero {
  background: transparent;
  color: var(--amk-ink-3);
  border: 1px solid var(--amk-hairline-strong);
}
/* Severity variants no-op: base style is already neutral; tier cue lives on
   the icon glyph + verdict block, not the badge background. Kept as
   selectors so HTML hooks stay valid — restore tinted bg here if needed. */
.amk-section-title__count--warn,
.amk-section-title__count--harm { /* neutral, same as base */ }

.amk-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-green);
  color: #fff;
  font-family: var(--amk-font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* Findings + ingredient cards */

.amk-card {
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  overflow: hidden;
}

.amk-card + .amk-card { margin-top: 14px; }
.amk-card--grouped + .amk-card--grouped { margin-top: 6px; }

.amk-row {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--amk-hairline);
  text-align: left;
  width: 100%;
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  align-items: flex-start;
}

.amk-row:first-child { border-top: 0; }

.amk-row__body { flex: 1; min-width: 0; }

.amk-row__title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.3;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}

.amk-row__tier {
  font-size: 11px;
  font-weight: 600;
  color: var(--amk-ink-3);
  font-family: var(--amk-font-mono);
}

.amk-row__authority {
  font-size: 11px;
  color: var(--amk-ink-3);
  margin-top: 3px;
  letter-spacing: 0.2px;
}

.amk-row__advisory {
  font-size: 13px;
  color: var(--amk-ink-2);
  margin-top: 5px;
  line-height: 1.45;
}

.amk-row__ings {
  font-size: 11px;
  color: var(--amk-ink-3);
  margin-top: 5px;
  font-family: var(--amk-font-mono);
}

.amk-row__chev {
  color: var(--amk-ink-3);
  flex-shrink: 0;
  padding-top: 2px;
  transition: transform 0.18s ease;
}

.amk-row[aria-expanded="true"] .amk-row__chev { transform: rotate(180deg); }

/* Ingredient row */

.amk-ing {
  width: 100%;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--amk-hairline);
  align-items: flex-start;
  background: transparent;
  border-left: 5px solid transparent; border-right: 0; border-bottom: 0;
  text-align: left;
  font: inherit; color: inherit;
  cursor: pointer;
}
.amk-ing:first-child { border-top: 0; }
.amk-card > .amk-ing:first-child { border-top-left-radius: calc(var(--amk-r-card) - 1px); }
.amk-card > .amk-ing:last-child { border-bottom-left-radius: calc(var(--amk-r-card) - 1px); }
.amk-ing--avoid   { border-left-color: var(--amk-harm); }
.amk-ing--caution { border-left-color: var(--amk-caution); }
.amk-ing--safe    { border-left-color: var(--amk-safe); }
.amk-ing--unknown { border-left-color: var(--amk-unknown); }
/* Streaming enter animation: applied only to rows appended via result-stream
   appendIngredient (not the final renderResult path), so the done re-render
   doesn't replay the flash. A brief severity-tinted background fades to the
   default transparent — ties the cue to the data signal and gives a contrast
   surface that doesn't depend on light-on-light opacity. The per-severity
   modifier classes (.amk-ing--avoid/caution/safe/unknown) set --amk-ing-tint
   so a single keyframe covers all four cases. */
.amk-ing--enter                  { animation: amk-ing-enter 800ms ease-out both; }
.amk-ing--enter.amk-ing--avoid   { --amk-ing-tint: var(--amk-harm); }
.amk-ing--enter.amk-ing--caution { --amk-ing-tint: var(--amk-caution); }
.amk-ing--enter.amk-ing--safe    { --amk-ing-tint: var(--amk-safe); }
.amk-ing--enter.amk-ing--unknown { --amk-ing-tint: var(--amk-unknown); }
@keyframes amk-ing-enter {
  from { background: color-mix(in srgb, var(--amk-ing-tint) 24%, transparent); }
  to   { background: transparent; }
}
/* Per-ingredient follow heart — sits at the right of the row. Outline by
   default, fills with the theme accent when followed. Mock-only: tap
   toasts with the ingredient name. */
.amk-ing__follow {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--amk-r-pill);
  color: var(--amk-ink-3);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.amk-ing__follow:hover { background: var(--amk-surface-alt); color: var(--amk-ink-2); }
.amk-ing__follow svg, .amk-ing__follow [data-lucide] { width: 16px; height: 16px; stroke-width: 2; }
.amk-ing__follow--on { color: var(--amk-green); }
.amk-ing__follow--on svg { fill: currentColor; }
.amk-ing__follow--on:hover { color: var(--amk-green-deep); background: var(--amk-green-soft); }

.amk-ing__name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.15px;
  line-height: 1.3;
}

.amk-ing__why {
  font-size: 13px;
  color: var(--amk-ink-2);
  margin-top: 3px;
  line-height: 1.4;
}

/* Per-ingredient profile chips — sit below the reason in a tight wrap row,
   small clickable pills that route to the profile screen. Distinct background
   tints by source type help the eye separate status toggles from ad-hoc
   allergen/condition matches. */
.amk-ing__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* Profile chip on result-page ingredients. `inline-block` + line-height-based
   vertical centering renders consistently across old Android WebView / iOS
   Safari — `inline-flex` baseline + UA <button> defaults interact badly on
   those engines (chip looks taller than text, phantom side-padding). The
   global `* { box-sizing: border-box }` (line 54) covers sizing. */
.amk-pchip {
  display: inline-block;
  margin: 0;
  padding: 3px 8px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-pill);
  background: var(--amk-surface);
  color: var(--amk-ink-2);
  cursor: pointer;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
}
/* Base hover (only applies to chips without a tier modifier; tier variants
   own their own :hover below so the severity tint never gets stripped to
   neutral — that read as "this is fine" on a red row). */
.amk-pchip:hover {
  background: var(--amk-surface-2, color-mix(in srgb, var(--amk-ink) 4%, var(--amk-surface)));
  color: var(--amk-ink);
}
/* Tint by severity of the parent ingredient, not by chip type. Green status
   chips on a red row read as "this is fine", which contradicts the finding. */
.amk-pchip--avoid {
  background: color-mix(in srgb, var(--amk-harm) 8%, var(--amk-surface));
  border-color: color-mix(in srgb, var(--amk-harm) 25%, transparent);
  color: color-mix(in srgb, var(--amk-harm) 75%, var(--amk-ink));
}
.amk-pchip--avoid:hover {
  background: color-mix(in srgb, var(--amk-harm) 14%, var(--amk-surface));
  border-color: color-mix(in srgb, var(--amk-harm) 40%, transparent);
  color: color-mix(in srgb, var(--amk-harm) 85%, var(--amk-ink));
}
.amk-pchip--caution {
  background: color-mix(in srgb, var(--amk-caution) 10%, var(--amk-surface));
  border-color: color-mix(in srgb, var(--amk-caution) 30%, transparent);
  color: color-mix(in srgb, var(--amk-caution) 60%, var(--amk-ink));
}
.amk-pchip--caution:hover {
  background: color-mix(in srgb, var(--amk-caution) 18%, var(--amk-surface));
  border-color: color-mix(in srgb, var(--amk-caution) 45%, transparent);
  color: color-mix(in srgb, var(--amk-caution) 75%, var(--amk-ink));
}
.amk-pchip--unknown {
  background: color-mix(in srgb, var(--amk-unknown) 8%, var(--amk-surface));
  border-color: color-mix(in srgb, var(--amk-unknown) 25%, transparent);
}
.amk-pchip--unknown:hover {
  background: color-mix(in srgb, var(--amk-unknown) 14%, var(--amk-surface));
  border-color: color-mix(in srgb, var(--amk-unknown) 40%, transparent);
}
.amk-pchip--about {
  /* About-text is fuzzy; italic keeps it visually distinct from structured profile inputs. */
  font-style: italic;
}


.amk-ing__detail-wrap {
  padding: 0 16px 16px 36px;
  display: none;
  flex-direction: column;
  gap: 12px;
}

.amk-row[aria-expanded="true"] + .amk-ing__detail-wrap,
.amk-ing[aria-expanded="true"] + .amk-ing__detail-wrap {
  display: flex;
}

.amk-ing__detail {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--amk-ink);
  background: var(--amk-surface-alt);
  padding: 12px 14px;
  border-radius: var(--amk-r-chip);
  border-left: 3px solid;
  text-wrap: pretty;
}
.amk-ing__detail--avoid   { border-left-color: var(--amk-harm); background: var(--amk-harm-soft); }
.amk-ing__detail--caution { border-left-color: var(--amk-caution); background: var(--amk-caution-soft); }
.amk-ing__detail--safe    { border-left-color: var(--amk-safe); background: var(--amk-safe-soft); }
.amk-ing__detail--unknown { border-left-color: var(--amk-unknown); background: var(--amk-unknown-soft); }

.amk-ing__dose {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: var(--amk-surface-alt);
  border-radius: 10px;
  font-size: 12px;
  color: var(--amk-ink-2);
}

.amk-ing__dose-val {
  font-family: var(--amk-font-mono);
  font-weight: 700;
  color: var(--amk-ink);
}

.amk-ing__regs-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--amk-ink-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.amk-ing__regs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.amk-reg {
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: 8px;
  padding: 8px 10px;
}

.amk-reg__k {
  font-size: 10px;
  font-weight: 700;
  color: var(--amk-ink-3);
  letter-spacing: 0.4px;
}

.amk-reg__v {
  font-family: var(--amk-font-mono);
  font-size: 12px;
  color: var(--amk-ink);
  margin-top: 2px;
  line-height: 1.2;
  word-break: break-word;
}

.amk-evidence { display: flex; align-items: center; gap: 6px; }

.amk-evidence__bars { display: flex; gap: 2px; }

.amk-evidence__bar {
  width: 12px; height: 4px;
  border-radius: 2px;
  background: var(--amk-hairline-strong);
}
.amk-evidence__bar--on { background: var(--amk-ink); }

.amk-evidence__label {
  font-size: 11px;
  color: var(--amk-ink-2);
  font-weight: 500;
}

/* Meta footer */

.amk-meta {
  margin-top: 22px;
  padding: 14px 16px;
  text-align: center;
  font-size: 11px;
  color: var(--amk-ink-3);
  font-family: var(--amk-font-mono);
  line-height: 1.7;
}

/* Header nav (icon buttons on upload screen — profile + credits) */

.amk-header__nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.amk-iconbtn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-pill);
  background: var(--amk-surface);
  color: var(--amk-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.amk-iconbtn:hover { background: var(--amk-surface-alt); color: var(--amk-ink); }
.amk-iconbtn:active { transform: scale(0.96); }
.amk-iconbtn svg, .amk-iconbtn [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
/* Follow heart in the result-screen header — outline by default, fills
   with the theme accent when the product is followed. */
.amk-iconbtn--following { color: var(--amk-green); }
.amk-iconbtn--following svg { fill: currentColor; }
.amk-iconbtn--following:hover { color: var(--amk-green-deep); background: var(--amk-green-soft); }

/* Profile screen */

.amk-profile__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--amk-r-pill);
  background: linear-gradient(135deg, var(--amk-green) 0%, var(--amk-green-deep) 100%);
  color: #fff;
  font-weight: 800;
  /* line-height 1 collapses the line-box to font-size so flex centering
     lines up exactly. Inherited 1.45 left "SK" sitting a hair high. */
  line-height: 1;
  /* Letter-spacing was pushing the second glyph right; small text-indent
     compensates so the pair reads visually centred. */
  letter-spacing: 0.5px;
  text-indent: 0.5px;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Identity card — three flex columns:
     [avatar] [text-stack 1fr] [side-stack]
   Avatar fixed 55×55. Text stack holds PREMIUM, name, expires with a
   single consistent gap. Side stack holds the lang picker at the top
   and the scan count at the bottom (space-between), stretched to match
   the text-stack height so top + bottom align with text's first +
   last rows. */
/* Identity card — 2-col x 2-row grid.
     col 1 row 1: name           · col 2 row 1: language picker
     col 1 row 2: PREMIUM badge  · col 2 row 2: member-since link */
.amk-profile__id {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  padding: 16px 18px;
  /* Matches the daily-credits quota strip on the upload screen. */
  background: var(--amk-green-soft);
}
.amk-profile__id .amk-product__name {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  line-height: 1;
  min-width: 0;
}
/* PREMIUM pill — identical styling to .amk-quota__premium on the
   upload screen's quota strip: deep sage gradient + white text + 6px
   gap + pulsing white dot. */
.amk-profile__id .amk-product__brand {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  margin: 0;
  border-radius: var(--amk-r-pill);
  background: linear-gradient(135deg, var(--amk-green) 0%, var(--amk-green-deep) 100%);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 0;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.amk-profile__id .amk-product__brand:hover {
  filter: brightness(1.05);
}
.amk-profile__id .amk-profile__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--amk-r-pill);
  background: #fff;
  margin-right: 0;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
  vertical-align: 0;
}
/* Language chips at the top-right of the identity card. The lang-wrap's
   default `--amk-surface` fill would stick out as a white pill on the
   green-soft card bg, so let the badge bg show through. */
.amk-profile__id-lang {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.amk-profile__id .amk-profile__lang-wrap { background: transparent; }
/* Scans-total line sits centered below the identity card. */
.amk-profile__scans-line {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--amk-ink-3);
  letter-spacing: 0.2px;
}
.amk-profile__scans-line .amk-profile__scans-num {
  font-weight: 700;
  color: var(--amk-ink-2);
  margin-right: 3px;
}
.amk-profile__id .amk-profile__sub--link {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  line-height: 1;
  /* Lucide chevron-right's tip sits ~5px inside the icon viewBox right edge,
     leaving a visible gap between the tip and the cell's right edge. Pull
     the button slightly past the grid cell so the tip lines up with the
     last letter of "scans total" in the row above. */
  margin-right: -5px;
}

.amk-profile__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-green);
  margin-right: 6px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--amk-green) 60%, transparent);
  animation: amk-pulse-dot 2.4s ease-in-out infinite;
  vertical-align: 1px;
}

/* Premium-sub line doubles as the tap target for the credits screen.
   Keeps the original muted text styling; just adds a small chevron and
   a subtle hover hint so it reads as a link without screaming. */
.amk-profile__sub--link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 2px 6px 2px 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  transition: color 180ms ease, background 180ms ease;
}
.amk-profile__sub--link i,
.amk-profile__sub--link [data-lucide],
.amk-profile__sub--link svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
  opacity: 0.55;
  transition: transform 180ms ease, opacity 180ms ease;
}
.amk-profile__sub--link:hover {
  color: var(--amk-green-deep);
}
.amk-profile__sub--link:hover i,
.amk-profile__sub--link:hover [data-lucide],
.amk-profile__sub--link:hover svg {
  opacity: 1;
  transform: translateX(2px);
}

.amk-profile__sub {
  font-size: 12px;
  color: var(--amk-ink-2);
  margin-top: 4px;
}

.amk-profile__scans-num {
  font-family: var(--amk-font-mono);
  font-weight: 700;
  color: var(--amk-ink);
  margin-right: 4px;
}

.amk-profile__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 11px;
  border-top: 1px solid var(--amk-hairline);
  margin-top: 3px;
}

.amk-profile__stat {
  text-align: center;
  padding: 4px 4px;
}

.amk-profile__stat-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--amk-ink);
  font-variant-numeric: tabular-nums;
}

.amk-profile__stat-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--amk-ink-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

.amk-profile__stat--muted .amk-profile__stat-num { color: var(--amk-ink-2); }

/* Compact language picker — globe icon + 3 letter-code buttons inline.
   Sits top-right of the identity card. */
.amk-profile__lang-wrap {
  flex-shrink: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--amk-hairline-strong);
  border-radius: 999px;
  background: var(--amk-surface);
}
.amk-profile__lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 3px 7px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--amk-ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.amk-profile__lang-btn:hover:not(.amk-profile__lang-btn--on) { color: var(--amk-green-deep); }
.amk-profile__lang-btn--on {
  background: var(--amk-green);
  color: #fff;
}

/* Theme picker — header circle button + dropdown popover. Mirrors `.amk-share`
   sizing for header-right alignment with other header circles. */
.amk-themepicker {
  position: relative;
  /* Strip native details disclosure triangle in Safari/Firefox. */
  -webkit-details-marker: none;
}
.amk-themepicker > summary::-webkit-details-marker { display: none; }
.amk-themepicker > summary { list-style: none; }
.amk-themepicker__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-pill);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.amk-themepicker__btn:hover { background: var(--amk-surface-alt); border-color: var(--amk-hairline-strong); }
.amk-themepicker[open] > .amk-themepicker__btn { border-color: var(--amk-green); }

.amk-themepicker__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  padding: 6px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline-strong);
  border-radius: 14px;
  box-shadow: var(--amk-shadow-pop);
}
.amk-themepicker__item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--amk-ink-2);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, color 120ms ease;
}
.amk-themepicker__item:hover { background: var(--amk-surface-alt); color: var(--amk-ink); }
.amk-themepicker__item--on { color: var(--amk-ink); font-weight: 600; }

.amk-themepicker__swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--amk-hairline-strong);
  flex-shrink: 0;
}

.amk-profile__allergens { padding-bottom: 0; }
.amk-profile__hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--amk-ink-3);
  padding: 14px 14px 6px;
}

/* Hint paragraph that sits below an allergen/condition section title,
   outside the chip card. Card itself collapses entirely when empty. */
.amk-profile__section-hint {
  margin: 0 0 10px;
  padding: 0 4px;
  font-size: 13px;
  color: var(--amk-ink-3);
  line-height: 1.4;
}

.amk-profile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px;
}

.amk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px 12px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-green-soft);
  border: 1px solid color-mix(in srgb, var(--amk-green) 30%, transparent);
  color: var(--amk-green-deep);
  font-size: 13px;
  font-weight: 500;
}

.amk-chip__x {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: var(--amk-r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  flex-shrink: 0;
}
.amk-chip__x:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.amk-chip__x svg, .amk-chip__x [data-lucide] { width: 13px; height: 13px; stroke-width: 2.4; }

.amk-profile__add {
  display: flex;
  gap: 6px;
  padding: 14px;
}
/* When chips are present above, drop the top padding so the input
   sits flush against the chip row. */
.amk-profile__chips + .amk-profile__add {
  padding-top: 0;
}

.amk-profile__add-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--amk-r-pill);
  border: 1px solid var(--amk-hairline-strong);
  background: var(--amk-surface);
  font: inherit;
  font-size: 13px;
}
.amk-profile__add-input:focus { outline: none; border-color: var(--amk-green); }

.amk-profile__add-btn {
  padding: 0 18px;
  border-radius: var(--amk-r-pill);
  border: 0;
  background: var(--amk-green);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease;
}
.amk-profile__add-btn:hover { background: var(--amk-green-deep); }

.amk-profile__about {
  padding-bottom: 14px;
  position: relative;
}
/* Subtle "Saved" hint floats just inside the textarea's bottom-right
   corner. Fades in while the user is typing, fades out 1.4s after the
   last keystroke. Never steals focus or layout space. */
.amk-profile__about-saved {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--amk-surface) 92%, transparent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--amk-ink-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.amk-profile__about-saved i,
.amk-profile__about-saved [data-lucide],
.amk-profile__about-saved svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.6;
  color: var(--amk-green, #4a8a44);
}
.amk-profile__about-saved--on { opacity: 1; }
.amk-profile__about-input {
  margin: 0 14px;
  width: calc(100% - 28px);
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--amk-hairline-strong);
  background: var(--amk-surface);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  resize: vertical;
  min-height: 64px;
  box-sizing: border-box;
}
.amk-profile__about-input:focus { outline: none; border-color: var(--amk-green); }

/* Family roster — tab-like switcher. Each avatar is a tab (self pinned first +
   members + add button). Active = ring; content below the row swaps between
   self profile editor and member detail card.

   Tight section title since the avatar row itself communicates the section. */
/* Asymmetric vertical padding: active-state ring (4px box-shadow) extends
   into the top gap and visually shrinks it. Trimming the bottom compensates
   so top + bottom clear-space read the same. */
.amk-profile__family { padding: 10px 12px 6px; }

/* Scope divider — signposts the transition from the household-roster card
   above to the personal-preferences sections below. Small uppercase label
   flanked by hairlines so it reads as a section break, not a heading
   competing with the italic h2s underneath. Only rendered for self;
   member-active view replaces sections entirely with the detail card. */

/* Avatars wrap to new rows once they overflow horizontally instead of
   forcing a horizontal scroll. Padding still leaves room for the active
   ring (extends 4px outside the circle) on every wrapped row. */
.amk-family__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 2px;
}

.amk-family__avatar {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* 4px ring (active state, box-shadow) extends past the circle's box edge,
     so a 4px column gap would leave 0px visual clearance to the name and
     clip into it. 6px keeps the ring breathing. */
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  width: 56px;
  font: inherit;
  color: inherit;
}

.amk-family__avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: var(--amk-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.4px;
  line-height: 1;
  /* Ring slot for selected state; transparent by default so layout never shifts. */
  box-shadow: 0 0 0 2px var(--amk-surface), 0 0 0 2px transparent;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.amk-family__avatar-circle--self {
  background: linear-gradient(135deg, var(--amk-green) 0%, var(--amk-green-deep) 100%);
}
.amk-family__avatar-circle--add {
  background: var(--amk-surface);
  color: var(--amk-ink-2);
  border: 1.5px dashed var(--amk-hairline-strong);
}
.amk-family__avatar-circle--add i,
.amk-family__avatar-circle--add [data-lucide],
.amk-family__avatar-circle--add svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.amk-family__avatar--active .amk-family__avatar-circle {
  box-shadow: 0 0 0 2px var(--amk-surface), 0 0 0 4px var(--amk-green);
}
/* Hover lift only on real pointer devices. On touch, :hover stays "stuck"
   after a tap, so the avatar jitters up-down-up as render swaps. */
@media (hover: hover) {
  .amk-family__avatar:hover .amk-family__avatar-circle {
    transform: translateY(-1px);
  }
}

/* Sync-state corner badge — bottom-right of the avatar circle. Position
   relative on the circle (already a positioned-flex container) so absolute
   placement nests cleanly. Surface bg ring keeps the badge readable on
   every palette color. */
.amk-family__avatar-circle { position: relative; }
.amk-family__badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1.5px var(--amk-surface);
}
.amk-family__badge i,
.amk-family__badge [data-lucide],
.amk-family__badge svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.4;
}
.amk-family__badge--local   { color: var(--amk-ink-3); }
.amk-family__badge--synced  { color: var(--amk-green-deep); }
/* Pending uses caution-ink (muted dark amber) rather than the loud
   --amk-caution. Caution tokens don't theme-vary, so the bright amber
   clashed on warm (orange) and sage (olive) palettes. The dark variant
   reads as "waiting" without screaming. */
.amk-family__badge--pending {
  color: var(--amk-caution-ink);
  animation: amk-family-pulse 1.6s ease-in-out infinite;
}
@keyframes amk-family-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.12); opacity: 0.75; }
}

.amk-family__avatar-name {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--amk-ink-3);
  max-width: 56px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amk-family__avatar--active .amk-family__avatar-name {
  color: var(--amk-ink);
  font-weight: 600;
}

/* Add-member inline panel. Segment picker chooses Local (name → Save) vs
   Cloud invite (name + email → Send invite). Layout: stack of segment +
   one or two input rows. */
.amk-family__panel {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--amk-hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Pill-shaped 2-segment toggle. Active half = green bg + white text; rest
   = surface with hairline border. Mirrors caution-segment pattern but kept
   local since dimensions differ. */
.amk-family__seg {
  display: inline-flex;
  align-self: flex-start;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline-strong);
  border-radius: var(--amk-r-pill);
  padding: 3px;
  gap: 2px;
}
.amk-family__seg-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--amk-r-pill);
  background: transparent;
  color: var(--amk-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 140ms ease, color 140ms ease;
}
.amk-family__seg-btn i,
.amk-family__seg-btn [data-lucide],
.amk-family__seg-btn svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
}
.amk-family__seg-btn--on {
  background: var(--amk-green);
  color: #fff;
}

/* Glyph used inside an avatar circle when no initials are available
   (pending synced invite — no name yet). Same fg color as the circle's
   text (white) so it reads against the palette bg. */
.amk-family__avatar-glyph {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.amk-family__avatar-glyph--lg {
  width: 28px;
  height: 28px;
}
.amk-family__avatar-glyph,
.amk-family__avatar-glyph [data-lucide],
.amk-family__avatar-glyph svg {
  color: #fff;
  stroke-width: 2.2;
}

/* Share-link button — ghost / secondary action, full row width. */
.amk-family__panel-btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 16px;
  height: 38px;
  border-radius: var(--amk-r-pill);
  background: transparent;
  color: var(--amk-green-deep);
  border: 1px solid color-mix(in srgb, var(--amk-green) 35%, transparent);
  cursor: pointer;
}
.amk-family__panel-btn-link:hover {
  background: var(--amk-green-soft);
}
.amk-family__panel-btn-link i,
.amk-family__panel-btn-link [data-lucide],
.amk-family__panel-btn-link svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}
.amk-family__panel-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.amk-family__panel-row .amk-profile__add-input {
  flex: 1;
  min-width: 0;
}
.amk-family__panel-btn-primary {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 18px;
  border: 0;
  border-radius: var(--amk-r-pill);
  background: var(--amk-green);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.amk-family__panel-btn-primary:hover { background: var(--amk-green-deep); }

/* Destructive secondary (Remove / Cancel invite). Rest state stays
   theme-neutral (ink-2 + theme hairline) so it doesn't clash with
   warm/sage palettes — the harm tokens are intentionally constant red,
   which screams against non-default themes if used at rest. Destructive
   intent surfaces on hover/active only. */
.amk-family__panel-btn-danger {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 16px;
  height: 38px;
  background: transparent;
  color: var(--amk-ink-2);
  border: 1px solid var(--amk-hairline-strong);
  border-radius: var(--amk-r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.amk-family__panel-btn-danger:hover,
.amk-family__panel-btn-danger:active {
  color: var(--amk-harm-ink);
  border-color: color-mix(in srgb, var(--amk-harm) 35%, transparent);
  background: color-mix(in srgb, var(--amk-harm-soft) 60%, var(--amk-surface));
}
.amk-family__panel-btn-danger i,
.amk-family__panel-btn-danger [data-lucide],
.amk-family__panel-btn-danger svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

/* Member detail card — replaces the self profile editor when a member tab is
   active. Mock-stub: large avatar + name + hint that fields aren't per-member
   yet + Remove. */
.amk-family__detail {
  padding: 20px 18px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
.amk-family__detail-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.amk-family__detail-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--amk-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.5px;
  line-height: 1;
  position: relative;
}
/* Detail avatar's badge sits bigger so the icon stays legible at the
   72px scale. Sized to roughly match the row-avatar ratio. */
.amk-family__detail-avatar .amk-family__badge {
  right: -3px;
  bottom: -3px;
  width: 22px;
  height: 22px;
}
.amk-family__detail-avatar .amk-family__badge i,
.amk-family__detail-avatar .amk-family__badge [data-lucide],
.amk-family__detail-avatar .amk-family__badge svg {
  width: 13px;
  height: 13px;
}
.amk-family__detail-name {
  margin: 0;
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--amk-ink);
}
.amk-family__detail-kind {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--amk-ink-3);
}
.amk-family__detail-kind--synced  { color: var(--amk-green-deep); }
/* Pending uses --amk-ink-2 (muted, theme-aware) so the warm/sage themes
   don't surface the loud amber `--amk-caution-ink`. The pulsing badge
   animation still communicates "waiting" on its own. */
.amk-family__detail-kind--pending { color: var(--amk-ink-2); }

/* Clickable invite-link pill shown under the pending-status line for
   share-link invites. Monospace URL + copy icon; tap copies to clipboard
   and surfaces the same "link copied" toast as the initial generation. */
.amk-family__link-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 6px 0 0;
  padding: 6px 12px;
  font: inherit;
  font-family: var(--amk-font-mono);
  font-size: 12px;
  color: var(--amk-ink);
  background: var(--amk-surface-alt);
  border: 1px solid var(--amk-hairline-strong);
  border-radius: var(--amk-r-pill);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.amk-family__link-pill:hover {
  background: var(--amk-green-soft);
  border-color: color-mix(in srgb, var(--amk-green) 35%, transparent);
}
.amk-family__link-pill-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.amk-family__link-pill i,
.amk-family__link-pill [data-lucide],
.amk-family__link-pill svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
  color: var(--amk-ink-2);
  flex-shrink: 0;
}

.amk-family__detail-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--amk-ink-3);
  max-width: 320px;
}
.amk-family__detail-actions {
  margin-top: 4px;
}

/* Status & preferences — iOS-style toggle rows */

.amk-profile__toggles { padding: 4px 4px; }

.amk-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-top: 1px solid var(--amk-hairline);
  cursor: pointer;
}
.amk-toggle-row:first-child { border-top: 0; }

.amk-toggle-row__text { flex: 1; min-width: 0; }

.amk-toggle-row__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--amk-ink);
  letter-spacing: -0.15px;
  /* flex keeps the `?` icon vertically centered against the title text
     instead of riding the baseline (where it would sit too high). */
  display: flex;
  align-items: center;
  gap: 6px;
}

/* `?` icon next to non-obvious toggles (seed_oils, ultra_processed, organic,
   palm_free, keto, histamine, sulfite). Tap toggles the row's WHY expand
   animation (see .amk-toggle-row__why-text below). Filled pill style — bg
   matches the WHY dropdown panel (--amk-surface-alt) so the icon visibly
   "previews" the panel that will open. */
.amk-toggle-row__why {
  appearance: none;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--amk-ink-2);
  line-height: 0;
  opacity: 0.55;
}
.amk-toggle-row__why i,
.amk-toggle-row__why [data-lucide],
.amk-toggle-row__why svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.25;
}
.amk-toggle-row__why:hover { opacity: 0.85; }
.amk-toggle-row--why-open .amk-toggle-row__why { opacity: 1; color: var(--amk-ink); }

/* WHY blurb — animated expand below the toggle's sub-text. Closed default
   uses grid-template-rows trick (0fr → 1fr) for smooth height animation on
   modern engines (Chrome 117+, Safari 17.4+, Firefox 124+), backed by
   `max-height: 0` so older engines (and engines where `0fr` doesn't fully
   collapse the track) still render the row at 0 height.
   Outer `__why-text` is the animation container; inner `__why-text-inner`
   carries the visual styling (subtle inset card on a tinted background so
   it reads as a callout panel rather than extended subtext). */
.amk-toggle-row__why-text {
  display: grid;
  grid-template-rows: 0fr;
  max-height: 0;
  opacity: 0;
  transition: grid-template-rows 220ms ease, max-height 220ms ease, opacity 180ms ease, margin 220ms ease;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.amk-toggle-row__why-text > * {
  min-height: 0;
  overflow: hidden;
}
.amk-toggle-row__why-text-inner {
  font-size: 12px;
  color: var(--amk-ink-2);
  line-height: 1.4;
  background: var(--amk-surface-alt);
  border-radius: 8px;
  padding: 10px 12px;
}
.amk-toggle-row--why-open .amk-toggle-row__why-text {
  grid-template-rows: 1fr;
  max-height: 240px;
  opacity: 1;
  margin: 6px 0 8px;
  pointer-events: auto;
}

.amk-toggle-row__sub {
  font-size: 12px;
  color: var(--amk-ink-2);
  margin-top: 2px;
  line-height: 1.4;
}

.amk-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 28px;
  flex-shrink: 0;
}

.amk-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.amk-toggle__track {
  position: absolute;
  inset: 0;
  background: #D8D7D2;
  border-radius: var(--amk-r-pill);
  transition: background 0.18s;
}

.amk-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: var(--amk-r-pill);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.18s;
}

.amk-toggle__input:checked + .amk-toggle__track { background: var(--amk-green); }
.amk-toggle__input:checked + .amk-toggle__track::after { transform: translateX(18px); }
.amk-toggle__input:focus-visible + .amk-toggle__track {
  outline: 2px solid var(--amk-green);
  outline-offset: 2px;
}

/* Caution-level — horizontal 3-node track. Three radio dots connected by a
   line, label under each dot, active level's description below the track.
   Big tap targets (full node = column hit area). */
.amk-caution {
  padding: 20px 16px 14px;
}
.amk-caution__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  padding: 0 4px;
}
/* Connecting line at dot vertical-center; sits behind the dots. Two layers:
   ::before = baseline rail (full 66.67% width, neutral). ::after = green
   tint that grows from left to right as the active level moves up. Line
   spans dot-center-of-col-1 to dot-center-of-col-3 (16.67% to 83.33%). */
.amk-caution__track::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 16.67%;
  right: 16.67%;
  height: 4px;
  background: var(--amk-bg-deep);
  border-radius: 999px;
  z-index: 0;
}
.amk-caution-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.amk-caution-node__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.amk-caution-node__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--amk-hairline-strong);
  background: var(--amk-surface);
  transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.15s;
  position: relative;
  flex-shrink: 0;
}
.amk-caution-node__input:checked ~ .amk-caution-node__dot {
  background: var(--amk-green);
  border-color: var(--amk-green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--amk-green) 16%, transparent);
}
.amk-caution-node__input:focus-visible ~ .amk-caution-node__dot {
  outline: 2px solid var(--amk-green);
  outline-offset: 2px;
}
.amk-caution-node__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--amk-ink-2);
  text-align: center;
  transition: color 0.15s;
}
.amk-caution-node__input:checked ~ .amk-caution-node__label {
  color: var(--amk-ink);
}
.amk-caution__sub {
  margin: 14px 4px 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--amk-ink-2);
  text-align: center;
}

/* Credits screen */

.amk-credits__banner {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--amk-green-soft) 0%, var(--amk-bg-deep) 100%);
  border: 1px solid color-mix(in srgb, var(--amk-green) 24%, transparent);
  border-radius: var(--amk-r-card);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.amk-credits__banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--amk-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.amk-credits__banner-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--amk-green-deep);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.amk-credits__banner-body {
  font-size: 13px;
  color: var(--amk-ink-2);
  margin-top: 4px;
  line-height: 1.45;
}

.amk-credits__packs { padding: 0; }

.amk-credits__pack {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid var(--amk-hairline);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, box-shadow 0.12s;
}
.amk-credits__pack:first-child { border-top: 0; }
.amk-credits__pack:hover { background: color-mix(in srgb, var(--amk-green-soft) 35%, transparent); }
.amk-credits__pack--selected {
  background: var(--amk-green-soft);
  box-shadow: inset 3px 0 0 var(--amk-green);
}
.amk-credits__pack--selected:hover {
  background: color-mix(in srgb, var(--amk-green-soft) 80%, var(--amk-green) 8%);
}

.amk-credits__pack-radio {
  width: 18px;
  height: 18px;
  border-radius: var(--amk-r-pill);
  border: 1.5px solid var(--amk-hairline-strong);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.12s, background 0.12s;
}
.amk-credits__pack-radio--on {
  border-color: var(--amk-green);
  background: var(--amk-green);
}
.amk-credits__pack-radio--on::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: var(--amk-r-pill);
  background: #fff;
}


.amk-credits__pack-num {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.6px;
  flex-shrink: 0;
  width: 56px;
}

.amk-credits__pack-mid { flex: 1; min-width: 0; }
.amk-credits__pack-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--amk-ink-2);
}
.amk-credits__pack-per {
  font-size: 11.5px;
  color: var(--amk-ink-3);
  margin-top: 2px;
  font-weight: 500;
}

.amk-credits__pack-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
}
.amk-credits__pack-price {
  font-family: var(--amk-font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--amk-ink);
}
.amk-credits__pack-once {
  font-size: 10.5px;
  color: var(--amk-ink-3);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.amk-credits__badge {
  position: absolute;
  top: 8px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* All packs get the same price-column shift so prices line up across rows
   regardless of whether the row carries a badge. */
.amk-credits__pack-price-wrap {
  padding-top: 16px;
  align-self: flex-start;
}
.amk-credits__badge--save    { background: var(--amk-safe); color: #fff; box-shadow: 0 4px 10px -2px rgba(63,166,107,0.35); }

.amk-credits__premium {
  padding: 22px;
  border-radius: var(--amk-r-card);
  /* Friendly warm wash — cream → soft orange with a subtle hot-corner glow. */
  background:
    radial-gradient(ellipse 320px 220px at 95% 0%, color-mix(in srgb, var(--amk-green) 32%, transparent) 0%, color-mix(in srgb, var(--amk-green) 10%, transparent) 40%, transparent 80%),
    linear-gradient(135deg, var(--amk-green-soft) 0%, color-mix(in srgb, var(--amk-green) 30%, var(--amk-green-soft)) 100%);
  color: var(--amk-ink);
  border: 1px solid color-mix(in srgb, var(--amk-green) 22%, transparent);
  box-shadow:
    0 14px 28px -14px color-mix(in srgb, var(--amk-green) 35%, transparent),
    var(--amk-shadow-card);
  position: relative;
  overflow: hidden;
}

.amk-credits__premium-row { display: flex; align-items: center; gap: 8px; }
.amk-credits__premium-icon {
  color: var(--amk-green-deep);
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.amk-credits__premium-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--amk-green-deep);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.amk-credits__premium-active {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--amk-r-pill);
  border: 1px solid color-mix(in srgb, var(--amk-green) 28%, transparent);
  background: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 500;
  color: var(--amk-ink);
  letter-spacing: 0;
  text-transform: none;
}

.amk-credits__premium-active-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-green);
  box-shadow: 0 0 8px color-mix(in srgb, var(--amk-green) 70%, transparent);
  animation: amk-pulse-dot 2.4s ease-in-out infinite;
}

@keyframes amk-pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.amk-credits__premium-price {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.7px;
  font-variant-numeric: tabular-nums;
  margin-top: 12px;
}
.amk-credits__premium-per {
  font-size: 14px;
  font-weight: 500;
  color: var(--amk-ink-2);
  margin-left: 6px;
}

/* 2x3 grid for the 6 premium features — left column gets items 1-3,
   right column gets items 4-6. Column-major flow keeps the visual rhythm
   (top→bottom per column) instead of row-major zig-zag. */
.amk-credits__premium-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 8px 18px;
  font-size: 12.5px;
  color: var(--amk-ink-2);
  line-height: 1.35;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.amk-credits__premium-feats li {
  position: relative;
  padding-left: 16px;
}
.amk-credits__premium-feats li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--amk-green-deep);
  font-weight: 700;
}

.amk-credits__buy {
  margin-top: 14px;
}

.amk-credits__cancel {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--amk-hairline-strong);
  border-radius: var(--amk-r-pill);
  color: var(--amk-ink-3);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
}
.amk-credits__cancel:hover {
  border-color: color-mix(in srgb, var(--amk-harm) 40%, transparent);
  color: var(--amk-harm-ink);
  background: color-mix(in srgb, var(--amk-harm-soft) 50%, transparent);
}

/* Toasts */

.amk-toasts {
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: 90vw;
}

.amk-toast {
  pointer-events: auto;
  background: var(--amk-ink);
  color: #fff;
  border-radius: var(--amk-r-chip);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.4;
  max-width: min(90vw, 320px);
  width: auto;
  box-shadow: 0 12px 28px -8px rgba(31, 26, 18, 0.45);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.18s, transform 0.18s;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.amk-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.amk-toast__icon svg { width: 18px; height: 18px; }
.amk-toast__text { flex: 1; min-width: 0; }

.amk-toast--in {
  opacity: 1;
  transform: translateY(0);
}

/* Backgrounds use 0.9 alpha via color-mix so a subtle blur of what's behind
   bleeds through (works alongside backdrop-filter on supporting browsers). */
.amk-toast--warn  { background: color-mix(in srgb, var(--amk-caution) 90%, transparent); color: #fff; }
.amk-toast--error { background: color-mix(in srgb, var(--amk-harm)    90%, transparent); color: #fff; }
.amk-toast--info  { background: color-mix(in srgb, var(--amk-green)  90%, transparent); color: #fff; }

/* 401 screen — shown when ?token is missing or wrong */

.amk-401 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.amk-401__card {
  max-width: 360px;
  background: var(--amk-surface);
  border: 1px solid var(--amk-hairline);
  border-radius: var(--amk-r-card);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--amk-shadow-card);
}

.amk-401__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-harm-soft);
  color: var(--amk-harm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.amk-401__title {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
  margin: 0 0 8px;
}

.amk-401__dev {
  margin-top: 20px;
  text-align: left;
}

.amk-401__dev-toggle {
  font-size: 12px;
  color: var(--amk-ink-3, var(--amk-ink-2));
  text-align: center;
  margin-bottom: 10px;
}

.amk-401__dev-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.amk-401__dev-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--amk-font-mono, monospace);
  border: 1px solid var(--amk-hairline);
  border-radius: 8px;
  background: var(--amk-bg, transparent);
  color: var(--amk-ink-1);
}
.amk-401__dev-input:focus {
  outline: none;
  border-color: var(--amk-accent, var(--amk-ink-1));
}

button.amk-401__dev-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--amk-hairline);
  border-radius: 8px;
  background: var(--amk-surface);
  color: var(--amk-ink-1);
  cursor: pointer;
}
button.amk-401__dev-btn:hover {
  background: var(--amk-hover, var(--amk-surface));
}

/* Loading overlay during scan */

.amk-loading {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(31, 26, 18, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--amk-bg);
}

.amk-loading__pulse {
  width: 80px; height: 80px;
  border-radius: var(--amk-r-pill);
  background: var(--amk-green);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  animation: amk-pulse 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes amk-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--amk-green) 45%, transparent); transform: scale(1); }
  60%  { box-shadow: 0 0 0 32px color-mix(in srgb, var(--amk-green) 0%, transparent);  transform: scale(1.025); }
  100% { box-shadow: 0 0 0 32px color-mix(in srgb, var(--amk-green) 0%, transparent);  transform: scale(1); }
}

.amk-loading__title {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.3;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 100ms ease, transform 100ms ease;
  text-align: center;
  padding: 0 24px;
  /* Reserve three lines so the pulse above doesn't shift when a cycler
     sentence wraps from one line to two or three. Centered content keeps
     short phrases visually balanced inside the reserved block. */
  min-height: 3.9em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.amk-loading__title--out {
  opacity: 0;
  transform: translateY(-8px);
}
/* Retry-status line below the cycler. Only visible while postScan is on
   attempt 2+; toggled via `hidden` attribute from app.js so the reserved
   vertical space doesn't shift the pulse above. */
.amk-loading__retry {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: color-mix(in srgb, var(--amk-bg) 75%, transparent);
  text-align: center;
  padding: 0 24px;
  margin-top: -4px;
}
.amk-loading__retry[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────────
   Phone-frame mockup wrapper. Opt-in via ?demo on the URL —
   app.js adds `body.amk-demo`. Without the flag the app is
   full-bleed (mobile-style) at any viewport.
   ───────────────────────────────────────────────────────────── */

body.amk-demo {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 1100px 700px at 50% -10%, #EFE2C9 0%, transparent 65%),
    radial-gradient(ellipse 900px 900px at 50% 110%, #D9C9AC 0%, transparent 60%),
    var(--amk-bg-deep);
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  /* Always reserve scrollbar space so the centered phone doesn't shift left
     when the page becomes tall enough to need scrolling. */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body.amk-demo::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}

body.amk-demo .amk-app {
  width: 412px;
  max-width: 412px;
  height: 884px;
  min-height: 884px;
  margin: 0;
  border-radius: 54px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  /* Reserve space for the scrollbar so layout doesn't shift when content
     grows past the phone height. */
  scrollbar-gutter: stable;
  isolation: isolate;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(31, 26, 18, 0.06),
    0 0 0 11px #131008,
    0 0 0 12px rgba(255, 255, 255, 0.04),
    0 60px 80px -20px rgba(40, 28, 12, 0.45),
    0 28px 50px -28px rgba(20, 14, 6, 0.55);
}
body.amk-demo .amk-app::-webkit-scrollbar { display: none; }

body.amk-demo .amk-app::before {
  content: '';
  display: block;
  position: sticky;
  top: 14px;
  margin: 14px auto 0;
  width: 118px;
  height: 32px;
  background: #0A0805;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  z-index: 100;
  pointer-events: none;
}

body.amk-demo .amk-header { padding-top: 56px; }

/* Pad screen content so a short page still visually fills the phone. */
body.amk-demo .amk-upload,
body.amk-demo .amk-result {
  min-height: calc(884px - 56px - 80px);
}

body.amk-demo .amk-loading {
  position: absolute;
  inset: 0;
  border-radius: 54px;
}

/* ─────────────────────────────────────────────────────────────
   App-feel polish: screen slide-in, bottom tab bar, header
   avatar circle, floating-action-button scan CTA. Sticky tab
   bar works in both regular (document scroll) + demo (.amk-app
   scroll) modes because its sticky ancestor resolves to whichever
   element actually scrolls.
   ───────────────────────────────────────────────────────────── */

/* Screen slide-in. Each render wraps the screen body so changing
   screens animates rather than snapping. Pulse + loading overlay
   live outside the wrapper so their animations don't restart. */
@keyframes amk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.amk-screen { display: contents; }
.amk-screen--in > *:not(.amk-header) {
  animation: amk-fade-in 180ms ease-out both;
}

/* Bottom tab bar — floating frosted-glass pill. Icon-only at rest;
   active tab gets a soft cream-bg pill behind the icon + an inline
   label that springs in. Modern iOS / Material-3 hybrid. */
.amk-tabbar {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: 85%;
  max-width: 374px;
  display: flex;
  /* space-around with two flex children centers Home at 25% and Profile
     at 75% — exactly between the bar edge and the centered FAB. Bump is
     position:absolute so it stays at 50% regardless. */
  justify-content: space-around;
  align-items: center;
  gap: 6px;
  height: 60px;
  padding: 0 10px;
  background: color-mix(in srgb, #1F1A12 88%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 999px;
  box-shadow:
    0 18px 36px -14px rgba(20, 14, 6, 0.45),
    0 4px 10px -4px rgba(20, 14, 6, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Invisible flex spacer the width of the FAB — reserves a centre slot
   so space-around distributes Home + Profile at 1/6 and 5/6 of the bar
   width (centred in the strip left + right of the camera). */
.amk-tabbar__spacer {
  flex: 0 0 auto;
  width: 67px;
  height: 1px;
  pointer-events: none;
}

/* FAB anchor centered above the bar. Transparent container — only the
   camera button is visible. Positioned absolutely so flex layout of the
   side tabs never shifts the FAB. */
.amk-tabbar__bump {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.amk-tabbar__bump > * {
  pointer-events: auto;
}
.amk-tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: none;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, padding 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.amk-tab__label {
  white-space: nowrap;
  transition: opacity 200ms ease;
}
.amk-tab i, .amk-tab [data-lucide] { width: 20px; height: 20px; stroke-width: 2; flex-shrink: 0; }
.amk-tab:hover { color: rgba(255, 255, 255, 0.85); }
.amk-tab:active { transform: scale(0.96); }
.amk-tab--active {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  box-shadow: none;
}

/* Scan FAB inside the bump. Orange circle, subtle top-left highlight,
   drop shadow. Press scales down. Disabled state dims + blocks taps
   while a scan is in flight. */
.amk-tab--fab {
  position: relative;
  width: 67px;
  height: 67px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--amk-green);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Neutral halo — no offset, tight radial glow. */
  box-shadow:
    0 0 10px -2px rgba(0, 0, 0, 0.28),
    0 0 4px rgba(0, 0, 0, 0.14);
  transition: transform 180ms ease, box-shadow 220ms ease, opacity 200ms ease;
  /* Disable iOS long-press callout (the "Save image / Copy" menu) and text
     selection so the swipe gesture isn't interrupted by OS-level UI. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* `none` reserves ALL directions for our pointer handlers — swipe is
     omnidirectional, so any browser-claimed pan would pre-empt our drag.
     Was `pan-y` (kept native vertical scroll); page now no-scrolls when
     the finger is on the FAB itself. */
  touch-action: none;
}
/* Thumb — translucent inner disc that gives the icon visual mass during
   press and swipe. Invisible at rest so the FAB still reads as a clean
   green circle. The thumb wraps the iconwrap, so translating the thumb
   moves the icon with it (one moving part, one transform). */
.amk-tab--fab__thumb {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  /* Background alpha (not `opacity`) so the icon nested inside stays fully
     opaque at rest. The disc is invisible (alpha 0) until pressed, then
     fades to 18% white. */
  background: rgba(255, 255, 255, 0);
  /* Inset box-shadow draws a "border ring" without affecting box size.
     Starts at 0 width; armed state grows it to a crisp 2px white ring. */
  box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
  /* Live transform is set inline during pointermove. `transition` only
     applies when the inline value is cleared on release (snap-back).
     `.is-swiping` overrides to disable transform tweening for 1:1 finger
     tracking. */
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.25, 1.15),
              background-color 180ms ease,
              box-shadow 140ms ease;
  pointer-events: none;          /* the FAB itself handles all pointer events */
}
.amk-tab--fab.is-swiping .amk-tab--fab__thumb {
  background: rgba(255, 255, 255, 0.18);
  transition: background-color 180ms ease, box-shadow 140ms ease;
}
/* Armed = drag past commit threshold. Subtle 1.5px inset ring signals
   "release now toggles" — kept low-opacity so it doesn't read as alarm. */
.amk-tab--fab.is-armed .amk-tab--fab__thumb {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}

/* Icon wrap sits at the thumb's center — no positioning of its own beyond
   filling the thumb. Lucide replaces `<i data-lucide="..." class="X">`
   with `<svg class="X">` in-place, so width/height land on the svg directly. */
.amk-tab--fab__iconwrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  pointer-events: none;
}
.amk-tab--fab__main,
.amk-tab--fab__alt {
  position: absolute;
  top: 50%;
  left: 50%;
  stroke-width: 2.2;
  /* Fast crossfade — armed-state preview should feel like a click, not a
     fade. Paired with the threshold-cross haptic, the swap reads as instant. */
  transition: opacity 90ms ease;
}
/* Sizes are tuned per-icon so they FEEL visually balanced — Lucide's
   `images` (two stacked squares) fills its 24×24 viewbox more densely than
   `camera`, so it gets a slightly smaller box. */
.amk-tab--fab__main {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
}
.amk-tab--fab__alt {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}
.amk-tab--fab__alt { opacity: 0; }
.amk-tab--fab.is-gallery .amk-tab--fab__main { opacity: 0; }
.amk-tab--fab.is-gallery .amk-tab--fab__alt { opacity: 1; }
/* Armed = release will toggle. Preview the destination mode's icon during
   the armed window so the user sees what release commits to. The rules
   below invert visibility relative to current mode: in camera mode armed
   → show gallery icon; in gallery mode armed → show camera icon. */
.amk-tab--fab.is-armed .amk-tab--fab__main { opacity: 0; }
.amk-tab--fab.is-armed .amk-tab--fab__alt { opacity: 1; }
.amk-tab--fab.is-armed.is-gallery .amk-tab--fab__main { opacity: 1; }
.amk-tab--fab.is-armed.is-gallery .amk-tab--fab__alt { opacity: 0; }

/* Two-dot mode indicator pinned to FAB bottom inside the circle. Each dot
   is a tap target via `data-action="fab-set-mode"` — belt-and-suspenders
   with swipe for users who reach for dots instinctively. Outer span is a
   ~16px transparent hit area so fingers can land it; the visible 5px dot
   lives in a `::before` so visual weight stays minimal. */
.amk-tab--fab__dots {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  pointer-events: none;          /* container is decoration only */
}
.amk-tab--fab__dot {
  position: relative;
  width: 13px;
  height: 17px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.amk-tab--fab__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 180ms ease;
}
.amk-tab--fab__dot:nth-child(1)::before { background: rgba(255, 255, 255, 0.95); }
.amk-tab--fab.is-gallery .amk-tab--fab__dot:nth-child(1)::before { background: rgba(255, 255, 255, 0.35); }
.amk-tab--fab.is-gallery .amk-tab--fab__dot:nth-child(2)::before { background: rgba(255, 255, 255, 0.95); }

.amk-tab--fab:hover {
  box-shadow:
    0 0 14px -2px rgba(0, 0, 0, 0.34),
    0 0 6px rgba(0, 0, 0, 0.16);
}
/* `:active` on mobile Safari / Chrome unreliably persists across pointer
   moves — first horizontal drag resets the state and the FAB pops back to
   full scale mid-swipe. Drive the press-scale via a JS-added class so it
   lasts from pointerdown through pointerup regardless of finger motion. */
.amk-tab--fab.is-press { transform: scale(0.94); }

/* Mode-toggle confirmation pulse. A white ring expands outward beyond the
   FAB perimeter and fades — visible past the user's thumb / finger when
   long-pressing covers the center icons + dots. Driven by `.is-popped`
   class added at the toggle moment in JS, auto-removed after the keyframe
   duration. */
.amk-tab--fab::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: scale(1);
  /* Transition on the rest state so a class-removal interrupt (rapid
     re-toggle, or pointerdown landing on the FAB during a previous pop)
     tweens back to opacity 0 + scale 1 instead of snapping. The animation
     already fades to 0 at its end keyframe; this only matters when the
     animation is cut short. */
  transition: opacity 375ms ease-out, transform 375ms ease-out;
  pointer-events: none;
}
.amk-tab--fab.is-popped::after {
  animation: amk-fab-pop 375ms ease-out;
}
@keyframes amk-fab-pop {
  0%   { opacity: 0.9;  transform: scale(0.88); }
  35%  { opacity: 0.7;  transform: scale(1.12); }
  100% { opacity: 0;    transform: scale(1.32); }
}
/* Suppress the default focus ring on touch — most Androids draw a thick
   default outline on focused buttons that flashes during long-press. Keep
   a visible ring for keyboard navigation only via `:focus-visible`. */
.amk-tab--fab:focus { outline: none; }
.amk-tab--fab:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}
.amk-tab--disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* Floating-action button — pill-shaped, elevated, lives above the
   tab bar via bottom: tab-height + 16px. */
.amk-fab {
  position: sticky;
  bottom: 80px;
  align-self: center;
  margin: 16px auto 0;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--amk-r-pill);
  background: linear-gradient(135deg, var(--amk-green) 0%, color-mix(in srgb, var(--amk-green) 78%, #5C3A1A) 100%);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow:
    0 12px 28px -8px color-mix(in srgb, var(--amk-green) 55%, transparent),
    0 4px 10px -4px rgba(31, 26, 18, 0.35);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.amk-fab:hover { transform: translateY(-1px); }
.amk-fab:active { transform: translateY(0) scale(0.98); }
.amk-fab i, .amk-fab [data-lucide] { width: 18px; height: 18px; stroke-width: 2.2; }

/* In demo (phone frame), the floating pill stays floating — the
   phone-frame radii are handled by .amk-app itself. */

/* Legal screen — privacy + terms. Scoped to .amk-legal so it doesn't
   leak into the result/profile screens that share .amk-section-title.
   Container padding mirrors .amk-upload (24px top, 16px sides) so the
   header lines up the same way as the home screen. */
.amk-legal {
  padding: 24px 16px;
  max-width: 640px;
  margin: 0 auto;
}
.amk-legal__title {
  /* Sits below the privacy/terms tabs; needs breathing room so the title
     doesn't visually touch the tab pills. */
  margin-top: 24px;
  padding-bottom: 14px;
}
.amk-legal__tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 4px;
}
.amk-legal__tab {
  background: transparent;
  border: 1px solid var(--amk-hairline);
  color: var(--amk-ink-2);
  border-radius: 999px;
  padding: 6px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.amk-legal__tab:hover {
  color: var(--amk-green-deep);
  border-color: color-mix(in srgb, var(--amk-green) 35%, var(--amk-hairline));
}
.amk-legal__tab--on {
  background: var(--amk-green-soft);
  color: var(--amk-green-ink);
  border-color: color-mix(in srgb, var(--amk-green) 30%, transparent);
}
.amk-legal__item {
  /* 4px horizontal inset matches .amk-section-title (padding 0 4px 10px),
     so item titles + body align vertically with the page header h2. */
  padding: 0 4px;
  margin: 0 0 22px;
}
.amk-legal__item-title {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.3px;
  margin: 0 0 6px;
  color: var(--amk-ink-1);
}
.amk-legal__item-body {
  color: var(--amk-ink-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.amk-legal__item-body a {
  color: var(--amk-green-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.amk-legal__version {
  margin-top: 28px;
  text-align: center;
  font-family: var(--amk-font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--amk-ink-3);
  opacity: 0.75;
}

/* Subtle privacy/terms links inside the shared footer note. */
.amk-footer-note__link {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 1;
}
.amk-footer-note__link:hover {
  color: var(--amk-green-deep);
}
.amk-footer-note__sep {
  margin: 0 4px;
  opacity: 0.6;
}

/* Result screen horizontal swipe between adjacent scans in history.
   `pan-y` keeps native vertical scroll working; horizontal pans drive the
   JS gesture in app.js. The transition runs the snap-back + commit slide;
   `--drag` strips it while the finger is down so the card tracks 1:1. */
.amk-result-swipe-wrap {
  position: relative;
  /* Fill remaining viewport below the sticky header so the swipe element
     extends across the whole screen — short results would otherwise leave
     empty body below the card with no pointer target for the swipe gesture. */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.amk-result-swipe {
  touch-action: pan-y;
  will-change: transform, opacity;
  transition: transform 85ms cubic-bezier(.32, .72, 0, 1), opacity 85ms cubic-bezier(.32, .72, 0, 1);
  flex: 1;
}
.amk-result-swipe--drag {
  transition: none;
}
/* Peek indicators: slim frosted pill at each edge that fades in proportional
   to drag distance. Armed (>= commit threshold) tints toward the accent
   color with a soft glow. Edge state (no neighbor) sits muted — no harsh
   slash, the muted tone reads as "disabled" on its own. Bounce pulses on
   release at edge. */
.amk-result-peek {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--amk-card) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--amk-ink-2);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  border: 1px solid var(--amk-hairline);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.05);
  transition:
    opacity 90ms cubic-bezier(.32, .72, 0, 1),
    background 90ms ease,
    color 90ms ease,
    border-color 90ms ease,
    box-shadow 90ms ease;
}
.amk-result-peek--left {
  left: 0;
  border-left: 0;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}
.amk-result-peek--right {
  right: 0;
  border-right: 0;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.amk-result-peek svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke-width: 2.25;
}
.amk-result-peek--armed {
  background: var(--amk-green);
  color: #fff;
  border-color: transparent;
  box-shadow:
    0 12px 28px -10px color-mix(in srgb, var(--amk-green) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--amk-green) 60%, transparent);
}
.amk-result-peek--edge {
  background: color-mix(in srgb, var(--amk-card) 60%, transparent);
  color: var(--amk-ink-3);
  border-color: var(--amk-hairline);
  box-shadow: none;
}
@keyframes amk-result-peek-bounce {
  0%   { transform: translateY(-50%) scale(1); }
  35%  { transform: translateY(-50%) scale(0.88); }
  72%  { transform: translateY(-50%) scale(1.04); }
  100% { transform: translateY(-50%) scale(1); }
}
.amk-result-peek--bounce {
  animation: amk-result-peek-bounce 360ms cubic-bezier(.3, .8, .3, 1);
}

/* Settings screen — the first .amk-section-title sits right after the
   greet strip with no card preceding it, so drop the 28px top margin
   baked into .amk-section-title. Subsequent section titles keep their
   28px so the second card has breathing room from the first. */
.amk-settings > .amk-section-title:first-of-type { margin-top: 0; }

/* Labeled horizontal rule — small uppercase label flanked by hairlines.
   Used as a section signpost (e.g. "Your profile" between household roster
   and per-self preferences on the profile screen). */
.amk-rule-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 4px;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--amk-ink-3);
}
/* Section title immediately after the divider — shrink its 36px top margin
   since the divider already provides the gap. */
.amk-rule-label + .amk-section-title { margin-top: 22px; }
.amk-rule-label::before,
.amk-rule-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--amk-hairline);
}

/* Settings-screen nav row — button styled to look like an .amk-toggle-row.
   Strip button defaults so the row blends with the surrounding card. */
.amk-settings__nav-row {
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--amk-hairline);
  font: inherit;
  color: inherit;
  text-align: left;
}
.amk-card .amk-settings__nav-row:first-child { border-top: 0; }
.amk-settings__nav-chev {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  color: var(--amk-ink-3);
  flex-shrink: 0;
  transition: transform 160ms ease, color 160ms ease;
}
.amk-settings__nav-row:hover .amk-settings__nav-chev {
  transform: translateX(2px);
  color: var(--amk-green-deep);
}

/* Destructive "Delete account" button at the bottom of the settings screen.
   Ghost outline in the harm palette — explicit but not loud. Hover fills
   slightly so the destructive intent is unmistakable on tap. */
.amk-settings__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 28px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--amk-harm) 40%, transparent);
  border-radius: var(--amk-r-pill);
  color: var(--amk-harm-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.amk-settings__delete:hover {
  background: color-mix(in srgb, var(--amk-harm-soft) 60%, transparent);
  border-color: color-mix(in srgb, var(--amk-harm) 60%, transparent);
}
.amk-settings__delete i,
.amk-settings__delete [data-lucide],
.amk-settings__delete svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

/* Danger-variant of the versionmodal — red accent + cancel/confirm pair. */
.amk-versionmodal__icon--danger {
  background: color-mix(in srgb, var(--amk-harm) 16%, var(--amk-surface));
  color: var(--amk-harm-ink);
}
.amk-versionmodal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.amk-versionmodal__btn--ghost {
  background: transparent;
  color: var(--amk-ink-2);
  border: 1px solid var(--amk-hairline-strong);
  box-shadow: none;
  min-width: 120px;
}
.amk-versionmodal__btn--ghost:hover {
  background: var(--amk-surface-alt);
  color: var(--amk-ink);
  box-shadow: none;
  transform: none;
}
.amk-versionmodal__btn--danger {
  background: var(--amk-harm);
  color: #fff;
  min-width: 120px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--amk-harm) 36%, transparent);
}
.amk-versionmodal__btn--danger:hover {
  background: color-mix(in srgb, var(--amk-harm) 92%, #000);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--amk-harm) 40%, transparent);
}

/* Theme chips on the settings screen — three .amk-themepicker__item buttons
   side-by-side instead of the header dropdown. Tight gap so all three fit
   on the right side of the toggle row. */
.amk-settings__themes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.amk-settings__themes .amk-themepicker__item {
  padding: 4px;
  gap: 0;
  border-radius: 999px;
}
.amk-settings__themes .amk-themepicker__item .amk-themepicker__swatch {
  width: 22px;
  height: 22px;
}
.amk-settings__themes .amk-themepicker__item--on {
  box-shadow: 0 0 0 2px var(--amk-surface), 0 0 0 4px var(--amk-green);
  background: transparent;
}