/* Four cards name the fifth — page styles. Shared tokens and classes come from site.css.
   (kit.js is also used by sibling pages; these fk-* classes style its components.) */

.fk-stage { --card-w: clamp(50px, 7.6vw, 76px); }
.fk-stage [hidden] { display: none !important; }

/* Zones of cards: hand row above, message row (four slots + cover) below */
.fk-cards { display: grid; gap: var(--s2); margin: var(--s2) 0; }
.fk-zone { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.fk-handrow { padding-top: 22px; min-height: calc(var(--card-w) * var(--card-ratio) + 22px); }
.fk-empty { flex: none; }
.fk-handrow:empty::before { content: "All five cards are on the table below."; align-self: center; color: var(--structure); font-size: 0.92rem; }
.fk-slots { display: flex; align-items: flex-start; gap: 8px; padding-top: 22px; }
.fk-slot-wrap { display: grid; justify-items: center; gap: 6px; }
.fk-slot { position: relative; flex: none; }
.fk-slot > .card { position: absolute; left: -1.5px; top: -1.5px; }
.fk-slot.is-target { border-color: var(--active); }
.fk-slot-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 600; white-space: nowrap; }
.fk-cover-wrap { margin-left: 10px; padding-left: 14px; border-left: 1px dashed rgba(244, 239, 228, 0.2); }
.fk-cover { border-style: solid; border-color: rgba(244, 239, 228, 0.18); background: rgba(244, 239, 228, 0.04); }
.fk-status { margin-top: var(--s1); min-height: 1.5em; }
.fk-verdict, .fk-stage > .verdict { margin-top: var(--s2); }
.fk-stage > .controls { margin-top: var(--s2); }

/* Inline names in prose on the stage */
.fk-name { font-weight: 650; white-space: nowrap; }
.fk-pat { font-family: var(--font-math); font-style: normal; letter-spacing: 0.06em; white-space: nowrap; }
.fk-said { display: block; margin-top: 6px; color: var(--secondary-on-stage); }
.fk-code-line { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-math); font-size: 1.1rem; }
.fk-code-line span { white-space: nowrap; }

