/* ---- The notebook ------------------------------------------------------
   .fyf-notebook* (app/views/observations/index.html.erb and the components
   under app/components/notebook) implements the "FRank Notebook" artboard on
   the FYF foundation: a cream paper ledger under a charcoal counter bar, with
   the capture card taped to the top of it. The artboard itself is vendored at
   docs/design/notebook/mockup-markup.html.

   Two-class rules throughout, for the reason documented at the top of
   entrant_card.css, entry_pages.css and standings.css: fyf_foundation.css's
   `.fyf h1`-`h4` and `.fyf p` are (0,1,1) and outrank a bare class regardless
   of source order, and on layouts/application the `stylesheet_link_tag :app`
   glob serves app/assets/builds/tailwind.css AFTER this file, so a Tailwind
   utility beats a single class too. `.fyf-notebook .fyf-notebook__x` is
   (0,2,0) and wins over both without !important.

   THIS FILE CARRIES A DARK VARIANT, and no other .fyf surface does. The FYF
   foundation is light-only -- that is why layouts/marketing pins
   data-theme="light" and deletes the theme toggle. But the notebook lives
   behind sign-in inside layouts/application, where the shell renders the
   toggle on every page, and the artboard designs a full dark palette. So the
   notebook declares its own --n-* surface tokens in both themes and consumes
   ONLY those plus the theme-independent --fyf-* brand hues. It must never
   reach for the foundation's semantic aliases (--surface-page, --text-body,
   --border-soft, ...), which are light values with no dark counterpart. */

.fyf-notebook {
  /* Paper and panels. The warm tints are the artboard's own -- no --fyf-*
     token matches them, which is why they are hex here and allow-listed in
     spec/views/design_tokens_spec.rb. Everything that DOES match a brand
     token is aliased rather than restated. */
  --n-page: #fbf1e6;
  --n-page2: #f6e9da;
  --n-paper: #fdfaf6;
  --n-panel: #fbf5ee;
  --n-well: #f0e3d4;

  --n-ink: var(--fyf-charcoal);
  --n-ink80: var(--fyf-charcoal-80);
  --n-ink60: #6b5a66;
  --n-ink30: var(--fyf-charcoal-30);
  --n-ink12: var(--fyf-charcoal-12);

  --n-line: #9a8894;
  --n-line2: #ded4da;
  --n-rule: rgba(48, 32, 45, 0.12);
  --n-stroke: var(--fyf-charcoal);

  /* The charcoal bands: the counter bar, the rail head, and the ink they
     print on. */
  --n-bar: #3a2836;
  --n-bar2: #2a1c27;
  --n-onbar: var(--fyf-cream);

  --n-sh: rgba(48, 32, 45, 0.3);
  --n-sh2: rgba(48, 32, 45, 0.15);
  --n-grid: var(--texture-grid-paper);

  /* A player mention, a team mention, and a game clock. Deepened cuts, not
     the full brand hues: these are small text on a light field. */
  /* --ease-snap overshoots: correct for a control answering a press, wrong
     for a panel unfolding under a pointer. This one just decelerates. */
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);

  --n-link: var(--fyf-pink-deep);
  --n-team: var(--fyf-blue-deep);
  --n-clock: #2a5c8a;
  --n-good: var(--fyf-green-deep);

  /* Tabular figures come from the app layout's Google Fonts link (JetBrains
     Mono, bound to --font-data by design_tokens.css), not from a vendored
     face. The foundation's --font-mono is a system stack and would not match
     the numerals in the rest of the app's data tables. */

  /* fyf_foundation.css's body rule is `.fyf body` -- a DESCENDANT selector --
     so a .fyf wrapper div gets none of it. Restate the four that matter. */
  background: var(--n-page);
  color: var(--n-ink);
  font-family: var(--font-body);
  text-wrap: pretty;

  /* Three rows: the header and the counter bar both span the full width and
     stay put, and only the third row -- the ledger beside its index -- scrolls.
     The counter bar needs its own row rather than flowing after the header, or
     grid places it in the first free cell, which is BELOW the ledger. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.fyf-notebook p { margin: 0; }

/* ---- Header ------------------------------------------------------------ */

.fyf-notebook .fyf-notebook__header {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 22px;
  border-bottom: 2px solid var(--n-line2);
  background: var(--n-panel);
}
.fyf-notebook .fyf-notebook__title {
  font-family: var(--font-header);
  font-weight: var(--weight-display);
  font-size: 27px;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  margin: 0;
  white-space: nowrap;
}

/* The week stepper reads as one control: a paper pill with the current week
   printed on a charcoal chip between two arrows. */
.fyf-notebook .fyf-notebook__weeks {
  display: flex;
  align-items: center;
  background: var(--n-paper);
  border: var(--stroke-chip) solid var(--n-stroke);
  border-radius: var(--radius-pill);
  padding: 3px;
  box-shadow: 2px 2px 0 var(--n-sh2);
}
.fyf-notebook .fyf-notebook__step {
  width: 26px;
  text-align: center;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--n-ink60);
  text-decoration: none;
  border-radius: var(--radius-pill);
}
.fyf-notebook .fyf-notebook__step:hover { color: var(--n-ink); }
.fyf-notebook .fyf-notebook__step[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}
.fyf-notebook .fyf-notebook__week {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--n-bar);
  color: var(--n-onbar);
  white-space: nowrap;
}

.fyf-notebook .fyf-notebook__saved {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--n-ink60);
  white-space: nowrap;
}

/* Grid paper under the search field, so it reads as a line ruled on the page
   rather than a form control dropped onto it. */
.fyf-notebook .fyf-notebook__search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--n-paper);
  background-image: var(--n-grid);
  border: var(--stroke-chip) solid var(--n-ink30);
  border-bottom: 3px solid var(--n-line);
  border-radius: var(--radius-sm);
  padding: 5px 8px 4px 11px;
  width: 208px;
  max-width: 100%;
}
.fyf-notebook .fyf-notebook__search:hover,
.fyf-notebook .fyf-notebook__search:focus-within { border-color: var(--n-line); }
.fyf-notebook .fyf-notebook__search-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 13.5px;
  color: var(--n-ink);
  width: 100%;
  min-width: 0;
}
.fyf-notebook .fyf-notebook__search-input::placeholder { color: var(--n-ink60); }

.fyf-notebook .fyf-notebook__ghost {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--n-ink60);
  border: 1.5px solid var(--n-ink30);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  white-space: nowrap;
  text-decoration: none;
}
.fyf-notebook .fyf-notebook__ghost:hover {
  color: var(--n-ink);
  border-color: var(--n-line);
}

/* ---- Counter bar ------------------------------------------------------- */

