/* The app wearing the site's style: the shared layer.
   Loaded by _look_head.html on every non-Discover page (the app, the guide,
   sign-in, /start, the legal pages), after style.css and BEFORE the active
   theme-<style>.css (whose "app" section then wins at equal specificity),
   and only when a style is picked.

   The style's own theme file has already re-pinned style.css's colour tokens
   on html[data-discover-style], so every colour in the app follows it with
   no rule here. What this file adds is what colour tokens cannot carry: the
   style's TYPE (--font-body, --font-display), its LINES (--rule), its CORNERS
   (--radius) and its SHADOW (--shadow), on the app's own parts: the header,
   the list, the chips, the dialogs, the tab bar. Each theme file may add its
   own extras after this (its "app" section).

   Every rule is on html[data-discover-style] body:not(.disc): the public
   Discover pages load the same theme files and are styled by base.css, so
   none of this may reach them. Ids are repeated where style.css's own rule
   carries one (e.g. #menu-wrap > #btn-menu), so this layer wins by
   specificity, not by load order. */

html[data-discover-style] body:not(.disc) {
  font-family: var(--font-body); background: var(--ground); color: var(--ink);
}
html[data-discover-style] body:not(.disc) h1,
html[data-discover-style] body:not(.disc) h2,
html[data-discover-style] body:not(.disc) h3,
html[data-discover-style] body:not(.disc) .card .name,
html[data-discover-style] body:not(.disc) #view-tabs button,
html[data-discover-style] body:not(.disc) #settings-menu .menu-head {
  font-family: var(--font-display);
}
html[data-discover-style] body:not(.disc) button,
html[data-discover-style] body:not(.disc) input,
html[data-discover-style] body:not(.disc) select,
html[data-discover-style] body:not(.disc) textarea { font-family: inherit; }

/* ------------------------------------------------------------------ header
   The Discover top bar, not a coloured band: the page ground, the ink, one
   strong rule under it. The icon buttons are outlined in the style's rule. */
html[data-discover-style] body:not(.disc) header {
  background: var(--ground); color: var(--ink); border-bottom: 2px solid var(--ink);
}
html[data-discover-style] body:not(.disc) header h1 { color: var(--ink); }
html[data-discover-style] body:not(.disc) .header-actions > button,
html[data-discover-style] body:not(.disc) .header-actions > #menu-wrap > #btn-menu {
  background: transparent; color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius);
}
html[data-discover-style] body:not(.disc) .header-actions > button:hover,
html[data-discover-style] body:not(.disc) .header-actions > #menu-wrap > #btn-menu:hover {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
/* The 📍 in the app header and on the sign-in / sign-up card is an emoji
   glyph; the cute styles swap in their mascot (below). */
html[data-discover-style] body:not(.disc) .brand-mascot { display: none; }

/* ------------------------------------------------------------------ sidebar + list */
html[data-discover-style] body:not(.disc) #sidebar { background: var(--ground); border-right: 1px solid var(--rule); }
html[data-discover-style] body:not(.disc) #view-tabs button { color: var(--ink-dim); }
html[data-discover-style] body:not(.disc) #view-tabs button[aria-selected="true"] {
  color: var(--ink); border-bottom-color: var(--accent); border-bottom-width: 3px;
}
/* List rows are the style's venue rows: its surface, its rule, its corners,
   its shadow (a solid offset in the paper styles, a blur in cloud, none in
   the flat ones). */
html[data-discover-style] body:not(.disc) .card,
html[data-discover-style] body:not(.disc) .decide-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-top: 8px; margin-bottom: 8px;
}
html[data-discover-style] body:not(.disc) .card .name { color: var(--ink); font-size: .98rem; }
html[data-discover-style] body:not(.disc) .card .addr { color: var(--ink-dim); }
html[data-discover-style] body:not(.disc) .card .dist { color: var(--link-ink); }

html[data-discover-style] body:not(.disc) .chip {
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius);
}
/* Chips take the style's corners: square in the flat styles, where the
   category filters' coloured border-left reads as an edge stripe; the cute
   styles round them back into pills below. */
html[data-discover-style] body:not(.disc) .chip.active {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
html[data-discover-style] body:not(.disc) #search,
html[data-discover-style] body:not(.disc) #sort-row select,
html[data-discover-style] body:not(.disc) #btn-tools {
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius);
}
html[data-discover-style] body:not(.disc) #btn-tools.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ------------------------------------------------------------------ dialogs + menu */
html[data-discover-style] body:not(.disc) dialog {
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius);
}
html[data-discover-style] body:not(.disc) dialog button {
  background: transparent; color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius);
}
html[data-discover-style] body:not(.disc) dialog button.primary,
html[data-discover-style] body:not(.disc) .decide-card button.primary,
html[data-discover-style] body:not(.disc) .tour-actions .primary,
html[data-discover-style] body:not(.disc) #igt-empty-cta,
html[data-discover-style] body:not(.disc) .igt-map-cta {
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); font-weight: 600;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
html[data-discover-style] body:not(.disc) dialog input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-discover-style] body:not(.disc) dialog textarea,
html[data-discover-style] body:not(.disc) dialog select {
  background: var(--ground); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius);
}
html[data-discover-style] body:not(.disc) #settings-menu { background: var(--surface); color: var(--ink); border-radius: var(--radius); }
html[data-discover-style] body:not(.disc) #settings-menu button { color: var(--ink); border-radius: var(--radius); }
/* Option rows are buttons inside a dialog, but they are rows, not buttons:
   the dialog-button rules (and the cute styles' pills) must not reach them.
   button.theme-row out-ranks every "dialog button" rule here and in the
   theme files. */
