/* ============================================================================
   ui.css — shared design tokens + components for the Miranesia web app.
   ONE definition, one place (AGENTS.md §1 "DRY"; docs/design-system.md).

   Linked by BOTH pages: index.html (event list) and event.html (event detail).
   Do NOT redefine the palette, .tag, .cta or .favstar inside a page's <style> —
   change it here so both pages move together. Page <style> blocks hold only
   layout that is unique to that page.

   The app is dark-only. Each page keeps a tiny inline `html{background:#0f1419}`
   so the dark bg paints before this stylesheet loads (no white flash on Android).
   ============================================================================ */

:root{
  color-scheme:dark;
  --bg:#0f1419; --card:#1a212b; --card2:#212a36; --line:#2c3744;
  --txt:#e8edf2; --muted:#9aa7b4; --accent:#ff6b35; --accent2:#4cc2a8; --danger:#e0697f;
  /* darker orange for FILLED buttons (white text on them): the bright --accent fails
     WCAG AA against white (2.8:1); this passes (4.8:1). Borders/icons keep --accent. */
  --accentfill:#c44a1a;
}

a{color:var(--accent2)}

/* ---- Tags / chips ----------------------------------------------------------
   The category / subcategory / format / audience chip. 6px rect, muted, sentence
   case. Emphasis is COLOUR (.cat = accent), never a different shape, size, or row.
   .cat-ico is an optional leading category glyph. */
.tag{display:inline-flex;align-items:center;font-size:.66rem;letter-spacing:.04em;
  background:var(--card2);border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:1px 7px}
.tag .cat-ico{width:11px;height:11px;margin-right:4px}
.tag.cat{color:var(--accent);border-color:rgba(255,107,53,.5);background:rgba(255,107,53,.12);
  font-weight:700;padding:2px 9px}

/* ---- Buttons ---------------------------------------------------------------
   Three tiers, the same on both pages:
     .cta          primary — the one action (filled accentfill, white text)
     .cta.ghost    secondary — outline (directions, share)
     .cta.text     tertiary — borderless text+icon (read more, back)
   .cta.sm is a compact size for secondary/tertiary uses. */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accentfill);
  color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;border:none;border-radius:10px;
  padding:11px 16px;cursor:pointer}
.cta:hover{filter:brightness(1.08)}
.cta:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.cta.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.cta.ghost:hover{border-color:var(--muted);filter:none}
.cta.text{background:transparent;border:none;color:var(--txt);padding:6px 8px;border-radius:8px}
.cta.text:hover{background:var(--card2);filter:none}
.cta.sm{padding:7px 12px;font-size:.85rem;border-radius:8px}

/* ---- Favourite star --------------------------------------------------------
   The Miranesia brand star: outline when unsaved, filled accent when saved.
   Toggle by putting .is-fav on the star OR any ancestor (card / button). When the
   star sits over a photo, override the glyph fill to var(--bg) locally so its
   interior reads on any image (see event.html .coverfav). */
.favstar{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.is-fav .favstar,.favstar.on{fill:currentColor;stroke:currentColor}

/* ---- Env badge -------------------------------------------------------------
   White-on-black subdomain overlay on the brand logo, added by env-badge.js on any
   non-production host (previews / localhost). Bottom-right of the logo graphic. */
.envbadge{background:#000;color:#fff;font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.02em;padding:2px 4px;border-radius:3px;border:1px solid rgba(255,255,255,.3);white-space:nowrap}
/* list wordmark: full subdomain, inline after "Miranesia" (on the wordmark line, off the slogan) */
.envbadge.inline{display:inline-block;vertical-align:middle;margin-left:7px}
/* detail brand star: compact tail tag pinned to the star's bottom-left */
.envbadge.corner{position:absolute;left:-3px;bottom:-6px;z-index:5;pointer-events:none;
  max-width:46px;overflow:hidden;text-overflow:ellipsis}