/* ==========================================================================
   Singleton Tonight — styles
   Layout: one phone-width column. Sticky top (brand, day pills, filters),
   scrolling venue cards, fixed bottom banner and tab bar.
   Light and dark: <html data-appearance="light|dark"> is set before the
   page draws (index.html) from More → Appearance (Auto follows the phone).
   ========================================================================== */

:root {
  /* Colour: dark (navy + gold) */
  --bg: #0a0e17;          /* page: near-black navy */
  --surface: #111725;     /* cards */
  --surface-2: #19202f;   /* raised: pills, rows, sheet */
  --line: #2a3142;        /* hairlines */
  --gold: #d4af37;        /* accent for text, icons and outlines */
  --gold-fill: #d4af37;   /* solid gold behind dark text (buttons, time badges) */
  --gold-soft: rgba(212, 175, 55, 0.14);
  --gold-line: rgba(212, 175, 55, 0.38);
  --text: #f2eee4;        /* off-white */
  --text-2: #aeb4c2;      /* secondary */
  --text-3: #7d8496;      /* captions */
  --on-gold: #14110a;
  --danger: #e2725b;
  --danger-text: #f09a86;
  --shadow: 0 6px 18px rgba(0, 0, 0, .28);
  --backdrop: rgba(3, 5, 10, .72);
  --live: #7fd8a4;        /* "On now" */
  --live-bg: rgba(127, 216, 164, .12);
  --live-line: rgba(127, 216, 164, .35);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.72rem;
  --fs-sm: 0.82rem;
  --fs-md: 0.94rem;
  --fs-lg: 1.06rem;
  --fs-xl: 1.32rem;

  /* Shape & space */
  --radius: 14px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --tabbar-h: 60px;
  --banner-h: 80px; /* the Idle Ideas banner's own height since 31 Oct 2026 */
  --bottom-h: calc(var(--tabbar-h) + var(--banner-h) + env(safe-area-inset-bottom, 0px));
  --max-w: 560px;

  color-scheme: dark;
}