.fyf-notebook .fyf-notebook__counters {
  grid-row: 2;
  grid-column: 1 / 3;
  display: flex;
  align-items: stretch;
  background: var(--n-bar);
  color: var(--n-onbar);
  padding: 0 22px;
  border-bottom: 2px solid var(--n-stroke);
  overflow-x: auto;
  /* Overlay scrollbars paint nothing until a scroll starts, so the bar would
     look clipped rather than scrollable on a phone. A thin always-on gutter
     is the affordance. */
  scrollbar-width: thin;
}
.fyf-notebook .fyf-notebook__counter {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 15px 9px 0;
  margin-right: 15px;
  border-right: 1px solid rgba(250, 220, 194, 0.2);
  white-space: nowrap;
}
.fyf-notebook .fyf-notebook__counter-n {
  font-family: var(--font-data);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  line-height: 1;
}
.fyf-notebook .fyf-notebook__counter-k {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(250, 220, 194, 0.72);
}
.fyf-notebook .is-players { color: var(--fyf-yellow); }
.fyf-notebook .is-stamped { color: var(--fyf-blue); }

/* ---- Ledger column ----------------------------------------------------- */

.fyf-notebook .fyf-notebook__ledger {
  grid-row: 3;
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 60px;
}
.fyf-notebook .fyf-notebook__measure {
  max-width: 940px;
  margin-inline: auto;
}

/* ---- Week index rail --------------------------------------------------- */

.fyf-notebook .fyf-notebook__rail {
  grid-row: 3;
  grid-column: 2;
  width: 302px;
  border-left: 2px solid var(--n-line2);
  background: var(--n-panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.fyf-notebook .fyf-notebook__rail-head {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--n-bar2);
  color: var(--n-onbar);
  padding: 10px 16px;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.fyf-notebook .fyf-notebook__rail-body {
  flex: 1;
  overflow: auto;
  padding: 12px 14px 26px;
}

/* ---- Shared type ------------------------------------------------------- */

.fyf-notebook .fyf-notebook__eyebrow {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--n-ink60);
  white-space: nowrap;
}
.fyf-notebook .fyf-notebook__meta {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--n-ink60);
  white-space: nowrap;
}
.fyf-notebook .fyf-notebook__num {
  font-family: var(--font-data);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Phone ------------------------------------------------------------- */

@media (max-width: 1023px) {
  .fyf-notebook {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .fyf-notebook .fyf-notebook__counters { grid-column: 1; }
  .fyf-notebook .fyf-notebook__header {
    grid-column: 1;
    gap: 9px;
    padding: 10px 14px;
  }
  .fyf-notebook .fyf-notebook__title { font-size: 22px; }
  .fyf-notebook .fyf-notebook__search { width: 100%; order: 3; margin-left: 0; }
  .fyf-notebook .fyf-notebook__counters { padding: 0 14px; }
  .fyf-notebook .fyf-notebook__ledger {
    grid-row: 3;
    grid-column: 1;
    padding: 12px 14px 56px;
  }
  /* The index is a summary of what the ledger already shows; on a phone the
     ledger is the whole point and the rail would push it off screen. */
  .fyf-notebook .fyf-notebook__rail { display: none; }
}

/* ---- Dark -------------------------------------------------------------- */

html[data-theme="dark"] .fyf-notebook {
  --n-page: #191019;
  --n-page2: #211621;
  --n-paper: #241822;
  --n-panel: #1f1420;
  --n-well: #1c121a;

  --n-ink: #eed6bd;
  --n-ink80: rgba(238, 214, 189, 0.74);
  --n-ink60: rgba(238, 214, 189, 0.53);
  --n-ink30: rgba(238, 214, 189, 0.28);
  --n-ink12: rgba(238, 214, 189, 0.12);

  --n-line: rgba(238, 214, 189, 0.34);
  --n-line2: rgba(238, 214, 189, 0.15);
  --n-rule: rgba(238, 214, 189, 0.11);
  --n-stroke: #110a10;

  --n-bar: #120b12;
  --n-bar2: #0d070d;
  --n-onbar: #eed6bd;

  --n-sh: rgba(0, 0, 0, 0.6);
  --n-sh2: rgba(0, 0, 0, 0.45);
  --n-grid:
    repeating-linear-gradient(0deg, rgba(81, 151, 210, 0.13) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, rgba(81, 151, 210, 0.13) 0 1px, transparent 1px 11px);

  --n-link: #f472ae;
  --n-team: #78b0e0;
  --n-clock: #8fc0e8;
  --n-good: #5fb572;
}

/* ---- Capture card ------------------------------------------------------
   The one place a note is written. Taped to the top of the ledger over grid
   paper, so the thing you type into looks like a page and the filed notes
   below it look like a ledger. */

.fyf-notebook .fyf-notebook__capture {
  position: relative;
  background: var(--n-paper);
  background-image: var(--n-grid);
  border: var(--stroke-chip) solid var(--n-stroke);
  border-radius: var(--radius-sm);
  box-shadow: 4px 4px 0 var(--n-sh2);
  padding: 13px 15px 3px;
}
/* Two strips of gaffer tape, translucent so the grid reads through. Purely
   decorative, hence ::before/::after rather than markup. */
.fyf-notebook .fyf-notebook__capture::before,
.fyf-notebook .fyf-notebook__capture::after {
  content: "";
  position: absolute;
  top: -9px;
  height: 17px;
  box-shadow: 0 1px 0 rgba(48, 32, 45, 0.18);
  pointer-events: none;
}
.fyf-notebook .fyf-notebook__capture::before {
  left: 34px;
  width: 74px;
  background: var(--tape-pink);
  transform: rotate(-2.4deg);
}
.fyf-notebook .fyf-notebook__capture::after {
  right: 52px;
  width: 60px;
  background: var(--tape-cream);
  transform: rotate(1.8deg);
}
.fyf-notebook .fyf-notebook__capture-main {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
/* The pink rule down the left of the line being written -- the cursor of the
   page, not of the textarea. */
.fyf-notebook .fyf-notebook__capture-mark {
  flex: none;
  width: 3px;
  align-self: stretch;
  min-height: 23px;
  background: var(--fyf-pink);
  margin-top: 1px;
}
.fyf-notebook .fyf-notebook__capture-input {
  flex: 1;
  min-width: 0;
  display: block;
  width: 100%;
  resize: none;
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--n-ink);
  caret-color: var(--fyf-pink);
}
.fyf-notebook .fyf-notebook__capture-input:focus { outline: none; }
.fyf-notebook .fyf-notebook__capture-input::placeholder { color: var(--n-ink60); }

.fyf-notebook .fyf-notebook__capture-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0 9px;
}
.fyf-notebook .fyf-notebook__capture-row--linking {
  margin-top: 11px;
  border-top: 1.5px dashed var(--n-ink30);
}
.fyf-notebook .fyf-notebook__capture-row--clock { padding: 0 0 10px; }
.fyf-notebook .fyf-notebook__hint {
  flex: 1;
  min-width: 210px;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 12px;
  line-height: 1.3;
  color: var(--n-ink60);
}
.fyf-notebook .fyf-notebook__hint code {
  font-family: var(--font-data);
  font-weight: 600;
  color: var(--n-ink80);
}

/* The filing badge: yellow sticker, charcoal keyline, the next note's number
   in tabular figures. */
.fyf-notebook .fyf-notebook__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: var(--fyf-yellow);
  color: var(--fyf-charcoal);
  border: 1.5px solid var(--n-stroke);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  white-space: nowrap;
}
.fyf-notebook .fyf-notebook__badge--today {
  background: var(--fyf-orange);
  color: var(--fyf-charcoal);
}

