/*
======================================================================
  5150 GUIDED TOOLS  -  THEIR SHARED LOOK  (shared/guided.css)
======================================================================
  Used by the Guided Character Creator and the Guided Campaign. The
  terminal itself (screen, scan lines, status line, buttons), colours,
  fonts and page come from console.css (section 4, "THE TERMINAL"),
  loaded first. This file only has:

    1. PROGRESS BAR   one segment per step, under the status line
    2. THE SCREEN     the printout of finished steps, the current step,
                      the portraits and the finished summary
    3. BUTTONS        the choices and Back / Next
    4. CAMPAIGN       the Guided Campaign's extra pieces (the Rep d6
                      tally, number boxes, the month header)
======================================================================
*/


/* ------------------------------------------------------------------
   1. PROGRESS BAR
------------------------------------------------------------------ */
.g-progress { display: flex; gap: 3px; margin: 0 0 8px; }
.terminal .g-seg {
  flex: 1;
  min-width: 0;
  padding: 2px 2px 3px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 2px;
  color: var(--ink-dim);
  background: transparent;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.terminal .g-seg span { display: block; overflow: hidden; text-overflow: ellipsis; }
.terminal .g-seg.is-done { background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--paper); border-color: var(--ink); }
.terminal .g-seg.is-now { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.terminal .g-seg:disabled { cursor: default; opacity: 0.6; }
.terminal .g-seg:disabled:hover { background: transparent; color: var(--ink-dim); }


/* ------------------------------------------------------------------
   2. THE SCREEN
------------------------------------------------------------------ */
.g-screen p { margin: 0 0 8px; max-width: 52rem; }
.g-screen b { color: var(--accent); font-weight: normal; }
/* The finished steps, printed like a terminal readout:
   "> RACE ........ Basic". */
.g-printout { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.g-printout .g-line { display: flex; gap: 8px; margin: 0; max-width: 52rem; color: var(--ink-dim); }
.g-line .g-key { white-space: nowrap; }
.g-line .g-dots { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 40%, transparent); transform: translateY(-5px); min-width: 12px; }
.g-line .g-val { color: var(--ink); text-align: right; }
.g-step .term-cmd { color: var(--ink-dim); }
.die {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.5em;
  margin-right: 3px;
  font-weight: bold;
  color: var(--paper);
  background: var(--ink);
  text-shadow: none;
}
/* Portrait choices, on the screen. */
.g-portraits { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.terminal .g-portraits button { padding: 0; width: 84px; height: 84px; border: 2px solid var(--frame); background: #000; }
.terminal .g-portraits button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 10px var(--accent); }
.g-portraits img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The finished character's sheet, below the terminal (Guided Character Creator). */
.g-sheet-area { margin: 0 16px 16px; }
.g-sheet-title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.g-sheet { display: block; width: 100%; min-height: 600px; border: 0; background: transparent; }
@media (max-width: 600px) { .g-sheet-area { margin: 0 6px 12px; } }

/* The finished character. */
.g-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin: 6px 0 12px; padding: 10px; border: 1px solid var(--accent); }
.g-summary img { width: 140px; height: 140px; object-fit: cover; border: 2px solid var(--frame); }
.g-summary p { margin: 0 0 4px; }


/* ------------------------------------------------------------------
   3. BUTTONS
------------------------------------------------------------------ */
.g-choices .g-break { flex-basis: 100%; height: 0; }
.terminal .g-choices button.g-roll { border-style: dashed; color: var(--accent); border-color: var(--accent); }
.terminal .g-choices button.g-roll:hover { background: var(--accent); color: var(--paper); }
.g-choices input[type="text"] { width: 16rem; max-width: 70vw; }
.g-nav .g-spacer { flex: 1; }
.terminal .g-nav button:disabled { opacity: 0.4; cursor: default; }
.terminal .g-nav button:disabled:hover { background: transparent; color: var(--ink); }
.terminal .g-nav button.term-go:disabled:hover { background: var(--accent); color: var(--paper); }
.term-screen.g-screen { height: clamp(260px, 46vh, 560px); }

/* ------------------------------------------------------------------
   4. CAMPAIGN
------------------------------------------------------------------ */
/* The running Rep d6 tally for the month: "+3 / -2". */
.g-tally { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.g-tally span { white-space: nowrap; }
.g-tally b { color: var(--accent); font-weight: normal; }
.g-choices input[type="number"] { width: 4.5em; }
.g-choices select { max-width: 16rem; }
.g-choices input.g-wide { width: 22rem; max-width: 80vw; }
/* A list of things to do or pay this step. */
.g-list { margin: 0 0 8px; padding-left: 1.4em; }
.g-list li { margin-bottom: 2px; }
.g-warn { color: var(--accent); }
/* The NPCs of a PEF, the Leader first in colour. */
.g-npcs { margin: 0 0 8px; padding-left: 1.6em; }
.g-npcs li { margin-bottom: 2px; }
.g-npcs li.is-leader { color: var(--accent); }
/* The Battle Board: your side and theirs, side by side, with each
   figure's state; Out of the Fight and worse are greyed. */
.g-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; margin: 0 0 8px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.g-board ul { margin: 0; padding-left: 1.1em; }
.g-board-head { margin: 0 0 4px !important; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.g-fig b { color: var(--accent); font-weight: normal; font-size: 12px; }
.g-fig.is-star { color: var(--accent); }
.g-fig.is-ootf, .g-fig.is-dead, .g-fig.is-left { opacity: 0.5; text-decoration: line-through; }
.g-fig.is-duck { font-style: italic; }
.g-fightlog .g-line { font-size: 14px; }
.g-choices select[multiple] { min-width: 12rem; }
@media (max-width: 600px) { .g-board { grid-template-columns: minmax(0, 1fr); } }

/* Dice in the walkthrough: passed dice lit, failed dice dim. */
.die.passed { background: var(--ink); color: var(--paper); }
.die.failed { background: transparent; color: var(--ink-dim); border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); }

@media (max-width: 600px) {
  .terminal .g-seg span { display: none; }       /* phones: plain segments, no words */
  .terminal .g-seg { height: 12px; padding: 0; }
  .g-nav .g-spacer { flex-basis: 100%; height: 0; }
  .terminal .g-portraits button { width: 64px; height: 64px; }
}