html[data-discover-style] body:not(.disc) dialog button.theme-row,
html[data-discover-style] body:not(.disc) dialog button.mapstyle-row {
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
  border-radius: min(var(--radius), 14px);
}
/* style.css draws these ticks in --accent, which some styles use as a button
   ground (lemon, apricot) that does not read as text; --link-ink always does. */
html[data-discover-style] body:not(.disc) .theme-tick,
html[data-discover-style] body:not(.disc) .mapstyle-tick { color: var(--link-ink); }
html[data-discover-style] body:not(.disc) dialog button.theme-row.active,
html[data-discover-style] body:not(.disc) dialog button.mapstyle-row.active { border-color: var(--ink); background: var(--ground-2); }
html[data-discover-style] body:not(.disc) #toast { border-radius: var(--radius); }
html[data-discover-style] body:not(.disc) .leaflet-popup-content-wrapper { border-radius: var(--radius); }

/* ------------------------------------------------------------------ phone */
@media (max-width: 720px) {
  html[data-discover-style] body:not(.disc) #bottom-tabs { background: var(--ground); border-top: 2px solid var(--ink); }
  html[data-discover-style] body:not(.disc) #bottom-tabs button { color: var(--ink-dim); }
  html[data-discover-style] body:not(.disc) #bottom-tabs button[aria-selected="true"],
  html[data-discover-style] body:not(.disc) #bottom-tabs button[aria-expanded="true"] { color: var(--link-ink); font-weight: 700; }
  html[data-discover-style] body:not(.disc) #sidebar { border-top: 2px solid var(--ink); }
}

/* ------------------------------------------------------------------ the plain pages
   /guide, sign-in, sign-up and the legal pages are prose on the style's
   ground: its body type, its links, its rule on the tip boxes. */
html[data-discover-style] body:not(.disc) .pub a { color: var(--link-ink); }
html[data-discover-style] body:not(.disc) .tip {
  background: var(--ground-2); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink);
}

/* ------------------------------------------------------------------ the cute styles
   Sticker and cloud carry a mascot (--mascot, set in their theme file). It
   replaces the 📍 (a .brand-glyph / .brand-mascot pair in index.html's
   header and the sign-in / sign-up card) and greets an empty list. */
html[data-discover-style="sticker"] body:not(.disc) .brand-glyph,
html[data-discover-style="cloud"] body:not(.disc) .brand-glyph { display: none; }
html[data-discover-style="sticker"] body:not(.disc) .brand-mascot,
html[data-discover-style="cloud"] body:not(.disc) .brand-mascot {
  display: inline-block; width: 22px; height: 25px; vertical-align: -5px; margin-right: 4px;
  background: var(--mascot) no-repeat center / contain;
}
html[data-discover-style="sticker"] body:not(.disc) .igt-empty::before,
html[data-discover-style="cloud"] body:not(.disc) .igt-empty::before {
  content: ""; display: block; width: 64px; height: 72px; margin: 4px auto 0;
  background: var(--mascot) no-repeat center / contain;
}
html[data-discover-style="sticker"] body:not(.disc) .chip,
html[data-discover-style="cloud"] body:not(.disc) .chip { border-radius: 999px; font-weight: 600; }
html[data-discover-style="sticker"] body:not(.disc) dialog button,
html[data-discover-style="cloud"] body:not(.disc) dialog button,
html[data-discover-style="sticker"] body:not(.disc) #search,
html[data-discover-style="cloud"] body:not(.disc) #search,
html[data-discover-style="sticker"] body:not(.disc) .decide-card button.primary,
html[data-discover-style="cloud"] body:not(.disc) .decide-card button.primary,
html[data-discover-style="sticker"] body:not(.disc) #igt-empty-cta,
html[data-discover-style="cloud"] body:not(.disc) #igt-empty-cta { border-radius: 999px; }
html[data-discover-style="sticker"] body:not(.disc) #btn-tools,
html[data-discover-style="cloud"] body:not(.disc) #btn-tools { border-radius: 50%; }
html[data-discover-style="sticker"] body:not(.disc) dialog,
html[data-discover-style="cloud"] body:not(.disc) dialog { border-radius: 24px; }
@media (max-width: 720px) {
  html[data-discover-style="sticker"] body:not(.disc) #bottom-tabs,
  html[data-discover-style="cloud"] body:not(.disc) #bottom-tabs { border-radius: 22px 22px 0 0; }
  html[data-discover-style="sticker"] body:not(.disc) #sidebar,
  html[data-discover-style="cloud"] body:not(.disc) #sidebar { border-radius: 22px 22px 0 0; }
}