/* ==========================================================================
   NITRATE — THE RELEASE CALENDAR.  Paint for calendar.js.

   Everything here is drawn from tokens.css and nothing is redefined.  The
   board is a warm grey instrument: hairlines, tabular figures, flat fills, no
   radius anywhere.  Orange appears in exactly three places and each one means
   "now" or "here" — the today line, the 30-day window, and the cursor.  The
   120 marks themselves are deliberately monochrome; if the squares were
   coloured there would be nothing left for the accent to say.
   ========================================================================== */

.nxc {
  --nxc-min: 880px;              /* below this the board scrolls, never squashes */
  --nxc-mark: var(--ink-2);
  --nxc-tagbg: var(--ground);    /* set to var(--panel) on a panelled section  */
  --nxc-pad: var(--pad-x, 20px);
  position: relative;
}

/* --- header: the same rhythm as the rails it replaces --------------------- */
.nxc-head {
  display: flex; align-items: baseline; gap: 14px;
  padding: 0 var(--nxc-pad) 14px;
}
.nxc-h {
  font-family: var(--font-marquee, var(--font-display));
  font-size: clamp(17px, 2vw, 23px);
  letter-spacing: -.02em;
  flex: 0 0 auto;
}
.nxc-note {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--muted); letter-spacing: .04em;
  white-space: nowrap;
}
.nxc-hr { flex: 1 1 auto; height: var(--hair); background: var(--rule); min-width: 20px; }

/* --- the scroller --------------------------------------------------------
   The plot has a floor width, so on a phone the time axis keeps its true
   proportions and you swipe it.  Width is calc(100% - pad) with a matching
   right margin, which gives symmetric gutters and — the point — a scrollWidth
   that never exceeds the container, so the page body cannot scroll sideways
   because of this component. */
.nxc-scroll {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding-left: var(--nxc-pad);
  overscroll-behavior-x: contain;
}
.nxc-plot {
  position: relative;
  flex: 0 0 auto;
  width: calc(100% - var(--nxc-pad));
  min-width: var(--nxc-min);
  margin-right: var(--nxc-pad);
  outline-offset: 3px;
}
.nxc-plot:focus-visible { outline: var(--hair) solid var(--accent); }

.nxc-grid, .nxc-furn, .nxc-marks { position: absolute; inset: 0; }
.nxc-grid, .nxc-furn { pointer-events: none; }

/* --- month rules ---------------------------------------------------------
   Hairlines only.  Filled month bands were tried and cut: they read as the
   bars of a chart and shouted over the marks, which are the data. */
.nxc-tick {
  position: absolute; top: 0; bottom: 30px; width: var(--hair);
  background: var(--rule); opacity: .5;
}
.nxc-tick.quarter { opacity: .85; }
.nxc-tick.year { opacity: 1; background: var(--muted); }

/* --- the time axis -------------------------------------------------------- */
.nxc-axis {
  position: absolute; left: 0; right: 0; height: var(--hair);
  background: var(--rule);
  pointer-events: none;
}

/* --- now: the only orange on the board ------------------------------------ */
.nxc-now-band {
  position: absolute; top: 0; bottom: 30px;
  background: var(--accent); opacity: .075;
}
.nxc-now {
  position: absolute; top: 0; bottom: 30px; width: var(--hair);
  background: var(--accent);
}
.nxc-now-tag, .nxc-now-lab {
  position: absolute; top: 1px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 9px; letter-spacing: .1em; white-space: nowrap;
  color: var(--accent);
}
.nxc-now-tag { transform: translateX(-100%); padding-right: 5px; }
.nxc-now-lab { color: var(--accent); opacity: .78; }

/* --- lane tags, parked in the left gutter ---------------------------------
   They ride the horizontal scroll offset (see pinLanes) so the key never
   leaves the screen on a phone.  --nxc-tagbg is the plate they sit on once
   they are over the marks: override it if the board is mounted on a panel
   rather than on the page ground. */
.nxc-lane {
  position: absolute; left: 0; width: 34px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .14em;
  color: var(--muted);
  line-height: 12px;
  background: var(--nxc-tagbg, var(--ground));
  padding-right: 4px;
  will-change: transform;
}

/* --- the longest drought -------------------------------------------------- */
.nxc-gap {
  position: absolute; height: 12px;
  border-top: var(--hair) solid var(--rule);
  border-left: var(--hair) solid var(--rule);
  border-right: var(--hair) solid var(--rule);
  display: flex; align-items: flex-start; justify-content: center;
}
.nxc-gap-lab {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 9px; letter-spacing: .1em;
  color: var(--muted);
  background: var(--ground);
  padding: 0 5px;
  transform: translateY(-6px);
  white-space: nowrap;
}

/* --- a title -------------------------------------------------------------
   Fixed shape, no radius: a frame.  Side length is anticipation rank inside
   its own kind; which side of the axis it sits on is what kind it is. */
.nxc-m {
  position: absolute;
  background: var(--nxc-mark);
  cursor: pointer;
  transition: background .12s linear, outline-color .12s linear;
}
/* below day precision the fill is withheld — an outline is what a date we do
   not actually know should look like */
