/* =============================================================================
   consistency.css — /fantasy/consistency/

   Floors, streaks and power-play reliance. Everything on this page is a count
   taken off per-game logs, so the styling job is to make counts legible, not
   to dress them up.

   House rules, same as the rest of the desk:
     * Upright type only. The scope reset below forces the upright face.
     * Ink + blue is the accent grammar. No gold is declared here; the only
       gold on the page is the receipt glyph that hi-receipt.css owns.
     * mint = reliable / ahead, coral = risk / behind. Nothing else coloured.
     * Every colour is a token. Club tints are injected inline by the script.

   Scoped to .fc-scope. hub.css already paints the shell (.fh-*); this file
   only owns the page's own furniture.
   ============================================================================= */

.fc-scope {
  /* surfaces — aliases onto the canon, the same names the desk family uses */
  --fw-field: var(--hi-surface-0);
  --fw-card: var(--hi-surface-1);
  --fw-card2: var(--hi-surface-2);
  --fw-track: var(--hi-surface-3);
  --fw-line: var(--hi-line);
  --fw-hair: var(--hi-hair);

  /* ink */
  --fw-ink: var(--hi-ink);
  --fw-ink-2: var(--hi-ink-2);
  --fw-muted: var(--hi-muted);

  /* the one accent */
  --fw-blue: var(--hi-blue);
  --fw-blue-2: var(--hi-blue-2);
  --fw-blue-soft: var(--hi-blue-soft);
  --fw-blue-line: var(--hi-blue-line);
  --fw-on-blue: #ffffff;

  /* semantics */
  --fw-up: var(--hi-mint);
  --fw-up-soft: var(--hi-mint-soft);
  --fw-down: var(--hi-coral);
  --fw-down-soft: var(--hi-coral-soft);

  /* data pair */
  --fw-fill: var(--hi-data-fill);
  --fw-dtrack: var(--hi-data-track);

  /* navy furniture — identical in both themes */
  --fw-navy-a: #061529;
  --fw-navy-b: #0f4a8f;
  --fw-navy-ink: #ffffff;
  --fw-navy-lede: var(--hi-on-navy);
  --fw-navy-label: var(--hi-on-navy-dim);
  --fw-navy-hi: var(--hi-on-navy-hi);
  --fw-navy-rule: var(--hi-navy-line);
  --fw-navy-fill: var(--hi-navy-fill);

  --fw-serif: var(--hi-serif);
  --fw-sans: var(--hi-sans);
  --fw-mono: var(--hi-mono);

  --fw-t-micro: 0.5625rem;
  --fw-t-meta: 0.625rem;
  --fw-t-meta-2: 0.6875rem;
  --fw-t-s: 0.8125rem;
  --fw-t-b: 0.9375rem;

  --fw-shadow: var(--hi-shadow);
  --fw-lift: var(--hi-lift);

  color: var(--fw-ink);
  font-family: var(--fw-sans);
}

[data-theme="dark"] .fc-scope { --fw-on-blue: #07101f; }

/* House rule, enforced. */
.fc-scope em, .fc-scope i, .fc-scope cite, .fc-scope address { font-style: normal; }

.fc-scope [hidden] { display: none !important; }

/* -----------------------------------------------------------------------------
   Mugs and crests — preloaded off-DOM by the script, monogram underneath
   -------------------------------------------------------------------------- */
.fc-mug {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  background: var(--tint, var(--fw-card2));
  border: 1px solid var(--tint-ring, var(--fw-line));
  color: var(--fw-ink-2);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
}
.fc-mug img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fc-mug.is-sm { width: 27px; height: 27px; font-size: var(--fw-t-micro); }
.fc-mug.is-lg { width: 56px; height: 56px; font-size: 0.9rem; border-width: 2px; }

.fc-crest {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 7px; overflow: hidden;
  background: var(--tint, var(--fw-card2));
  border: 1px solid var(--tint-ring, var(--fw-line));
  color: var(--fw-ink-2);
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700; letter-spacing: 0.02em;
}
.fc-crest img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
.fc-crest.is-sm { width: 22px; height: 22px; border-radius: 5px; font-size: 0.5rem; }

/* -----------------------------------------------------------------------------
   Shared small parts
   -------------------------------------------------------------------------- */
.fc-bar { display: block; height: 6px; border-radius: 999px; background: var(--fw-dtrack); overflow: hidden; min-width: 56px; width: 100%; }
.fc-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--fw-fill); }
.fc-bar.is-up > i { background: var(--fw-up); }
.fc-bar.is-down > i { background: var(--fw-down); }
.fc-barcell { display: flex; align-items: center; gap: 9px; }
.fc-barcell .v { font-family: var(--fw-mono); font-size: var(--fw-t-s); font-weight: 700; min-width: 3.2em; text-align: right; }