/* Colour: light (warm paper, deeper gold so text stays readable) */
:root[data-appearance="light"] {
  --bg: #f6f3ec;
  --surface: #ffffff;
  --surface-2: #efebe2;
  --line: #ddd6c8;
  --gold: #7c5d08;
  --gold-fill: #d4af37;
  --gold-soft: rgba(212, 175, 55, 0.18);
  --gold-line: rgba(124, 93, 8, 0.28);
  --text: #1c1a15;
  --text-2: #4d483e;
  --text-3: #6b665a;
  --danger: #b3401f;
  --danger-text: #b3401f;
  --shadow: 0 1px 2px rgba(28, 26, 21, .05), 0 8px 22px -12px rgba(28, 26, 21, .22);
  --backdrop: rgba(28, 26, 21, .42);
  --live: #1f6f4a;
  --live-bg: #e1f1e8;
  --live-line: rgba(31, 111, 74, .3);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Opening screen (index.html): Idle Ideas spins round to Singleton Tonight ---------- */
#opening {
  position: fixed; inset: 0; z-index: 2147483600;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: #0a0e17; color: #f2eee4; /* the brand's own colours, in light and dark */
  opacity: 1; transition: opacity .5s ease;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
  padding: env(safe-area-inset-top, 0px) 24px env(safe-area-inset-bottom, 0px);
}
#opening[hidden] { display: none; }
#opening.op-out { opacity: 0; }
#opening.op-quick { transition-duration: .25s; }
.op-stage { width: min(56vw, 230px); aspect-ratio: 1; perspective: 1000px; margin-top: -40px; }
.op-coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: op-spin 1.2s cubic-bezier(.5, .05, .2, 1) .55s both; }
.op-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.op-front { background: #f2eee4; box-shadow: 0 0 0 4px #d4af37, 0 18px 40px rgba(0, 0, 0, .45); }
.op-front img { width: 82%; height: auto; display: block; }
.op-back { transform: rotateY(180deg); background: radial-gradient(circle at 50% 40%, #1e2a47, #0a0e17 70%); box-shadow: 0 0 0 4px #d4af37, 0 18px 40px rgba(0, 0, 0, .45); }
.op-back img { width: 56%; height: auto; display: block; margin-top: -4%; }
.op-words { text-align: center; opacity: 0; animation: op-in .45s ease 1.7s both; }
.op-name { font-size: clamp(1.7rem, 8vw, 2.2rem); font-weight: 800; letter-spacing: -.01em; }
.op-name span { color: #d4af37; }
.op-tag { margin-top: 6px; font-size: var(--fs-sm); color: #aeb4c2; }
@keyframes op-spin { from { transform: rotateY(0deg); } to { transform: rotateY(540deg); } }
@keyframes op-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Reduced motion: no spin, the logos swap with a fade */
#opening.op-still .op-coin { animation: none; }
#opening.op-still .op-front { animation: op-fade-out .4s ease 1s both; }
#opening.op-still .op-back { transform: none; opacity: 0; animation: op-in .4s ease 1s both; }
#opening.op-still .op-words { animation: op-in .4s ease 1.2s both; }
@keyframes op-fade-out { to { opacity: 0; } }

/* ---------- Sticky top ---------- */
.app-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  padding-bottom: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.crest { width: 38px; height: 45px; flex: none; display: block; }
.brand-text { min-width: 0; }

/* Beside the title: "A free app from Idle Ideas" (a link to the website) and the Share button */
.ii-link { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; border-radius: 10px; }
.ii-link .ii-mark { width: 34px; height: 34px; border-radius: 9px; }
.ii-words { display: block; line-height: 1.15; }
.ii-words small { display: block; font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .02em; }
.ii-words b { display: block; font-size: var(--fs-sm); color: var(--gold); font-weight: 750; }
.share-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: var(--surface);
  color: var(--gold);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
}
.share-pill svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Phones: no room for the Idle Ideas link beside the title, and a smaller Share button keeps the title on one line */
@media (max-width: 539px) {
  .ii-link { display: none; }
  .share-pill { margin-left: auto; height: 40px; padding: 0 12px 0 10px; gap: 5px; font-size: .88rem; }
}
@media (max-width: 374px) {
  .share-pill svg { display: none; }
  .share-pill { padding: 0 13px; }
}
.brand h1 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.brand h1 span { color: var(--gold); }
.brand p {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.controls { display: grid; gap: 8px; margin-top: 12px; }

/* Horizontally scrolling rows of pills/chips */
.scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  scroll-padding-left: var(--gutter-l);
}
.scroller::-webkit-scrollbar { display: none; }

/* Day pills: label + date, gold when selected */
.day-pill {
  flex: none;
  min-width: 64px;
  min-height: 52px;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  gap: 0;
  line-height: 1.15;
  transition: background-color .15s, border-color .15s, color .15s;
}
.day-pill b { font-size: var(--fs-sm); font-weight: 700; }
.day-pill small { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.day-pill[aria-pressed="true"] {
  background: var(--gold-fill);
  border-color: var(--gold-fill);
  color: var(--on-gold);
}
.day-pill[aria-pressed="true"] small { color: var(--on-gold); opacity: .75; }

/* Filter chips */
.chip {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold);
}

/* ---------- Main ---------- */
main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  padding-top: 14px;
  padding-bottom: calc(var(--bottom-h) + 28px);
  outline: none;
}

#view.fade { animation: fade .22s ease-out; }
@keyframes fade { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 2px 12px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.summary strong { color: var(--text); }
.summary .updated { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }

.list { display: grid; gap: 12px; }

/* ---------- Venue card ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  box-shadow: var(--shadow);
}
.card-head { display: flex; align-items: center; gap: 12px; }
.card-head .who { flex: 1; min-width: 0; }

/* The venue name button stretches over the whole card (open detail) */
.open-venue {
  all: unset;
  display: block;
  font-size: var(--fs-lg);
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}
.open-venue::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.open-venue:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 2px; }
.who .sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

/* Circular venue logo / monogram (bright gold on a dark disc in both themes) */
.logo {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-fill);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--gold-fill);
  overflow: hidden;
}
.logo img { width: 100%; height: 100%; object-fit: cover; }
.logo.sm { width: 36px; height: 36px; font-size: 0.72rem; }

/* Favourite star sits above the stretched link */
.fav {
  position: relative;
  z-index: 2;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px -8px -6px 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--text-3);
  border-radius: 50%;
}
.fav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.fav[aria-pressed="true"] { color: var(--gold); }
.fav[aria-pressed="true"] svg { fill: currentColor; }

/* Share button beside the star (also above the stretched link) */
.card-btn {
  position: relative;
  z-index: 2;
  flex: none;
  width: 40px;
  height: 44px;
  margin: -6px -10px -6px 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--text-3);
  border-radius: 50%;
}
.card-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Small line icons inside text and buttons */
.ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico circle { fill: currentColor; stroke: none; }

/* Small outlined button (Add to calendar) */
.mini-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 11px;
  margin: -4px 0;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: transparent;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Specials inside a card */
