/* 04-board.css — day rows, gutter, axis, canvas, lanes, bars
 *
 * The canvas has no cells and no hover state. Empty space is plain surface:
 * no cursor change, no click target, nothing that reads as "take this time".
 */

.board-page { display: flex; flex-direction: column; }

.board-head__main { display: flex; flex-direction: column; gap: 2px; }
.board-title { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-600); }
.board-title__icao { letter-spacing: 0.06em; }
.board-title__name { font-weight: 400; }
.board-title__frame { font-size: var(--fs-200); font-weight: 400; color: var(--tx-muted); }
.board-sub { font-size: var(--fs-100); color: var(--tx-muted); }
.board-sub__sep { color: var(--ln-base); }

/* ---- toolbar --------------------------------------------------------- */

.board-toolbar { margin: var(--sp-3) 0; }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2);
  background: var(--bg-surface);
  border: 1px solid var(--ln-base);
  border-radius: var(--radius);
}
.toolbar__group { display: flex; gap: var(--sp-2); align-items: center; }
.toolbar__group--end { margin-left: auto; flex-wrap: wrap; }
.toolbar__count { font-size: var(--fs-100); color: var(--tx-muted); margin-top: var(--sp-2); }

/* ---- rail ------------------------------------------------------------ */

.rail {
  margin-bottom: var(--sp-3);
  padding: var(--sp-2);
  background: var(--bg-surface);
  border: 1px solid var(--ln-base);
  border-radius: var(--radius);
}
.rail__title {
  font-size: var(--fs-050);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tx-muted);
  margin-bottom: var(--sp-2);
}
.rail__list { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 4px; }
.rail__item { flex: none; }
.rail__empty { font-size: var(--fs-200); color: var(--tx-muted); }
.chip__day { font-weight: 700; }
.chip__reg { font-weight: 700; }

/* ---- orientation and legend ------------------------------------------ */

.orientation {
  border: 1px solid var(--ln-control);
  border-radius: var(--radius);
  padding: var(--sp-3);
  background: var(--bg-surface-2);
  margin-bottom: var(--sp-3);
}
.orientation__title { font-size: var(--fs-200); margin-bottom: var(--sp-2); }
.orientation__list { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-3); }
.orientation__list li {
  font-size: var(--fs-200);
  padding-left: var(--sp-3);
  position: relative;
  max-width: 90ch;
}
.orientation__list li::before { content: "·"; position: absolute; left: 4px; }

.legend {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--ln-base);
  border-radius: var(--radius);
  margin-bottom: var(--sp-2);
}
.legend__list { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.legend__item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-100); }
.legend__icon { width: 13px; height: 13px; }
.legend__word { color: var(--tx-body); }
.legend__note { font-size: var(--fs-100); color: var(--tx-muted); margin-top: var(--sp-2); }

.swatch {
  display: inline-block;
  width: 20px;
  height: 12px;
  border: 1px solid var(--ln-control);
  border-radius: 2px;
}
.swatch--created { border: 1px dotted var(--st-created-line); background: var(--st-created-fill); }
.swatch--approved { border: 1px solid var(--st-approved-line); background: var(--st-approved-fill); }
.swatch--best_effort {
  border: 2px solid var(--st-best-line);
  background: var(--st-best-fill);
  background-image: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--st-best-line) 34%, transparent) 0 2px,
    transparent 2px 5px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 50%, 100% 100%, 0 100%);
}
.swatch--refused { border: 1px solid var(--st-refused-line); background: var(--st-refused-fill); opacity: 0.62; }
.swatch--mine { background: var(--bg-surface); border-left: 3px solid var(--ln-ink); }
.swatch--closed {
  background: var(--bg-closed);
  background-image: repeating-linear-gradient(45deg,
    rgba(100, 116, 139, 0.55) 0 1px, transparent 1px 5px);
}

