/* Themed frame — the art set (top / mid / bottom under /backgrounds/) is
   picked per gathering. rg.js reads Config.Theme (or the viewer's local
   override), fills the --art-* variables and toggles body.ink-light for
   dark sets. Defaults below = theme 1 (metallic gears), so the shell looks
   right before any data arrives.

   Panel pattern: three stacked pieces that butt with NO margins.
     top    — topN.png, 1920x720, drawn once behind the WHOLE header
              (bottom-anchored; the art carries its own plain sky/wall at
              the top, which rises behind the title band)
     middle — midN.png, a short seamless strip TILED vertically
              (repeat-y + 100% auto; never 100% 100% — stretching
              interpolates pixels and shifts colors)
     bottom — bottomN.png, 1920x125, drawn once
   Every top's first pixel row equals --art-fill, and every mid equals the
   top's last row, so the three pieces meet without visible seams. */

:root {
  --art-top: url('/backgrounds/top1.webp');
  --art-mid: url('/backgrounds/mid1.png');
  --art-bottom: url('/backgrounds/bottom1.png');
  --art-fill: #dad5d1;
}

/* ---- header: the info band floats over the art's plain upper region ---- */
.rg-header {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Taller than the 1920x720 art on purpose: the extra height fills with
     the flat sky color (every top's first row == --art-fill), giving the
     title/venue band breathing room above the art.
     NOT aspect-ratio (which encodes the same 1920/880 box): older iOS
     WebKit mis-resolves aspect-ratio flex items — width came out as
     ratio × content height, making the whole header wider than the phone
     ("header is too wide"). Height is computed instead: the container is
     min(100vw, 430px), so ratio × width = min(45.8334vw, 197.1px) — plain
     math every engine since iOS 11 gets right. Keep in sync with the
     430px container cap. */
  height: min(45.8334vw, 197.1px);
  background: var(--art-top) center bottom / 100% auto no-repeat, var(--art-fill);
}

.header-top-info {
  display: flex;
  align-items: center;
  gap: 12px;
  /* air above the title; the tall header supplies the gap below.
     max(16px, safe-area) keeps the icons off the iPhone notch corner. */
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 12px
           max(16px, env(safe-area-inset-left, 0px));
}

/* overflow:hidden is load-bearing: iOS Safari ignores min-width:0 on a flex
   item whose nowrap children set the intrinsic width — without it the titles
   take the full band and shove all four icons off the right edge. */
.header-titles { flex: 1; min-width: 0; overflow: hidden; }

.header-name {
  margin: 0;
  /* The ONE themed font in the app (rg.js sets --font-display per theme
     category); everything else stays in Atkinson Hyperlegible. */
  font-family: var(--font-display, inherit);
  font-size: clamp(24px, 6.5vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  color: #3a3f45;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  /* ONE line always: rg.js shrinks the font to fit (fitTitle); if even the
     18px floor can't hold a marathon name, it ellipsizes. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-sub {
  margin-top: 3px;
  font-size: .9rem;
  line-height: 1.3;
  color: #6e6963;
  /* ONE line: a long hotel name ellipsizes, the phone always survives */
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
}
.header-sub .vlink:first-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-sub .vsep, .header-sub .vlink[href^="tel"] { flex: none; }
/* venue → Maps, phone → dialer; inherit the ink so dark themes stay legible */
.header-sub .vlink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.header-sub .vlink i { font-size: .85em; opacity: .8; }
.header-sub .vsep { opacity: .6; margin: 0 2px; }

/* Menu button is a flex item at the band's right edge (was absolute) */
#qr-btn {
  position: static;
  flex: none;
}

/* Spacer that keeps the art's lower (busy) region free of content */
.header-gears-strip { flex: 1; }

/* ---- middle: seamless strip tiled vertically behind the content ---- */
.container {
  padding-bottom: 0;
  box-shadow: 0 8px 18px rgba(6, 26, 82, 0.22);
}
/* ---- content: flat paper color matching the art's bottom edge ---- */
.content {
  background: var(--art-paper, var(--art-fill));
  padding-top: 8px;
  padding-bottom: 20px;
}

/* the old mid/bottom art strips are retired — flat color runs to the end */
.calendar-bottom { display: none; }

/* ---- dark sets (Cosmic, Coral, Neural net, Quantum, Music, Cinema):
        light ink for everything drawn directly on the art/paper.
        Cards keep their own white background and dark text. ---- */
body.ink-light .header-name { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
body.ink-light .header-sub { color: rgba(255, 255, 255, .78); }
body.ink-light .ico {
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .14);
}
body.ink-light #tg-done.on { color: #fff; }
body.ink-light .event-meta,
body.ink-light .event-meta .venue,
body.ink-light .empty,
body.ink-light .updated { color: rgba(255, 255, 255, .85); }