/* PREVIEW — new metallic frame (newtop / newmid / newbottom at site root).
   Loads AFTER calendar-colors.css and overrides its old-art overlay layers.
   To go back to the old band: remove this <link> from index.html.

   Panel pattern: three stacked pieces that butt with NO margins.
     top    — newtop.png, fixed aspect, drawn once (includes the dials'
              shadow fade, so the tile below can be shadow-free)
     middle — newmid.png, a short seamless paper strip TILED vertically
              (repeat-y + 100% auto; never 100% 100% — stretching
              interpolates pixels and shifts colors)
     bottom — newbottom.png, fixed aspect, drawn once
   The frame's outer shadow lives on .container (one silhouette), not on
   the pieces — per-piece drop-shadows would band across the seams. */

/* ---- header: two explicit zones, laid out with flex (no magic offsets) ----
   Zone 1  .header-top-info    RG data band: name + one short line (venue /
                               mesa / estado) + the menu button. Real flow
                               content with its own height — never covered
                               by the art below.
   Zone 2  .header-gears-strip Decorative: the gears rail PNG at its fixed
                               aspect. Purely visual, holds no content. */
.rg-header {
  flex: none;
  display: flex;
  flex-direction: column;
}

.header-top-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 10px;
  /* wall tone sampled from the art, so the band blends into the strip's top edge */
  background: linear-gradient(#dcd9d4, #d7d4cf);
}

.header-titles { flex: 1; min-width: 0; }

.header-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  color: #3a3f45;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

.header-sub {
  margin-top: 2px;
  font-size: .78rem;
  line-height: 1.3;
  color: #6e6963;
}

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

.header-gears-strip {
  aspect-ratio: 1920 / 344;
  background: url('/newtop.png?v=2') center top / 100% auto no-repeat;
}

/* ---- middle: seamless paper strip tiled vertically behind the content ---- */
.container {
  padding-bottom: 0;
  box-shadow: 0 8px 18px rgba(6, 26, 82, 0.22);
}
.content {
  background: url('/newmid.png?v=2') center top / 100% auto repeat-y;
  padding-top: 8px;
  padding-bottom: 14px;
}

/* ---- bottom rail closes the frame ---- */
.calendar-bottom {
  aspect-ratio: 1920 / 125;
  background: url('/newbottom.png?v=2') center top / 100% auto no-repeat;
  margin-top: 0;
  filter: none;
  flex: none;
}
.calendar-bottom::before,
.calendar-bottom::after { content: none; }