:root {
  --breakpoint-2xl: 1536px;
  --breakpoint-lg: 1024px;
  --breakpoint-md: 768px;
  --breakpoint-sm: 640px;
  --breakpoint-xl: 1280px;
  --color-accent: #6f8a64;
  --color-background: #FAFAF9;
  --color-border-strong: #A1A1AA;
  --color-border: #E4E4E7;
  --color-code-border: #27272A;
  --color-code-surface: #18181B;
  --color-code-text: #E4E4E7;
  --color-danger: #DC2626;
  --color-info: #2563EB;
  --color-primary-fg: #FFFFFF;
  --color-primary: #8a4a2f;
  --color-secondary-fg: #FFFFFF;
  --color-secondary: #1c1814;
  --color-success: #15803D;
  --color-surface-soft: #F4F4F5;
  --color-surface: #FFFFFF;
  --color-text-muted: #52525B;
  --color-text-subtle: #71717A;
  --color-text: #18181B;
  --color-warning: #A16207;
  --duration-dropdown-enter: 120ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-overlay-enter: 200ms;
  --duration-overlay-exit: 160ms;
  --duration-slow: 400ms;
  --duration-toast-enter: 220ms;
  --duration-toast-exit: 180ms;
  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --radii-full: 9999px;
  --radii-lg: 12px;
  --radii-md: 8px;
  --radii-none: 0px;
  --radii-sm: 4px;
  --radii-xl: 16px;
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-lg: 16px;
  --spacing-md: 8px;
  --spacing-sm: 4px;
  --spacing-touch-target: 44px;
  --spacing-xl: 24px;
  --spacing-xs: 2px;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-sm: 0.875rem;
  --text-xl: 1.25rem;
  --text-xs: 0.75rem;
  --z-dropdown: 100;
  --z-modal: 300;
  --z-popover: 400;
  --z-sticky: 200;
  --z-toast: 500;
}

.fui-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Skip-link: visually hidden until focused, then revealed as a
   visible overlay so keyboard users can jump to #main-content.
   Apps can override via their own .skip-link / .skip-link:focus
   rules. */
.skip-link {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed !important;
  top: 8px; left: 8px;
  width: auto; height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 9999;
  background: #18181B;
  color: #FAFAFA;
  border-radius: 4px;
  font: 0.9rem system-ui, -apple-system, sans-serif;
  text-decoration: none;
}
/* SPA-nav failure toast — shown when loadPage can't fetch the new
   page (offline, server error). Positioned bottom-right; auto-hides
   after 4s via the runtime. Strict-CSP-clean (no inline styles). */
.fui-nav-toast {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 9999;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  background: #18181B;
  color: #FAFAFA;
  border-radius: 8px;
  font: 0.9rem system-ui, -apple-system, sans-serif;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
}
.fui-nav-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Progress indicator on slow SPA navigation. Apps can override the
   color via .fui-nav-busy { background: ... } */
html[aria-busy="true"] {
  cursor: progress;
}
html[aria-busy="true"]::after {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
  animation: fui-nav-progress 1s linear infinite;
  z-index: 9999;
  pointer-events: none;
  color: #4F46E5;
}
@keyframes fui-nav-progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-500.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-600.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-var.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/static/fonts/newsreader-var.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/static/fonts/newsreader-italic-400.woff2) format('woff2'); }
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
  background: radial-gradient(1200px 600px at 10% 0%, #f1e9d4 0%, transparent 60%), radial-gradient(900px 700px at 90% 100%, #e8dec5 0%, transparent 55%), #efe8d8;
}
.serif, h1, h2, h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
input, select, textarea, button {
  font-size: 16px;
}
main {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.screen-content {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 32px 96px;
}
@media (min-width: 720px) {
.screen-content {
  padding: var(--spacing-md) var(--spacing-2xl) var(--spacing-3xl);
}
}
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(251,247,238,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e3dac6;
  position: sticky;
  top: 0;
  z-index: 20;
}
.top-bar .brand {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  min-height: 44px;
}
.top-bar .brand:hover {
  text-decoration: none;
}
.top-bar .brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fbf7ee;
  font-style: italic;
  font-weight: 600;
  font-family: 'Newsreader', Georgia, serif;
}
.top-bar .brand-text {
  font-style: italic;
}
@media (max-width: 460px) {
.top-bar .brand-text {
  display: none;
}
}
.top-bar .row, .top-bar .gap-sm {
  display: flex;
  gap: 6px;
  align-items: center;
}
.top-bar .user-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: #efe8d8;
  border: 1px solid #e3dac6;
  font-size: 0.7rem;
  color: #4a423a;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 460px) {
