/* =======================================================================
   gigboard.css — THE MONTH TAPED TO THE WALL

   The look of the gig calendar that hangs in a venue. The engine is
   js/gig-board.js; it builds the markup off js/gig-answer.js and sets one
   variable, and everything below dresses it. Same split as css/archive.css
   and css/hud.css: the LOOK lives here, the venue only supplies its colour.

   ================= IT IS NOT THE BOOK =================
   css/archive.css dresses the ledger a bar keeps of nights it has already
   had - bound, gilt, a thing kept behind the counter. This is the opposite
   object: a cheap printed month, tacked up where people queue for a drink,
   about nights that have not happened yet. So it is flat, it is paper, it
   has tack heads in its corners and a curl at one edge, and nothing about it
   is precious. Sharing one stylesheet between the two would have made them
   the same object with different text in it.

   ================= A WASH, NOT A FILL =================
   Inherited from the book and the pool table, and for the same reason: the
   room you are standing in stays visible behind the sheet. You have walked
   up to a thing on a wall and are reading it - you have not left for a page.
   ======================================================================= */

.gb{
  --gb-accent:#f2c11c;          /* the venue's own colour, set by the host */
  --gb-paper:#e9dcbc;           /* the sheet */
  --gb-paper2:#f3e9cf;          /* where the light catches it */
  --gb-ink:#241a12;             /* what is printed on it */
  --gb-red:#a8302c;             /* the second ink every cheap month is run in */
  --gb-dim:rgba(36,26,18,.58);
  --gb-rule:rgba(36,26,18,.24);

  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,.52) 0%, rgba(4,3,7,.85) 78%);
  font-family:"Courier New", Courier, monospace;
  color:var(--gb-ink);
  opacity:0; transition:opacity .22s ease;
}
.gb.is-in{ opacity:1; }

/* THE SHEET. Capped in both directions: a month grid stretched across a
   wide desktop turns into a spreadsheet, and the thing on the wall was
   never wider than it was tall by much. */
.gb__sheet{
  position:relative;
  width:min(680px, 100%);
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:26px 24px 20px;
  color:var(--gb-ink);
  background:
    linear-gradient(180deg, var(--gb-paper2), var(--gb-paper) 40%, #e2d3ae);
  box-shadow:0 26px 60px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.25) inset;
  /* PINNED, SO IT HANGS SLIGHTLY WRONG. A sheet tacked to a wall is never
     square to it, and the half-degree is most of why it reads as paper
     rather than as a dialog. */
  transform:rotate(-.35deg) translateY(8px) scale(.985);
  transition:transform .26s cubic-bezier(.22,.72,.24,1);
}
.gb.is-in .gb__sheet{ transform:rotate(-.35deg) translateY(0) scale(1); }
@media (prefers-reduced-motion:reduce){
  .gb, .gb__sheet, .gb.is-in .gb__sheet{ transition:none; }
}

/* The tack heads, one per top corner. Drawn rather than pictured, like
   everything else in this world. */
.gb__sheet::before, .gb__sheet::after{
  content:""; position:absolute; top:9px; width:11px; height:11px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 34% 30%, #fff 0 12%,
              var(--gb-red) 42%, #5d1a17 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.45);
}
.gb__sheet::before{ left:12px; }
.gb__sheet::after{ right:12px; }

.gb__x{
  position:absolute; top:8px; right:34px;
  width:30px; height:30px; cursor:pointer; line-height:1;
  font:inherit; font-size:1rem; color:var(--gb-ink);
  background:transparent; border:0; opacity:.5;
}
.gb__x:hover, .gb__x:focus-visible{ opacity:1; outline:none; color:var(--gb-red); }

/* ================= the head ================= */
.gb__head{ text-align:center; margin:0 0 14px; }
.gb__venue{
  display:block; font-size:.62rem; letter-spacing:3.4px; text-transform:uppercase;
  color:var(--gb-dim);
}
.gb__month{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:2px;
}
.gb__monthname{
  font-size:clamp(1.1rem, 4.6vw, 1.6rem); font-weight:700; letter-spacing:5px;
  text-transform:uppercase; color:var(--gb-red);
}
.gb__step{
  width:28px; height:28px; line-height:1; cursor:pointer; font:inherit;
  font-size:1.05rem; color:var(--gb-ink);
  background:transparent; border:1.5px solid var(--gb-rule); border-radius:2px;
}
.gb__step:not([disabled]):hover{ background:var(--gb-ink); color:var(--gb-paper); }
/* DISABLED MEANS THE BOOK ENDS HERE, not that the arrow is broken - so it
   fades and keeps its space, which keeps the month name centred. */
.gb__step[disabled]{ opacity:.22; cursor:default; }