/* ---- Game-clock stamp -------------------------------------------------- */

.fyf-notebook .fyf-notebook__stamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--n-well);
  border: 1.5px solid var(--n-ink30);
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
}
.fyf-notebook .fyf-notebook__stamp-q {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--n-clock);
}
.fyf-notebook .fyf-notebook__stamp-t {
  font-family: var(--font-data);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--n-ink);
}
/* A note with no clock in it gets a dash, not an empty cell -- the column
   still has to read as a column. */
.fyf-notebook .fyf-notebook__stamp-none {
  display: inline-block;
  width: 13px;
  height: 2px;
  background: var(--n-ink12);
}

/* ---- Day sections ------------------------------------------------------ */

.fyf-notebook .fyf-notebook__day { margin-top: 20px; }
.fyf-notebook .fyf-notebook__day-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 5px;
}
.fyf-notebook .fyf-notebook__day-label {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--n-ink);
}
.fyf-notebook .fyf-notebook__day-rule {
  flex: 1;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--n-ink30) 0 3px, transparent 3px 9px);
}
.fyf-notebook .fyf-notebook__sheet {
  background: var(--n-paper);
  border: 1.5px solid var(--n-line2);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 var(--n-sh2), 3px 4px 0 -1px var(--n-sh2);
  overflow: hidden;
}

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

.fyf-notebook .fyf-notebook__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 96px;
  align-items: baseline;
  gap: 12px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--n-rule);
  transition: background var(--dur-fast) var(--ease-snap);
}
.fyf-notebook .fyf-notebook__row:last-child { border-bottom: 0; }
.fyf-notebook .fyf-notebook__row:hover,
.fyf-notebook .fyf-notebook__row:focus-within { background: var(--n-page2); }
.fyf-notebook .fyf-notebook__row-time {
  font-family: var(--font-data);
  font-weight: var(--weight-body);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--n-ink60);
  white-space: nowrap;
}
.fyf-notebook .fyf-notebook__row-main { min-width: 0; }
.fyf-notebook .fyf-notebook__row-tail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}

/* The note itself. Read-only at rest so the mentions inside the sentence can
   be real links -- a textarea cannot render one. Clicking it reveals the
   editor that has been sitting beside it all along. */
.fyf-notebook .fyf-notebook__body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--n-ink);
  white-space: pre-wrap;
  cursor: text;
}
.fyf-notebook .fyf-notebook__editor {
  display: block;
  width: 100%;
  resize: none;
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--n-ink);
  caret-color: var(--fyf-pink);
}
.fyf-notebook .fyf-notebook__editor:focus { outline: none; }

/* A player mention is solid and pink, a team dotted and blue -- the same
   distinction the chips row draws, drawn inside the sentence. */
/* A mention keeps the sentence's ink and takes a coloured RULE, rather than
   becoming a coloured word. Half a ledger's text was brand pink, which stops
   the colour meaning anything and makes the notes harder to read than the
   chrome around them. The mark still tells a player from a team -- solid
   against dotted -- and the colour arrives on hover, when it is answering
   the pointer instead of shouting at rest. */
.fyf-notebook .fyf-notebook__mention {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1.5px solid color-mix(in srgb, var(--n-link) 55%, transparent);
  transition: color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft);
}
.fyf-notebook .fyf-notebook__mention:hover {
  color: var(--n-link);
  border-bottom-color: var(--n-link);
}
.fyf-notebook .fyf-notebook__mention--team {
  border-bottom-style: dotted;
  border-bottom-color: color-mix(in srgb, var(--n-team) 60%, transparent);
}
.fyf-notebook .fyf-notebook__mention--team:hover {
  color: var(--n-team);
  border-bottom-color: var(--n-team);
}
/* The machine's guess, not the ranker's answer: fainter still, and it goes
   nowhere. */
.fyf-notebook .fyf-notebook__mention--pending {
  color: inherit;
  border-bottom-style: dashed;
  border-bottom-color: var(--n-ink30);
  cursor: default;
}

/* ---- Chips ------------------------------------------------------------- */

.fyf-notebook .fyf-notebook__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  background: var(--n-paper);
  border: 1.5px solid var(--n-line2);
  color: var(--n-ink80);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
  text-decoration: none;
}
.fyf-notebook .fyf-notebook__chip:hover {
  border-color: var(--n-link);
  color: var(--n-link);
}
/* A confirmed chip wears the ledger's own ink and a neutral frame; the dot is
   the only colour on it, and that is enough to tell a player from a team at a
   glance. Four fully-saturated pills under every note was the single loudest
   thing on the page, and none of it was the note. */
.fyf-notebook .fyf-notebook__chip--player,
.fyf-notebook .fyf-notebook__chip--team {
  border-color: var(--n-line2);
  color: var(--n-ink80);
}
.fyf-notebook .fyf-notebook__chip--player .fyf-notebook__chip-dot { background: var(--n-link); }
.fyf-notebook .fyf-notebook__chip--team .fyf-notebook__chip-dot { background: var(--n-team); }
.fyf-notebook .fyf-notebook__chip--player:hover { border-color: var(--n-link); color: var(--n-link); }
.fyf-notebook .fyf-notebook__chip--team:hover { border-color: var(--n-team); color: var(--n-team); }
/* A chip the machine proposed and the ranker has not ruled on: dashed, and
   it asks. */
.fyf-notebook .fyf-notebook__chip--pending {
  border-style: dashed;
  border-color: var(--n-ink30);
  color: var(--n-ink60);
  cursor: pointer;
}
.fyf-notebook .fyf-notebook__chip--pending:hover {
  border-color: var(--n-line);
  color: var(--n-ink);
}
.fyf-notebook .fyf-notebook__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.fyf-notebook .fyf-notebook__chip-meta {
  font-size: 9px;
  color: var(--n-ink60);
}