.top-bar .user-pill {
  max-width: 120px;
  font-size: 0.65rem;
}
}
.top-bar .inline-form {
  display: inline;
}
.ghost-btn, .primary-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #e3dac6;
  background: transparent;
  color: var(--color-text);
}
.ghost-btn:hover {
  background: #efe8d8;
  text-decoration: none;
}
.primary-btn {
  background: var(--color-text);
  color: #fbf7ee;
  border-color: var(--color-text);
}
.primary-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: rgba(251,247,238,0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid #e3dac6;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
}
.bottom-nav .nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
  min-height: 52px;
  color: #7a6f63;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav .nav-tab .nav-icon {
  font-size: 1.4rem;
  line-height: 1;
  font-family: 'Newsreader', Georgia, serif;
}
.bottom-nav .nav-tab.active {
  color: var(--color-primary);
  font-weight: 600;
}
.bottom-nav .nav-tab.active .nav-icon {
  transform: scale(1.08);
}
.bottom-nav .nav-tab:hover {
  text-decoration: none;
}
@media (min-width: 720px) {
.bottom-nav {
  display: none;
}
main {
  padding-bottom: var(--spacing-3xl);
}
}
.auth-page {
  width: 100%;
  margin: 0 auto;
  padding: 8px 0 var(--spacing-lg);
  display: grid;
  gap: var(--spacing-lg);
  text-align: center;
}
.auth-hero {
  display: grid;
  gap: 8px;
}
.auth-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a6f63;
}
.auth-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--color-text);
  margin: 0;
}
.auth-title em {
  color: var(--color-primary);
  font-style: italic;
}
.auth-lede {
  color: #4a423a;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 32ch;
  margin: 0 auto;
}
.auth-error {
  background: #f6e1d8;
  border: 1px solid #e2b9a3;
  color: #8a3018;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  text-align: left;
}
.auth-error .mono {
  color: #8a3018;
  font-weight: 700;
}
.auth-card {
  max-width: 100%;
  margin: 0;
  padding: 20px 20px 16px;
  text-align: left;
}
.auth-card form {
  display: grid;
  gap: 10px;
}
.auth-card label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a6f63;
  margin-top: 4px;
}
.auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=text] {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e3dac6;
  background: #fff;
  font: inherit;
  min-height: 44px;
  font-size: 16px;
  color: var(--color-text);
  transition: border-color .15s, box-shadow .15s;
}
.auth-card input[type=email]:focus, .auth-card input[type=password]:focus, .auth-card input[type=text]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(138, 74, 47, 0.12);
}
.auth-card form:not(.dev-login-form) button[type=submit] {
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fbf7ee;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  margin-top: 10px;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  justify-self: stretch;
  transition: background .15s;
}
.auth-card form:not(.dev-login-form) button[type=submit]:hover {
  background: #6d3a23;
}
.auth-alt {
  margin-top: 14px;
  text-align: center;
  color: #7a6f63;
  font-size: 0.85rem;
}
.auth-alt a {
  color: var(--color-primary);
  font-weight: 600;
}
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #a89c87;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 20px 0 12px;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid #e3dac6;
}
.auth-divider span {
  padding: 0 12px;
}
.dev-login-form {
  margin: 0;
}
.dev-login-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: #fbf7ee;
  color: #4a423a;
  border: 1px solid #e3dac6;
  border-left: 3px solid var(--color-primary);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  transition: background .15s, border-color .15s;
}
.dev-login-btn:hover {
  background: #f5efe0;
  border-color: #d3c7ad;
  text-decoration: none;
}
.dev-login-btn:hover {
  border-left-color: var(--color-primary);
}
.dev-login-emoji {
  font-size: 1.1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #efe8d8;
  grid-row: 1 / span 2;
}
.dev-login-btn > span:nth-child(2) {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  font-style: italic;
}
.dev-login-hint {
  font-size: 0.62rem;
  color: #7a6f63;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.page-chrome {
  display: block;
}
.screen-content {
  width: 100%;
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-xl);
  background: rgba(251,247,238,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e3dac6;
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .brand {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-text);
  min-height: 44px;
}
.site-header .brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fbf7ee;
  font-style: italic;
  font-weight: 600;
}
.site-header nav {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}
.site-header nav a {
  color: #4a423a;
  font-size: 0.9rem;
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-header nav a[aria-current='page'] {
  color: var(--color-primary);
}
.site-footer {
  padding: var(--spacing-xl);
  text-align: center;
  color: #7a6f63;
  font-size: 0.85rem;
  border-top: 1px solid #e3dac6;
  margin-top: var(--spacing-3xl);
}
.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6f63;
  margin-bottom: var(--spacing-sm);
  display: block;
}
h1.hero-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.05;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}
h1.hero-title em {
  color: var(--color-primary);
  font-style: italic;
}
.lede {
  color: #4a423a;
  font-size: 1.05rem;
  max-width: 52ch;
  margin-bottom: var(--spacing-lg);
}
.search-card {
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  border-radius: 16px;
  padding: var(--spacing-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -16px rgba(60,40,20,0.18);
  margin-bottom: var(--spacing-xl);
}
.search-card form {
  display: grid;
  gap: var(--spacing-sm);
}
.search-card input[type=text], .search-card select {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #d3c7ad;
  background: #fff;
  font: inherit;
  min-height: 44px;
}
.search-card button {
  padding: 12px 18px;
  border-radius: 999px;
  background: #1c1814;
  color: #fbf7ee;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  justify-self: start;
}
.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}
.food-card {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  border-radius: 16px;
  color: var(--color-text);
  min-height: 180px;
}
.food-card:hover {
  border-color: #d3c7ad;
  text-decoration: none;
  transform: translateY(-1px);
  transition: all .15s;
}
.food-card .emoji {
  font-size: 2.4rem;
  line-height: 1;
}
.food-card .name {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
}
.food-card .category {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  color: #7a6f63;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.food-card .verdict-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.verdict::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}
.verdict-safe {
  color: #3d6b3f;
  background: #e6efde;
}
.verdict-caution {
  color: #8a5a14;
  background: #f5ead0;
}
.verdict-avoid {
  color: #8a3018;
  background: #f1d8cf;
}
.verdict-unclear {
  color: #5a554a;
  background: #e7e0cf;
}
.result-head {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
}
.result-head .emoji {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #efe8d8;
  font-size: 2.2rem;
  flex-shrink: 0;
}
.result-head h1 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 4px;
}
.verdict-block {
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  border-radius: 16px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}
.verdict-block .label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  color: #7a6f63;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--spacing-sm);
}
.verdict-block .oneliner {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.35;
  margin: var(--spacing-sm) 0;
}
.verdict-block .why {
  color: #4a423a;
  margin: var(--spacing-sm) 0;
  line-height: 1.55;
}
.verdict-block ul {
  list-style: none;
  padding: 0;
  margin: var(--spacing-sm) 0;
  display: grid;
  gap: 6px;
}
.verdict-block li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #4a423a;
  font-size: 0.95rem;
}
.verdict-block li::before {
  content: '';
  margin-top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.6;
}
.sources {
  margin-top: var(--spacing-lg);
}
.sources h2 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7a6f63;
  margin-bottom: var(--spacing-sm);
}
.sources ol {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--spacing-sm);
}
.sources li {
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  border-radius: 12px;
  padding: var(--spacing-sm) var(--spacing-md);
}
.sources .src-title {
  font-weight: 500;
  color: var(--color-text);
}
.sources .src-host {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: #7a6f63;
}
.disclaimer {
  background: #efe8d8;
  border: 1px dashed #d3c7ad;
  border-radius: 12px;
  padding: var(--spacing-md);
  color: #4a423a;
  font-size: 0.9rem;
  margin-top: var(--spacing-lg);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4a423a;
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
  min-height: 44px;
}
.panel {
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  border-radius: 16px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.panel form {
  display: grid;
  gap: var(--spacing-sm);
}
.panel form label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7a6f63;
}
.panel input, .panel select, .panel textarea {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d3c7ad;
  background: #fff;
  font: inherit;
  min-height: 44px;
}
.panel button[type=submit] {
  padding: 10px 16px;
  border-radius: 999px;
  background: #1c1814;
  color: #fbf7ee;
  border: 0;
  font-weight: 600;
  min-height: 44px;
  justify-self: start;
  cursor: pointer;
}
.log-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid #e3dac6;
  align-items: center;
}
.log-row .date {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  color: #4a423a;
}
.log-row .notes {
  color: #4a423a;
  font-size: 0.95rem;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}
