/* Year View — destination-page crowd-score chart.
   Owns the .ribbon__* namespace and nothing else. Shipped to the site root as
   /ribbon.css via the Makefile's STATIC list. Palette tokens come from the page;
   only the band colour is local, because it must not read as a score tier. */

.ribbon {
  --ribbon-compare: #2f5d7c;
  --ribbon-quiet: #2e6b22;
  --ribbon-moderate: #b8801f;
  --ribbon-busy: #c05b2e;
  --ribbon-peak: #9e3415;
  --ribbon-h: 150px;
  margin: 1.75rem 0 2rem;
}
@media (max-width: 560px) { .ribbon { --ribbon-h: 124px; } }

.ribbon__intro { max-width: 62ch; margin: 0 0 1rem; }

/* ── headline numbers ─────────────────────────────────────── */
.ribbon__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 1.1rem;
}
.ribbon__stat {
  background: var(--paper-warm); border-radius: 3px; padding: .6rem .7rem; min-width: 0;
}
.ribbon__stat--year    { box-shadow: inset 3px 0 0 var(--ribbon-quiet); }
.ribbon__stat--holiday { box-shadow: inset 3px 0 0 var(--ribbon-compare); }
.ribbon__stat-k {
  display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .58rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .15rem; min-height: 2.2em;
}
.ribbon__stat-n {
  display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 1.6rem; font-weight: 600; line-height: 1;
}
.ribbon__stat-n--quiet    { color: var(--ribbon-quiet); }
.ribbon__stat-n--moderate { color: var(--ribbon-moderate); }
.ribbon__stat-n--busy     { color: var(--ribbon-busy); }
.ribbon__stat-n--peak     { color: var(--ribbon-peak); }
.ribbon__stat-d {
  display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .7rem; color: var(--ink-soft); margin-top: .2rem;
}
.ribbon__stat-d--solo { margin-top: .35rem; }

/* ── carets ───────────────────────────────────────────────── */
.ribbon__anno { position: relative; height: .85rem; }
.ribbon__pin {
  position: absolute; bottom: 0; transform: translateX(-50%);
  width: 1em; text-align: center; line-height: 1; font-size: .7rem;
}
.ribbon__pin::before { content: "\25bc"; display: block; }
/* The holidays anchor carries a band-coloured underline, tying it to the band
   it sits over. Without it two identical carets need a legend to tell apart. */
.ribbon__pin--holiday::after {
  content: ""; display: block; height: 2px; border-radius: 1px;
  background: var(--ribbon-compare); margin-top: 1px;
}
.ribbon__pin--quiet    { color: var(--ribbon-quiet); }
.ribbon__pin--moderate { color: var(--ribbon-moderate); }
.ribbon__pin--busy     { color: var(--ribbon-busy); }
.ribbon__pin--peak     { color: var(--ribbon-peak); }

/* ── plot ─────────────────────────────────────────────────── */
.ribbon__plot { position: relative; }
.ribbon__bands { position: absolute; inset: 0; pointer-events: none; }
.ribbon__band { position: absolute; top: 0; bottom: 0; }
.ribbon__band--full { background: rgba(47, 93, 124, .13); }
.ribbon__band--part { background: rgba(47, 93, 124, .06); }
.ribbon__band--nocover {
  background: repeating-linear-gradient(45deg,
    var(--paper-deep), var(--paper-deep) 3px, var(--paper) 3px, var(--paper) 6px);
}

/* Where the destination's own calendar stops. Beyond it the bars are still real
   numbers, just ones the local calendar no longer contributes to. */
.ribbon__edge {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--ink-faint); opacity: .75;
}

/* The whole chart is one control. At 390px a column is ~5px wide, a fifth of the
   24px minimum tap target, so the columns are inert and the chart is a slider:
   press and drag to scrub, arrow keys to step. pan-y keeps the page scrolling. */
.ribbon__chart {
  position: relative; display: flex; align-items: flex-end; gap: 1px;
  height: var(--ribbon-h); border-bottom: 1px solid var(--rule);
  touch-action: pan-y; cursor: pointer;
}
.ribbon__chart:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ribbon__col {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; pointer-events: none;
}
.ribbon__col--noscore {
  background: repeating-linear-gradient(45deg,
    var(--paper-deep), var(--paper-deep) 3px, var(--paper) 3px, var(--paper) 6px);
}
.ribbon__col.is-sel::after {
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--ink);
}
.ribbon__bar { display: block; width: 100%; }
.ribbon__bar--quiet    { background: var(--ribbon-quiet); }
.ribbon__bar--moderate { background: var(--ribbon-moderate); }
.ribbon__bar--busy     { background: var(--ribbon-busy); }
.ribbon__bar--peak     { background: var(--ribbon-peak); }

/* ── rail, axis, key ──────────────────────────────────────── */
.ribbon__rail { display: flex; gap: 1px; height: 10px; margin-top: 2px; }
.ribbon__railcell { flex: 1 1 0; min-width: 0; }
.ribbon__railcell--full { background: var(--ribbon-compare); }
.ribbon__railcell--part { background: var(--ribbon-compare); opacity: .35; }
.ribbon__railcell--nocover {
  background: repeating-linear-gradient(45deg,
    var(--paper-deep), var(--paper-deep) 3px, var(--paper) 3px, var(--paper) 6px);
}

.ribbon__months { position: relative; height: 1rem; margin-top: .25rem; }
.ribbon__month {
  position: absolute; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .62rem; color: var(--ink-faint); white-space: nowrap;
}
.ribbon__month--year { color: var(--ink-soft); font-weight: 600; }
/* The chart is server-rendered once and has to read at every width, so the axis
   thins in CSS rather than at build time. Eight labels fit 900px; four fit 320. */
@media (max-width: 480px) {
  .ribbon__month:nth-of-type(2n) { display: none; }
}

.ribbon__legend {
  display: flex; gap: .65rem; flex-wrap: wrap; margin: .6rem 0 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .6rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint);
}
.ribbon__key {
  display: inline-block; width: 9px; height: 9px; vertical-align: -1px; margin-right: .25rem;
}
.ribbon__key--band { background: rgba(47, 93, 124, .13); border: 1px solid rgba(47, 93, 124, .3); }
.ribbon__key--nocover {
  background: repeating-linear-gradient(45deg,
    var(--paper-deep), var(--paper-deep) 2px, var(--paper) 2px, var(--paper) 4px);
  border: 1px solid var(--rule);
}
.ribbon__key--edge {
  background: none; border: 0; border-left: 1px dashed var(--ink-faint);
  width: 0; margin-right: .4rem;
}
.ribbon__key--pin { background: none; border: 0; width: auto; }
.ribbon__key--pin::before { content: "\25bc"; color: var(--ink-soft); font-size: .7rem; }

.ribbon__readout {
  margin: .55rem 0 0; min-height: 2.1em; line-height: 1.45;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .74rem; color: var(--ink-soft);
}
.ribbon__readout b { color: var(--ink); font-weight: 600; }
.ribbon__readout .ribbon__rd--quiet    { color: var(--ribbon-quiet); font-weight: 600; }
.ribbon__readout .ribbon__rd--moderate { color: var(--ribbon-moderate); font-weight: 600; }
.ribbon__readout .ribbon__rd--busy     { color: var(--ribbon-busy); font-weight: 600; }
.ribbon__readout .ribbon__rd--peak     { color: var(--ribbon-peak); font-weight: 600; }

.ribbon__foot {
  margin: .7rem 0 0; line-height: 1.5;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .66rem; color: var(--ink-faint);
}