/* =======================================================================
   billcase.css — THE BILL BEHIND THE GLASS

   The look of the poster case beside a venue's door. The engine is
   js/bill-case.js; it builds the markup off js/gig-answer.js and sets one
   variable (--bc-accent, the venue's own colour), and everything below
   dresses it. Same split as css/gigboard.css, css/archive.css and
   css/hud.css: the LOOK lives here, the venue supplies its colour.

   ================= THREE SHEETS, THREE OBJECTS =================
   css/archive.css is a BOUND LEDGER a bar keeps behind the counter - gilt,
   precious, about nights that happened. css/gigboard.css is a CHEAP MONTH
   tacked to a wall with drawing pins, curling at one corner, about nights
   that have not. This is neither: it is a printed BILL in a locked brass
   case, lit from inside, bolted to the front of a theatre. So it is glazed -
   there is a sheen across it and a frame around it - it is upright and
   formal like a playbill, and unlike the other two it is BEHIND something.
   Sharing a stylesheet would have made them one object with different text.

   ================= A WASH, NOT A FILL =================
   Inherited from the book, the board and the pool table, for the same
   reason: the street stays visible behind it. You have walked up to a case
   on a wall and are reading it - you have not left for a page.

   ================= AND IT IS DRAWN, NOT PHOTOGRAPHED =================
   reference/style/STYLE.txt: saturated, chunky, flat, cheerful. Every fill
   in here is one flat colour; the light varies BETWEEN surfaces (the frame,
   the glass, the paper, the ink) and never inside one. The only gradients
   are the two this object genuinely has - the sheen on the glass and the
   lamp inside the case - and both are on their own layer over a flat fill,
   never a soft ramp inside a paper surface.
   ======================================================================= */

.bc{
  --bc-accent:#ffb43a;          /* the venue's own colour, set by the host */
  --bc-paper:#f4e7c4;           /* the bill */
  --bc-paper2:#fdf6e2;          /* where the case lamp catches it */
  --bc-ink:#22160f;             /* what is printed on it */
  --bc-red:#b3302c;             /* the second ink every playbill is run in */
  --bc-brass:#c9973f;
  --bc-dim:rgba(34,22,15,.60);
  --bc-rule:rgba(34,22,15,.22);

  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
          max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background:radial-gradient(ellipse at 50% 45%,
              rgba(6,4,10,.50) 0%, rgba(3,2,6,.86) 78%);
  color:var(--bc-ink);
  font-family:"Courier New", Courier, monospace;
  opacity:0; transition:opacity .2s ease;
}
.bc.is-in{ opacity:1; }

/* THE CASE. The brass box: a heavy frame, and the bill inset in it. Capped
   in both directions - a playbill stretched across a desktop stops being a
   playbill, and the real thing is taller than it is wide. */
.bc__sheet{
  position:relative;
  width:min(720px, 100%);
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:10px;
  background:
    linear-gradient(180deg, #e0ab52, var(--bc-brass) 42%, #8f6526);
  border-radius:5px;
  box-shadow:0 26px 60px rgba(0,0,0,.62),
             0 0 0 2px rgba(0,0,0,.42),
             0 2px 0 rgba(255,255,255,.30) inset;
  transform:translateY(10px) scale(.986);
  transition:transform .24s cubic-bezier(.22,.72,.24,1);
}
.bc.is-in .bc__sheet{ transform:translateY(0) scale(1); }
@media (prefers-reduced-motion:reduce){
  .bc, .bc__sheet, .bc.is-in .bc__sheet{ transition:none; }
}

/* THE BILL, inside the frame, with the case lamp above it. */
.bc__frame{
  position:relative;
  padding:22px 22px 16px;
  background:var(--bc-paper);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset,
             0 8px 22px rgba(0,0,0,.30) inset;
}
/* the lamp in the top of the case, and the sheen of the glass over
   everything - the two layers that say THIS IS BEHIND GLASS. Both are
   pointer-events:none so they never eat a click. */
.bc__frame::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,242,206,.72) 0%, rgba(255,240,200,.16) 16%, rgba(255,240,200,0) 34%);
}
.bc__sheet::after{
  content:""; position:absolute; inset:10px; pointer-events:none;
  background:linear-gradient(114deg,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 26%,
    rgba(255,255,255,0) 44%, rgba(255,255,255,0) 100%);
}