.fc-num { font-family: var(--fw-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.fc-mint { color: var(--fw-up); font-weight: 700; }
.fc-coral { color: var(--fw-down); font-weight: 700; }

.fc-tag {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--fw-line); background: var(--fw-card2);
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
  white-space: nowrap;
}
.fc-tag.is-up { color: var(--fw-up); border-color: var(--fw-up); background: var(--fw-up-soft); }
.fc-tag.is-down { color: var(--fw-down); border-color: var(--fw-down); background: var(--fw-down-soft); }
.fc-tag.is-blue { color: var(--fw-blue); border-color: var(--fw-blue-line); background: var(--fw-blue-soft); }

.fc-note {
  margin: 1rem 0 0; padding: 0.85rem 1rem;
  border: 1px solid var(--fw-line); border-left: 3px solid var(--fw-blue);
  border-radius: 10px; background: var(--fw-card);
}
.fc-note p { margin: 0 0 0.5rem; font-size: var(--fw-t-s); line-height: 1.65; color: var(--fw-ink-2); }
.fc-note p:last-child { margin-bottom: 0; }
.fc-note .tag {
  display: inline-block; margin-right: 7px;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-blue);
}

/* -----------------------------------------------------------------------------
   Hero — the floor vs ceiling quadrant
   -------------------------------------------------------------------------- */
.fc-hero-plot {
  margin: 1.1rem 0 0; padding: 0.9rem 0.9rem 0.7rem;
  border-radius: 14px; border: 1px solid var(--fw-navy-rule);
  background: var(--fw-navy-fill);
}
.fc-plot-controls {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 0 0 0.7rem;
}
.fc-plot-controls .lbl {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-navy-label);
  margin-right: 2px;
}
.fc-plot-controls button {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--fw-navy-rule); background: transparent;
  color: var(--fw-navy-lede);
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.fc-plot-controls button:hover { border-color: var(--fw-navy-hi); color: var(--fw-navy-ink); }
.fc-plot-controls button[aria-pressed="true"] {
  background: var(--fw-navy-ink); color: var(--fw-navy-a); border-color: var(--fw-navy-ink);
}
.fc-plot-controls button:focus-visible { outline: 2px solid var(--fw-navy-ink); outline-offset: 2px; }

