/* Monospace UI with OKLCH color system */
:root {
  /* Light theme */
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0b0c0e;   /* ink */
  --muted: #6b7078;  /* muted */
  /* Teal & Charcoal palette */
  --primary: #0E9486;    /* accent */
  --accent: #0E9486;     /* legacy var kept */
  --accent-2: #0B766B;   /* secondary accent */
  --primary-h: #0B766B;  /* hover */
  --border: #e5e7eb;     /* line */
  --ring: rgba(14,148,134,0.35);
  --shadow: 0 10px 30px rgba(0,0,0,0.10);
  --paper-1: #f6fbfa;
  /* Glass variables (light) */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(0, 0, 0, 0.10);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  --glass-highlight-edge: rgba(255, 255, 255, 0.35);
  --glass-lowlight-edge: rgba(0, 0, 0, 0.06);
  --glass-gloss-start: rgba(255, 255, 255, 0.28);
  --glass-gloss-mid: rgba(255, 255, 255, 0.10);
  /* Sidebar group accents */
  --grp-conditions: oklch(70% 0.16 20);
  --grp-diets: oklch(70% 0.16 150);
  --grp-goals: oklch(70% 0.16 260);
  --grp-macros: oklch(72% 0.16 80);
  --grp-styles: oklch(72% 0.16 200);
  --grp-time: oklch(72% 0.16 30);
  --grp-meal: oklch(72% 0.16 330);
  --grp-occasion: oklch(72% 0.16 120);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121315;
    --surface: #1a1c1f;
    --text: #f2f4f6;
    --muted: #c8cbd1;
    --primary: #4bc0a6;
    --accent: #4bc0a6;
    --accent-2: #3ca89a;
    --primary-h: #37a58c;
    --border: #333841;
    --ring: rgba(75,192,166,0.3);
    --shadow: 0 10px 30px rgba(0,0,0,0.35);
    /* Glass variables (dark) */
    --glass-bg: rgba(20, 20, 22, 0.55);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --glass-highlight-edge: rgba(255, 255, 255, 0.22);
    --glass-lowlight-edge: rgba(0, 0, 0, 0.20);
    --glass-gloss-start: rgba(255, 255, 255, 0.16);
    --glass-gloss-mid: rgba(255, 255, 255, 0.07);
    /* Section paper in dark */
    --paper-1: #16181b;
    --grp-conditions: oklch(80% 0.14 20);
    --grp-diets: oklch(80% 0.14 150);
    --grp-goals: oklch(85% 0.14 260);
    --grp-macros: oklch(85% 0.14 80);
    --grp-styles: oklch(85% 0.14 200);
    --grp-time: oklch(85% 0.14 30);
    --grp-meal: oklch(85% 0.14 330);
    --grp-occasion: oklch(85% 0.14 120);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Type scale */
:root{
  --step--1: clamp(.9rem, .86rem + .15vw, 1rem);
  --step-0:  clamp(1rem, .98rem + .2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.05rem + .8vw, 1.6rem);
  --step-2:  clamp(1.4rem, 1.2rem + 1.2vw, 2rem);
  --step-3:  clamp(1.7rem, 1.3rem + 2vw, 2.5rem);
  --lh: 1.6; --maxw: 72ch;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* System-first */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 6px; }

.container { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; padding: 24px; }

/* Headings */
h1 { font: 650 var(--step-3)/1.2 ui-serif, Georgia, Cambria, Times, serif; letter-spacing: -0.01em; margin: 0 0 8px; }
h2 { font: 600 var(--step-1)/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial; margin: 24px 0 8px; }
p, li { font-size: var(--step-0); }
.step-icon { display:inline-flex; width: 1.25em; justify-content:center; align-items:center; margin-right: 6px; }
/* Breadcrumbs */
.breadcrumbs { font-size: .9rem; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .sep { opacity: .6; }

/* Header: glassy + sticky */
header.site-header { border-bottom: 1px solid var(--glass-border); background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); position: sticky; top: 0; z-index: 5; box-shadow: inset 0 1px 0 var(--glass-highlight-edge), inset 0 -1px 0 var(--glass-lowlight-edge); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { display: none; }
.brand-title { display: flex; align-items: center; gap: 8px; letter-spacing: 0.02em; }
.brand-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.brand-text { font-weight: 700; }
.brand-sub { color: var(--muted); }
.brand-img { height: 32px; display: block; }
.brand-text { display: none; }
nav.primary-nav { margin-left: auto; display: flex; gap: 14px; }
nav.primary-nav a { color: var(--text); opacity: 0.9; padding: 8px 10px; border-radius: 8px; }
nav.primary-nav a:hover { background: oklch(from var(--primary) l c h / 0.08); text-decoration: none; }

main { padding-block: 16px 64px; }

.layout-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.layout-grid.no-sidebar { grid-template-columns: 1fr; }
.layout-grid.no-sidebar .sidebar { display: none; }
@media (max-width: 900px) { .layout-grid { grid-template-columns: 1fr; } }

.sidebar { border: 1px solid var(--glass-border); background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-radius: 12px; box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight-edge), inset 0 -1px 0 var(--glass-lowlight-edge); padding: 10px; position: sticky; top: 72px; overflow: visible; z-index: 1; font-size: 0.9rem; margin-top: 24px; }
.sidebar::before,
header.site-header::before,
.hero::before,
.card::before,
.plan::before,
.info-block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--glass-gloss-start), var(--glass-gloss-mid) 12%, rgba(255,255,255,0) 42%);
}
.content { min-width: 0; }
.sidebar h2 { font-size: 0.94rem; margin: 6px 0 4px; }
.sidebar h3 { font-size: 0.88rem; margin: 8px 0 4px; color: var(--muted); }
.sidebar .filter-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.sidebar .filter-list a { display: block; padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: oklch(from var(--accent) l c h / 0.07); font-size: 0.88rem; }
.sidebar .filter-list a:hover { text-decoration: none; background: oklch(from var(--accent) l c h / 0.12); }
.sidebar .filter-list a.active { outline: 2px solid var(--primary); outline-offset: 1px; background: oklch(from var(--primary) l c h / 0.18); border-color: var(--primary); }
.sidebar .filter-list a[data-group="conditions"] { background: oklch(from var(--grp-conditions) l c h / 0.10); border-color: oklch(from var(--grp-conditions) l c h / 0.35); }
.sidebar .filter-list a[data-group="diets"] { background: oklch(from var(--grp-diets) l c h / 0.10); border-color: oklch(from var(--grp-diets) l c h / 0.35); }
.sidebar .filter-list a[data-group="goals"] { background: oklch(from var(--grp-goals) l c h / 0.10); border-color: oklch(from var(--grp-goals) l c h / 0.35); }
.sidebar .filter-list a[data-group="macros"] { background: oklch(from var(--grp-macros) l c h / 0.10); border-color: oklch(from var(--grp-macros) l c h / 0.35); }
.sidebar .filter-list a[data-group="styles"] { background: oklch(from var(--grp-styles) l c h / 0.10); border-color: oklch(from var(--grp-styles) l c h / 0.35); }
.sidebar .filter-list a[data-group="time"] { background: oklch(from var(--grp-time) l c h / 0.10); border-color: oklch(from var(--grp-time) l c h / 0.35); }
.sidebar .filter-list a[data-group="meal"] { background: oklch(from var(--grp-meal) l c h / 0.10); border-color: oklch(from var(--grp-meal) l c h / 0.35); }
.sidebar .filter-list a[data-group="occasion"] { background: oklch(from var(--grp-occasion) l c h / 0.10); border-color: oklch(from var(--grp-occasion) l c h / 0.35); }
.sidebar .quick { display: grid; gap: 4px; margin-bottom: 8px; }
.sidebar .quick a { display: block; padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: oklch(from var(--primary) l c h / 0.07); font-size: 0.9rem; }
.sidebar .quick a:hover { text-decoration: none; background: oklch(from var(--primary) l c h / 0.12); }
.sidebar .muted { color: var(--muted); font-size: 0.85rem; margin-top: 8px; }