.past-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid transparent;
  color: var(--tx-muted);
  font-size: var(--fs-100);
  padding: 4px var(--sp-2);
  border-radius: var(--radius);
  margin-bottom: var(--sp-1);
}
.past-toggle:hover { border-color: var(--ln-control); color: var(--tx-strong); }

/* ---- axis ------------------------------------------------------------ */

.axis-host {
  position: sticky;
  top: 3.25rem;
  z-index: 20;
  background: var(--bg-app);
}
.axis {
  display: grid;
  grid-template-columns: var(--gutter-w) 1fr;
  background: var(--bg-surface-3);
  border: 1px solid var(--ln-base);
  border-radius: var(--radius) var(--radius) 0 0;
  height: 22px;
}
.axis__gutter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--sp-2);
  border-right: 1px solid var(--ln-base);
}
.axis__frame {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--tx-muted);
  font-family: var(--font-mono);
}
.axis__track { position: relative; }
.axis__tick { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--ln-strong); }
.axis__tick--last { border-left-color: transparent; }
.axis__label {
  position: absolute;
  top: 3px;
  left: 3px;
  font-size: 10px;
  color: var(--tx-muted);
}
.axis__z {
  position: absolute;
  right: 4px;
  top: 3px;
  font-size: 10px;
  color: var(--tx-muted);
}

/* ---- rows ------------------------------------------------------------ */

.board {
  overflow: clip;
  overflow-clip-margin: 6px;
  border: 1px solid var(--ln-base);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg-surface);
}

.row {
  --lanes: 1;
  display: grid;
  grid-template-columns: var(--gutter-w) 1fr;
  border-bottom: 1px solid var(--ln-hair);
}
.row:last-child { border-bottom: 0; }

.row--today { border-top: 2px solid var(--ln-ink); border-bottom: 2px solid var(--ln-ink); }
.row--past { opacity: 0.55; filter: saturate(0.65); }

.row__gutter {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  padding: var(--row-pad) var(--sp-2);
  background: var(--bg-surface-2);
  border-right: 1px solid var(--ln-base);
}
.row__date { display: flex; gap: 6px; align-items: baseline; font-size: var(--fs-200); }
.row__weekday { font-family: var(--font-mono); color: var(--tx-strong); }
.row__daynum { font-family: var(--font-mono); color: var(--tx-body); font-weight: 400; }
.row__dual { font-size: var(--fs-050); color: var(--tx-faint); }
.row__count, .row__awaiting { font-size: var(--fs-050); color: var(--tx-muted); }
.row__awaiting { color: var(--st-created-text); font-weight: 650; }
.row__hours {
  font-size: 10px;
  color: var(--tx-faint);
  margin-top: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row__more {
  margin-top: 4px;
  font-size: var(--fs-050);
  background: none;
  border: 1px solid var(--ln-control);
  border-radius: var(--radius);
  padding: 1px 4px;
  color: var(--tx-muted);
}

.tag {
  align-self: flex-start;
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 2px;
}
.tag--now { background: var(--ln-ink); color: var(--bg-surface); }
.tag--rel { border: 1px solid var(--ln-control); color: var(--tx-muted); text-transform: lowercase; letter-spacing: 0.04em; }

.row__canvas {
  position: relative;
  min-height: calc(var(--lane-h) + var(--row-pad) * 2);
  height: calc(var(--lanes) * (var(--lane-h) + var(--lane-gap)) + var(--row-pad) * 2);
  padding: var(--row-pad) 0;
  background: var(--bg-surface);
}
.row--expanded .row__canvas { height: auto; min-height: 12rem; }

.row__bg { position: absolute; inset: 0; pointer-events: none; }

.band { position: absolute; top: 0; bottom: 0; }
.band--closed {
  background-color: var(--bg-closed);
  background-image: repeating-linear-gradient(45deg,
    rgba(100, 116, 139, 0.55) 0 1px, transparent 1px 6px);
  opacity: 0.55;
}
.band--note {
  background-image: repeating-linear-gradient(45deg,
    rgba(100, 116, 139, 0.6) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(100, 116, 139, 0.6) 0 1px, transparent 1px 4px);
  border-top: 2px solid var(--ln-strong);
}
.band--nocircuit {
  background-image: repeating-linear-gradient(45deg,
    rgba(185, 28, 28, 0.35) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(185, 28, 28, 0.35) 0 1px, transparent 1px 4px);
  border-top: 2px solid var(--st-refused-line);
}
.band__label {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-muted);
}

