/* Tight Ledger — see DESIGN.md. Strict B/W monospace ledger, Klein-blue
   banner. Row/bar/banner metrics come from mockups/giglist-bw-mockup.html. */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --klein: #002FA7;
  --hl2-bg: #E4E4E2; /* Stone — the highlighted-row wash */
  --hl2-fg: #000000;
  /* The sidebar swatch runs darker than the row wash it stands for:
     Stone against the inverted sidebar sits too close to the white
     "show" square to tell apart at 14px. */
  --hl2-ico: #C4C4C1;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #000000; --ink: #ffffff; }
}
:root[data-theme="dark"]  { --paper: #000000; --ink: #ffffff; }
:root[data-theme="light"] { --paper: #ffffff; --ink: #000000; }

html, body { background: var(--paper); color: var(--ink); }
body { margin: 0; font-family: var(--mono); }
a { color: var(--ink); }
* { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- banner: full-width Klein blue, no border ---------- */
#banner {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 100%;
  display: flex; align-items: center;
  background: var(--klein);
  padding: 12px 24px 13px;
  text-decoration: none;
}
#banner .mark {
  color: #C7CCD6;
  font-family: "Helvetica Neue", -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 800; font-size: 15px; letter-spacing: -0.03em; line-height: 1;
}
#banner:hover .mark { color: #ffffff; }
#banner .rlabel {
  /* Centered in the banner (see DESIGN.md); absolute so the gl mark's
     width can't push it off-center. */
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .22em; color: #ffffff; text-transform: uppercase;
}

/* When ledger.js is active the banner carries the week label, so the
   in-page week headings are redundant (DESIGN.md "Banner + Week"). */
body.wk-banner .week-h { display: none; }

/* ---------- sidebar: inverted, compact (built by ledger.js) ---------- */
#sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
  width: 208px; max-width: 82vw;
  background: var(--ink); color: var(--paper);
  transform: translateX(-100%);
  transition: transform .16s ease;
  overflow-y: auto;
  font-size: 11px;
}
#sidebar.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { #sidebar { transition: none; } }
#sidebar a { color: var(--paper); text-decoration: none; }
#sidebar a:hover { text-decoration: underline; text-underline-offset: 3px; }
#sidebar .sb-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--paper); padding: 8px 10px;
}
#sidebar .sb-head span { letter-spacing: .16em; font-size: 10px; }
#sb-close {
  background: none; border: 1px solid var(--paper); color: var(--paper);
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  padding: 2px 6px; cursor: pointer;
}
#sb-close:hover { background: var(--paper); color: var(--ink); }
#sidebar h3 {
  margin: 0; padding: 9px 10px 4px;
  font-size: 9px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  border-top: 1px solid var(--paper);
  display: flex; justify-content: space-between; align-items: baseline;
}
#sidebar .sb-head + h3 { border-top: 0; }
#sidebar h3 button {
  background: none; border: 0; color: var(--paper); font-family: var(--mono);
  font-size: 9px; letter-spacing: .1em; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}
#sidebar ul { list-style: none; margin: 0 0 6px; padding: 0 10px; }
#sidebar li { margin: 0; }
#sidebar ul a { display: block; padding: 2px 0; }
#sidebar .now { font-size: 9px; letter-spacing: .08em; }
#sidebar h3.cat { cursor: pointer; user-select: none; }
#sidebar h3 .cat-r { display: flex; gap: 9px; align-items: baseline; }
#sidebar h3 .ind { font-size: 10px; width: 8px; text-align: center; }

/* venue rows with cycling state icon */
#sb-venues li {
  display: flex; align-items: center; gap: 7px; padding: 1.5px 0;
}
.v-ico {
  flex: none; width: 14px; height: 14px; padding: 0; cursor: pointer;
  border: 1px solid var(--paper);
}
.v-ico[data-state="show"] { background: var(--paper); }
.v-ico[data-state="hide"] { background: var(--ink); }
.v-ico[data-state="hl"]   { background: var(--klein); border-color: var(--klein); }
.v-ico[data-state="hl2"]  { background: var(--hl2-ico); border-color: var(--hl2-ico); }
.v-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sb-venues li[data-state="hide"] .v-name { opacity: .45; text-decoration: line-through; }
#sb-venues li[data-state="hl"] .v-name,
#sb-venues li[data-state="hl2"] .v-name { font-weight: 700; }

#scrim { position: fixed; inset: 0; z-index: 65; display: none; }
#scrim.open { display: block; }

/* venue-state effects on the ledger (classes applied by ledger.js) */
.row.gl-hidden, .day-h.gl-hidden, .wk-sec.gl-hidden { display: none; }
.empty-note {
  padding: 28px 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- ledger ---------- */
main.ledger { max-width: 940px; margin: 0 auto; padding: 46px 16px 72px; }

.week-h {
  margin: 34px 0 0; padding: 5px 0 4px;
  font-size: 13px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
}
.wk-sec:first-of-type .week-h { margin-top: 4px; }

.day-h {
  margin: 10px 0 0; padding: 3px 8px;
  background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}

.row {
  /* 88px (vs the mockup's 74px) so a full "6:30PM/7:30PM" doors/show
     pair never overflows into the venue column. */
  display: grid; grid-template-columns: 88px 168px 1fr max-content;
  gap: 0 12px; align-items: baseline;
  padding: 3px 8px; border-bottom: 1px solid var(--ink);
  font-size: 12px; line-height: 1.35;
}
.row a { color: inherit; text-decoration: none; }
.row a:hover { text-decoration: underline; text-underline-offset: 2px; }
.row .t   { font-size: 11px; white-space: nowrap; }
.row .ven { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; overflow-wrap: break-word; }
.row .act { font-weight: 700; }
.row .sup { font-weight: 400; font-size: 11px; }
.flag {
  background: var(--ink); color: var(--paper);
  font-size: 9px; letter-spacing: .12em; padding: 1px 5px; text-transform: uppercase;
}
/* Highlight states (applied by the stage-2 sidebar JS; full-bleed rows). */
.row.hl { background: var(--klein); color: #ffffff; }
.row.hl .flag { background: #ffffff; color: var(--klein); }
.row.hl2 { background: var(--hl2-bg); color: var(--hl2-fg); }
.row.hl2 .flag { background: var(--hl2-fg); color: var(--hl2-bg); }
@media (max-width: 640px) {
  .row { grid-template-columns: 88px 1fr max-content; row-gap: 0; }
  .row .ven { grid-column: 2; grid-row: 1; }
  .row .act { grid-column: 2; grid-row: 2; }
  .row .t   { grid-row: 1; }
}

/* ---------- week-page subnav + index footer ---------- */
.subnav {
  display: flex; gap: 18px;
  padding: 10px 8px 0;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.subnav a { color: var(--ink); text-decoration: none; }
.subnav a:hover { text-decoration: underline; text-underline-offset: 2px; }

.foot {
  margin: 0; padding: 28px 8px 0;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}