/* ---- Rail index -------------------------------------------------------- */

.fyf-notebook .fyf-notebook__index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--n-rule);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-snap);
}
.fyf-notebook .fyf-notebook__index-row:hover { background: var(--n-page2); }
.fyf-notebook .fyf-notebook__index-name {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 13.5px;
  color: var(--n-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fyf-notebook .fyf-notebook__index-meta {
  flex: none;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n-ink60);
}
/* Tally marks: a count you read at a glance without reading the number. */
.fyf-notebook .fyf-notebook__tally {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 12px;
}
/* Tally marks count; they do not need to shout. Ink rather than the accent,
   but ink you can actually see -- at --n-ink30 a single mark all but vanished
   against the paper, which is the count the list has most of. */
.fyf-notebook .fyf-notebook__tally i {
  display: block;
  width: 2px;
  background: var(--n-ink60);
}
.fyf-notebook .fyf-notebook__teams {
  margin-top: 16px;
  background: var(--n-paper);
  border: 1.5px solid var(--n-line2);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
}

/* ---- Empty state ------------------------------------------------------- */

.fyf-notebook .fyf-notebook__empty {
  padding: 22px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--n-ink60);
}

/* ---- Phone: the row stops being a three-column table ------------------- */

@media (max-width: 1023px) {
  .fyf-notebook .fyf-notebook__capture { padding: 11px 12px 3px; }
  .fyf-notebook .fyf-notebook__capture-input { font-size: 16px; }
  .fyf-notebook .fyf-notebook__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 11px;
  }
  /* The capture time moves under the note rather than taking a column of a
     phone's width; the stamp keeps its place on the right. */
  .fyf-notebook .fyf-notebook__row-time {
    grid-row: 2;
    grid-column: 1;
  }
  .fyf-notebook .fyf-notebook__row-main {
    grid-row: 1;
    grid-column: 1;
  }
  .fyf-notebook .fyf-notebook__row-tail {
    grid-row: 1;
    grid-column: 2;
  }
  .fyf-notebook .fyf-notebook__body { font-size: 13.5px; }
}

/* ---- Header odds and ends ---------------------------------------------- */

/* The magnifier, drawn rather than drawn-from-an-SVG: a ring and a handle. */
.fyf-notebook .fyf-notebook__search-glass {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  flex: none;
}
.fyf-notebook .fyf-notebook__search-ring {
  display: block;
  width: 10px;
  height: 10px;
  border: 2.5px solid var(--n-ink60);
  border-radius: 50%;
}
.fyf-notebook .fyf-notebook__search-handle {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 7px;
  height: 2.5px;
  background: var(--n-ink60);
  transform: rotate(45deg);
}

/* ---- Ledger odds and ends ---------------------------------------------- */

.fyf-notebook .fyf-notebook__more {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.fyf-notebook .fyf-notebook__more-rule {
  flex: 1;
  height: 1.5px;
  background: var(--n-ink12);
}

/* ---- Rail odds and ends ------------------------------------------------ */

.fyf-notebook .fyf-notebook__rail-count {
  margin-left: auto;
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 11px;
  color: var(--fyf-yellow);
}
.fyf-notebook .fyf-notebook__index-label {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.fyf-notebook .fyf-notebook__index-tail {
  display: flex;
  align-items: center;
  gap: 7px;
}
.fyf-notebook .fyf-notebook__index-tail .fyf-notebook__num {
  font-size: 11px;
  color: var(--n-ink80);
  width: 12px;
  text-align: right;
}
.fyf-notebook .fyf-notebook__team-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.fyf-notebook .fyf-notebook__teams .fyf-notebook__eyebrow { display: block; }

/* ---- Capture card odds and ends ---------------------------------------- */

.fyf-notebook .fyf-notebook__capture-badge { flex: none; align-self: flex-start; }
.fyf-notebook .fyf-notebook__capture-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
}

/* ---- Inline controls --------------------------------------------------- */

.fyf-notebook .fyf-notebook__action {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--n-ink60);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.fyf-notebook .fyf-notebook__action:hover { color: var(--n-ink); }
.fyf-notebook .fyf-notebook__action--danger:hover { color: var(--fyf-red); }
.fyf-notebook .fyf-notebook__action--confirm { color: var(--fyf-red); }

/* ---- Note row: the parts only the app has ------------------------------
   The artboard draws a ledger nobody edits. These four rules are what the
   real thing needs on top of it, and nothing else: a mention the machine has
   not had confirmed, the editor hiding beside the sentence, the row's own
   controls, and the chips row under it. */

/* The editor is `hidden` at rest and revealed by a click on the sentence.
   `.fyf-notebook .fyf-notebook__editor`'s display: block is (0,2,0) and the
   UA's `[hidden] { display: none }` is (0,1,0), so without this the textarea
   would sit visible under every note -- the trap
   spec/components/notebook/delete_confirm_hidden_spec.rb pins for the delete
   confirm, in the one place the layout genuinely needs a display of its own. */
.fyf-notebook .fyf-notebook__editor[hidden] { display: none; }

/* The row's controls -- the save status, the clock the last autosave lifted
   out of the sentence, delete. The WRAPPER lays them out so each control can
   keep `hidden` as its only display switch; quiet until the row is hovered or
   something inside it has focus, and the space is reserved either way so
   running the pointer down the ledger does not shove every row below it. */
.fyf-notebook .fyf-notebook__row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  line-height: 1.2;
}

.fyf-notebook .fyf-notebook__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* ---- Form controls ----------------------------------------------------- */

/* The link picker's search box and the promote form's set picker. Both sit
   inside a note row, so they take the ledger's paper rather than the app
   shell's surface tokens -- which are the other theme's values here. */
.fyf-notebook .fyf-notebook__field {
  display: block;
  width: 100%;
  background: var(--n-paper);
  border: 1.5px solid var(--n-line2);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 13px;
  color: var(--n-ink);
}
.fyf-notebook .fyf-notebook__field:focus {
  outline: none;
  border-color: var(--n-link);
}
.fyf-notebook .fyf-notebook__field::placeholder { color: var(--n-ink60); }
.fyf-notebook .fyf-notebook__field--inline {
  flex: 1;
  width: auto;
  font-size: 11px;
  padding: 3px 7px;
}
.fyf-notebook .fyf-notebook__results {
  margin-top: 5px;
  max-height: 192px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
}
.fyf-notebook .fyf-notebook__promote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* A chip that has been spent -- a player already ruled out on this note, or a
   picker row whose create was refused. Still legible, no longer inviting. */
