/* ============================================================
   Gatherer — brand.css  (Round 2)
   Transit-map information design + grain.
   Fonts: Syne (display) + DM Sans (body/UI/numbers).
   Numbers use bold DM Sans + tabular-nums — NOT mono.
   ============================================================ */

:root{
  /* surfaces */
  --ink:#2A302A;          /* green-black — primary text + dark surfaces   */
  --ink-warm:#423F37;     /* warm dark — elevated dark cards              */
  --paper:#FCFFF5;        /* primary light background                     */
  --sand:#E8E2D2;         /* secondary warm surface                       */
  --stone:#C6C1B3;        /* muted fills / placeholders                   */
  --line:#DAD5C4;         /* hairline border on paper                     */
  --line-ink:#2A302A;     /* map linework / strong border                 */

  /* brand + macro "lines" */
  --brand:#4DA27F;        /* identity green                               */
  --protein:#1E65E0;      /* protein — the hero metric                    */
  --carbs:#F17041;        /* carbs                                        */
  --fat:#FFC123;          /* fat                                          */
  --fiber:#7CB87A;        /* fiber — green family, distinct from brand    */
  --calorie:#B0776F;      /* calories                                     */

  /* text */
  --text:#2A302A;
  --text-inv:#FCFFF5;
  --muted:#6F6A5E;
  --muted-inv:rgba(252,255,245,0.62);

  /* type — Syne display, DM Sans everything else */
  --font-display:'Syne',system-ui,sans-serif;
  --font-sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r:8px;
  --r-sm:5px;
  --maxw:1180px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Page-wide grain — visible tactile printed-map feel */
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  opacity:0.10; mix-blend-mode:multiply;
}

/* Section-level grain (drop .grain on a positioned element) */
.grain{ position:relative; }
.grain > *{ position:relative; z-index:2; }
.grain::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  opacity:0.14; mix-blend-mode:overlay;
}

/* Colored grainy texture for dark sections — use .grain-color + bg color var */
.grain-color{ position:relative; overflow:hidden; }
.grain-color > *{ position:relative; z-index:2; }
.grain-color::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='gc'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gc)'/%3E%3C/svg%3E");
  background-size:300px 300px;
  opacity:0.22; mix-blend-mode:soft-light;
}

/* ── Typography helpers ───────────────────────────── */
.display{
  font-family:var(--font-display); font-weight:800;
  letter-spacing:-0.035em; line-height:0.95;
}
/* Numbers: bold DM Sans, tabular figures — NOT mono */
.num{
  font-family:var(--font-sans); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted);
  font-family:var(--font-sans);
}

/* ── Layout shell ─────────────────────────────────── */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

/* ── Nav ──────────────────────────────────────────── */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; border-bottom:2px solid var(--line-ink);
  background:var(--paper); position:relative; z-index:20;
}
.nav-logo{ display:flex; align-items:center; text-decoration:none; gap:10px; }
.nav-logo img{ height:26px; width:auto; display:block; }
@media (max-width:640px){ .nav{ padding:16px 20px; } .nav-logo img{ height:22px; } }