.fc-plot-wrap { position: relative; }
.fc-plot { display: block; width: 100%; height: auto; touch-action: manipulation; }
.fc-plot .grid { stroke: var(--fw-navy-rule); stroke-width: 1; }
.fc-plot .axis { stroke: var(--fw-navy-hi); stroke-width: 1.2; }
.fc-plot .med { stroke: var(--fw-navy-hi); stroke-width: 1; stroke-dasharray: 4 4; }
.fc-plot .tick {
  fill: var(--fw-navy-label); font-family: var(--fw-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
}
.fc-plot .axlbl {
  fill: var(--fw-navy-lede); font-family: var(--fw-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.fc-plot .quad {
  fill: var(--fw-navy-label); font-family: var(--fw-mono);
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.fc-plot .dot {
  stroke: var(--fw-navy-ink); stroke-width: 1; stroke-opacity: 0.55;
  cursor: pointer; transition: r 120ms ease, stroke-opacity 120ms ease;
}
.fc-plot .dot:hover, .fc-plot .dot.is-on { stroke-opacity: 1; stroke-width: 2; }
/* a plotted point that carries a face: the dot becomes the tint ring around
   the headshot. The ring colour is the club's own, set inline by the script. */
.fc-plot .dot.is-mug {
  fill: none; stroke: var(--ring, var(--fw-navy-ink));
  stroke-width: 2.4; stroke-opacity: 0.92;
}
.fc-plot .dot.is-mug:hover, .fc-plot .dot.is-mug.is-on { stroke-width: 3.6; stroke-opacity: 1; }
.fc-plot .hit:focus-visible ~ .dot.is-mug { stroke-width: 3.6; }
.fc-plot .hit { fill: transparent; cursor: pointer; }
.fc-plot .hit:focus { outline: none; }
.fc-plot .hit:focus-visible + .dot, .fc-plot .hit:focus-visible ~ .dot { stroke-opacity: 1; stroke-width: 2.5; }
.fc-plot .lead {
  fill: var(--fw-navy-ink); font-family: var(--fw-mono);
  font-size: 11px; font-weight: 700; paint-order: stroke;
  stroke: var(--fw-navy-a); stroke-width: 3px; stroke-linejoin: round;
}

.fc-plot-read {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  min-height: 2.4rem; margin: 0.5rem 0 0; padding: 0.5rem 0.15rem 0;
  border-top: 1px solid var(--fw-navy-rule);
}
.fc-plot-read .who { font-family: var(--fw-serif); font-size: 1.02rem; font-weight: 700; color: var(--fw-navy-ink); }
.fc-plot-read .meta { font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-navy-label); }
.fc-plot-read .st { font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); color: var(--fw-navy-lede); font-weight: 700; }
.fc-plot-read .st b { color: var(--fw-navy-ink); }
.fc-plot-read .hint { font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-navy-label); }

/* the ≤600px fallback: the same 150 skaters as a scannable quadrant list */
.fc-plot-list { display: none; }
.fc-plot-list .cap { margin: 0 0 0.8rem; font-size: var(--fw-t-meta-2); line-height: 1.55; color: var(--fw-navy-lede); }
.fc-plot-list .qgrp { margin: 0 0 0.9rem; }
.fc-plot-list .qgrp:last-child { margin-bottom: 0; }
.fc-plot-list h3 {
  margin: 0 0 0.4rem; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fw-navy-label); font-weight: 700;
}
.fc-plot-list ol { margin: 0; padding: 0; list-style: none; }
.fc-plot-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--fw-navy-rule);
  font-size: var(--fw-t-s); color: var(--fw-navy-lede);
}
.fc-plot-list li:last-child { border-bottom: 0; }
.fc-plot-list li .n { flex: 1 1 auto; color: var(--fw-navy-ink); font-weight: 600; }
.fc-plot-list li .n a { color: inherit; text-decoration: none; }
.fc-plot-list li .n a:hover { text-decoration: underline; }
.fc-plot-list li .v { font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700; color: var(--fw-navy-lede); white-space: nowrap; }

/* -----------------------------------------------------------------------------
   Boards — every table lives in its own scroller on small screens
   -------------------------------------------------------------------------- */
.fc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.fc-scroll table { min-width: 640px; }
.fc-mini table { min-width: 0; width: 100%; }
.fc-mini .fc-table tbody td, .fc-mini .fc-table tbody th { padding: 0.42rem 0.3rem; }

.fc-table { width: 100%; border-collapse: collapse; }
.fc-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 0.5rem 0.55rem; text-align: right; white-space: nowrap;
  background: var(--fw-field);
  border-bottom: 1px solid var(--fw-line);
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fw-muted);
}
.fc-table thead th:first-child, .fc-table thead th.l { text-align: left; }
.fc-table tbody td, .fc-table tbody th {
  padding: 0.5rem 0.55rem; text-align: right; vertical-align: middle;
  border-bottom: 1px solid var(--fw-hair);
  font-size: var(--fw-t-s); color: var(--fw-ink-2);
}
.fc-table tbody tr:last-child td, .fc-table tbody tr:last-child th { border-bottom: 0; }
.fc-table tbody tr:hover { background: var(--fw-card2); }
.fc-table .c-rk {
  width: 2.4rem; text-align: right;
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700; color: var(--fw-muted);
}
.fc-table .c-who { text-align: left; }
.fc-table .who { display: flex; align-items: center; gap: 9px; }
.fc-table .who .nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fc-table .who .nm a, .fc-table .who .nm b {
  font-family: var(--fw-serif); font-size: var(--fw-t-b); font-weight: 700;
  color: var(--fw-ink); text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.fc-table .who .nm a:hover { color: var(--fw-blue); text-decoration: underline; }
.fc-table .who .nm span {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted); white-space: nowrap;
}
.fc-table .c-bar { width: 26%; min-width: 130px; }
.fc-table .c-ctx { text-align: left; font-size: var(--fw-t-meta-2); color: var(--fw-muted); }

