/* Shared styles for the cookbook games. Colours come from the site tokens (docs/site/tokens.css), so
   the games follow the light/dark theme; status colours are always paired with text. */

.cg {
  --cg-ok: var(--ok);
  --cg-warn: var(--warn);
  --cg-bad: var(--bad);
  --cg-surface: var(--surface-2);
  --cg-border: var(--line);
  --cg-accent: var(--accent);

  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--cg-border);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--ink);
}

.cg [hidden] {
  display: none !important;
}

.cg:focus-visible,
.cg-btn:focus-visible,
.cg a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cg-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
}

.cg-meter-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 14rem;
  min-width: 12rem;
}

.cg-label {
  font-weight: 600;
}

.cg-meter {
  flex: 1;
  height: 0.9rem;
  border-radius: 0.45rem;
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  overflow: hidden;
}

.cg-meter-fill {
  height: 100%;
  width: 100%;
  background: var(--cg-ok);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.cg-meter-fill[data-level="warn"] {
  background: var(--cg-warn);
}

.cg-meter-fill[data-level="bad"] {
  background: var(--cg-bad);
}

.cg-meter-value,
.cg-stat {
  font-variant-numeric: tabular-nums;
}

.cg-status[data-status="won"] {
  color: var(--cg-ok);
  font-weight: 600;
}

.cg-status[data-status="lost"] {
  color: var(--cg-bad);
  font-weight: 600;
}

.cg-controls,
.cg-actions,
.cg-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cg-actions,
.cg-levels {
  margin-bottom: 0.75rem;
}

.cg .cg-blurb {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

.cg-btn-level[aria-pressed="true"],
.cg-btn-level[aria-pressed="true"]:hover:not(:disabled),
.cg-btn-primary:hover:not(:disabled) {
  background: var(--cg-accent);
  color: var(--accent-ink);
  border-color: var(--cg-accent);
}

.cg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--cg-accent);
  border-radius: 0.3rem;
  background: transparent;
  color: var(--cg-accent);
  font: inherit;
  cursor: pointer;
}

.cg-btn:hover:not(:disabled) {
  background: var(--cg-surface);
}

.cg-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cg-btn-primary {
  background: var(--cg-accent);
  color: var(--accent-ink);
}

.cg-btn kbd {
  padding: 0 0.35rem;
  border: 1px solid currentcolor;
  border-radius: 0.2rem;
  font-size: 0.75em;
}

.cg-main {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1rem;
}