/* ── Buttons ──────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:700; font-size:14px; line-height:1;
  padding:13px 22px; border-radius:100px; border:2px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .12s ease, background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-brand{ background:var(--brand); color:var(--ink); }
.btn-protein{ background:var(--protein); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-sm{ padding:9px 16px; font-size:13px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ── Macro route-bullet  (● value) ────────────────── */
.mb{ display:inline-flex; align-items:baseline; gap:7px; line-height:1; }
.mb::before{
  content:''; width:9px; height:9px; border-radius:50%;
  align-self:center; flex-shrink:0; background:var(--stone);
}
.mb .v{
  font-family:var(--font-sans); font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.mb .u{ font-size:.75em; color:var(--muted); }
.mb-protein::before{ background:var(--protein); }
.mb-carbs::before{ background:var(--carbs); }
.mb-fat::before{ background:var(--fat); }
.mb-fiber::before{ background:var(--fiber); }
.mb-cal::before{ background:var(--calorie); }
.mb-protein .v{ color:var(--protein); }

/* ── Accuracy nodes (filled = measured) ───────────── */
.nodes{ display:inline-flex; align-items:center; }
.node{
  width:11px; height:11px; border-radius:50%;
  border:2px solid var(--ink); background:transparent; flex-shrink:0;
}
.node.on{ background:var(--ink); }
.node-link{ width:9px; height:2px; background:var(--ink); opacity:.45; flex-shrink:0; }
.node-link.on{ opacity:1; }
.on-dark .node{ border-color:var(--paper); }
.on-dark .node.on{ background:var(--paper); }
.on-dark .node-link{ background:var(--paper); }

/* ── Attribute tag pills (dish classification) ─────── */
.attr-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-sans); font-size:11px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; white-space:nowrap;
}
.attr-tag svg{ width:13px; height:13px; flex-shrink:0; }
.attr-carb-load{ background:var(--fat); color:var(--ink); }
.attr-protein-dense{ background:var(--brand); color:#fff; }
.attr-filling{ background:var(--protein); color:#fff; }
.attr-high-fiber{ background:var(--carbs); color:#fff; }

/* ── Protein density bar ──────────────────────────── */
.density-bar-wrap{
  display:flex; align-items:center; gap:8px;
  flex:1; min-width:0;
}
.density-bar-track{
  flex:1; height:6px; border-radius:3px;
  background:var(--sand); overflow:hidden;
}
.density-bar-fill{
  height:100%; border-radius:3px;
  background:var(--brand);
  transition:width .3s ease;
}

/* ── Station card (restaurant in directory) ─────────── */
.station{
  display:block; text-decoration:none; color:inherit;
  background:var(--paper); border:2px solid var(--line-ink); border-radius:var(--r);
  overflow:hidden; transition:transform .14s ease, box-shadow .14s;
}
.station:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(42,48,42,0.12); }
.station-photo{ width:100%; height:150px; object-fit:cover; display:block; background:var(--sand); }
.station-no-photo{
  width:100%; height:150px; background:var(--sand);
  display:flex; align-items:center; justify-content:center;
}
.station-body{ padding:15px 17px; display:flex; align-items:flex-start; gap:10px; }
.station-node{ width:13px; height:13px; border-radius:50%; border:2.5px solid var(--brand); background:var(--paper); margin-top:3px; flex-shrink:0; }
.station-name{ font-weight:700; font-size:17px; letter-spacing:-0.01em; line-height:1.15; font-family:var(--font-display); }
.station-meta{ font-size:13px; color:var(--muted); margin-top:3px; }

/* ── Footer ───────────────────────────────────────── */
.foot{
  padding:26px 32px; background:var(--paper); border-top:2px solid var(--line-ink);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12px; color:var(--muted);
}
@media (max-width:640px){ .foot{ padding:24px 20px; } }

/* ── Shared modal ─────────────────────────────────── */
.modal-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(42,48,42,0.55); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.modal-overlay.visible{ opacity:1; pointer-events:all; }
.modal-card{
  background:var(--paper); border:2px solid var(--line-ink);
  border-radius:16px 16px 0 0; width:100%; max-width:440px;
  position:relative; overflow:hidden;
  transform:translateY(24px); transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.modal-overlay.visible .modal-card{ transform:translateY(0); }
@media (min-width:600px){
  .modal-overlay{ align-items:center; padding:24px; }
  .modal-card{ border-radius:16px; transform:translateY(16px); }
}
.modal-rail{ height:4px; background:linear-gradient(90deg,var(--protein) 0%,var(--brand) 60%,var(--fat) 100%); }
.modal-body{ padding:26px 26px 24px; }
.modal-close{
  position:absolute; top:12px; right:14px; width:28px; height:28px;
  background:none; border:none; font-size:18px; color:var(--muted); cursor:pointer;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background .15s,color .15s; z-index:2;
}
.modal-close:hover{ background:var(--sand); color:var(--ink); }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.field input{
  width:100%; padding:13px 14px; border:2px solid var(--line); border-radius:var(--r-sm);
  font-size:15px; font-family:var(--font-sans); color:var(--ink); background:#fff;
  outline:none; transition:border-color .15s;
}
.field input:focus{ border-color:var(--protein); }
.field input::placeholder{ color:var(--stone); }