/* the drought wall reads as a run of games, not a table cell */
.fc-run { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.fc-run i { display: block; width: 5px; height: 14px; border-radius: 2px; background: var(--fw-down); opacity: 0.9; }
.fc-run i.on { background: var(--fw-up); }
.fc-run .more { font-family: var(--fw-mono); font-size: var(--fw-t-micro); color: var(--fw-muted); margin-left: 4px; }

/* the ev / pp split bar */
.fc-split { display: flex; width: 100%; min-width: 96px; height: 10px; border-radius: 4px; overflow: hidden; background: var(--fw-dtrack); }
.fc-split .ev { height: 100%; background: var(--fw-fill); }
.fc-split .pp { height: 100%; background: var(--fw-down); }
.fc-split.is-safe .pp { background: var(--fw-blue); }
.fc-splitcell { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.fc-splitcell .lg {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.08em; color: var(--fw-muted); white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Boom-bust cards
   -------------------------------------------------------------------------- */
.fc-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.fc-card {
  padding: 0.85rem 0.9rem; border-radius: 12px;
  border: 1px solid var(--fw-line); background: var(--fw-card);
}
.fc-card .top { display: flex; align-items: center; gap: 9px; margin-bottom: 0.6rem; }
.fc-card .nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.fc-card .nm a, .fc-card .nm b {
  font-family: var(--fw-serif); font-size: 1rem; font-weight: 700;
  color: var(--fw-ink); text-decoration: none; line-height: 1.2;
}
.fc-card .nm a:hover { color: var(--fw-blue); text-decoration: underline; }
.fc-card .nm span {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
}
.fc-card .figs { display: flex; gap: 14px; margin-bottom: 0.55rem; }
.fc-card .fig { display: flex; flex-direction: column; gap: 1px; }
.fc-card .fig b { font-family: var(--fw-mono); font-size: 1.2rem; font-weight: 700; line-height: 1; color: var(--fw-ink); }
.fc-card .fig b.up { color: var(--fw-up); }
.fc-card .fig b.down { color: var(--fw-down); }
.fc-card .fig span {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
}
.fc-card .line { margin: 0; font-size: var(--fw-t-meta-2); line-height: 1.55; color: var(--fw-ink-2); }

/* -----------------------------------------------------------------------------
   Format lens
   -------------------------------------------------------------------------- */
.fc-lens { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fc-lens .cell {
  padding: 0.9rem 1rem; border-radius: 12px;
  border: 1px solid var(--fw-line); background: var(--fw-card2);
}
.fc-lens .cell h3 {
  margin: 0 0 0.35rem; font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--fw-blue);
}
.fc-lens .cell .w {
  display: block; margin: 0 0 0.5rem;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
}
.fc-lens .cell p { margin: 0; font-size: var(--fw-t-s); line-height: 1.65; color: var(--fw-ink-2); }

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .fc-hero-plot { padding: 0.75rem 0.75rem 0.6rem; border-radius: 12px; }
  .fc-card .fig b { font-size: 1.05rem; }
}

/* At 600px the scatter can no longer name a dot legibly, so it steps aside
   for the same 150 skaters printed as a quadrant list. */
@media (max-width: 600px) {
  .fc-plot-wrap, .fc-plot-read { display: none; }
  .fc-plot-list { display: block; }
}

@media print {
  .fc-plot-controls, .fc-scroll { display: block; }
  .fc-hero-plot { background: none; border-color: #999; }
  .fc-plot .quad, .fc-plot .tick, .fc-plot .axlbl { fill: #000; }
}

/* -----------------------------------------------------------------------------
   Reduced motion — the page has no autoplay motion, but every hover/press
   transition is removed so nothing animates for a reader who asked for still.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fc-scope *, .fc-scope *::before, .fc-scope *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fc-plot .dot { transition: none; }
  .fc-scroll { scroll-behavior: auto; }
}