.bc__x{
  position:absolute; top:2px; right:4px; z-index:3;
  width:38px; height:38px; padding:0;
  border:0; border-radius:50%;
  background:rgba(20,12,8,.55); color:#ffe9bd;
  font:700 17px/1 "Courier New", Courier, monospace;
  cursor:pointer;
}
.bc__x:hover{ background:rgba(20,12,8,.78); }
.bc__x:focus-visible{ outline:2px solid var(--bc-accent); outline-offset:2px; }

/* ---------------- the head ---------------- */
.bc__head{
  position:relative; z-index:2;
  text-align:center;
  padding-bottom:12px;
  border-bottom:3px double var(--bc-rule);
}
.bc__kicker{
  margin:0 0 4px; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bc-red);
}
.bc__head h2{
  margin:0; font-size:clamp(19px, 4.4vw, 28px); line-height:1.1;
  letter-spacing:.04em; text-transform:uppercase;
  font-family:Impact, "Arial Narrow", Haettenschweiler, sans-serif;
}
.bc__where{
  margin:5px 0 0; font-size:11.5px; letter-spacing:.1em; color:var(--bc-dim);
  text-transform:uppercase;
}

/* ---------------- every week ----------------
   The shape of the room's week, above the dated lists, because "which night
   do I turn up" is a question about the WEEK and a dated column answers it
   only by accident. */
.bc__wk{ position:relative; z-index:2; margin:12px 0 2px; }
.bc__wk h3, .bc__col h3{
  margin:0 0 7px; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bc-red);
}
.bc__standing{ margin:0; padding:0; list-style:none; }
.bc__standing li{
  padding:3px 0; font-size:12.5px; line-height:1.35;
  border-bottom:1px dotted var(--bc-rule);
}
.bc__standing b{ color:var(--bc-ink); letter-spacing:.06em; }

/* ---------------- the two columns ----------------
   Side by side where there is room. On a phone they stack, and WHAT'S ON
   comes first - the past is never the thing you walked up to read. */
.bc__col{ position:relative; z-index:2; margin-top:14px; }
@media (min-width:600px){
  .bc__frame{
    display:grid; gap:0 24px;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"head head" "wk wk" "on past" "foot foot";
  }
  .bc__head{ grid-area:head; }
  .bc__wk{ grid-area:wk; }
  .bc__col{ grid-area:on; }
  .bc__col--past{ grid-area:past; }
  .bc__foot{ grid-area:foot; }
}

.bc__bills{ margin:0; padding:0; list-style:none; }
.bc__bill{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"when what" "when time" "every every";
  gap:0 10px;
  padding:7px 0;
  border-bottom:1px solid var(--bc-rule);
}
.bc__when{
  grid-area:when;
  min-width:52px;
  font:700 12px/1.25 Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--bc-red);
}
.bc__what{ grid-area:what; }
.bc__title{
  display:block; font-size:13px; line-height:1.3;
  /* CASED UP HERE, NEVER IN THE DATA - one board renders every act lowercase
     and the real capitalisation is unknown, which is gig-board's rule too. */
  text-transform:uppercase; letter-spacing:.02em;
}
.bc__kick{
  display:block; font-size:11.5px; color:var(--bc-dim); font-style:italic;
}
.bc__time{
  grid-area:time;
  font-size:11.5px; letter-spacing:.08em; color:var(--bc-dim);
}
.bc__none{ font-style:italic; opacity:.85; }
.bc__every{
  grid-area:every;
  margin-top:3px;
  justify-self:start;
  padding:1px 6px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff3d6; background:var(--bc-red);
}

/* WHAT HAS ALREADY BEEN ON reads back, not forward: the ink is spent. Same
   idea as a past day on the month grid, one object over. */
.bc__bill--past{ opacity:.62; }
.bc__bill--past .bc__when{ color:var(--bc-dim); }
.bc__bill--past .bc__every{ background:var(--bc-dim); }

.bc__empty, .bc__more{
  margin:6px 0 0; font-size:11.5px; line-height:1.45;
  color:var(--bc-dim); font-style:italic;
}

/* ---------------- the foot ----------------
   Where the sheet names its source and admits what it does not know. */
.bc__foot{
  position:relative; z-index:2;
  margin-top:14px; padding-top:9px;
  border-top:3px double var(--bc-rule);
}
.bc__foot p{
  margin:0 0 3px; font-size:10.5px; line-height:1.45;
  letter-spacing:.05em; color:var(--bc-dim);
}
.bc__foot p:last-child{ margin-bottom:0; }