.specials { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.special {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.special .what { min-width: 0; }
.special .title { font-size: var(--fs-md); font-weight: 650; line-height: 1.3; }
.special .price { color: var(--gold); font-variant-numeric: tabular-nums; margin-right: 4px; }
.special .detail { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
/* Tonight's board, posted by the venue: one dish a line */
.board-lines { white-space: pre-line; }
.special .detail.board-lines { color: var(--text); line-height: 1.5; }
.special .posted, .note .posted { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-3); }
.note .board-lines { display: block; margin-top: 2px; }
.special .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.badges { display: grid; gap: 4px; justify-items: end; align-content: start; }

.badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.badge.time { background: var(--gold-fill); color: var(--on-gold); font-variant-numeric: tabular-nums; }
.badge.type { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.badge.members { background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line); }
.badge.check { color: var(--text-2); border: 1px dashed var(--text-3); }
.badge.event { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.badge.closed { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }

/* "On now" / "In 40 min" / "Earlier tonight" (tonight's list) */
.badge.when.soon { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.badge.when.on { background: var(--live-bg); color: var(--live); border: 1px solid var(--live-line); }
.badge.when.on::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .3; } }
.badge.when.done { color: var(--text-3); border: 1px solid var(--line); }
.special.done .title, .special.done .detail, .special.done .badges { opacity: .55; }

/* Courtesy bus line on a card */
.bus-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.bus-line .ico { width: 18px; height: 18px; color: var(--gold); }
.bus-line span { flex: 1; min-width: 0; }
.bus-call {
  position: relative;
  z-index: 2;
  flex: none;
  min-height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
}

.card-note { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- Quiet venues (no specials listed) ---------- */
.quiet {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.quiet summary {
  list-style: none;
  cursor: pointer;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-weight: 600;
}
.quiet summary::-webkit-details-marker { display: none; }
.quiet summary::after { content: "+"; font-size: 1.2rem; color: var(--gold); }
.quiet[open] summary::after { content: "−"; }

.row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  text-align: left;
}
.row .who { flex: 1; min-width: 0; }
.row .name { font-weight: 650; font-size: var(--fs-md); }
.row .sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }
.row .chev { color: var(--text-3); flex: none; }

/* ---------- Venues screen ---------- */
.section-title {
  margin: 4px 2px 12px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  font-weight: 700;
}
.venue-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.venue-list .row:first-child { border-top: 0; }
.row .now { font-size: var(--fs-sm); color: var(--text-2); margin-top: 3px; }
.row .now b { color: var(--gold); font-weight: 650; }

/* ---------- Empty states ---------- */
.empty {
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--text-2);
}
.empty h2 { margin: 0 0 6px; font-size: var(--fs-lg); color: var(--text); }
.empty p { margin: 0 auto; max-width: 32ch; font-size: var(--fs-sm); }
.empty button { margin-top: 16px; }

/* ---------- More screen ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.panel h2 { margin: 0 0 6px; font-size: var(--fs-lg); }
.panel p { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text-2); max-width: 60ch; }
.panel p:last-child { margin-bottom: 0; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); padding: 6px 0; }
.kv span:first-child { color: var(--text-3); }
.kv span:last-child { font-variant-numeric: tabular-nums; }

.btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--gold-fill);
  background: var(--gold-fill);
  color: var(--on-gold);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.btn.ghost { background: transparent; color: var(--gold); border-color: var(--gold); }

.links { list-style: none; margin: 0; padding: 0; }
.links li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.links li:first-child { border-top: 0; }
.links .n { font-weight: 650; min-width: 0; }
.links .l { display: flex; gap: 14px; flex: none; }
.links a { color: var(--gold); text-decoration: none; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.links .none { color: var(--text-3); font-size: var(--fs-xs); }

/* ---------- For venues ---------- */
.venue-cta {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px dashed var(--gold-line);
  background: var(--gold-soft);
  display: grid;
  gap: 10px;
  justify-items: start;
}
.venue-cta p { margin: 0; font-size: var(--fs-sm); color: var(--text); max-width: 46ch; }
.venue-cta p b { color: var(--gold); }
.venue-cta .source-note { font-size: var(--fs-xs); color: var(--text-2); padding-bottom: 10px; border-bottom: 1px dashed var(--gold-line); max-width: none; justify-self: stretch; }

/* One-time "Add to your home screen" tip (top of Tonight) */
.install-tip {
  margin: 0 0 14px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--gold-line);
  background: var(--gold-soft);
}
.tip-title { display: block; font-size: var(--fs-md); margin-bottom: 4px; }
.install-tip p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.install-tip p b { color: var(--text); }
.install-tip .ico { width: 16px; height: 16px; vertical-align: -3px; color: var(--gold); }
.tip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.page-title { margin: 2px 0 6px; font-size: var(--fs-xl); line-height: 1.2; text-wrap: balance; }
.lede { margin: 0 0 18px; font-size: var(--fs-md); color: var(--text-2); max-width: 52ch; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.choices input:checked + label { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }
.choices input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Links out to the venue form on the website, styled as buttons */
a.btn.link-out { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: var(--fs-xs); }
.fine { margin: 18px 0 0; font-size: var(--fs-xs); color: var(--text-3); }
.fine a { color: var(--gold); }

/* ---------- Detail sheet (dialog) ---------- */
dialog#detail {
  padding: 0;
  border: 0;
  margin: auto auto 0;
  width: 100%;
  max-width: var(--max-w);
  max-height: 92dvh;
  background: transparent;
  color: var(--text);
}
dialog#detail::backdrop { background: var(--backdrop); }
dialog#detail[open] .sheet { animation: rise .24s ease-out; }
@keyframes rise { from { transform: translateY(32px); } to { transform: none; } }