.fyf-notebook .fyf-notebook__chip--muted {
  border-color: var(--n-ink12);
  color: var(--n-ink60);
  cursor: default;
  opacity: 0.7;
}
.fyf-notebook .fyf-notebook__chip--muted:hover {
  border-color: var(--n-ink12);
  color: var(--n-ink60);
}

/* The candidate sheet the chip opens is a popover, not a section of the page:
   it needs the gap the chips row above it used to carry as a utility class. */
.fyf-notebook .fyf-notebook__sheet--popover {
  margin-top: 8px;
  padding: 11px 12px;
  border-color: var(--n-stroke);
  border-width: var(--stroke-chip);
}

/* ---- A filed row is one line until you reach for it --------------------
   The artboard's ledger is dense: time, sentence, stamp, and nothing else.
   The workbench under it -- the chips, the "+ link" picker, the promote
   disclosure and Delete -- is how you act on a note, not what the note says,
   so it collapses to nothing and opens on hover or keyboard focus.

   ONE element collapses, and ONE element lays the line out. That matters for
   two reasons beyond tidiness: the chips come from ObservationLinksComponent
   and the controls from the row, so two containers meant two different
   `align-items` on one visual line (the chip centred, the controls on their
   baseline) -- and it meant two reveals, one animating its height and one
   flipping `display`, which cannot animate at all and popped.

   grid-template-rows 0fr -> 1fr rather than display:none, so a focused
   control inside is still reachable by tab: the region keeps its layout, it
   just has no height until it is wanted. */
.fyf-notebook .fyf-notebook__row .fyf-notebook__bench {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out-soft);
}
.fyf-notebook .fyf-notebook__row .fyf-notebook__bench-inner {
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 0;
  opacity: 0;
  /* Fading a touch faster than the height opens, and starting from nothing,
     hides the half-height frame where the row's contents are clipped in the
     middle -- which is the part that read as a jump. */
  transition: opacity var(--dur-base) var(--ease-out-soft);
}
/* The chips region and its inner wrapper are structure, not layout: display:
   contents drops them out of the box tree so their chips sit on the SAME flex
   line as the picker, the promote disclosure and Delete. The elements stay --
   the outer one is the id every repaint aims at. */
.fyf-notebook .fyf-notebook__row .fyf-notebook__links,
.fyf-notebook .fyf-notebook__row .fyf-notebook__links-inner { display: contents; }

/* Every control on the bench line is the same height and centres its own
   text. `align-items: center` only centres the flex ITEMS -- it says nothing
   about where the text sits inside one, and these come in four shapes: a <p>
   ("Reading…"), a bare <button> (Delete), a <button> wrapped in a div (the
   "+ link" picker, which also holds its hidden panel) and a <details>
   summary. The wrapped button was centred in its wrapper's 24px line box by
   its BASELINE, which put it three pixels below everything else on the row.
   Giving each participant one height and centring its contents removes the
   line box from the question entirely. */
.fyf-notebook .fyf-notebook__bench-inner { --bench-control-h: 22px; line-height: 1; }

/* :not([hidden]) on every one of these. Several are revealed by clearing the
   `hidden` attribute, and a display rule at this specificity would beat the
   UA's [hidden] { display: none } and leave them permanently on screen --
   the trap spec/components/notebook/delete_confirm_hidden_spec.rb exists to
   catch, arriving here through a stylesheet rather than a class. */
.fyf-notebook .fyf-notebook__bench-inner .fyf-notebook__chip:not([hidden]),
.fyf-notebook .fyf-notebook__bench-inner .fyf-notebook__action:not([hidden]),
.fyf-notebook .fyf-notebook__bench-inner .fyf-notebook__meta:not([hidden]),
.fyf-notebook .fyf-notebook__bench-inner .fyf-notebook__row-meta:not([hidden]) {
  min-height: var(--bench-control-h);
  display: inline-flex;
  align-items: center;
}
/* These two wrap a control AND the panel it opens, so they stack rather than
   sit inline -- centred while closed, growing downward once open. */
.fyf-notebook .fyf-notebook__bench-inner .fyf-notebook__picker-wrap,
.fyf-notebook .fyf-notebook__bench-inner .fyf-notebook__promote-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: var(--bench-control-h);
}

.fyf-notebook .fyf-notebook__row:hover .fyf-notebook__bench,
.fyf-notebook .fyf-notebook__row:focus-within .fyf-notebook__bench {
  grid-template-rows: 1fr;
}
.fyf-notebook .fyf-notebook__row:hover .fyf-notebook__bench-inner,
.fyf-notebook .fyf-notebook__row:focus-within .fyf-notebook__bench-inner {
  opacity: 1;
  /* Held back until the row has some height to show it in. */
  transition-delay: 60ms;
}
/* A note still waiting on the ranker to say who was meant is the exception:
   a dashed chip is a question, and a question nobody can see never gets
   answered. */
.fyf-notebook .fyf-notebook__row:has(.fyf-notebook__chip--pending) .fyf-notebook__bench {
  grid-template-rows: 1fr;
}
.fyf-notebook .fyf-notebook__row:has(.fyf-notebook__chip--pending) .fyf-notebook__bench-inner { opacity: 1; }