@media (max-width: 700px) {
  .cg-main {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cg-main-stacked {
  grid-template-columns: minmax(0, 1fr);
}

.cg-main-stacked .cg-side {
  order: -1;
}

.cg-main-stacked .cg-log {
  max-height: 9rem;
}

.cg-board {
  container-type: inline-size;
  min-height: 8rem;
  padding: 0.75rem;
  border: 1px solid var(--cg-border);
  border-radius: 0.4rem;
  background: var(--cg-surface);
}

/* Material styles every .md-typeset ul/ol with `:not([hidden])` selectors, which a single class
   can't beat. The shell's own lists opt in to this reset with `.cg-list`. Games should build
   their boards from <div>s (with ARIA roles) rather than <ul>, so Material's list styling never
   applies to them. */
.cg ul.cg-list:not([hidden]),
.cg ol.cg-list:not([hidden]) {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cg ul.cg-list:not([hidden]) > li,
.cg ol.cg-list:not([hidden]) > li {
  margin-left: 0;
}

.cg .cg-h {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.cg .cg-log {
  max-height: 18rem;
  overflow-y: auto;
}

.cg-log-item {
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.3rem;
  border-left: 3px solid var(--cg-border);
  font-size: 0.85rem;
}

.cg-log-event {
  border-left-color: var(--cg-bad);
}

.cg-log-good {
  border-left-color: var(--cg-ok);
}

.cg-log-warn {
  border-left-color: var(--cg-warn);
}

.cg-log-hint {
  border-left-color: var(--cg-accent);
  font-style: italic;
}

.cg-log-fix {
  display: block;
  color: var(--muted);
}

.cg-learn {
  display: inline-block;
  margin-top: 0.15rem;
}

.cg-result {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--cg-border);
  border-radius: 0.4rem;
}

.cg-result-won {
  border-color: var(--cg-ok);
}

.cg-result-lost {
  border-color: var(--cg-bad);
}

.cg-result-facts {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .cg *,
  .cg *::before,
  .cg *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- game page layout (#58) ---- */

/* A game page is a play screen: no table of contents, a tighter title. */
body:has(#game[data-game]) .md-sidebar--secondary {
  display: none;
}

body:has(#game[data-game]) .md-typeset h1 {
  font-size: 1.7em;
}

.cg .cg-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.cg .cg-mark {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-s);
  background: var(--c);
  color: var(--on-hue);
  font: 700 0.72rem/1 var(--font-mono);
}

.cg .cg-topic {
  font: 600 0.8rem/1 var(--font-mono);
  color: var(--muted);
}

.cg .cg-notes {
  margin-left: auto;
  font: 600 0.82rem/1.2 var(--font-mono);
  color: var(--accent);
  text-underline-offset: 3px;
}

/* Levels scroll sideways in one row instead of wrapping into several. */
.cg .cg-levels {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.cg .cg-levels .cg-btn {
  flex: none;
  white-space: nowrap;
}

.cg .cg-goal {
  margin: 0 0 0.6rem;
}

.cg .cg-goal-toggle {
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 600 0.8rem/1.4 var(--font-mono);
  cursor: pointer;
}

.cg .cg-goal-toggle:hover {
  color: var(--ink);
}

.cg .cg-goal .cg-blurb {
  margin: 0.4rem 0 0;
}

.cg .cg-goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cg .cg-guide {
  margin-left: auto;
  padding: 0.2rem 0.4rem;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 600 0.8rem/1.4 var(--font-mono);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Revealed hints stay in view: the log folds away on a phone. */
.cg .cg-hints {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.cg .cg-hint {
  margin: 0.3rem 0 0;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 0.3rem 0.3rem 0;
  background: var(--surface-2, var(--surface));
  font: 500 0.88rem/1.45 var(--font-body);
}

/* ---- par and stars ---------------------------------------------------------------------- */

.cg .cg-stat[data-stat="moves"][data-over="true"] {
  color: var(--bad, var(--ink));
  font-weight: 700;
}

.cg .cg-stars-line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.4rem 0;
}

.cg .cg-stars {
  flex: none;
  color: var(--warn, var(--accent));
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}

.cg .cg-stars-text {
  font: 500 0.9rem/1.4 var(--font-body);
}

/* ---- debrief ---------------------------------------------------------------------------- */

.cg .cg-debrief {
  margin: 0.75rem 0 0;
}

.cg .cg-rule-broken {
  margin: 0.5rem 0;
  padding: 0.5rem 0.7rem;
  border-left: 4px solid var(--bad);
  background: var(--surface-2, var(--surface));
}

.cg .cg-lessons .cg-list {
  margin: 0.2rem 0 0.6rem;
  padding-left: 1.2rem;
}

.cg .cg-debrief-part {
  margin: 0.4rem 0;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: var(--surface);
}

.md-typeset details.cg-debrief-part > summary {
  padding: 0.6rem 2rem 0.6rem 0.8rem;
  font: 600 0.9rem/1.3 var(--font-body);
  cursor: pointer;
}

/* Material draws its own icon on every details summary; the shell's folds do without it. */
.md-typeset details.cg-debrief-part > summary::before {
  display: none;
}

.cg .cg-debrief-part > :not(summary) {
  margin-inline: 0.8rem;
}

.cg .cg-debrief-part[open] {
  padding-bottom: 0.7rem;
}

.cg .cg-timeline,
.cg .cg-path {
  padding-left: 0;
  list-style: none;
}

.cg .cg-tl {
  display: flex;
  gap: 0.6rem;
  margin: 0.25rem 0;
  font: 500 0.85rem/1.4 var(--font-body);
}

.cg .cg-tl-when:empty {
  display: none;
}

.cg .cg-tl-when {
  flex: none;
  min-width: 4.2rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.cg .cg-tl-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cg .cg-tl-event .cg-tl-text {
  color: var(--ink);
}

.cg .cg-path li {
  margin: 0.25rem 0;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.cg .cg-commands {
  max-height: 16rem;
  margin-block: 0.4rem;
  padding: 0.6rem 0.7rem;
  overflow: auto;
  border-radius: 0.3rem;
  background: var(--term-bg, #0d1117);
  color: var(--term-ink, #e6edf3);
  font: 500 0.8rem/1.45 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cg .cg-copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.cg .cg-copy-note,
.cg .cg-needs {
  font: 500 0.82rem/1.4 var(--font-body);
  color: var(--muted);
}

/* ---- guided start ----------------------------------------------------------------------- */

.cg .cg-coach {
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--accent);
  border-radius: 0.5rem;
  background: var(--surface);
}

.cg .cg-coach-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.cg .cg-coach-title {
  margin: 0;
  font: 700 1rem/1.3 var(--font-body);
}

.cg .cg-coach-count {
  color: var(--muted);
  font: 500 0.78rem/1 var(--font-mono);
}

.cg .cg-coach-text {
  margin: 0.35rem 0 0.6rem;
  font: 500 0.92rem/1.5 var(--font-body);
}

.cg .cg-coach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* The part of the page the current step is about. */
.cg .cg-coach-on {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.cg .cg-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.cg .cg-result-actions a.cg-btn {
  text-decoration: none;
}

.md-typeset details.cg-fold {
  margin: 0.75rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.md-typeset details.cg-fold > summary {
  padding: 0.6rem 2.2rem 0.6rem 0.9rem;
  font: 700 1.05rem/1.3 var(--font-display);
  font-stretch: 112%;
  cursor: pointer;
}

.md-typeset details.cg-fold > summary::before {
  display: none;
}

.md-typeset details.cg-fold > :not(summary) {
  margin-inline: 0.9rem;
}

@media (max-width: 700px) {
  /* Edge to edge: the game card bleeds past the page gutters and drops its side borders, and the board
     inside it drops its own box, so the content is nearly the full screen width (#83). */
  .cg {
    margin-inline: calc(50% - 50vw);
    padding: 0.6rem 0.5rem;
    border-inline: 0;
    border-radius: 0;
  }

  .cg-board {
    padding: 0.25rem 0;
    border-inline: 0;
    border-radius: 0;
    background: transparent;
  }

  .cg-hud {
    gap: 0.4rem 0.9rem;
    margin-bottom: 0.5rem;
  }

  .cg .cg-meter-wrap {
    flex-basis: 100%;
  }

  .cg-hud .cg-stat {
    font-size: 0.85rem;
  }

  .cg-hud .cg-controls {
    margin-left: auto;
  }

  /* "Playing" is the default; only show the status once there is a result. */
  .cg-hud .cg-status[data-status="playing"] {
    display: none;
  }

  .cg-hud .cg-controls .cg-btn {
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
  }

  .cg-actions,
  .cg-levels {
    margin-bottom: 0.5rem;
  }

  .cg-main-stacked .cg-log {
    max-height: 5rem;
  }

  .cg-side .cg-h {
    display: none;
  }
}

/* ---- touch targets (#81): on a touch screen every control is at least 44x44 CSS px ---- */

@media (pointer: coarse) {
  .cg button,
  .cg a.cg-btn,
  .cg a.cg-notes,
  .cg summary,
  .cg select,
  .cg [role="button"],
  .cg input:not([type="radio"]):not([type="checkbox"]) {
    min-width: 44px;
    min-height: 44px;
  }

  /* A radio or checkbox is tapped through its label, so the label is the target. */
  .cg label:has(> input[type="radio"]),
  .cg label:has(> input[type="checkbox"]) {
    min-height: 44px;
    align-items: center;
  }

  .cg input[type="radio"],
  .cg input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Keep neighbouring targets apart. */
  .cg .cg-actions,
  .cg .cg-levels,
  .cg .cg-controls,
  .cg .cg-result-actions {
    gap: 0.5rem;
  }

  .cg .cg-notes {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
  }
}

/* ---- the dock (#82): actions, status and the latest event stay on screen while you scroll the board ---- */

.cg-dock {
  display: contents; /* on a wide screen it is invisible: the action bar sits where it always did */
}

.cg-dock-meter,
.cg-dock-status,
.cg-latest {
  display: none;
}

@media (max-width: 700px) {
  .cg {
    display: flex;
    flex-direction: column;
  }

  .cg-result-slot {
    order: 80;
  }

  /* Last in the card, so it can stick to the bottom of the screen while the card scrolls past. */
  .cg-dock {
    display: block;
    order: 90;
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 0.5rem -0.5rem 0;
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -4px 12px rgb(0 0 0 / 10%);
  }

  .cg-dock-meter {
    display: block;
    height: 0.35rem;
    margin-bottom: 0.4rem;
    overflow: hidden;
    border-radius: 0.2rem;
    background: var(--cg-surface);
  }

  .cg-dock-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
  }

  .cg-dock .cg-actions {
    margin: 0;
  }

  .cg-dock-status {
    display: block;
    flex: 1 1 10rem;
    min-width: 0;
    font: 500 0.78rem/1.3 var(--font-mono);
    color: var(--muted);
  }

  .cg-latest {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0 0.25rem;
    border: 0;
    border-radius: 0.2rem;
    background: transparent;
    color: var(--ink);
    font: 500 0.8rem/1.3 var(--font-body);
    text-align: left;
    cursor: pointer;
  }

  .cg-latest-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cg-latest[data-kind="event"] .cg-latest-text,
  .cg-latest[data-kind="warn"] .cg-latest-text {
    font-weight: 700;
  }

  .cg-latest-toggle {
    flex: none;
    font: 600 0.75rem/1 var(--font-mono);
    color: var(--accent);
  }

  /* The full log is one tap away instead of a block between the status and the board. */
  .cg-side {
    display: none;
  }

  .cg-side[data-open="true"] {
    display: block;
  }
}

/* ---- command prompt (shared/prompt.js) -------------------------------------------------- */

.cg-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.cg-chip-list {
  display: contents;
}

.cg-chip {
  font-family: var(--font-mono);
}

.cg-chip-cmd {
  font-weight: 600;
}

/* History buttons only matter without arrow keys. */
.cg-hist {
  display: none;
}

/* iOS Safari zooms the page when a text field under 16px gets focus. */
@media (pointer: coarse) {
  .cg-hist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cg input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .cg textarea,
  .cg textarea[class],
  .cg select,
  .cg select[class] {
    font-size: 16px;
  }
}