/* Mobile: horizontally scrollable filters */
@media (max-width: 900px) {
  /* Header tweaks for small screens */
  .brand { flex-wrap: wrap; }
  .brand-img { height: 28px; }

  /* Sidebar becomes inline scrollable chips without card chrome */
  .sidebar {
    position: static; top: auto; max-height: none; margin-top: 12px;
    display: flex; gap: 8px; align-items: center;
    overflow-x: auto; overflow-y: visible; padding: 0 8px;
    -webkit-overflow-scrolling: touch; /* iOS momentum */
    overscroll-behavior-x: contain; /* prevent parent scroll chaining */
    scroll-snap-type: x proximity; /* gentle snap between chips */
    scrollbar-width: none; /* Firefox hide */
    -ms-overflow-style: none; /* IE/Edge hide */
    border: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-radius: 0 !important; margin-top: 8px;
  }
  .sidebar::before { content: none; }
  .sidebar::-webkit-scrollbar { display: none; } /* WebKit hide */
  .sidebar h2, .sidebar h3 { display: none; }
  .sidebar .quick { display: inline-flex; flex-wrap: nowrap; gap: 8px; margin: 0; }
  .sidebar .filter-list { display: inline-flex; flex-wrap: nowrap; gap: 8px; }
  .sidebar .filter-list li { list-style: none; }
  /* Uniform chip height + single line with ellipsis */
  .sidebar .filter-list a,
  .sidebar .quick a {
    display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    scroll-snap-align: start;
  }
}

