@layer components {
  .board-split {
    display: grid; grid-template-columns: var(--venue-w) minmax(0, 1fr);
    height: 100%; width: 100%; min-width: 0; overflow: hidden;
  }
  .gutter {
    z-index: 8; overflow: hidden auto; scrollbar-width: none; min-width: 0;
    background: var(--bg); border-inline-end: 1px solid var(--border);
  }
  .gutter::-webkit-scrollbar { display: none; }
  .board { height: 100%; min-width: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  .corner {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; flex: none; height: var(--head-h);
    padding-inline: var(--space-4);
    background: var(--bg); border-block-end: 1px solid var(--border);
    font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 600;
  }
  .hour-track {
    position: sticky; top: 0; z-index: 5; display: flex; flex: none;
    height: var(--head-h); font-variant-numeric: tabular-nums;
    background: var(--bg); border-block-end: 1px solid var(--border);
  }
  .hour-track span {
    flex: none; width: calc(60 * var(--px-min)); padding-inline-start: var(--space-2);
    font-size: var(--text-xs); color: var(--text-faint); letter-spacing: 0.04em;
    display: flex; align-items: center;
    background-image: radial-gradient(circle at 0 50%, var(--border-strong) 1.5px, transparent 1.7px);
    background-size: 8px 100%;
  }
  .hour-track span.next-cal { color: var(--accent); }
  .venue {
    display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: none;
    padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border);
    background: var(--bg);
  }
  .venue strong { font-size: var(--text-sm); font-weight: 600; line-height: 1.25; }
  .venue small { color: var(--text-faint); font-size: var(--text-xs); }
  .lane {
    position: relative; flex: none; border-block-end: 1px solid var(--border);
    background-image:
      repeating-linear-gradient(to right, transparent 0, transparent calc(60 * var(--px-min) - 1px), var(--border) calc(60 * var(--px-min) - 1px), var(--border) calc(60 * var(--px-min))),
      repeating-linear-gradient(to right, transparent 0, transparent calc(30 * var(--px-min) - 1px), color-mix(in oklch, var(--border) 40%, transparent) calc(30 * var(--px-min) - 1px), color-mix(in oklch, var(--border) 40%, transparent) calc(30 * var(--px-min)));
  }
  .block {
    position: absolute; display: block;
    padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); box-shadow: inset 3px 0 0 var(--sec);
    text-align: start; overflow: hidden; min-width: 0;
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .block:hover, .block:has(:focus-visible) { background: var(--surface-3); border-color: var(--border-strong); z-index: 2; }
  .block.is-fav { box-shadow: inset 3px 0 0 var(--accent); }
  .block.is-res { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), inset 3px 0 0 var(--sec); }
  .block.is-fav.is-res { box-shadow: inset 0 0 0 2px var(--accent), inset 3px 0 0 var(--accent); }
  .block-hit {
    display: block; width: 100%; height: 100%;
    border: 0; background: transparent; color: inherit;
    padding: 0; text-align: start; min-height: 0;
  }
  .block .inner {
    display: grid; align-content: start; gap: 2px;
    padding: var(--space-2) 2.25rem var(--space-2) var(--space-4);
    width: max-content; max-width: 100%; box-sizing: border-box;
  }
  .block .t { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 500; }
  .block .n {
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
    line-height: 1.25; letter-spacing: -0.015em;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-clamp: 2; overflow-wrap: break-word;
  }
  .block .s { font-size: 0.6875rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .block.tight .n { font-size: 0.75rem; }
  .block.tight .s { display: none; }
  .fav {
    position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 2;
    width: 36px; height: 36px; min-height: 36px; padding: 0;
    display: grid; place-items: center;
    border: 0; background: transparent; color: var(--text-muted);
  }
  .fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; }
  .fav[aria-pressed="true"] { color: var(--accent); }
  .fav[aria-pressed="true"] svg { fill: var(--accent); stroke: var(--accent); }
  .now-line {
    position: absolute; top: var(--head-h); bottom: 0; width: 2px; z-index: 4;
    background: var(--now); pointer-events: none;
  }
  .now-line::before {
    content: ""; position: absolute; inset-inline-start: -4px; top: 0;
    width: 10px; height: 10px; border-radius: 99px; background: var(--now);
  }
  .sheet { position: relative; min-height: 100%; }

  /* venue name printed inside the lane when the gutter is hidden */
  .lane-name {
    position: absolute; top: 4px; inset-inline-start: var(--space-2); z-index: 1; pointer-events: none;
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); white-space: nowrap;
  }
  .lane-name small { color: var(--text-faint); font-weight: 500; }
}