@media (max-width: 540px) {
.stat-row {
  grid-template-columns: 1fr 1fr;
}
}
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: var(--spacing-lg) 0;
}
.week-strip.empty {
  display: block;
  padding: var(--spacing-md);
  background: #efe8d8;
  border: 1px dashed #d3c7ad;
  border-radius: 12px;
  text-align: center;
  color: #7a6f63;
}
.day-card {
  padding: 10px 6px;
  border-radius: 10px;
  text-align: center;
  background: #efe8d8;
  border: 1px solid #e3dac6;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.day-card .day-date {
  font-size: 0.65rem;
  color: #4a423a;
  letter-spacing: 0.04em;
}
.day-card .day-bm {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.1rem;
  color: var(--color-text);
}
.day-card.sev-empty {
  background: #efe8d8;
  color: #7a6f63;
  opacity: 0.4;
}
.day-card.sev-0 {
  background: #dbe8d4;
  border-color: #c4d6b9;
}
.day-card.sev-1 {
  background: #e9efce;
  border-color: #d5dfa9;
}
.day-card.sev-2 {
  background: #f5ead0;
  border-color: #e3d5a5;
}
.day-card.sev-3 {
  background: #f1d8cf;
  border-color: #e0b7a4;
}
.day-card.sev-4 {
  background: #e8b9a8;
  border-color: #cf8a72;
}
.metric-form {
  display: grid;
  gap: var(--spacing-lg);
}
.metric-list {
  display: grid;
  gap: var(--spacing-md);
}
.metric {
  display: grid;
  gap: 6px;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid #efe8d8;
}
.metric-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text);
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
}
.metric-cat {
  font-size: 0.65rem;
  color: #7a6f63;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.metric-bounds, .metric-unit {
  font-size: 0.7rem;
  color: #7a6f63;
}
.metric input[type=range] {
  width: 100%;
  accent-color: var(--color-primary);
}
.metric input[type=number] {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #d3c7ad;
  background: #fff;
  max-width: 120px;
}
.metric-toggle .metric-label {
  padding-right: 6px;
}
.metric-toggle input[type=checkbox] {
  width: 44px;
  height: 26px;
  appearance: none;
  background: #d3c7ad;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .15s;
}
.metric-toggle input[type=checkbox]::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 999px;
  transition: left .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.metric-toggle input[type=checkbox]:checked {
  background: var(--color-primary);
}
.metric-toggle input[type=checkbox]:checked::before {
  left: 21px;
}
.segmented {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: #efe8d8;
  border-radius: 10px;
}
.segmented-option, .bristol-option {
  flex: 1;
  position: relative;
  cursor: pointer;
}
.segmented-option input, .bristol-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
}
.segmented-option span, .bristol-option span {
  display: block;
  padding: 8px 6px;
  border-radius: 8px;
  text-align: center;
  font-size: 0.85rem;
  background: transparent;
  color: #4a423a;
  font-weight: 500;
}
.segmented-option input:checked + span, .bristol-option input:checked + span {
  background: #fbf7ee;
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.bristol-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: #7a6f63;
  margin-top: 2px;
}
.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip-option {
  position: relative;
  cursor: pointer;
}
.chip-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
}
.chip-option span {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: #efe8d8;
  border: 1px solid #e3dac6;
  font-size: 0.78rem;
  color: #4a423a;
}
.chip-option input:checked + span {
  background: #f1d8cf;
  border-color: #cf8a72;
  color: #8a3018;
  font-weight: 600;
}
.metric-config-cat {
  margin: var(--spacing-md) 0;
}
.metric-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #efe8d8;
  border: 1px solid #e3dac6;
  font-size: 0.75rem;
  color: #7a6f63;
  margin: 2px;
}
.metric-pill.on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fbf7ee;
  font-weight: 600;
}
.eyebrow-row {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6f63;
}
.layout-switch {
  display: inline-flex;
  gap: 8px;
  margin-top: var(--spacing-sm);
}
.layout-opt {
  padding: 4px 10px;
  border-radius: 999px;
  background: #efe8d8;
  border: 1px solid #e3dac6;
  font-size: 0.7rem;
  color: #4a423a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.layout-opt.active {
  background: var(--color-text);
  color: #fbf7ee;
  border-color: var(--color-text);
}
.layout-opt:hover {
  text-decoration: none;
}
.tab-bar {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: #efe8d8;
  border-radius: 10px;
  margin: var(--spacing-md) 0 var(--spacing-sm);
}
.tab-bar .tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
  font-size: 0.8rem;
  color: #7a6f63;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tab-bar .tab.active {
  background: #fbf7ee;
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.log-form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}
.history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.history-head h2 {
  margin: 0;
  font-size: 1.25rem;
}
.range-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #efe8d8;
  border-radius: 999px;
}
.range-tab {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #7a6f63;
  background: transparent;
}
.range-tab:hover {
  text-decoration: none;
  color: var(--color-text);
}
.range-tab.active {
  background: #fbf7ee;
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: var(--spacing-md);
}
.stat-tile {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  display: grid;
  gap: 2px;
}
.stat-row-baseline {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.stat-big {
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 500;
}
.stat-tile.tone-safe .stat-big {
  color: #3d6b3f;
}
.stat-tile.tone-caution .stat-big {
  color: #8a5a14;
}
.stat-tile.tone-avoid .stat-big {
  color: #8a3018;
}
.stat-tile.tone-ink .stat-big {
  color: var(--color-text);
}
.stat-unit {
  font-size: 0.6rem;
  color: #7a6f63;
}
.stat-label {
  font-size: 0.66rem;
  color: #7a6f63;
}
.viz-panel {
  padding: 14px 12px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  border-radius: 14px;
  display: grid;
  gap: 8px;
  margin-bottom: var(--spacing-md);
}
.week-strip-cal {
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
}
.week-day.selected {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.week-wd {
  font-size: 0.62rem;
  color: #7a6f63;
}
.week-cell {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
}
.week-num {
  font-size: 0.7rem;
  font-weight: 600;
}
.week-bm {
  font-size: 0.6rem;
  opacity: 0.85;
}
.week-today {
  font-size: 0.55rem;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.week-day.sev-0 .week-cell {
  background: #dbe8d4;
  color: #3d6b3f;
}
.week-day.sev-1 .week-cell {
  background: #e9efce;
  color: #3d6b3f;
}
.week-day.sev-2 .week-cell {
  background: #f5ead0;
  color: #8a5a14;
}
.week-day.sev-3 .week-cell {
  background: #f1d8cf;
  color: #8a3018;
}
.week-day.sev-4 .week-cell {
  background: #e8b9a8;
  color: #8a3018;
  border: 1.5px solid #cf8a72;
}
.week-day.sev-empty .week-cell {
  background: transparent;
  border: 1px dashed #d3c7ad;
  color: #7a6f63;
}
.cal-hdr {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-wd {
  text-align: center;
  font-size: 0.6rem;
  color: #7a6f63;
  letter-spacing: 0.06em;
}
.cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-cell {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 3px;
  position: relative;
  text-decoration: none;
  color: var(--color-text);
}
.cal-cell.sev-0 {
  background: #dbe8d4;
  color: #3d6b3f;
}
.cal-cell.sev-1 {
  background: #e9efce;
  color: #3d6b3f;
}
.cal-cell.sev-2 {
  background: #f5ead0;
  color: #8a5a14;
}
.cal-cell.sev-3 {
  background: #f1d8cf;
  color: #8a3018;
}
.cal-cell.sev-4 {
  background: #e8b9a8;
  color: #8a3018;
  border: 1.5px solid #cf8a72;
}
.cal-cell.sev-empty {
  background: transparent;
  border: 1px dashed #d3c7ad;
  color: #a89c87;
}
.cal-cell.selected {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.cal-cell.today::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary);
}
.cal-num {
  font-size: 0.7rem;
  font-weight: 600;
}
.cal-pad {
  aspect-ratio: 1 / 1;
}
.cal-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid #e3dac6;
  margin-top: 4px;
  font-size: 0.6rem;
  color: #7a6f63;
}
.dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
}
.dot-blood {
  background: #8a3018;
}
.dot-note {
  background: #7a6f63;
}
.pos-tr {
  position: absolute;
  top: 3px;
  right: 3px;
}
.pos-br {
  position: absolute;
  bottom: 3px;
  right: 3px;
}
.qg-header {
  display: grid;
  grid-template-columns: 16px repeat(12, 1fr);
  gap: 3px;
  align-items: end;
}
.qg-mlabel {
  font-size: 0.55rem;
  color: #7a6f63;
  letter-spacing: 0.04em;
}
.qg-spacer {
  display: block;
}
.qg-body {
  display: grid;
  gap: 3px;
}
.qg-row {
  display: grid;
  grid-template-columns: 16px repeat(12, 1fr);
  gap: 3px;
  align-items: center;
}
.qg-wd {
  font-size: 0.55rem;
  color: #7a6f63;
}
.qg-cell {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  display: block;
  text-decoration: none;
}
.qg-cell.sev-0 {
  background: #dbe8d4;
}
.qg-cell.sev-1 {
  background: #e9efce;
}
.qg-cell.sev-2 {
  background: #f5ead0;
}
.qg-cell.sev-3 {
  background: #f1d8cf;
}
.qg-cell.sev-4 {
  background: #e8b9a8;
  border: 1px solid #cf8a72;
}
.qg-cell.sev-empty {
  background: transparent;
  border: 1px dashed #d3c7ad;
}
.qg-cell.selected {
  outline: 1.5px solid var(--color-primary);
  outline-offset: 1px;
}
.qg-pad {
  aspect-ratio: 1 / 1;
}
.severity-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0;
  font-size: 0.65rem;
  color: #7a6f63;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.legend-swatch.sev-0 {
  background: #dbe8d4;
}
.legend-swatch.sev-1 {
  background: #e9efce;
}
.legend-swatch.sev-2 {
  background: #f5ead0;
}
.legend-swatch.sev-3 {
  background: #f1d8cf;
}
.legend-swatch.sev-4 {
  background: #e8b9a8;
  border: 1px solid #cf8a72;
}
.legend-swatch.sev-empty {
  background: transparent;
  border: 1px dashed #d3c7ad;
}
.day-detail {
  border-radius: 14px;
  overflow: hidden;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  margin: var(--spacing-md) 0;
}
.day-detail-band {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.day-detail.sev-0 .day-detail-band {
  background: #dbe8d4;
}
.day-detail.sev-1 .day-detail-band {
  background: #e9efce;
}
.day-detail.sev-2 .day-detail-band {
  background: #f5ead0;
}
.day-detail.sev-3 .day-detail-band {
  background: #f1d8cf;
}
.day-detail.sev-4 .day-detail-band {
  background: #e8b9a8;
}
.day-detail.missed {
  border-style: dashed;
  border-color: #d3c7ad;
}
.day-detail.missed .day-detail-band {
  background: transparent;
}
.day-detail-eyebrow {
  font-size: 0.65rem;
  color: #7a6f63;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.day-detail-title {
  font-size: 1.2rem;
  color: var(--color-text);
  font-weight: 500;
}
.day-detail-date {
  font-size: 1rem;
  color: #7a6f63;
  font-style: italic;
}
.day-detail-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  color: #4a423a;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.day-detail-body {
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
}
.day-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.day-metric {
  display: grid;
  gap: 2px;
  padding: 6px 0;
}
.day-metric-label {
  font-size: 0.58rem;
  color: #7a6f63;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.day-metric-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}
.day-metric.flagged .day-metric-value {
  color: #8a3018;
}
.day-flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid #e3dac6;
  align-items: center;
}
.day-flag-label {
  font-size: 0.6rem;
  color: #7a6f63;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 2px;
}
.day-flag-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1d8cf;
  color: #8a3018;
  font-size: 0.62rem;
  font-weight: 600;
}
.day-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  background: #efe8d8;
  border-radius: 8px;
}
.day-note-quote {
  color: #7a6f63;
  margin-top: 1px;
  font-size: 0.85rem;
}
.day-note-text {
  font-size: 0.82rem;
  color: #4a423a;
  font-style: italic;
  flex: 1;
}
.trends {
  display: grid;
  gap: 8px;
}
.trends-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.trends-sub {
  color: #7a6f63;
}
.trend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.trend-card {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  display: grid;
  gap: 6px;
}
.trend-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.trend-card-avg {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.trend-card-avg .serif {
  font-size: 1.25rem;
  font-weight: 500;
}
.trend-card-avg .mono {
  font-size: 0.6rem;
  color: #7a6f63;
}
.trend-arrow {
  font-weight: 600;
  font-size: 0.7rem;
}
.trend-arrow.tone-danger {
  color: #8a3018;
}
.trend-arrow.tone-success {
  color: #3d6b3f;
}
.trend-spark {
  width: 100%;
  height: 28px;
}
.compact-bar {
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  border-radius: 16px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}
.compact-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid #e3dac6;
  align-items: flex-start;
}
.compact-row:last-child {
  border-bottom: 0;
}
.compact-row .label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.7rem;
  color: #7a6f63;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.compact-row .one {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--color-text);
}
.p-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 8px;
  background: rgba(251,247,238,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e3dac6;
  position: sticky;
  top: 0;
  z-index: 20;
}
.p-bar-side {
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-bar-right {
  justify-content: flex-end;
}
.p-bar-center {
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 0;
}
.p-bar-title {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-text);
  font-family: 'Newsreader', Georgia, serif;
}
.p-bar-sub {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a6f63;
}
.p-bar-home {
  grid-template-columns: auto 1fr auto;
}
.p-bar-admin {
  grid-template-columns: auto 1fr;
  background: #1a1814;
  color: #fbf7ee;
}
.p-bar-admin .admin-brand {
  color: #fbf7ee;
  font-size: 1.1rem;
  padding: 0 4px;
  text-decoration: none;
}
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.admin-tab {
  color: #d3c7ad;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.admin-tab.active, .admin-tab:hover {
  color: #fbf7ee;
  background: rgba(255,255,255,0.08);
}
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: var(--spacing-md) 0;
}
.admin-stat {
  padding: 16px 14px;
  border-radius: 12px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
}
.admin-stat-num {
  font-size: 1.8rem;
  color: var(--color-text);
  line-height: 1;
}
.admin-stat-label {
  font-size: 0.62rem;
  color: #7a6f63;
  letter-spacing: 0.08em;
  margin-top: 4px;
  text-transform: uppercase;
}
.admin-note {
  color: #7a6f63;
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 10px 12px;
  background: #fbf7ee;
  border: 1px dashed #d3c7ad;
  border-radius: 8px;
  margin: var(--spacing-md) 0 0;
}
.admin-empty {
  color: #7a6f63;
  padding: 24px;
  text-align: center;
  background: #fbf7ee;
  border-radius: 12px;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: var(--spacing-md) 0 0;
}
.admin-table th {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid #d3c7ad;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a6f63;
}
.admin-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #efe8d8;
  vertical-align: middle;
}
.admin-table .num, .admin-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-email {
  font-weight: 500;
}
.admin-row-disabled {
  opacity: 0.55;
  background: #f5ebd9;
}
.admin-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-action {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  border: 1px solid transparent;
  cursor: pointer;
}
.admin-action.ghost {
  background: transparent;
  color: var(--color-text);
  border-color: #d3c7ad;
}
.admin-action.ghost:hover {
  background: #efe8d8;
}
.admin-action.danger {
  background: #8a3018;
  color: #fbf7ee;
}
.admin-action.danger:hover {
  background: #a8472e;
}
.admin-search {
  display: flex;
  gap: 6px;
  margin: var(--spacing-md) 0 0;
}
.admin-search input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #d3c7ad;
  background: #fbf7ee;
}
.admin-search button {
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--color-text);
  color: #fbf7ee;
  border: 0;
  cursor: pointer;
}
.p-bar-right-multi {
  gap: 8px;
}
.p-bar-icon-link {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #4a423a;
  text-decoration: none;
}
.p-bar-icon-link:hover {
  background: #efe8d8;
  text-decoration: none;
}
.p-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-text);
}
.p-brand-pill:hover {
  text-decoration: none;
}
.p-brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fbf7ee;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
}
.p-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.p-brand-text .serif {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1;
}
.p-brand-text .mono {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6f63;
  line-height: 1.4;
}
.p-cond-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  font-size: 0.78rem;
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
}
.p-cond-pill .cond-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-primary);
  display: inline-block;
}
.p-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: rgba(251,247,238,0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid #e3dac6;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
}
.p-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  color: #7a6f63;
  text-decoration: none;
  position: relative;
}
.p-tab-icon {
  display: inline-flex;
  line-height: 1;
}
.p-tab-label {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.p-tab.active {
  color: var(--color-text);
}
.p-tab.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary);
}
@media (min-width: 720px) {
.p-bottom-nav {
  max-width: 640px;
  margin: 0 auto;
  border-left: 1px solid #e3dac6;
  border-right: 1px solid #e3dac6;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
}
.v-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.v-dot.v-safe {
  background: #6f8a64;
}
.v-dot.v-caution {
  background: #c08a3a;
}
.v-dot.v-avoid {
  background: #a8472e;
}
.v-dot.v-unclear {
  background: #8c8170;
}
.v-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  color: #7a6f63;
  letter-spacing: 0.04em;
}
.v-pair .v-letter {
  margin-left: -2px;
  margin-right: 4px;
}
.v-pair .v-letter:last-child {
  margin-right: 0;
}
.v-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.v-pill-icon {
  display: inline-flex;
}
.v-pill-safe {
  background: #dbe8d4;
  color: #3d6b3f;
}
.v-pill-caution {
  background: #f5ead0;
  color: #8a5a14;
}
.v-pill-avoid {
  background: #f1d8cf;
  color: #8a3018;
}
.v-pill-unclear {
  background: #efe8d8;
  color: #5a554a;
}
.p-food-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  text-decoration: none;
  color: var(--color-text);
  margin-bottom: 8px;
}
.p-food-row:hover {
  text-decoration: none;
  border-color: #d3c7ad;
}
.p-food-emoji {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #efe8d8;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.p-food-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.p-food-name {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.2;
}
.p-food-cat {
  font-size: 0.6rem;
  color: #7a6f63;
  letter-spacing: 0.04em;
}
.home-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0 8px;
}
.p-food-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;
  min-height: 40px;
}
.p-food-pill:hover {
  text-decoration: none;
  border-color: #d3c7ad;
}
.p-pill-emoji {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #efe8d8;
  font-size: 1.05rem;
}
.p-pill-name {
  font-size: 0.85rem;
  white-space: nowrap;
}
.p-pill-dots {
  display: inline-flex;
  gap: 3px;
}
.p-pill-dots .v-dot {
  width: 6px;
  height: 6px;
}
.p-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--spacing-md) 0 8px;
}
.p-section-title {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6f63;
}
.p-section-action {
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: #7a6f63;
  text-decoration: none;
}
.p-stat-tile {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  display: grid;
  gap: 2px;
}
.p-stat-tile.tone-safe {
  background: #dbe8d4;
  border-color: #c4d6b9;
}
.p-stat-tile.tone-caution {
  background: #f5ead0;
  border-color: #e3d5a5;
}
.p-stat-tile.tone-avoid {
  background: #f1d8cf;
  border-color: #e0b7a4;
}
.p-stat-baseline {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.p-stat-big {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text);
}
.p-stat-tile.tone-safe .p-stat-big {
  color: #3d6b3f;
}
.p-stat-tile.tone-caution .p-stat-big {
  color: #8a5a14;
}
.p-stat-tile.tone-avoid .p-stat-big {
  color: #8a3018;
}
.p-stat-unit {
  font-size: 0.62rem;
  color: #7a6f63;
}
.p-stat-label {
  font-size: 0.7rem;
  color: #7a6f63;
}
.home-hero {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.home-greet, .home-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6f63;
}
.landing-lede {
  color: var(--color-text-soft);
  margin: 10px 0 0;
  line-height: 1.55;
  max-width: 32rem;
}
.landing-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: var(--spacing-md) 0 0;
}
.landing-cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}
.landing-cta.primary {
  background: var(--color-text);
  color: #fbf7ee;
  border: 1px solid var(--color-text);
}
.landing-cta.primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}
.landing-cta.ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid #d3c7ad;
}
.landing-cta.ghost:hover {
  background: #efe8d8;
  text-decoration: none;
}
.landing-cond-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.landing-cond-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  color: var(--color-text);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}
.landing-footer {
  color: #7a6f63;
  font-size: 0.7rem;
  margin: var(--spacing-lg) 0 0;
  text-align: center;
  letter-spacing: 0.04em;
}
.p-bar-action {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.p-bar-action.ghost {
  color: var(--color-text);
}
.p-bar-action.ghost:hover {
  background: #efe8d8;
  text-decoration: none;
}
.p-bar-action.primary {
  background: var(--color-text);
  color: #fbf7ee;
}
.p-bar-action.primary:hover {
  background: var(--color-primary);
  text-decoration: none;
}
.home-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 2.1rem;
  line-height: 1.05;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.home-title em {
  color: var(--color-primary);
  font-style: italic;
}
.home-search-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: var(--spacing-md) 0 0;
  border-radius: 14px;
  background: #fbf7ee;
  border: 1px solid #d3c7ad;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  color: #7a6f63;
  text-decoration: none;
  min-height: 48px;
}
.home-search-btn:hover {
  text-decoration: none;
  border-color: var(--color-primary);
}
.home-search-icon {
  color: #4a423a;
  display: inline-flex;
}
.home-search-placeholder {
  flex: 1;
  font-size: 0.92rem;
  color: #7a6f63;
  text-align: left;
}
.home-search-mic {
  color: #7a6f63;
  display: inline-flex;
}
.home-chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.home-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  font-size: 0.8rem;
  color: var(--color-text);
  text-decoration: none;
  min-height: 36px;
}
.home-chip:hover {
  text-decoration: none;
  border-color: #d3c7ad;
}
.home-chip-icon {
  color: var(--color-primary);
  display: inline-flex;
}
.home-block {
  margin-top: var(--spacing-lg);
}
.home-food-list {
  display: block;
}
.p-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
}
.p-sheet.is-open {
  display: block;
}
body.p-sheet-locked {
  overflow: hidden;
}
.p-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20,17,13,0.42);
  animation: fadeBackdrop .2s ease both;
}
@keyframes fadeBackdrop {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}
@keyframes slideUpSheet {
from {
  transform: translateY(100%);
}
to {
  transform: translateY(0);
}
}
.p-sheet-card {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85%;
  overflow-y: auto;
  background: #f6f1e6;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  display: flex;
  flex-direction: column;
  animation: slideUpSheet .25s ease both;
  box-shadow: 0 -8px 28px rgba(60,40,20,0.18);
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 720px) {
.p-sheet-card {
  max-width: 640px;
  margin: 0 auto;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
}
.p-sheet-grip {
  display: block;
  width: 40px;
  height: 4px;
  background: #d3c7ad;
  border-radius: 999px;
  margin: 10px auto 4px;
  flex-shrink: 0;
}
.p-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px 4px;
  flex-shrink: 0;
}
.p-sheet-title {
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.15;
}
.p-sheet-lede {
  font-size: 0.85rem;
  color: #7a6f63;
  margin: 4px 0 0;
}
.p-sheet-x {
  background: transparent;
  border: 0;
  color: #7a6f63;
  padding: 8px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
}
.p-sheet-body {
  padding: 12px 20px 20px;
}
.p-bar-back {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #4a423a;
  text-decoration: none;
}
.p-bar-back:hover {
  background: #efe8d8;
  text-decoration: none;
}
.p-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fbf7ee;
  border: 1px solid #d3c7ad;
  margin: 8px 0 0;
  min-height: 48px;
}
.p-search-field input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  outline: none;
  font-size: 16px;
  color: var(--color-text);
}
.p-search-icon {
  color: #4a423a;
  display: inline-flex;
}
.p-search-chips {
  margin-top: 10px;
}
.p-suggest-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.p-suggest-pill {
  padding: 7px 12px;
  border-radius: 999px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  font-size: 0.7rem;
  color: #4a423a;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.p-suggest-pill:hover {
  text-decoration: none;
  border-color: #d3c7ad;
}
.p-ask-model {
  margin-top: 8px;
  border: 0;
  padding: 0;
  background: transparent;
}
.p-ask-cta {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  background: #fbf7ee;
  border: 1px dashed #d3c7ad;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
}
.p-ask-cta:hover {
  border-color: var(--color-primary);
  background: #f5efe0;
}
.p-ask-row {
  color: var(--color-primary);
}
.p-ask-spark {
  display: inline-flex;
}
.p-ask-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.p-ask-q {
  font-size: 1rem;
  color: var(--color-text);
}
.p-ask-sub {
  font-size: 0.78rem;
  color: #7a6f63;
}
.p-bar-icon-btn {
  background: transparent;
  border: 0;
  padding: 6px;
  color: #7a6f63;
  cursor: pointer;
  min-width: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
}
.result-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0 4px;
}
.result-emoji {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #efe8d8;
  font-size: 2.1rem;
  flex-shrink: 0;
}
.result-head-text {
  display: grid;
  gap: 2px;
  flex: 1;
}
.result-name {
  margin: 0;
  font-size: 1.85rem;
  line-height: 1.1;
  font-weight: 500;
  color: var(--color-text);
}
.result-cat {
  font-size: 0.7rem;
  color: #7a6f63;
  letter-spacing: 0.04em;
}
.result-src-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #7a6f63;
  margin: 8px 0 14px;
  flex-wrap: wrap;
}
.result-src-spark {
  color: var(--color-primary);
  display: inline-flex;
}
.result-cond-pill {
  padding: 2px 8px;
  border-radius: 6px;
  background: #efe8d8;
  color: #4a423a;
  font-weight: 600;
}
.v-block {
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  border-radius: 14px;
  padding: 16px 16px 18px;
  margin-bottom: 12px;
  display: grid;
  gap: 8px;
}
.v-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.v-block-label {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6f63;
}
.v-block-headline {
  margin: 4px 0 6px;
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-text);
}
.v-block-why {
  margin: 0;
  color: #4a423a;
  line-height: 1.55;
  font-size: 0.95rem;
}
.v-block-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.v-block-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #4a423a;
  font-size: 0.92rem;
}
.v-block-list li::before {
  content: '';
  margin-top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}