.hero { margin-block: 24px 8px; padding: 18px; border: 1px solid var(--border); background: var(--paper-1); border-radius: 16px; box-shadow: var(--shadow); position: relative; }
.hero p { margin: 0; color: var(--muted); }
.hero .actions { margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
@media (prefers-reduced-motion: reduce){
  video[autoplay] { animation: none !important; transition: none !important; }
}
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow); }
.btn:hover { text-decoration: none; filter: saturate(1.05); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-h); border-color: var(--primary-h); }
.button { display:inline-flex; align-items:center; gap:.5ch; padding:10px 14px; border:1px solid var(--primary); background:var(--primary); color:#fff; border-radius:10px; }
.button:hover{ background: var(--primary-h); border-color: var(--primary-h); text-decoration: none; }
.button.secondary{ background:transparent; color:var(--primary); }
.btn-outline { background: transparent; }
.badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: oklch(from var(--accent) l c h / 0.12); }
.store-badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.store-badge { height: 40px; display: inline-block; }
.card-actions { margin-top: 6px; }
/* Temporarily hide Open in App until Universal Links are ready */
.open-in-app { display: none !important; }
.rating { display: inline-flex; align-items: center; gap: 6px; }
.rating .stars { color: oklch(from var(--primary) l c h); }

/* App Store-like rating style */
.appstore-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; color: var(--text); }
.appstore-rating .stars { color: #ffb400; letter-spacing: 0.06em; }
.appstore-rating .value { font-weight: 700; }
.appstore-rating .count { color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
@media (max-width: 900px) { .col-md-12 { grid-column: span 12; } }

.card { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; position: relative; transition: translate .15s ease; }
.card:hover{ translate: 0 -1px; }
.card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.card-thumb { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; aspect-ratio: 16/9; object-fit: cover; }
.meta { color: var(--muted); font-size: 0.9rem; }
/* Clamp long descriptions on cards to reduce height */
.card .meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* show ~4 lines */
  overflow: hidden;
}
.card a h3, .card h3 a { color: inherit; text-decoration: none; }
.card a:hover h3, .card h3 a:hover { text-decoration: underline; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; font-size: 0.85rem; background: oklch(from var(--accent) l c h / 0.09); color: var(--text); }
.tag.heart-healthy { background: oklch(from var(--accent) l c h / 0.12); }
.tag.diabetic-friendly { background: oklch(from var(--primary) l c h / 0.12); }
.tag.blood-pressure-support { background: oklch(from var(--accent-2) l c h / 0.12); }
.tag.low-sodium { background: oklch(from var(--accent-2) l c h / 0.17); }

/* Chips for taxonomy */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-block; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--surface); font-size:.9rem; }
.chip[aria-current="true"]{ background: var(--tint); border-color: var(--primary); }
.chip-rows { display: grid; gap: 10px; }
.chipline { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: middle; }
@media (max-width: 640px){
  .chipline { display: block; max-height: 76px; overflow: hidden; }
  .chip-rows.expanded .chipline { max-height: none; }
  .chipline .chip { display: inline-flex; align-items: center; height: 34px; }
}
@media (min-width: 641px){
  .chip-toggle { display: none; }
}