.sheet {
  background: var(--surface-2);
  border: 1px solid var(--gold-line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px var(--gutter-r) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
}
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-head h2 { margin: 0; font-size: var(--fs-xl); line-height: 1.15; text-wrap: balance; }
.sheet-head .sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: 3px; }
.sheet-head .who { flex: 1; min-width: 0; }
.close {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid; place-items: center;
  font-size: 1.3rem; line-height: 1;
  color: var(--text-2);
}
.sheet .desc { font-size: var(--fs-sm); color: var(--text-2); margin: 12px 0 0; }
.sheet .note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  font-size: var(--fs-sm);
  color: var(--text);
}
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.actions a, .actions button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: transparent;
  color: var(--gold);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 650;
}

/* Courtesy bus details in the venue sheet */
.bus {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 6px;
  justify-items: start;
}
.bus-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.bus-head .ico { width: 20px; height: 20px; color: var(--gold); }
.bus p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.bus .bus-check { font-size: var(--fs-xs); color: var(--text-3); }
.bus .btn { margin-top: 4px; display: inline-flex; align-items: center; text-decoration: none; }
.facts { margin-top: 14px; font-size: var(--fs-sm); }
.facts .kv { border-top: 1px solid var(--line); }
.facts .kv span:last-child { text-align: right; user-select: text; }

.week { list-style: none; margin: 16px 0 0; padding: 0; }
.week > li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.week .d { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); padding-top: 1px; }
.week .d small { display: block; font-weight: 500; color: var(--text-3); font-size: var(--fs-xs); }
.week li.today .d { color: var(--gold); }
.week .items { display: grid; gap: 8px; min-width: 0; }
.week .it .title { font-weight: 650; font-size: var(--fs-sm); }
.week .it .detail { font-size: var(--fs-xs); color: var(--text-2); margin-top: 1px; }
.week .it .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.week .none { font-size: var(--fs-sm); color: var(--text-3); }
.status-line { margin-top: 14px; font-size: var(--fs-xs); color: var(--text-3); }
.owner {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* ---------- Share with friends ---------- */
.icon-btn {
  flex: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--gold);
  display: grid;
  place-items: center;
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.share-lede { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.qr-card {
  margin: 16px auto 0;
  width: min(100%, 248px);
  padding: 12px;
  background: #fff; /* QR codes scan best dark-on-white, in either theme */
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.qr-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.share-url { margin: 12px 0 0; text-align: center; font-weight: 700; font-size: var(--fs-sm); color: var(--gold); overflow-wrap: anywhere; }
.share-count { margin: 10px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text); }
.share-count b { color: var(--gold); }
.share-more { margin: 6px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-2); }
.share-more a { color: var(--gold); font-weight: 650; }
.share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }

/* ---------- Appearance (More tab) ---------- */
.panel .choices { margin: 4px 0 8px; }

/* ---------- Idle Ideas sign-off (end of each screen) ---------- */
.made-by {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 28px auto 0;
  padding: 8px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: 1.3;
}
.made-by b { display: block; color: var(--text-2); font-size: var(--fs-sm); font-weight: 650; }
.made-by .ii-mark { width: 32px; height: 32px; border-radius: 8px; flex: none; }

/* ---------- Pull to refresh ---------- */
.ptr {
  height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: height .2s;
}
.ptr.active { transition: none; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bottom-h) + 12px);
  z-index: 40;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 650;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
/* Inside an open sheet, show it at the top so it never covers the QR code */
dialog .toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 16px); }