/* ================= the grid ================= */
.gb__grid{ width:100%; border-collapse:collapse; table-layout:fixed; }
.gb__grid th{
  padding:0 0 5px; font-size:.54rem; letter-spacing:2px; font-weight:700;
  color:var(--gb-dim); text-transform:uppercase;
}
.gb__grid th abbr{ text-decoration:none; }
.gb__grid td{ padding:0; vertical-align:top; border:1px solid var(--gb-rule); }
.gb__pad{ border-color:transparent !important; }
.gb__day{ height:clamp(46px, 9.6vw, 64px); position:relative; }
.gb__n{
  display:block; padding:3px 0 0 4px; font-size:.6rem; color:var(--gb-dim);
}
.gb__day--on{ background:rgba(255,255,255,.34); }
.gb__day--on .gb__n{ color:var(--gb-ink); font-weight:700; }
/* TODAY IS RINGED, not filled: a fill would compete with "there is a show
   on", which is the thing the sheet is actually for. */
.gb__day--today{ box-shadow:inset 0 0 0 2px var(--gb-red); }
/* A NIGHT ALREADY PLAYED still prints - the book holds one of each, and
   dropping it would answer a different question - but it reads back. */
.gb__day--past{ opacity:.5; }
.gb__day--sel{ background:var(--gb-ink) !important; }
.gb__day--sel .gb__n, .gb__day--sel .gb__act, .gb__day--sel .gb__t{
  color:var(--gb-paper);
}
.gb__day--sel.gb__day--today{ box-shadow:inset 0 0 0 2px var(--gb-accent); }

.gb__pick{
  display:block; width:100%; height:100%; cursor:pointer; text-align:left;
  padding:0 4px 4px; border:0; background:none; color:inherit; font:inherit;
  overflow:hidden;
}
.gb__pick:focus-visible{ outline:2px solid var(--gb-red); outline-offset:-2px; }
.gb__t{
  display:block; font-size:.5rem; letter-spacing:.4px; color:var(--gb-dim);
}
/* THE ACT, CLAMPED TO TWO LINES. The cell is a label, not the answer - the
   answer is printed under the month - and a cell that grew to fit a bill
   would pull the grid out of shape. */
.gb__act{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:.52rem; line-height:1.25; letter-spacing:.3px;
  text-transform:uppercase; word-break:break-word;
}
.gb__more{ display:block; font-size:.48rem; color:var(--gb-dim); }

.gb__cap{
  caption-side:bottom; padding-top:8px; text-align:center;
  font-size:.52rem; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--gb-dim); line-height:1.6;
}

/* ================= what is on that night ================= */
.gb__night{
  margin-top:16px; padding-top:12px;
  border-top:2px solid var(--gb-ink);
}
.gb__when{
  display:block; font-size:.6rem; letter-spacing:2.6px; text-transform:uppercase;
  color:var(--gb-red); margin-bottom:8px;
}
.gb__when em{ font-style:normal; color:var(--gb-dim); }
.gb__bills{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.gb__bill{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; }
.gb__time{
  font-size:.62rem; font-weight:700; letter-spacing:.6px; white-space:nowrap;
  color:var(--gb-red);
}
.gb__who{
  font-size:.72rem; line-height:1.45; letter-spacing:.6px; text-transform:uppercase;
}
.gb__sets{ list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.gb__set{ display:grid; grid-template-columns:auto 1fr; gap:12px; }
.gb__meta, .gb__note{
  grid-column:2; font-size:.55rem; letter-spacing:1.2px; color:var(--gb-dim);
  text-transform:uppercase;
}
.gb__links{ grid-column:2; font-size:.55rem; letter-spacing:1.2px; }
.gb__links a{ color:var(--gb-ink); }
.gb__links a:hover{ color:var(--gb-red); }
.gb__none{
  font-size:.62rem; letter-spacing:1.6px; color:var(--gb-dim); margin:0;
  text-transform:uppercase;
}
/* EVERY LINE IS SOURCED OR IT IS NOT THERE, and the sheet says where it came
   from and the day it was read - which is the part that goes stale. */
.gb__foot{
  margin-top:14px; padding-top:9px; border-top:1px dashed var(--gb-rule);
  display:flex; flex-wrap:wrap; gap:4px 14px; justify-content:space-between;
  font-size:.5rem; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--gb-dim);
}
.gb__foot a{ color:var(--gb-dim); }
.gb__foot a:hover{ color:var(--gb-red); }

@media (max-width:520px){
  .gb__sheet{ padding:24px 12px 16px; }
  .gb__act, .gb__t, .gb__more{ display:none; }
  /* On a phone the cell is too narrow for a band name, so a lit day is a
     BLOCK of the second ink with the number on it - the name is still on the
     button's label, and the bill is printed under the month either way. */
  .gb__day{ height:40px; }
  .gb__day--on{ background:color-mix(in srgb, var(--gb-red) 22%, transparent); }
  .gb__n{ padding:5px 0 0; text-align:center; font-size:.66rem; }
}