@media (hover: none) {
  /* No hover to reach with: on a touch screen the workbench is always open
     rather than unreachable. */
  .fyf-notebook .fyf-notebook__row .fyf-notebook__bench { grid-template-rows: 1fr; }
  .fyf-notebook .fyf-notebook__row .fyf-notebook__bench-inner { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fyf-notebook .fyf-notebook__row .fyf-notebook__bench,
  .fyf-notebook .fyf-notebook__row .fyf-notebook__bench-inner { transition: none; }
}

/* ---- Form controls ----------------------------------------------------- */

/* The link picker's search box and the promote form's set picker. Both sit
   inside a note row, so they take the ledger's paper rather than the app
   shell's surface tokens -- which are the other theme's values here. */
.fyf-notebook .fyf-notebook__field {
  display: block;
  width: 100%;
  background: var(--n-paper);
  border: 1.5px solid var(--n-line2);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 13px;
  color: var(--n-ink);
}
.fyf-notebook .fyf-notebook__field:focus {
  outline: none;
  border-color: var(--n-link);
}
.fyf-notebook .fyf-notebook__field::placeholder { color: var(--n-ink60); }
.fyf-notebook .fyf-notebook__field--inline {
  flex: 1;
  width: auto;
  font-size: 11px;
  padding: 3px 7px;
}
.fyf-notebook .fyf-notebook__results {
  margin-top: 5px;
  max-height: 192px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
}
.fyf-notebook .fyf-notebook__promote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* A chip that has been spent -- a player already ruled out on this note, or a
   picker row whose create was refused. Still legible, no longer inviting. */
.fyf-notebook .fyf-notebook__chip--muted {
  border-color: var(--n-ink12);
  color: var(--n-ink60);
  cursor: default;
  opacity: 0.7;
}
.fyf-notebook .fyf-notebook__chip--muted:hover {
  border-color: var(--n-ink12);
  color: var(--n-ink60);
}

/* The candidate sheet the chip opens is a popover, not a section of the page:
   it needs the gap the chips row above it used to carry as a utility class. */
.fyf-notebook .fyf-notebook__sheet--popover {
  margin-top: 8px;
  padding: 11px 12px;
  border-color: var(--n-stroke);
  border-width: var(--stroke-chip);
}

/* ---- The card sheds its desk furniture on a phone ----------------------
   The artboard's phone capture view is the line, its chips and the filing
   number -- nothing else. Three things on the desk card are desk-only:
   "Saves as you type" (a reassurance that costs a whole row at 390px), the
   keyboard hint (there is no ⌘ key on a phone), and the sentence explaining
   the clock syntax (three lines of instruction above a one-line note). The
   clock chip itself stays: that is the feedback, and it still appears. */
@media (max-width: 1023px) {
  .fyf-notebook .fyf-notebook__saved,
  .fyf-notebook .fyf-notebook__hint,
  .fyf-notebook .fyf-notebook__capture-row--linking .fyf-notebook__meta { display: none; }

  /* With the hint gone the two rows carry only chips, so they close up and
     the eyebrow labels stop being a column of their own. */
  .fyf-notebook .fyf-notebook__capture-row { gap: 7px; padding: 6px 0; }
  .fyf-notebook .fyf-notebook__capture-row--clock:empty { display: none; }
  .fyf-notebook .fyf-notebook__capture-badge { align-self: center; }
}

/* Narrow enough that the week stepper and the search field cannot share a
   line: the search takes the full width beneath them rather than squeezing
   the week out of its pill. */
@media (max-width: 539px) {
  .fyf-notebook .fyf-notebook__header { gap: 8px 10px; }
  .fyf-notebook .fyf-notebook__title { font-size: 20px; }
  .fyf-notebook .fyf-notebook__search { flex-basis: 100%; }
}

@media (max-width: 1023px) {
  /* With the hint and the keyboard note gone, "Linking" and "Clock" label
     rows that are empty until the first chip lands. A pink dot beside a
     player's name and a bordered "2Q 2:53" say what they are; the labels were
     only ever there to title a desk card's columns. */
  .fyf-notebook .fyf-notebook__capture-row .fyf-notebook__eyebrow { display: none; }
  .fyf-notebook .fyf-notebook__capture-row--clock { padding-bottom: 6px; }
}

/* The workbench reads as one line: the chips, then the two things you can do
   with them. Stacked, it was four lines deep on a ledger whose whole point is
   that a note is one line. The picker panel and the promote forms drop
   BELOW that line when opened -- they are the only parts tall enough to need
   the room, and only once asked for. */
.fyf-notebook .fyf-notebook__chips {
  display: contents;
}
.fyf-notebook .fyf-notebook__picker-wrap,
.fyf-notebook .fyf-notebook__promote-group { min-width: 0; }
.fyf-notebook .fyf-notebook__picker { margin-top: 6px; width: 260px; max-width: 100%; }
.fyf-notebook .fyf-notebook__promote-forms { margin-top: 4px; }
.fyf-notebook .fyf-notebook__promote-group summary { cursor: pointer; list-style: none; }
.fyf-notebook .fyf-notebook__promote-group summary::-webkit-details-marker { display: none; }
/* Open, the picker and the promote list need a whole line to themselves. */
.fyf-notebook .fyf-notebook__picker-wrap:has(.fyf-notebook__picker:not([hidden])),
.fyf-notebook .fyf-notebook__promote-group[open] { flex-basis: 100%; }

/* The note takes the first line of the row, the workbench the second. */
.fyf-notebook .fyf-notebook__row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
}
.fyf-notebook .fyf-notebook__body,
.fyf-notebook .fyf-notebook__editor,
.fyf-notebook .fyf-notebook__bench { flex: 1 0 100%; }

/* "+1" beside the stamp: the note named more moments than the one column can
   hold. Quiet -- it is a footnote on the clock, not a second clock. */
.fyf-notebook .fyf-notebook__stamp-more {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 9px;
  color: var(--n-ink60);
}

/* ======================================================================
   The archive — the season as a ledger of weeks.

   Same .fyf-notebook scope and the same --n-* palette, so the two pages are
   one place. The modifier only undoes the week ledger's fixed-height grid:
   this page scrolls as a document, because a season is a thing you read down
   rather than a desk you work at.
   ====================================================================== */

.fyf-notebook--archive {
  display: block;
  height: auto;
  min-height: 100%;
  overflow: visible;
}

/* ---- Hero -------------------------------------------------------------- */

.fyf-notebook .fyf-notebook__hero {
  border-bottom: 2px solid var(--n-line2);
  background: var(--n-panel);
}
.fyf-notebook .fyf-notebook__hero-inner {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  flex-wrap: wrap;
  max-width: 1020px;
  margin-inline: auto;
  padding: 18px 26px 14px;
}
.fyf-notebook .fyf-notebook__hero-copy { min-width: 0; }
.fyf-notebook .fyf-notebook__back {
  display: inline-block;
  text-decoration: none;
}
.fyf-notebook .fyf-notebook__back:hover { color: var(--n-ink); }
.fyf-notebook .fyf-notebook__hero-title {
  font-family: var(--font-header);
  font-weight: var(--weight-display);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  margin: 7px 0 0;
  max-width: 520px;
  color: var(--n-ink);
}

/* The one spice word on the page. Borough Grotesk is the brand's loudest
   voice and the guidelines allow it one or two words per layout -- this is
   the word the page is about, so it gets them. */
.fyf-notebook .fyf-notebook__spice {
  margin-left: auto;
  font-family: var(--font-spice);
  font-size: 68px;
  line-height: var(--leading-spice);
  letter-spacing: var(--tracking-spice);
  text-transform: uppercase;
  color: var(--fyf-pink);
  text-shadow: var(--text-shadow-hard);
  white-space: nowrap;
}

/* ---- Season counter bar ------------------------------------------------ */

.fyf-notebook .fyf-notebook__counters--season { padding: 0; }
.fyf-notebook .fyf-notebook__counters-inner {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  max-width: 1020px;
  width: 100%;
  margin-inline: auto;
  padding: 0 26px;
}
.fyf-notebook .fyf-notebook__counters-span {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fyf-yellow);
  white-space: nowrap;
}