/* Recipe actions row sticky */
.recipe-actions{ display:flex; gap:8px; flex-wrap:wrap; position: sticky; top: 56px; background: var(--surface); padding-block: 8px; border-block: 1px solid var(--border); }

.section-title { margin: 24px 0 8px; font-size: 1.1rem; }

.two-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.bullets { display: grid; gap: 8px; }
.bullets li { margin-left: 1.1rem; }

.plan { border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight-edge), inset 0 -1px 0 var(--glass-lowlight-edge); position: relative; }
.plan h3 { margin: 0 0 8px; }
.price { font-weight: 700; }

.list { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.list > .item { grid-column: span 4; }
@media (max-width: 900px) { .list > .item { grid-column: span 12; } }
.list .tags { gap: 6px; }
.list .tag { font-size: 0.72rem; padding: 1px 6px; gap: 4px; }

/* Recipe page */
.recipe-header { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 900px) { .recipe-header { grid-template-columns: 1fr; } }

/* Recipe details layout: main content + sticky aside */
.recipe-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 900px) { .recipe-layout { grid-template-columns: 1fr; } }
.recipe-main { min-width: 0; }
.recipe-aside { position: sticky; top: 72px; align-self: start; }
.info-block { border: 1px solid var(--glass-border); border-radius: 12px; padding: 12px; background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight-edge), inset 0 -1px 0 var(--glass-lowlight-edge); position: relative; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fact { border: 1px solid var(--border); border-radius: 8px; padding: 8px; text-align: center; background: oklch(from var(--primary) l c h / 0.06); }
/* Recipe hero image */
.recipe-media { margin: 12px 0 16px; overflow: hidden; }
.recipe-media img { width: 100%; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); display: block; }
@media (min-width: 900px){
  .recipe-media img { width: 88%; margin-left: 0; margin-right: auto; }
}

ul, ol { padding-left: 1.2rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--muted); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Carousel */
.carousel { position: relative; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
/* Horizontal scroll-snap carousel */
.carousel .slides {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(160px, 45vw, 216px);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 12px 46px; /* room for controls */
}
.carousel .slides::-webkit-scrollbar { height: 8px; }
.carousel .slides::-webkit-scrollbar-thumb { background: oklch(from var(--primary) l c h / 0.2); border-radius: 999px; }
.carousel .slide { scroll-snap-align: center; display: grid; place-items: center; }
.carousel .slide img {
  width: 100%;
  height: auto;
  max-width: 216px;
  max-height: 60vh;
  aspect-ratio: 9 / 19.5;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.carousel .controls { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.carousel button { pointer-events: auto; border: 1px solid var(--border); background: oklch(from var(--surface) l c h / 0.7); backdrop-filter: blur(6px); color: var(--text); width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; margin: 0 8px; cursor: pointer; }
.carousel .indicators { display: flex; gap: 8px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; }
.carousel .indicators button { width: 8px; height: 8px; border-radius: 999px; border: 1px solid var(--border); background: oklch(from var(--primary) l c h / 0.2); }
.carousel .indicators button[aria-current="true"] { background: var(--primary); border-color: var(--primary); }

/* Print: clean one-page recipes */
@media print {
  header.site-header, .hero, .sidebar, .recipe-actions, footer { display: none !important; }
  body { background: #fff; }
  a { color: inherit !important; text-decoration: none !important; }
  .container { padding: 0; }
  .layout-grid { display: block; }
}