/* ---------- The 52-card picker: compact rank × suit buttons ---------- */
.fk-picker-zone { margin-top: var(--s2); }
.fk-picker {
  display: grid; gap: 5px; max-width: 820px;
  grid-template-columns: 26px repeat(13, minmax(0, 1fr));
}
.fk-pick-suit { grid-column: 1; grid-row: var(--wr); align-self: center; justify-self: center; font-size: 1.15rem; line-height: 1; color: var(--paper); }
.fk-pick {
  grid-column: var(--wc); grid-row: var(--wr);
  min-height: 44px; min-width: 0; padding: 0; border-radius: 6px;
  border: 1px solid transparent; background: var(--paper-shade); color: var(--black-ink);
  font: 650 0.98rem/1 var(--font-ui); display: flex; align-items: center; justify-content: center; gap: 1px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 150ms var(--ease-press), opacity 150ms ease, background-color 150ms ease;
}
.fk-pick .s { font-size: 0.9em; }
.fk-pick[data-red] { color: var(--red-ink); }
.fk-pick-suit[data-red] { color: #E2899A; }
.fk-pick:active:not(:disabled) { transform: scale(0.96); }
.fk-pick[aria-pressed="true"] { background: var(--paper); box-shadow: 0 0 0 2.5px var(--active); transform: translateY(-2px); }
.fk-pick:disabled { opacity: 0.32; cursor: default; }
.fk-pick:focus-visible { outline: 2px solid var(--active); outline-offset: 2px; }
@media (max-width: 640px) {
  .fk-picker { grid-template-columns: 22px repeat(7, minmax(0, 1fr)); gap: 4px; }
  .fk-pick-suit { grid-row: var(--nr) / span 2; }
  .fk-pick { grid-column: var(--nc); grid-row: var(--nr); min-height: 44px; font-size: 0.95rem; }
  /* a little air between suit blocks */
  .fk-pick[style*="--nr:3"], .fk-pick[style*="--nr:5"], .fk-pick[style*="--nr:7"] { margin-top: 6px; }
  .fk-pick-suit[style*="--nr:3"], .fk-pick-suit[style*="--nr:5"], .fk-pick-suit[style*="--nr:7"] { margin-top: 6px; }
}

/* ---------- Why it works: inspect stage ---------- */
.fk-why-top { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.fk-examples { flex-wrap: wrap; }
.fk-views { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fk-counter { margin-top: var(--s2); color: var(--secondary-on-stage); font-size: 0.9rem; letter-spacing: 0.02em; }
.fk-why-text { margin-top: 4px; min-height: 4.4em; }
.fk-step-controls { margin-top: var(--s1); }
.fk-readouts { margin-top: var(--s3); gap: var(--s2) var(--s4); }
.fk-readouts .readout-value { font-size: 1.45rem; }
.fk-why-grid { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
.fk-why-main { min-width: 0; }
.fk-panels { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); align-content: start; }
/* Narrow screens: one column, with the clock directly under the cards and above the Step button,
   so it is on screen whenever a step changes it. */
@media (max-width: 979px) {
  .fk-why-grid { gap: 0; }
  .fk-why-main, .fk-panels { display: contents; }
  .fk-why-grid .fk-counter { order: 1; }
  .fk-why-grid .fk-why-text { order: 2; }
  .fk-why-grid .fk-cards { order: 3; }
  .fk-why-grid .fk-clock-fig { order: 4; margin-top: var(--s1); }
  .fk-why-grid .fk-step-controls { order: 5; }
  .fk-why-grid .fk-readouts { order: 6; }
  .fk-why-grid .fk-table-fig { order: 7; margin-top: var(--s3); }
  .fk-clock-fig .fk-clock { max-width: 250px; }
}
.fk-ex-note { margin-top: var(--s1); font-size: 0.9rem; }
@media (min-width: 980px) {
  .fk-why-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s4); align-items: start; }
  .fk-panels { margin-top: var(--s2); }
}
.fk-nowrap { white-space: nowrap; }
.fk-panel { margin: 0; display: grid; gap: var(--s1); justify-items: start; }
.fk-ledger-wrap { margin-top: var(--s3); display: grid; gap: 6px; }
.fk-ledger { max-height: 9.5em; }

/* Rank clock */
.fk-clock { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.fk-clock-ring { fill: none; stroke: var(--structure); stroke-width: 1; opacity: 0.6; }
.fk-node circle { fill: var(--stage-raised); stroke: var(--structure); stroke-width: 1.2; }
.fk-node text { fill: var(--secondary-on-stage); font: 600 13px var(--font-ui); }
.fk-node[data-kind="active"] circle { stroke: var(--active); stroke-width: 2.6; }
.fk-node[data-kind="invariant"] circle { stroke: var(--invariant); stroke-width: 2.6; }
.fk-node[data-kind] text { fill: var(--paper); }
.fk-arc { fill: none; stroke-width: 3; stroke-linecap: round; }
.fk-arc.is-invariant { stroke: var(--invariant); }
.fk-arc.is-active { stroke: var(--active); }
.fk-arc.is-structure { stroke: var(--structure); stroke-dasharray: 5 5; stroke-width: 2; }
.fk-arrowhead.is-invariant { fill: var(--invariant); }
.fk-arrowhead.is-active { fill: var(--active); }
.fk-arrowhead.is-structure { fill: var(--structure); }
.fk-arc-label { font: 700 17px var(--font-math); }
.fk-arc-label.is-invariant { fill: var(--invariant); }
.fk-arc-label.is-active { fill: var(--active); }
.fk-arc-label.is-structure { fill: var(--secondary-on-stage); }
.fk-step-dot { fill: var(--stage); stroke: var(--active); stroke-width: 1.5; }
.fk-step-num { fill: var(--active); font: 700 11px var(--font-ui); }

/* Pattern table */
.fk-table { font-size: 0.98rem; }
.fk-table td, .fk-table th { padding: 4px 14px; }
.fk-table tr[data-kind] td { color: var(--paper); font-weight: 650; }
.fk-table tr[data-kind="invariant"] td:first-child { box-shadow: inset 3px 0 0 var(--invariant); color: var(--invariant); }
.fk-table tr[data-kind="active"] td:first-child { box-shadow: inset 3px 0 0 var(--active); color: var(--active); }
.fk-table tr[data-kind="invariant"] .fk-pat { color: var(--invariant); }
.fk-table tr[data-kind="active"] .fk-pat { color: var(--active); }

/* ---------- Challenge ---------- */
.fk-mode { margin-bottom: var(--s2); flex-wrap: wrap; }
#challenge .stage[hidden] { display: none; }
.fk-worksheet { display: grid; gap: var(--s2); margin-top: var(--s3); max-width: 680px; }
.fk-ws-line { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.fk-ws-no { width: 28px; height: 28px; border-radius: 999px; border: 1px solid rgba(244, 239, 228, 0.28); display: grid; place-items: center; font-family: var(--font-math); font-size: 0.95rem; color: var(--secondary-on-stage); margin-top: 2px; }
.fk-seg-label { display: block; font-size: 0.9rem; color: var(--secondary-on-stage); margin-bottom: 6px; }
.fk-seg-field .segmented { flex-wrap: wrap; }
.fk-roles, .fk-card-pick { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.fk-roles .field span { font-weight: 650; color: var(--paper); font-size: 0.95rem; }
.fk-stage .field select { min-width: 6.5em; }