/* ---- The weeks table --------------------------------------------------- */

.fyf-notebook .fyf-notebook__archive-body {
  max-width: 1020px;
  margin-inline: auto;
  padding: 22px 26px 60px;
}

/* One grid definition, shared by the floating header, every row and the
   totals -- declared once so the four can never drift out of alignment.
   See docs: reference_editor_header_row_parity. */
.fyf-notebook .fyf-notebook__week-head,
.fyf-notebook .fyf-notebook__week-row,
.fyf-notebook .fyf-notebook__week-total {
  display: grid;
  grid-template-columns: 104px 64px 78px 74px minmax(0, 1fr) 92px;
  gap: 14px;
  align-items: center;
}
.fyf-notebook .fyf-notebook__week-head {
  padding: 0 14px 7px;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--n-ink60);
}
/* NOT .fyf-notebook__weeks: that is the week STEPPER pill in the ledger's
   header, and a table inheriting its pill radius and charcoal keyline looked
   like a mistake nobody could explain. */
.fyf-notebook .fyf-notebook__week-table {
  display: block;
  width: 100%;
  border-collapse: collapse;
}
.fyf-notebook .fyf-notebook__week-table thead,
.fyf-notebook .fyf-notebook__week-table tbody,
.fyf-notebook .fyf-notebook__week-table tfoot { display: block; }
.fyf-notebook .fyf-notebook__week-row {
  padding: 9px 14px;
  border-bottom: 1px solid var(--n-rule);
  transition: background var(--dur-fast) var(--ease-snap);
}
.fyf-notebook .fyf-notebook__week-row:hover { background: var(--n-page2); }
.fyf-notebook .fyf-notebook__week-row th { font-weight: inherit; text-align: left; }
.fyf-notebook .fyf-notebook__week-link { text-decoration: none; }
/* The whole row is the target, not just the badge in it: a week is one thing
   to open, and a 104px chip is a small thing to hit. */
.fyf-notebook .fyf-notebook__week-row:has(.fyf-notebook__week-link:hover) { background: var(--n-page2); }
.fyf-notebook .fyf-notebook__week-line {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--n-ink80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fyf-notebook .fyf-notebook__week-tag {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--n-ink60);
}
.fyf-notebook .fyf-notebook__chevron {
  width: 7px;
  height: 7px;
  border-right: 2.5px solid var(--n-ink30);
  border-bottom: 2.5px solid var(--n-ink30);
  transform: rotate(-45deg);
  flex: none;
}
.fyf-notebook .fyf-notebook__week-head .is-num,
.fyf-notebook .fyf-notebook__week-table .is-num { text-align: right; }
.fyf-notebook .fyf-notebook__week-table td.is-num { font-size: 14px; }
.fyf-notebook .is-clock { color: var(--n-clock); }
.fyf-notebook .is-muted { color: var(--n-ink80); }

/* The season line closes the table on the same ink as the counter bar that
   opened the page, so the numbers read as one statement. */
.fyf-notebook .fyf-notebook__week-total {
  padding: 11px 14px;
  background: var(--n-bar);
  color: var(--n-onbar);
}
.fyf-notebook .fyf-notebook__week-total th {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-align: left;
}
.fyf-notebook .fyf-notebook__week-total td { font-size: 15px; }
.fyf-notebook .fyf-notebook__week-total .fyf-notebook__week-line {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(250, 220, 194, 0.72);
}
.fyf-notebook .fyf-notebook__week-total .is-clock { color: var(--fyf-blue); }

/* An outline badge: a week that is not the one you are in. */
.fyf-notebook .fyf-notebook__badge--outline {
  background: transparent;
  color: var(--n-ink);
  border-color: var(--n-ink);
}

/* ---- Who you kept coming back to --------------------------------------- */

.fyf-notebook .fyf-notebook__season-section { margin-top: 26px; }
.fyf-notebook .fyf-notebook__top-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 62px 52px;
  gap: 12px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--n-rule);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-snap);
}
.fyf-notebook .fyf-notebook__top-row:last-child { border-bottom: 0; }
.fyf-notebook .fyf-notebook__top-row:hover { background: var(--n-page2); }
.fyf-notebook .fyf-notebook__top-rank {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 11px;
  color: var(--n-ink60);
}
.fyf-notebook .fyf-notebook__top-row .fyf-notebook__index-name { font-size: 14.5px; }
.fyf-notebook .fyf-notebook__top-n {
  font-size: 13.5px;
  text-align: right;
  color: var(--n-ink);
}
.fyf-notebook .fyf-notebook__top-weeks { text-align: right; font-size: 9px; }

.fyf-notebook .fyf-notebook__archive-foot {
  margin-top: 20px;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--n-ink60);
}

/* ---- Nothing kept yet -------------------------------------------------- */

.fyf-notebook .fyf-notebook__archive-empty {
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.fyf-notebook .fyf-notebook__archive-empty-copy {
  max-width: 46ch;
  font-size: 14px;
  line-height: var(--leading-body);
  color: var(--n-ink80);
}

/* ---- Phone ------------------------------------------------------------- */

@media (max-width: 1023px) {
  .fyf-notebook .fyf-notebook__hero-inner { padding: 14px 16px 12px; gap: 14px; }
  .fyf-notebook .fyf-notebook__hero-title { font-size: 24px; }
  .fyf-notebook .fyf-notebook__spice { font-size: 46px; margin-left: 0; }
  .fyf-notebook .fyf-notebook__counters-inner { padding: 0 16px; }
  .fyf-notebook .fyf-notebook__counters-span { display: none; }
  .fyf-notebook .fyf-notebook__archive-body { padding: 16px 16px 56px; }

  /* Four numeric columns cannot survive a phone. The week keeps its badge and
     its first line; the counts fold onto a second line underneath, where they
     read as a sentence about the week rather than as a table nobody can see
     the header of. */
  .fyf-notebook .fyf-notebook__week-head { display: none; }
  .fyf-notebook .fyf-notebook__week-row,
  .fyf-notebook .fyf-notebook__week-total {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 10px 12px;
  }
  .fyf-notebook .fyf-notebook__week-row th,
  .fyf-notebook .fyf-notebook__week-total th { grid-row: 1; grid-column: 1; }
  .fyf-notebook .fyf-notebook__week-tag { grid-row: 1; grid-column: 3; }
  .fyf-notebook .fyf-notebook__week-row .fyf-notebook__week-line,
  .fyf-notebook .fyf-notebook__week-total .fyf-notebook__week-line {
    grid-row: 3;
    grid-column: 1 / 4;
    white-space: normal;
  }
  /* The three counts share row two as one labelled line. They cannot share a
     grid CELL -- they are three elements -- so the row becomes a flex line of
     its own, and each number carries the word the hidden column header would
     have given it. A bare "13 10 16" under a week is not information. */
  .fyf-notebook .fyf-notebook__week-table td.is-num {
    grid-row: 2;
    display: inline;
    font-size: 12px;
    text-align: left;
  }
  /* Placed by position, not by label: the label is pluralised per row
     ("1 note", "13 notes") and is not a stable selector. */
  .fyf-notebook .fyf-notebook__week-table td.is-num:nth-of-type(1) { grid-column: 1; }
  .fyf-notebook .fyf-notebook__week-table td.is-num:nth-of-type(2) { grid-column: 2; }
  .fyf-notebook .fyf-notebook__week-table td.is-num:nth-of-type(3) { grid-column: 3; }
  .fyf-notebook .fyf-notebook__week-table td.is-num::after {
    content: " " attr(data-label);
    font-family: var(--font-subhead);
    font-weight: 700;
    font-size: 8.5px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--n-ink60);
  }
  .fyf-notebook .fyf-notebook__week-total td.is-num::after { color: rgba(250, 220, 194, 0.72); }

  .fyf-notebook .fyf-notebook__top-row {
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
    gap: 8px;
  }
  .fyf-notebook .fyf-notebook__top-weeks { display: none; }
}