.p-sources {
  margin-top: var(--spacing-md);
}
.p-sources-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6f63;
  margin-bottom: 8px;
}
.p-sources-when {
  opacity: 0.85;
}
.p-sources-list {
  display: grid;
  gap: 8px;
}
.p-src-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
}
.p-src-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #efe8d8;
  font-size: 0.65rem;
  font-weight: 600;
  color: #4a423a;
}
.p-src-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.p-src-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text);
}
.p-src-host {
  font-size: 0.65rem;
  color: #7a6f63;
}
.p-src-link {
  color: #7a6f63;
  display: inline-flex;
}
.p-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: var(--spacing-md) 0 0;
}
.p-action-form {
  display: block;
}
.p-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  color: var(--color-text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 48px;
}
.p-action-btn:hover {
  border-color: #d3c7ad;
}
.p-action-btn.active.p-action-safe, .p-action-btn[data-state="committed"].p-action-safe {
  background: #dbe8d4;
  color: #3d6b3f;
  border-color: #c4d6b9;
  font-weight: 600;
}
.p-action-btn.active.p-action-hurt, .p-action-btn[data-state="committed"].p-action-hurt {
  background: #f1d8cf;
  color: #8a3018;
  border-color: #e0b7a4;
  font-weight: 600;
}
.p-action-icon {
  display: inline-flex;
  color: currentColor;
}
.p-action-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.p-action-label[hidden] {
  display: none;
}
.p-action-btn[aria-busy="true"] {
  opacity: 0.75;
  cursor: progress;
}
.p-action-safe .p-action-icon {
  color: #6f8a64;
}
.p-action-hurt .p-action-icon {
  color: #a8472e;
}
.p-action-btn.active .p-action-icon {
  color: currentColor;
}
.p-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.p-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  color: var(--color-text-soft);
  padding: 0;
}
.p-row-action:hover {
  background: #efe8d8;
  color: var(--color-text);
}
.p-row-action-delete:hover {
  color: #a8472e;
}
.p-row-delete-form {
  display: inline;
  margin: 0;
}
.llm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(246, 241, 230, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.llm-overlay[data-active="true"] {
  display: flex;
}
.llm-overlay-card {
  max-width: 320px;
  width: 100%;
  padding: 28px 24px;
  border-radius: 16px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.llm-overlay-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e3dac6;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: llm-spin 0.9s linear infinite;
}
@keyframes llm-spin {
  0%: transform: rotate(0deg);
  100%: transform: rotate(360deg);
}
.llm-overlay-title {
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0 0 6px;
}
.llm-overlay-sub {
  font-size: 0.74rem;
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}
.p-refresh-form {
  display: block;
  margin: var(--spacing-md) 0 0;
}
.p-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: transparent;
  border: 1px dashed #c8bda3;
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  min-height: 44px;
}
.p-refresh-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.p-refresh-icon {
  display: inline-flex;
  color: currentColor;
}
.p-src-row-link {
  text-decoration: none;
}
.p-src-row-link:hover {
  border-color: var(--color-primary);
  text-decoration: none;
}
.p-src-row-link:hover .p-src-link {
  color: var(--color-primary);
}
.p-settings-card {
  padding: 16px 18px;
  border-radius: 16px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  margin-bottom: 12px;
  display: grid;
  gap: 12px;
}
.p-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid #efe8d8;
}
.p-settings-card > .p-settings-row:first-of-type {
  border-top: 0;
}
.p-settings-key {
  font-size: 0.66rem;
  color: #7a6f63;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.p-settings-val {
  font-size: 0.92rem;
  color: var(--color-text);
  text-align: right;
  word-break: break-all;
}
.p-llm-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.p-llm-status.tone-safe {
  background: #dbe8d4;
  color: #3d6b3f;
}
.p-llm-status.tone-avoid {
  background: #f1d8cf;
  color: #8a3018;
}
.p-disclaimer {
  background: #efe8d8;
  border: 1px dashed #d3c7ad;
  border-radius: 12px;
  padding: 12px 14px;
  color: #4a423a;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: var(--spacing-md);
}
.p-empty {
  padding: var(--spacing-lg) 0;
  display: grid;
  gap: 12px;
}
.p-empty h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.p-empty-sub {
  color: #4a423a;
  margin: 0;
  overflow-wrap: anywhere;
}
.p-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--color-text);
  color: #fbf7ee;
  font-weight: 600;
  text-decoration: none;
  justify-self: start;
}
.p-no-match {
  opacity: 0.65;
}
.p-no-match .p-food-emoji {
  background: transparent;
  border: 1px dashed #d3c7ad;
  color: #7a6f63;
  font-size: 1.1rem;
}
.p-mine-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.p-mine-stat {
  padding: 16px 18px;
  border-radius: 14px;
}
.p-mine-stat.tone-avoid {
  background: #f1d8cf;
  color: #8a3018;
}
.p-mine-stat.tone-safe {
  background: #dbe8d4;
  color: #3d6b3f;
}
.p-mine-stat-big {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}
.p-mine-stat-label {
  font-size: 0.78rem;
  margin-top: 4px;
}
.p-add-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: var(--color-primary);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.p-mine-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  margin-bottom: 8px;
}
.p-mine-empty {
  padding: 16px;
  text-align: center;
  color: #7a6f63;
  font-size: 0.75rem;
  border: 1px dashed #d3c7ad;
  border-radius: 12px;
  letter-spacing: 0.04em;
}
.p-add-form {
  display: grid;
  gap: 10px;
}
.p-add-form label {
  font-size: 0.62rem;
  color: #7a6f63;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  margin-top: 4px;
}
.p-add-form input, .p-add-form textarea {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e3dac6;
  background: #fff;
  font: inherit;
  min-height: 44px;
  font-size: 16px;
  color: var(--color-text);
  resize: vertical;
}
.p-add-form input:focus, .p-add-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(138,74,47,0.12);
}
.p-primary-btn {
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fbf7ee;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  margin-top: 8px;
  font-size: 0.92rem;
}
.p-primary-btn:hover {
  background: #6d3a23;
}
.p-edit-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  font-size: 0.72rem;
  color: #4a423a;
  cursor: pointer;
  font-family: inherit;
}
.p-log-card {
  padding: 16px 18px 18px;
  border-radius: 16px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  margin: 12px 0 18px;
  display: grid;
  gap: 18px;
}
.p-log-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.p-log-card-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
}
.p-log-card-sub {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a6f63;
  margin-top: 2px;
}
.p-log-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.p-log-open-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-primary);
  display: inline-block;
}
.p-log-form {
  display: grid;
  gap: 18px;
}
.p-metric-list {
  display: grid;
  gap: 16px;
}
.p-metric {
  display: grid;
  gap: 8px;
}
.p-metric-headrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p-metric-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.p-metric-name {
  font-size: 0.92rem;
  color: #4a423a;
}
.p-metric-x {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #a89c87;
  text-decoration: none;
  opacity: 0.5;
}
.p-metric-x:hover {
  opacity: 1;
  background: #efe8d8;
  color: #8a3018;
}
.p-metric-val {
  font-size: 0.85rem;
  color: var(--color-text);
  font-weight: 600;
}
.p-metric-unit {
  font-size: 0.62rem;
  color: #7a6f63;
  font-weight: 400;
  margin-left: 4px;
}
.p-stepper {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  align-items: center;
}
.p-stepper-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #efe8d8;
  border: 1px solid #e3dac6;
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.p-stepper-btn:active {
  background: #e6dcc4;
}
.p-stepper-display {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 12px;
  background: #efe8d8;
  font-size: 1.4rem;
  color: var(--color-text);
}
.p-stepper-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.p-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}
.p-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.p-toggle-knob {
  position: absolute;
  inset: 0;
  background: #d3c7ad;
  border-radius: 999px;
  transition: background .15s;
}
.p-toggle-knob::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 999px;
  transition: left .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.p-toggle input:checked + .p-toggle-knob {
  background: var(--color-primary);
}
.p-toggle.tone-safe input:checked + .p-toggle-knob {
  background: #6f8a64;
}
.p-toggle.tone-avoid input:checked + .p-toggle-knob {
  background: #a8472e;
}
.p-toggle input:checked + .p-toggle-knob::before {
  left: 21px;
}
.p-slider {
  width: 100%;
  appearance: none;
  background: transparent;
  height: 20px;
  accent-color: var(--color-primary);
}
.p-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: #e3dac6;
  border-radius: 999px;
}
.p-slider::-moz-range-track {
  height: 4px;
  background: #e3dac6;
  border-radius: 999px;
}
.p-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--color-primary);
  margin-top: -7px;
  border: 0;
  cursor: pointer;
}
.p-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--color-primary);
  border: 0;
  cursor: pointer;
}
.p-mood-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.p-mood-opt {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
}
.p-mood-opt input {
  display: none;
}
.p-mood-emoji {
  font-size: 1.5rem;
  line-height: 1;
}
.p-mood-label {
  font-size: 0.7rem;
  color: #4a423a;
}
.p-mood-opt:has(input:checked) {
  background: #efe8d8;
  border-color: #d3c7ad;
}
.p-mood-opt:has(input:checked) .p-mood-label {
  font-weight: 600;
}
.p-bristol-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.p-bristol-opt {
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: 8px;
  background: #efe8d8;
  cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: #7a6f63;
}
.p-bristol-opt input {
  display: none;
}
.p-bristol-opt:has(input:checked) {
  background: var(--color-primary);
  color: #fbf7ee;
}
.p-bristol-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  color: #7a6f63;
}
.p-choice-row {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: #efe8d8;
  border-radius: 10px;
}
.p-choice-opt {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 7px 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  color: #7a6f63;
  font-weight: 500;
}
.p-choice-opt input {
  display: none;
}
.p-choice-opt:has(input:checked) {
  background: #fbf7ee;
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.p-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.p-chip-opt {
  cursor: pointer;
}
.p-chip-opt input {
  display: none;
}
.p-chip-opt span {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: #efe8d8;
  color: #4a423a;
  border: 1px solid #e3dac6;
}
.p-chip-opt:has(input:checked) span {
  background: #f1d8cf;
  color: #8a3018;
  border-color: #cf8a72;
  font-weight: 600;
}
.p-num-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #efe8d8;
  border: 1px solid #e3dac6;
}
.p-num-row input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.05rem;
  color: var(--color-text);
}
.p-num-unit {
  font-size: 0.65rem;
  color: #7a6f63;
}
.p-metric.text textarea {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e3dac6;
  font: inherit;
  font-size: 0.92rem;
  color: var(--color-text);
  resize: vertical;
}
.p-add-metric {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px dashed #d3c7ad;
  color: var(--color-primary);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}