.nxc-m.prov {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--nxc-mark);
  opacity: .85;
}
.nxc-m:hover { background: var(--accent); }
.nxc-m.prov:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); }
.nxc-m.is-cursor {
  background: var(--accent);
  outline: var(--hair) solid var(--accent);
  outline-offset: 2px;
}
.nxc-m.prov.is-cursor { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); }

/* --- the month scale ------------------------------------------------------ */
.nxc-scale { position: absolute; left: 0; right: 0; height: 30px; pointer-events: none; }
.nxc-mo {
  position: absolute; top: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .1em;
  color: var(--muted);
  overflow: hidden; white-space: nowrap;
}
.nxc-mo.lead { color: var(--ink-2); }
.nxc-yr {
  position: absolute; top: 12px;
  font-family: var(--font-marquee, var(--font-display));
  font-size: 15px; font-weight: 700; line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink-2);
}

/* --- the readout ---------------------------------------------------------- */
.nxc-tip {
  position: absolute;
  display: none;
  flex-direction: column; gap: 1px;
  max-width: 240px;
  padding: 5px 8px 6px;
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  border-left: 2px solid var(--accent);
  pointer-events: none;
  z-index: 4;
}
.nxc-tip.on { display: flex; }
.nxc-tip-t {
  font-family: var(--font-ui);
  font-size: 12.5px; line-height: 1.25; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nxc-tip-d, .nxc-tip-r {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 9.5px; letter-spacing: .05em; white-space: nowrap;
}
.nxc-tip-d { color: var(--ink-2); }
.nxc-tip-r { color: var(--muted); }

/* --- the caption ---------------------------------------------------------
   The rule runs the full measure of the page; the prose does not, because a
   mono line past ~100ch stops being readable. */
.nxc-foot {
  margin: 14px var(--nxc-pad) 0;
  padding-top: 10px;
  border-top: var(--hair) solid var(--rule);
}
.nxc-cap {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px; line-height: 1.65; color: var(--muted);
  max-width: 104ch;
}
.nxc-cap-key {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10px; line-height: 1.6; letter-spacing: .01em;
  color: var(--muted); opacity: .7;
  max-width: 104ch;
}

/* --- narrow ---------------------------------------------------------------
   The board keeps its true time proportions and scrolls; only the type around
   it tightens.  Squashing 401 days into 390px was never on the table: the
   whole instrument is "how far apart in time are these", and at 1px a day the
   marks would overlap into one bar.

   WHAT CHANGED ON A PHONE is that the scroll stopped being a guess.  At 390
   the board was cut dead at the right edge with no scrollbar (mobile overlay
   bars only appear mid-gesture), no shadow and no words: the plot simply
   ended in November and there was nothing on the page to say the other five
   months existed.  A ground-fade at the edge was tried and cut — it cannot be
   made scroll-aware without script, so it would still be lying about the far
   end once you got there.  A line of type cannot go stale. */
/* 2026-08-11: this query was 700px.  Folded to 760, the house mobile tier
   (MOBILE_SPEC §1) — it is the only breakpoint in this file, and 700–760 is
   the same board on the same phone.  Nothing above 760 changes. */
@media (max-width: 760px) {
  .nxc { --nxc-min: 820px; }
  .nxc-head { flex-wrap: wrap; gap: 5px 12px; }
  .nxc-h { flex: 0 0 auto; }
  .nxc-hr { flex: 1 1 30px; }
  .nxc-note { flex: 1 1 100%; order: 1; white-space: normal; font-size: 11.5px; }

  /* the affordance, directly under the board and above the caption rule */
  .nxc-foot::before {
    content: '\25C2   drag the board sideways   \25B8';
    display: block;
    margin: -4px 0 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
  }

  /* --- the furniture has to survive the trip -------------------------------
     Every label on the board was between 9 and 9.5px.  Held at arm's length
     on a phone the month scale was the first thing to go, and the FILM / TV
     key — the one mark that says which side of the axis means what — was the
     smallest type on the page.  Raised to the 11px mono floor; the key keeps
     its 12px line box (calendar.js positions it from a measured 13px) and
     buys the width back out of its letter-spacing rather than out of the
     gutter, so it still cannot reach a mark. */
  .nxc-mo { font-size: 11px; }
  /* .nxc-yr stays at 15px: calendar.js parks the scale in a 30px band and the
     scroller clips on Y, so a 16px marquee face had its baseline sheared off */
  .nxc-lane { font-size: 11px; letter-spacing: .04em; width: 36px; }
  .nxc-now-tag, .nxc-now-lab { font-size: 11px; }
  .nxc-gap-lab { font-size: 11px; }
  .nxc-tip-d, .nxc-tip-r { font-size: 11px; }
  .nxc-tip-t { font-size: 13px; }
  .nxc-cap { font-size: 11px; line-height: 1.7; }
  .nxc-cap-key { font-size: 11px; opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
  .nxc-m { transition: none; }
}