/* The one control that files a note. A sticker button, because filing is the
   card's only act and the card is the only place it happens -- everything
   else on this page saves itself. */
.fyf-notebook .fyf-notebook__file {
  flex: none;
  margin-left: auto;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: var(--fyf-pink);
  color: var(--fyf-cream);
  border: var(--stroke-chip) solid var(--n-stroke);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--n-sh);
  transition: transform var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-fast) var(--ease-snap);
}
.fyf-notebook .fyf-notebook__file:hover { box-shadow: 3px 3px 0 var(--n-sh); }
.fyf-notebook .fyf-notebook__file:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--n-sh);
}

@media (max-width: 1023px) {
  /* On a phone this is the primary action, not a trailing control: full
     width under the line, thumb-sized, the way the artboard draws it. */
  .fyf-notebook .fyf-notebook__file {
    margin-left: 0;
    width: 100%;
    padding: 11px 0;
    font-size: 11px;
    box-shadow: 3px 3px 0 var(--n-sh);
  }
}

/* A note being read rather than written: no text cursor, because there is no
   editor behind it to reveal. */
.fyf-notebook .fyf-notebook__body--static { cursor: default; }

/* ======================================================================
   The player rollup — one player, everything ever written about them.

   Reads as a document like the archive, so it undoes the ledger's fixed
   grid the same way.
   ====================================================================== */

.fyf-notebook--rollup {
  display: block;
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.fyf-notebook .fyf-notebook__rollup-head {
  max-width: 880px;
  margin-inline: auto;
  padding: 16px 26px 13px;
}
.fyf-notebook .fyf-notebook__rollup-identity {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.fyf-notebook .fyf-notebook__rollup-name {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
/* Never truncated: a player's name is the one thing on this page that must
   read in full, whatever it costs the line. */
.fyf-notebook .fyf-notebook__rollup-title {
  font-family: var(--font-header);
  font-weight: var(--weight-display);
  font-size: 36px;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--n-ink);
  text-wrap: balance;
}
.fyf-notebook .fyf-notebook__rollup-stats { display: flex; align-items: stretch; }
.fyf-notebook .fyf-notebook__rollup-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-right: 12px;
  margin-right: 12px;
  border-right: 1px solid var(--n-line2);
  white-space: nowrap;
}
.fyf-notebook .fyf-notebook__rollup-stat:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}
.fyf-notebook .fyf-notebook__rollup-stat .fyf-notebook__num { font-size: 16px; line-height: 1; }
.fyf-notebook .fyf-notebook__rollup-stat .fyf-notebook__counter-k { color: var(--n-ink60); }

/* ---- When you catch them ----------------------------------------------- */

.fyf-notebook .fyf-notebook__quarters {
  margin: 0 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background: var(--n-paper);
  border: 1.5px solid var(--n-line2);
  border-radius: var(--radius-sm);
  padding: 8px 13px 7px;
}
.fyf-notebook .fyf-notebook__quarters-label {
  align-self: center;
  max-width: 74px;
  white-space: normal;
  text-wrap: pretty;
}
.fyf-notebook .fyf-notebook__quarter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 22px;
}
.fyf-notebook .fyf-notebook__quarter-n { font-size: 10px; color: var(--n-ink80); }
.fyf-notebook .fyf-notebook__quarter-bar {
  width: 9px;
  background: var(--fyf-pink);
}
/* A quarter with nothing in it is a hairline, not a missing bar: the gap in
   the shape is the information. */
.fyf-notebook .fyf-notebook__quarter-bar.is-empty { background: var(--n-ink12); }
.fyf-notebook .fyf-notebook__quarter-k {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--n-ink60);
}

/* ---- The notes --------------------------------------------------------- */

.fyf-notebook .fyf-notebook__rollup-body {
  max-width: 880px;
  margin-inline: auto;
  padding: 18px 26px 60px;
}
.fyf-notebook .fyf-notebook__rollup-lead {
  font-family: var(--font-header);
  font-weight: var(--weight-display);
  font-size: 22px;
  line-height: 1.16;
  color: var(--n-ink80);
  margin: 0 0 4px;
  max-width: 620px;
}
.fyf-notebook .fyf-notebook__sheet--ruled { background-image: var(--n-grid); }

/* The rollup's row has no editor and no workbench, so it keeps the ledger's
   three columns but none of its hover machinery. */
.fyf-notebook .fyf-notebook__row--static {
  grid-template-columns: 92px minmax(0, 1fr) 96px;
  padding: 9px 14px;
}

.fyf-notebook .fyf-notebook__also {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1.5px solid var(--n-ink12);
}

/* ---- Phone ------------------------------------------------------------- */

@media (max-width: 1023px) {
  .fyf-notebook .fyf-notebook__rollup-head { padding: 14px 16px 12px; }
  .fyf-notebook .fyf-notebook__rollup-title { font-size: 27px; }
  .fyf-notebook .fyf-notebook__rollup-body { padding: 14px 16px 56px; }
  .fyf-notebook .fyf-notebook__rollup-lead { font-size: 18px; }
  /* The histogram stops being a side panel and takes its own line. */
  .fyf-notebook .fyf-notebook__quarters { margin-left: 0; width: 100%; }
  .fyf-notebook .fyf-notebook__row--static {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 9px 12px;
  }
}