.hour-rule { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--ln-hair); }

.solar { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--ln-strong); }
.solar__label {
  position: absolute;
  bottom: 1px;
  left: 2px;
  font-size: 9px;
  color: var(--tx-faint);
}

.elapsed {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: rgba(15, 23, 42, 0.08);
  pointer-events: none;
}
:root[data-theme="dark"] .elapsed { background: rgba(230, 237, 243, 0.06); }

.now-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 2px solid var(--ln-ink);
  pointer-events: none;
  z-index: 3;
}
.now-line__head {
  position: absolute;
  top: -1px; left: -5px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ln-ink);
}
.now-line__chip {
  position: absolute;
  top: 4px; left: 4px;
  font-size: 9px;
  background: var(--ln-ink);
  color: var(--bg-surface);
  padding: 0 3px;
  border-radius: 2px;
}

.row__none {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.row__none-1 { font-size: var(--fs-100); color: var(--tx-muted); }
.row__none-2 { font-size: var(--fs-050); color: var(--tx-faint); }

/* ---- lanes and bars --------------------------------------------------- */

.lanes { position: absolute; inset: var(--row-pad) 0; }

.bar-item {
  position: absolute;
  top: calc(var(--lane) * (var(--lane-h) + var(--lane-gap)));
  height: var(--lane-h);
}

.bar {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  padding: 0 5px;
  border-radius: 2px;
  border: 1px solid var(--ln-control);
  background: var(--bg-surface);
  color: var(--tx-strong);
  font-size: var(--fs-100);
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
}
.bar__icon { width: 13px; height: 13px; flex: none; }
.bar__time { font-weight: 650; letter-spacing: -0.01em; }
.bar__reg { font-weight: 700; }
.bar__reg-prefix { opacity: 0.55; }
.bar__mult { font-weight: 700; }
.bar__school { font-size: var(--fs-050); letter-spacing: 0.04em; opacity: 0.85; }
.bar__meta {
  font-size: var(--fs-050);
  color: inherit;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bar__lead { font-size: var(--fs-050); font-weight: 700; letter-spacing: 0.06em; }
.bar__chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0 3px;
}
.bar__cont { font-size: var(--fs-100); opacity: 0.8; }

/* created — hollow, dotted, high weight */
.bar--created {
  border: 1px dotted var(--st-created-line);
  background: var(--st-created-fill);
  color: var(--st-created-text);
}

/* approved — solid tint, medium weight */
.bar--approved {
  border: 1px solid var(--st-approved-line);
  background: var(--st-approved-fill);
  color: var(--st-approved-text);
}

/* best_effort — 2px outline, 45° hatch, right edge notched open, highest weight */
.bar--best_effort {
  border: 2px solid var(--st-best-line);
  background-color: var(--st-best-fill);
  background-image: repeating-linear-gradient(45deg,
    rgba(180, 83, 9, 0.34) 0 2px, transparent 2px 6px);
  color: var(--st-best-text);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
}
:root[data-theme="dark"] .bar--best_effort {
  background-image: repeating-linear-gradient(45deg,
    rgba(201, 138, 30, 0.42) 0 2px, transparent 2px 6px);
}

/* refused — lowest weight; it is history, not a task */
.bar--refused {
  border: 1px solid var(--st-refused-line);
  background: var(--st-refused-fill);
  color: var(--st-refused-text);
  opacity: 0.62;
}
.bar--refused .bar__time { text-decoration: line-through; }

/* lapsed — the created silhouette with the fill dropped and the word changed */
.bar--lapsed {
  border: 1px dotted var(--st-created-line);
  background: transparent;
  color: var(--st-created-text);
  opacity: 0.55;
}
.bar--lapsed .bar__time { text-decoration: line-through; }

/* withdrawn — status hue removed entirely */
.bar--withdrawn {
  border: 1px solid var(--ln-control) !important;
  background: var(--bg-surface) !important;
  background-image: none !important;
  color: var(--tx-muted) !important;
  text-decoration: line-through;
  clip-path: none;
  opacity: 1;
}

/* the ink cap marks your own school */
.bar--mine { border-left: 3px solid var(--ln-ink); }

.bar--unack { box-shadow: inset 0 0 0 1px var(--st-best-line); }
.bar--reopened { outline: 1px solid var(--st-best-line); outline-offset: 1px; }

/* midnight continuation: inner edges squared with an ink rule */
.bar--to-next { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 2px solid var(--ln-ink); }
.bar--from-prev { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 2px solid var(--ln-ink); }

.bar:hover { filter: brightness(0.97); }
:root[data-theme="dark"] .bar:hover { filter: brightness(1.25); }
.row--past .bar:hover, .elapsed ~ .lanes .bar:hover { filter: none; }

/* ---- the shoulder ---------------------------------------------------- *
 * Overlaid on the canvas edge, never inset into it: insetting would narrow
 * that row's time-proportional canvas and break x-alignment with the other
 * nine rows. No hatch, so it is never confused with closed hours.
 * ---------------------------------------------------------------------- */

.shoulder {
  position: absolute;
  top: var(--row-pad);
  bottom: var(--row-pad);
  width: var(--shoulder-w);
  background: var(--bg-surface-3);
  z-index: 4;
}
.shoulder--lead { left: 0; border-right: 2px solid var(--ln-strong); }
.shoulder--trail { right: 0; border-left: 2px solid var(--ln-strong); }
.lanes--shoulder { position: absolute; inset: 0; }
.bar-item--shoulder { left: 3px; right: 3px; width: auto; }
.shoulder .bar { font-size: 10px; }

/* ---- the card list --------------------------------------------------- */

.board-page[data-mode="cards"] .axis-host { display: none; }

.day-card {
  border-bottom: 1px solid var(--ln-base);
  padding: var(--sp-3);
}
.day-card--today { border-left: 3px solid var(--ln-ink); }
.day-card__head {
  position: sticky;
  top: 3.25rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: baseline;
  background: var(--bg-surface);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--ln-hair);
}
.day-card__title { font-size: var(--fs-400); }
.day-card__hours, .day-card__solar, .day-card__count { font-size: var(--fs-100); color: var(--tx-muted); }
.day-card__note {
  font-size: var(--fs-100);
  border-left: 3px solid var(--ln-strong);
  padding-left: var(--sp-2);
  margin: var(--sp-2) 0;
}
.day-card__empty { padding: var(--sp-3) 0; color: var(--tx-muted); font-size: var(--fs-200); }
.day-card__list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }

.session-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ln-control);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.session-card--created { border-left-color: var(--st-created-line); border-left-style: dotted; }
.session-card--approved { border-left-color: var(--st-approved-line); }
.session-card--best_effort { border-left-color: var(--st-best-line); }
.session-card--refused { border-left-color: var(--st-refused-line); opacity: 0.75; }
.session-card--withdrawn { border-left-color: var(--ln-control); text-decoration: line-through; }
.session-card--lapsed { border-left-color: var(--st-created-line); border-left-style: dotted; opacity: 0.7; }
.session-card__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-050);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.session-card__icon { width: 12px; height: 12px; }
.session-card__time { font-size: var(--fs-300); font-weight: 650; }
.session-card__local, .session-card__meta { font-size: var(--fs-100); color: var(--tx-muted); }
.session-card__reg { font-size: var(--fs-200); font-weight: 700; }
.session-card__school { font-size: var(--fs-200); }

/* ---- the print-only artefact is hidden on screen ---------------------- */

.print-only { display: none; }