.p-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border-radius: 12px;
  background: #1c1814;
  color: #fbf7ee;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
  font-size: 0.92rem;
}
.p-save-btn:hover {
  background: var(--color-primary);
}
.p-history-block {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.p-history-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.p-history-title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text);
}
.p-history-sub {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a6f63;
  margin-top: 2px;
}
.p-range-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #efe8d8;
  border-radius: 999px;
}
.p-range-tab {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #7a6f63;
  text-decoration: none;
}
.p-range-tab:hover {
  text-decoration: none;
  color: var(--color-text);
}
.p-range-tab.active {
  background: #fbf7ee;
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.p-history-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.p-viz-panel {
  padding: 12px 12px;
  border-radius: 14px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  display: grid;
  gap: 8px;
}
.p-week-strip {
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.p-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
}
.p-week-day.selected {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.p-week-wd {
  font-size: 0.6rem;
  color: #7a6f63;
}
.p-week-cell {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
}
.p-week-num {
  font-size: 0.7rem;
  font-weight: 600;
}
.p-week-bm {
  font-size: 0.58rem;
  opacity: 0.85;
}
.p-week-today {
  font-size: 0.55rem;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.p-week-day.sev-0 .p-week-cell {
  background: #dbe8d4;
  color: #3d6b3f;
}
.p-week-day.sev-1 .p-week-cell {
  background: #e9efce;
  color: #3d6b3f;
}
.p-week-day.sev-2 .p-week-cell {
  background: #f5ead0;
  color: #8a5a14;
}
.p-week-day.sev-3 .p-week-cell {
  background: #f1d8cf;
  color: #8a3018;
}
.p-week-day.sev-4 .p-week-cell {
  background: #e8b9a8;
  color: #8a3018;
  border: 1.5px solid #cf8a72;
}
.p-week-day.sev-empty .p-week-cell {
  background: transparent;
  border: 1px dashed #d3c7ad;
  color: #7a6f63;
}
.p-cal-hdr {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.p-cal-wd {
  text-align: center;
  font-size: 0.58rem;
  color: #7a6f63;
  letter-spacing: 0.06em;
}
.p-cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.p-cal-cell {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 3px;
  position: relative;
  text-decoration: none;
  color: var(--color-text);
}
.p-cal-cell.sev-0 {
  background: #dbe8d4;
  color: #3d6b3f;
}
.p-cal-cell.sev-1 {
  background: #e9efce;
  color: #3d6b3f;
}
.p-cal-cell.sev-2 {
  background: #f5ead0;
  color: #8a5a14;
}
.p-cal-cell.sev-3 {
  background: #f1d8cf;
  color: #8a3018;
}
.p-cal-cell.sev-4 {
  background: #e8b9a8;
  color: #8a3018;
  border: 1.5px solid #cf8a72;
}
.p-cal-cell.sev-empty {
  background: transparent;
  border: 1px dashed #d3c7ad;
  color: #a89c87;
}
.p-cal-cell.selected {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.p-cal-cell.today::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary);
}
.p-cal-num {
  font-size: 0.7rem;
  font-weight: 600;
}
.p-cal-pad {
  aspect-ratio: 1 / 1;
}
.p-cal-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid #e3dac6;
  margin-top: 4px;
  font-size: 0.58rem;
  color: #7a6f63;
}
.p-cal-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.p-qg-header {
  display: grid;
  grid-template-columns: 14px repeat(12, 1fr);
  gap: 3px;
  align-items: end;
}
.p-qg-mlabel {
  font-size: 0.52rem;
  color: #7a6f63;
}
.p-qg-spacer {
  display: block;
}
.p-qg-body {
  display: grid;
  gap: 3px;
}
.p-qg-row {
  display: grid;
  grid-template-columns: 14px repeat(12, 1fr);
  gap: 3px;
  align-items: center;
}
.p-qg-wd {
  font-size: 0.5rem;
  color: #7a6f63;
}
.p-qg-cell {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  display: block;
  text-decoration: none;
}
.p-qg-cell.sev-0 {
  background: #dbe8d4;
}
.p-qg-cell.sev-1 {
  background: #e9efce;
}
.p-qg-cell.sev-2 {
  background: #f5ead0;
}
.p-qg-cell.sev-3 {
  background: #f1d8cf;
}
.p-qg-cell.sev-4 {
  background: #e8b9a8;
  border: 1px solid #cf8a72;
}
.p-qg-cell.sev-empty {
  background: transparent;
  border: 1px dashed #d3c7ad;
}
.p-qg-cell.selected {
  outline: 1.5px solid var(--color-primary);
  outline-offset: 1px;
}
.p-qg-pad {
  aspect-ratio: 1 / 1;
}
.p-severity-legend {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
  font-size: 0.6rem;
  color: #7a6f63;
}
.p-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.p-legend-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
}
.p-legend-swatch.sev-0 {
  background: #dbe8d4;
}
.p-legend-swatch.sev-1 {
  background: #e9efce;
}
.p-legend-swatch.sev-2 {
  background: #f5ead0;
}
.p-legend-swatch.sev-3 {
  background: #f1d8cf;
}
.p-legend-swatch.sev-4 {
  background: #e8b9a8;
  border: 1px solid #cf8a72;
}
.p-legend-swatch.sev-empty {
  background: transparent;
  border: 1px dashed #d3c7ad;
}
.p-day-detail {
  border-radius: 14px;
  overflow: hidden;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
}
.p-day-band {
  padding: 10px 14px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.p-day-detail.sev-0 .p-day-band {
  background: #dbe8d4;
}
.p-day-detail.sev-1 .p-day-band {
  background: #e9efce;
}
.p-day-detail.sev-2 .p-day-band {
  background: #f5ead0;
}
.p-day-detail.sev-3 .p-day-band {
  background: #f1d8cf;
}
.p-day-detail.sev-4 .p-day-band {
  background: #e8b9a8;
}
.p-day-detail.missed {
  border-style: dashed;
  border-color: #d3c7ad;
}
.p-day-detail.missed .p-day-band {
  background: transparent;
}
.p-day-eyebrow {
  font-size: 0.6rem;
  color: #7a6f63;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.p-day-title {
  font-size: 1.2rem;
  color: var(--color-text);
  font-weight: 500;
}
.p-day-date {
  font-size: 1rem;
  color: #7a6f63;
}
.p-day-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  color: #4a423a;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.p-day-body {
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
}
.p-day-mgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.p-day-metric {
  display: grid;
  gap: 2px;
  padding: 6px 0;
}
.p-day-mlabel {
  font-size: 0.55rem;
  color: #7a6f63;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.p-day-mvalue {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}
.p-day-metric.flagged .p-day-mvalue {
  color: #8a3018;
}
.p-day-flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid #e3dac6;
  align-items: center;
}
.p-day-flag-label {
  font-size: 0.6rem;
  color: #7a6f63;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 2px;
}
.p-day-flag-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1d8cf;
  color: #8a3018;
  font-size: 0.62rem;
  font-weight: 600;
}
.p-day-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  background: #efe8d8;
  border-radius: 8px;
}
.p-day-note-q {
  color: #7a6f63;
  margin-top: 1px;
  font-size: 0.85rem;
}
.p-day-note-t {
  font-size: 0.82rem;
  color: #4a423a;
  font-style: italic;
  flex: 1;
}
.p-trends {
  display: grid;
  gap: 8px;
}
.p-trends-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p-trends-sub {
  color: #7a6f63;
}
.p-trend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.p-trend-card {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  display: grid;
  gap: 6px;
}
.p-trend-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p-trend-avg {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.p-trend-avg .serif {
  font-size: 1.25rem;
  font-weight: 500;
}
.p-trend-avg .mono {
  font-size: 0.6rem;
  color: #7a6f63;
}
.p-trend-arrow {
  font-weight: 600;
  font-size: 0.7rem;
}
.p-trend-arrow.tone-danger {
  color: #8a3018;
}
.p-trend-arrow.tone-success {
  color: #3d6b3f;
}
.p-trend-spark {
  width: 100%;
  height: 28px;
}
.p-sheet-config {
  display: grid;
  gap: 20px;
}
.p-sheet-section {
  display: grid;
  gap: 10px;
}
.p-sheet-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6f63;
}
.p-tracking-card {
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  border-radius: 12px;
  overflow: hidden;
}
.p-sheet-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid #efe8d8;
}
.p-sheet-row:first-child {
  border-top: 0;
}
.p-sheet-arrow {
  color: #7a6f63;
  padding: 4px;
  text-decoration: none;
  font-size: 0.85rem;
  min-width: 24px;
  text-align: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.p-sheet-arrow.disabled {
  color: #d3c7ad;
  pointer-events: none;
}
.p-sheet-row-meta {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.p-sheet-row-name {
  font-size: 0.92rem;
  color: var(--color-text);
}
.p-sheet-row-sub {
  font-size: 0.6rem;
  color: #7a6f63;
  letter-spacing: 0.04em;
}
.p-sheet-remove {
  padding: 4px 9px;
  border-radius: 999px;
  background: #f1d8cf;
  color: #8a3018;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.p-sheet-cat {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.p-sheet-cat-title {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6f63;
}
.p-sheet-pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.p-sheet-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 10px;
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  text-decoration: none;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
}
.p-sheet-pick:hover {
  text-decoration: none;
  border-color: #d3c7ad;
}
.p-sheet-pick.on {
  background: #efe8d8;
  border-color: var(--color-text);
}
.p-sheet-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #d3c7ad;
  background: transparent;
  flex-shrink: 0;
  color: #fbf7ee;
}
.p-sheet-check.on {
  background: var(--color-text);
  border-color: var(--color-text);
}
.p-sheet-pick-meta {
  display: grid;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.p-sheet-pick-name {
  font-weight: 500;
  color: var(--color-text);
}
.p-sheet-pick.on .p-sheet-pick-name {
  font-weight: 600;
}
.p-sheet-suggested {
  font-size: 0.55rem;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 1px;
}
.p-sheet-pick.on .p-sheet-suggested {
  display: none;
}
.p-sheet-footer {
  position: sticky;
  bottom: 0;
  margin-top: 16px;
  padding: 12px 0;
  background: var(--color-surface);
  box-shadow: 0 -8px 12px -8px rgba(28, 24, 20, 0.12);
  z-index: 1;
}
.p-sheet-footer .p-save-btn {
  width: 100%;
}
.p-conditions-lede {
  color: #4a423a;
  margin: 12px 0 16px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.p-cond-arrow {
  color: #a89c87;
  font-size: 0.85rem;
  justify-self: end;
}
.p-about-intro {
  padding-top: 12px;
  padding-bottom: 8px;
}
.p-about-title {
  font-size: 1.8rem;
  font-weight: 500;
  margin: 0;
  color: var(--color-text);
}
.p-about-lede {
  color: #4a423a;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 6px 0 0;
}
.p-about-section {
  margin: var(--spacing-md) 0;
}
.p-about-section-body {
  display: grid;
  gap: 10px;
}
.p-about-body {
  color: #4a423a;
  line-height: 1.55;
  margin: 0;
  font-size: 0.95rem;
}
.p-about-list {
  color: #4a423a;
  padding-left: 18px;
  margin: 0;
  line-height: 1.65;
  font-size: 0.95rem;
}
.p-about-disclaimer {
  margin: var(--spacing-md) 0;
}
.p-verdict-key {
  display: grid;
  gap: 8px;
}
.p-verdict-key-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.p-verdict-key-body {
  color: #4a423a;
  font-size: 0.88rem;
  flex: 1;
}
.p-foods-count {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a6f63;
  margin: 12px 0 10px;
}
.p-cond-list {
  display: grid;
  gap: 2px;
}
.p-cond-row-form {
  margin: 0;
  display: block;
}
button.p-cond-row {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.p-cond-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 8px;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 10px;
  border-bottom: 1px solid #efe8d8;
}
.p-cond-row:hover {
  background: #efe8d8;
  text-decoration: none;
}
.p-cond-row:last-child {
  border-bottom: 0;
}
.p-cond-row.active {
  background: #fbf7ee;
  border: 1px solid #e3dac6;
  font-weight: 600;
}
.p-cond-cat {
  font-size: 0.62rem;
  color: #7a6f63;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.p-cond-name {
  font-size: 0.95rem;
}
.p-cond-check {
  color: var(--color-primary);
  display: inline-flex;
}

/* ─── Visually hidden helper ─── */
.ui-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}