/* ---------- Bottom: Idle Ideas banner + tab bar ---------- */
.bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Theme for the shared <idle-ideas-banner> (idle-banner.js) */
idle-ideas-banner {
  display: block;
  min-height: var(--banner-h);
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  --iib-height: var(--banner-h);
  --iib-bg: transparent;
  --iib-fg: var(--text);
  --iib-muted: var(--text-2);
  --iib-accent: var(--gold);
  --iib-border: var(--line);
  --iib-chip-bg: var(--surface-2);
  --iib-chip-fg: var(--text-2);
}

.tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.tabbar a {
  min-height: var(--tabbar-h);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.tabbar circle { fill: currentColor; stroke: none; }
.tabbar a[aria-current="page"] { color: var(--gold); }
.tabbar a[aria-current="page"] path { fill: var(--gold-soft); }

/* ---------- Weather (day pills and the line above each night's list) ---------- */
.day-pill { position: relative; }
.day-pill .wx {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.day-pill .wx .ico { width: 15px; height: 15px; color: var(--gold); stroke-width: 1.9; }
.day-pill[aria-pressed="true"] .wx,
.day-pill[aria-pressed="true"] .wx .ico { color: var(--on-gold); }

/* A big day or public holiday on that night */
.day-dot { display: inline-block; width: 6px; height: 6px; margin-left: 4px; vertical-align: 2px; border-radius: 50%; background: var(--gold); }
.day-pill[aria-pressed="true"] .day-dot { background: var(--on-gold); }

.wx-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.wx-ico { flex: none; width: 26px; height: 26px; margin-top: 1px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wx-text { flex: 1; min-width: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-2); }
.wx-text b { color: var(--text); font-variant-numeric: tabular-nums; }
.wx-when { font-weight: 700; color: var(--text); margin-right: 2px; }
.wx-small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }
.wx-wet { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--text); }

/* A button that reads like a link (Getting home, venue names) */
.link-btn {
  all: unset;
  display: inline-block;
  padding: 4px 0;
  margin: -4px 0;
  color: var(--gold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* Melbourne Cup Day, public holidays and the like */
.day-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--gold-line);
  background: var(--gold-soft);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.day-note b { color: var(--gold); margin-right: 4px; }
.week .week-big { font-size: var(--fs-xs); font-weight: 700; color: var(--gold); }

/* ---------- Getting home: courtesy buses and the taxi ---------- */
.getting-home {
  margin-top: 18px;
  padding: 4px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.getting-home h2 {
  margin: 10px 0 6px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  font-weight: 700;
}
.gh-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.gh-row .ico { width: 20px; height: 20px; color: var(--gold); }
.gh-text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: var(--fs-sm); }
.gh-text b { color: var(--text); }
.gh-text .link-btn { justify-self: start; }
.gh-text small { font-size: var(--fs-xs); color: var(--text-3); }

.taxi-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.taxi-line .ico { width: 20px; height: 20px; color: var(--gold); }
.taxi-line span { flex: 1; min-width: 0; }
.taxi-line b { color: var(--text); }

/* ---------- "Sent by the venue" tick ---------- */
.from-venue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--live);
}
.from-venue .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.from-venue.inline { margin: 0; vertical-align: -2px; }
.from-venue.mini { margin: 0 0 0 2px; vertical-align: -2px; }
.sheet-tick { margin-top: 12px; }
.status-line.from-venue { display: flex; align-items: flex-start; gap: 6px; font-weight: 500; color: var(--text-2); }
.status-line.from-venue .ico { margin-top: 1px; color: var(--live); }

/* ---------- This weekend, as pictures ---------- */
.pic-wrap { margin-top: 14px; display: grid; gap: 4px; }
.pic-how { margin: 0; font-size: var(--fs-sm); color: var(--text-2); text-align: center; }
.pic-night { margin: 14px 0 0; display: grid; justify-items: center; gap: 2px; }
.pic-save { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--gold); text-decoration: none; }
.post-text { width: 100%; min-height: 220px; margin-top: 12px; padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.4; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
.post-text[hidden] { display: none; }
.pic { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.pic-wait { margin: 24px 0; text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
.pic-note { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
.share-actions a.btn { display: inline-flex; align-items: center; text-decoration: none; }

@media (min-width: 600px) {
  .tabbar { grid-template-columns: repeat(4, minmax(0, 140px)); justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Idle Ideas mark (80×80 WebP, same image as the banner uses) */
.ii-mark { display: inline-block; background: #3a2414 url(data:image/webp;base64,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) center / cover no-repeat; }