/*
 * The Evolutionary Leadership visual language. Same brand as culture-navigator
 * and Visionizr, and these are their values, not an approximation of them.
 *
 * Source: culture-navigator, which carries this language as plain CSS custom
 * properties in a no-build Node app -- architecturally this app's twin. Gaps
 * (shadows, semantic colours, the pill radius) come from Visionizr's Tailwind
 * preset, which says of itself that it "mirrors the culture-navigator visual
 * language". See .claude/skills/design-tokens/SKILL.md.
 *
 * Never write a hex value outside this block. Tints are derived with
 * color-mix() so a shade is always provably the brand colour, diluted.
 */
:root {
  --color-navy: #0d2b3e;
  --color-teal: #1b97c9;
  --color-teal-dark: #1479a3;
  --color-teal-bright: #23b3ea;
  --color-bg: #ffffff;
  --color-surface: #f4f8fb;
  --color-surface-elevated: #eaf1f6;
  --color-border: #dce8ef;
  --color-border-strong: #bfd3de;
  --color-muted: #5a7a8e;
  --color-subtle: #8ea9b8;
  --color-success: #2ea36b;
  --color-warning: #e4a635;
  --color-danger: #d9534f;

  /* Shape and elevation. The shadows are navy-tinted, not neutral grey --
     that is what makes them look like the rest of the family. */
  --radius: 12px;
  --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(13, 43, 62, 0.06);
  --shadow-md: 0 4px 12px rgba(13, 43, 62, 0.08);
  --shadow-lg: 0 12px 32px rgba(13, 43, 62, 0.12);

  /*
   * Game state. These encode the game, not the brand, so no EL repo defines
   * them -- but they are derived from the palette above rather than picked by
   * eye, which is how this file drifted off-brand in the first place.
   *
   * --turn is green on purpose: the EL rule is that in-progress reads green,
   * never blue, because blue reads informational and green reads "go, live".
   * The gifts zone is therefore neutral rather than the green it used to be,
   * so it does not compete with the turn indicator; the cards inside carry
   * the colour.
   */
  --quality: var(--color-teal);
  --quality-bg: color-mix(in srgb, var(--color-teal) 8%, var(--color-bg));
  --distortion: var(--color-warning);
  --distortion-bg: color-mix(
    in srgb,
    var(--color-warning) 12%,
    var(--color-bg)
  );
  --gift-bg: var(--color-surface-elevated);
  --gift-line: var(--color-border);
  --turn: var(--color-success);
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
} /* ensure the hidden attribute always wins over display rules */
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family:
    "Barlow",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  background: var(--color-surface);
  color: var(--color-navy);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Barlow Condensed for headings, tracked out slightly -- the EL display voice. */
h1,
h2,
h3,
h4 {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  letter-spacing: 0.02em;
}
h1 {
  font-size: 1.7rem;
  font-weight: 700;
  margin: 0;
}
h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}

/*
 * The EL label voice: condensed, small, tracked out, semibold -- and NOT
 * uppercase. Visionizr's .ds-eyebrow is spaced but sentence-cased, and its
 * CONVENTIONS.md forbids text-transform outright after titles once shipped in
 * Title Case. Reach for this instead of uppercasing a label.
 */
.eyebrow {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.muted {
  color: var(--color-muted);
}
.small {
  font-size: 0.82rem;
}
.screen {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.2rem;
}

/* ---------- landing ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.4rem 0 1.8rem;
}
/*
 * The real Evolutionary Leadership mark, straight from the brand folder --
 * no teal tile behind it. The letters carry a 2px white stroke, so the mark
 * is drawn to sit on white; on a coloured tile that stroke reads as a halo.
 * Its own blue is #0071a1, which is deliberately not --color-teal: a logo
 * keeps its own colours.
 */
.brand-mark {
  width: 52px;
  height: 52px;
  flex: none;
}
.tag {
  margin: 0.1rem 0 0;
  color: var(--color-muted);
  font-size: 0.92rem;
}
.cards-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 720px) {
  .cards-2 {
    grid-template-columns: 1fr;
  }
}
.panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow-md);
}
.resume {
  background: color-mix(in srgb, var(--color-teal) 8%, var(--color-bg));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.4rem;
}
.resume-line {
  margin: 0.15rem 0 0.8rem;
  color: var(--color-navy);
  font-weight: 600;
}
.session-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.session-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
}
.session-top {
  display: flex;
  align-items: center;
  gap: 0.6rem 0.8rem;
  flex-wrap: wrap;
}
.session-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* The shared .primary carries a top margin for the forms; not wanted in a row.
   margin-left:auto keeps it right whether it sits on the code line or, when a
   long label leaves no room on a phone, wraps to its own line below. */
.session-row .primary {
  margin-top: 0;
  margin-left: auto;
  flex: none;
}
.session-people {
  color: var(--color-navy);
}
.session-people .away {
  color: var(--color-muted);
}
.session-people .gone {
  color: var(--color-subtle);
  text-decoration: line-through;
}
label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0.7rem 0 0.15rem;
}
input[type="text"],
select,
textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-navy);
  background: var(--color-bg);
}
textarea {
  resize: vertical;
}
.checkline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-navy);
  margin-top: 0.8rem;
}
.checkline input {
  width: auto;
}
button {
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  border-radius: 9px;
  border: 1px solid transparent;
  padding: 0.6rem 1rem;
  font-weight: 600;
  transition:
    background 0.15s,
    transform 0.05s;
}
button:active {
  transform: translateY(1px);
}
.primary {
  background: var(--color-teal);
  color: var(--color-bg);
  margin-top: 1rem;
}
.primary:hover {
  background: var(--color-teal-dark);
}
.ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-navy);
}
.ghost:hover {
  background: var(--color-surface-elevated);
}
/* Destructive: a red outline, never filled red -- a filled button would pull
   the eye to the dangerous option and compete with the primary action. */
.danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.danger:hover {
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-bg));
}
button.small {
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
}
/* language toggle: a small segmented pill, active segment in teal */
/* On the landing it shares the brand row, right-aligned and level with the
   top of the logo -- not a separate bar above it, which pushed the logo down.
   The title block takes the slack (flex + min-width:0 so it wraps) so the pill
   keeps its size and never clips on a narrow phone. */
.brand > div:not(.lang-toggle) {
  flex: 1;
  min-width: 0;
}
.brand .lang-toggle {
  flex: none;
  align-self: flex-start;
}
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.lang-btn {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-muted);
  padding: 0.25rem 0.62rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.lang-btn:hover {
  background: var(--color-surface-elevated);
}
.lang-btn.on {
  background: var(--color-teal);
  color: var(--color-bg);
}
.footnote {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.82rem;
  margin-top: 1.4rem;
}

/* ---------- room head ---------- */
.room-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0 1rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.code-block {
  display: flex;
  flex-direction: column;
}
.code {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  background: var(--color-surface-elevated);
  border: 1px dashed var(--color-border);
  padding: 0.1rem 0.6rem;
  border-radius: 8px;
  color: var(--color-navy);
}
.room-head-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.badge {
  background: var(--color-surface-elevated);
  color: var(--color-muted);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge.fac {
  background: var(--color-teal);
  color: var(--color-bg);
}
.conn {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border-strong);
  display: inline-block;
}
.conn.on {
  background: var(--color-success);
}
.conn.off {
  background: var(--color-danger);
}

/* ---------- lobby ---------- */
.lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 720px) {
  .lobby-grid {
    grid-template-columns: 1fr;
  }
}
.player-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.player-list li {
  background: var(--color-surface-elevated);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.player-list li .fac-tag {
  font-size: 0.7rem;
  background: var(--color-teal);
  color: var(--color-bg);
  border-radius: 6px;
  padding: 0 0.3rem;
}

/* ---------- table / turn strip ---------- */
.turn-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 0.8rem;
}
.deck-pile {
  width: 46px;
  height: 62px;
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    var(--color-teal),
    var(--color-teal-dark)
  );
  color: color-mix(in srgb, var(--color-teal) 22%, var(--color-bg));
  font-size: 0.6rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 2px 2px 0 var(--color-border-strong);
}
/* Deck and turn text stay a unit: the deck on the left, "It's your turn." and
   the draw button to the right of it. Kept together so this pairing survives the
   wrap on a phone -- only the facilitator controls drop below. */
.turn-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}
.turn-info {
  flex: 1;
  min-width: 0;
  font-size: 1.02rem;
  /* A column so the draw button sits under "It's your turn.", not beside it.
     The button hugs its label; the explanation wraps under it, never wider than
     the strip. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.turn-info strong {
  color: var(--color-teal-dark);
}
.turn-info span {
  max-width: 100%;
}
.fac-controls {
  display: flex;
  gap: 0.4rem;
}

/* ---------- players grid ---------- */
.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.8rem;
}
/* The end-of-session buttons (export / back to waiting room / delete). Sits
   below the players grid with room to breathe -- flush against the cards, its
   tutorial highlight ring overlapped them. width:fit-content so the ring hugs
   the buttons instead of stretching across the empty row. */
.ended-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
  width: fit-content;
  max-width: 100%;
}
.pcard {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.7rem;
  box-shadow: var(--shadow-md);
  position: relative;
}
.pcard.turn {
  border-color: var(--turn);
  box-shadow: 0 0 0 2px var(--turn);
}
.pcard.me {
  background: var(--color-surface);
}
.pcard.disconnected {
  opacity: 0.55;
}
.pcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.pname {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: auto; /* keep the name left; chips and the kick group right */
}
/* Whether someone is here. Green reads "live", per the EL convention, and the
   lobby list and the table share it -- it used to be inline-styled with raw hex
   in the lobby because the selector was scoped to .pname. */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  display: inline-block;
  flex: none;
}
.dot.off {
  background: var(--color-border-strong);
}
/* Someone who pressed Leave. Quiet: it is a fact about the table, not a
   problem to solve, and their card still holds their feedback. */
.gone-chip {
  font-size: 0.68rem;
  background: var(--color-surface-elevated);
  color: var(--color-muted);
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
  font-weight: 600;
}
.turn-chip {
  font-size: 0.68rem;
  background: var(--turn);
  color: var(--color-navy);
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
  font-weight: 700;
}
.fac-chip {
  font-size: 0.68rem;
  background: var(--color-teal);
  color: var(--color-bg);
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
  font-weight: 700;
}
.gifts-label {
  font-size: 0.72rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  margin: 0.3rem 0 0.25rem;
}
.gift-fan {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.gift {
  font-size: 0.82rem;
}
.gift-face {
  background: var(--gift-bg);
  border: 1px solid var(--gift-line);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
}
/* A received card with a note flips between its description (front) and the note
   (back). The faces are absolutely stacked -- a grid or flex parent would
   flatten the 3D rotation -- so the inner has no height of its own; app.js sets
   it to the taller face. */
.gift.flippable {
  perspective: 900px;
  cursor: pointer;
  position: relative; /* anchor the correct button */
}
/* On a gift you gave: a quiet corner control to fix a wrong recipient. Outside
   the flipping inner, so it stays put and swallows its own click. */
.gift-correct {
  position: absolute;
  top: 0.25rem;
  right: 0.3rem;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  line-height: 1;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}
.gift-correct:hover {
  color: var(--color-teal);
  border-color: var(--color-border-strong);
}
.gift-inner {
  position: relative;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.gift.flipped .gift-inner {
  transform: rotateY(180deg);
}
.gift-face {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  backface-visibility: hidden;
}
.gift-back {
  transform: rotateY(180deg);
}
.gift.flippable:hover .gift-face {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}
.gift.flippable:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
  border-radius: 8px;
}
.gift .g-card {
  font-weight: 700;
  color: var(--color-teal);
}
.gift .g-card.dist {
  color: var(--distortion);
}
.gift .g-desc {
  color: var(--color-muted);
  margin-top: 0.1rem;
}
.gift .g-reason {
  color: var(--color-navy);
  margin-top: 0.1rem;
}
.gift .g-note-absent {
  color: var(--color-muted);
  font-style: italic;
  margin-top: 0.1rem;
}
.gift .g-from {
  color: var(--color-muted);
  font-size: 0.72rem;
  margin-top: 0.1rem;
}
.gift .g-hint {
  color: var(--color-subtle);
  font-size: 0.68rem;
  margin-top: 0.25rem;
}
.empty-gifts {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-style: italic;
}
.setmini {
  font-size: 0.72rem;
  color: var(--color-muted);
}

/* fac kick */
.kick {
  background: transparent;
  border: none;
  color: var(--color-muted);
  font-size: 0.9rem;
  flex: none;
  padding: 0 0.2rem;
}
.kick:hover {
  color: var(--color-danger);
}

/* The facilitator's "this seat is actually…" picker. Quiet by default: it is
   only needed when someone comes back on a new device, and it should not
   compete with the feedback on the card. */
.reassign {
  margin-top: 0.5rem;
}
.reassign-pick {
  width: 100%;
  padding: 0.3rem 0.4rem;
  font-size: 0.75rem;
  font-family: inherit;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}
.reassign-pick:hover,
.reassign-pick:focus {
  color: var(--color-navy);
  border-color: var(--color-teal);
}

/* ---------- tray / hand ---------- */
/* Your hand sits above the feedback grid so it is in view on load, rather than
   pinned to the bottom under a long table. A plain card, with the teal top edge
   still marking it as your own area. */
.tray {
  margin: 0.8rem 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top-width: 3px;
  border-top-color: var(--color-teal);
  border-radius: var(--radius);
  padding: 0.7rem 1rem 1rem;
  box-shadow: var(--shadow-md);
}
.tray-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.hand {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  /* overflow-x:auto makes overflow-y compute to auto too, so the row clips
     vertically. Leave room at the top for the 3px lift on hover, or the card's
     top border is clipped away (issue #1). */
  padding: 0.4rem 0 0.3rem;
}
.card {
  flex: none;
  width: 150px;
  min-height: 96px;
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--quality);
  background: var(--quality-bg);
  cursor: default;
}
.card.dist {
  border-color: var(--distortion);
  background: var(--distortion-bg);
}
.card .c-name {
  font-weight: 800;
  color: var(--quality);
}
.card.dist .c-name {
  color: var(--distortion);
}
.card .c-desc {
  font-size: 0.76rem;
  color: var(--color-muted);
  margin-top: 0.2rem;
}
/* Its own line at the top, right-aligned -- was absolute top-right, where a
   long quality name ran under it. order:-1 lifts it above the name in the
   column without needing to reorder the markup. */
.card .c-kind {
  order: -1;
  align-self: flex-end;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--color-muted);
}
.card.selectable {
  cursor: pointer;
  transition:
    transform 0.08s,
    box-shadow 0.08s;
}
.card.selectable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card-preview {
  border-radius: 10px;
  padding: 0.6rem;
  border: 1px solid var(--quality);
  background: var(--quality-bg);
  margin-bottom: 0.6rem;
}
.card-preview.dist {
  border-color: var(--distortion);
  background: var(--distortion-bg);
}

/* ---------- modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-navy) 55%, transparent);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 50;
}
.modal-box {
  background: var(--color-bg);
  border-radius: 14px;
  padding: 1.2rem;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow-md);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}
.modal-actions .primary {
  margin-top: 0;
}

/* toast */
.toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-navy);
  color: var(--color-bg);
  padding: 0.6rem 1rem;
  border-radius: 10px;
  z-index: 100;
  font-size: 0.9rem;
  max-width: 90%;
  box-shadow: var(--shadow-md);
}
.toast.err {
  background: var(--color-danger);
}

/*
 * ---------- phones ----------
 *
 * This layout was built laptop-first and phones were only ever "probably
 * fine". The rule for this block: a phone gets the same game, scrolled, not a
 * squeezed copy of the desktop one.
 */
@media (max-width: 720px) {
  /* The turn strip is a headline plus two facilitator buttons; on a phone the
     buttons drop under the text instead of squeezing it to two words wide. */
  .turn-strip {
    flex-wrap: wrap;
  }
  .turn-info {
    flex-basis: 100%;
    order: 2;
  }
  .fac-controls {
    order: 3;
    width: 100%;
  }
  .fac-controls button {
    flex: 1;
  }

  /* .players-grid needs nothing here: its auto-fill minmax(230px, 1fr)
     already collapses to one column at this width. */

  .screen {
    padding: 0.8rem;
  }
}

/* ---------- print ---------- */
#print-area {
  display: none;
}
@media print {
  body * {
    visibility: hidden;
  }
  #print-area,
  #print-area * {
    visibility: visible;
  }
  #print-area {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 1.5rem;
  }
  .print-card {
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    margin: 0.3rem 0;
    break-inside: avoid;
  }
  /* The line that carries the whole point of the exercise onto paper. */
  .print-note {
    margin-top: 1rem;
    color: var(--color-muted);
    font-size: 0.8rem;
  }
  .print-h {
    border-bottom: 2px solid var(--color-teal);
    padding-bottom: 0.4rem;
    margin-bottom: 0.6rem;
  }
}

/* =========================================================================
 * Tutorials
 *
 * Two pieces: the "See how it works" block on the landing, and the coach
 * overlay that guides a practice run. The overlay reuses the real room render
 * (app.js) and floats a coach panel at the bottom of the viewport, so the
 * learner practises on the actual interface. Tokens only -- see the
 * design-tokens skill.
 * ========================================================================= */

/* Secondary button: a teal outline on white (design-tokens: secondary). Used
   for the two tutorial entry points, so they read as "learn", distinct from
   the teal-filled primary "Create / Join". */
.secondary {
  background: var(--color-bg);
  border-color: var(--color-teal);
  color: var(--color-teal);
}
.secondary:hover {
  background: color-mix(in srgb, var(--color-teal) 8%, var(--color-bg));
}

.learn {
  margin-top: 1.4rem;
}
.learn h2 {
  margin: 0.15rem 0 0.3rem;
}
.learn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.9rem;
}
.learn-actions .secondary {
  margin-top: 0;
}

/* The coach panel: a bottom sheet, below the give/correct modals (z 50) so
   they still take focus when the learner opens them, above the page otherwise.
   It caps its own height and scrolls, and the room gets bottom padding while a
   tutorial runs (body.coaching) so nothing hides behind it. */
.coach {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--color-bg);
  border-top: 3px solid var(--color-teal);
  box-shadow: var(--shadow-lg);
  max-height: 42vh;
  overflow-y: auto;
}
.coach-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.9rem 1.2rem 1.1rem;
}
.coach-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.coach-badge {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: none;
  color: var(--color-bg);
  background: var(--color-teal);
  border-radius: var(--radius-pill);
  padding: 0.12rem 0.6rem;
}
.coach-step {
  color: var(--color-muted);
  font-size: 0.82rem;
}
.coach-exit {
  margin-left: auto;
}
.coach-text {
  margin: 0;
  color: var(--color-navy);
  line-height: 1.5;
}
.coach-text strong {
  color: var(--color-teal-dark);
}
.coach-tip {
  margin-top: 0.7rem;
  padding: 0.6rem 0.8rem;
  background: color-mix(in srgb, var(--color-teal) 7%, var(--color-bg));
  border-left: 3px solid var(--color-teal);
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--color-navy);
}
.coach-tip-label {
  display: block;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--color-teal-dark);
  margin-bottom: 0.15rem;
}
.coach-hint {
  margin: 0.7rem 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-style: italic;
}
.coach-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.coach-actions .primary,
.coach-actions .ghost {
  margin-top: 0;
}
.coach-actions button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
body.coaching {
  padding-bottom: 48vh;
}

/* The control the current step points at: a teal ring that breathes, so the
   eye lands on it without a written "click the button below". */
.coach-target {
  outline: 3px solid var(--color-teal);
  outline-offset: 3px;
  border-radius: var(--radius);
  animation: coach-pulse 1.5s ease-in-out infinite;
}
@keyframes coach-pulse {
  0%,
  100% {
    outline-color: var(--color-teal);
  }
  50% {
    outline-color: color-mix(in srgb, var(--color-teal) 30%, var(--color-bg));
  }
}

@media (max-width: 720px) {
  .coach {
    max-height: 52vh;
  }
  .learn-actions .secondary {
    flex: 1;
  }
}

/* =========================================================================
 * Guided-tour engine (public/tour.js) — EL theming for Driver.js
 *
 * Driver.js ships neutral defaults (public/vendor/driver.css); these rules,
 * scoped to the `.el-tour` popover class the engine sets, repaint it in the
 * Evolutionary Leadership language. Tokens only — see the design-tokens skill.
 * The overlay colour is passed to Driver from --color-navy at runtime, so the
 * backdrop matches too, without a hex here.
 * ========================================================================= */

.driver-popover.el-tour {
  background: var(--color-bg);
  color: var(--color-navy);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-family:
    "Barlow",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  max-width: 340px;
  padding: 1rem 1.1rem;
}
.driver-popover.el-tour .driver-popover-title {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-navy);
}
.driver-popover.el-tour .driver-popover-description {
  color: var(--color-navy);
  line-height: 1.5;
  font-size: 0.95rem;
}
.driver-popover.el-tour .driver-popover-arrow {
  border-color: var(--color-bg);
}
/* The footer: Skip (injected) on the left, then progress, then nav buttons.
   Wrap on a narrow callout so nothing clips. */
.driver-popover.el-tour .driver-popover-footer {
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: center;
  margin-top: 0.8rem;
}
.driver-popover.el-tour .driver-popover-progress-text {
  color: var(--color-muted);
  font-size: 0.82rem;
}
.driver-popover.el-tour .driver-popover-navigation-btns {
  gap: 0.5rem;
}
.driver-popover.el-tour .driver-popover-navigation-btns button {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 9px;
  border: 1px solid transparent;
  padding: 0.45rem 0.9rem;
  text-shadow: none;
  transition:
    background 0.15s,
    transform 0.05s;
}
.driver-popover.el-tour .driver-popover-next-btn {
  background: var(--color-teal);
  color: var(--color-bg);
}
.driver-popover.el-tour .driver-popover-next-btn:hover {
  background: var(--color-teal-dark);
}
.driver-popover.el-tour .driver-popover-prev-btn {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-navy);
}
.driver-popover.el-tour .driver-popover-prev-btn:hover {
  background: var(--color-surface-elevated);
}
.driver-popover.el-tour .driver-popover-close-btn {
  color: var(--color-subtle);
}
.driver-popover.el-tour .driver-popover-close-btn:hover {
  color: var(--color-navy);
}
/* The always-visible Skip control the engine injects at the footer's start. */
.driver-popover.el-tour .el-tour-skip {
  margin-right: auto;
  background: transparent;
  border: none;
  padding: 0.45rem 0.2rem;
  color: var(--color-muted);
  font-family: "Barlow", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.driver-popover.el-tour .el-tour-skip:hover {
  color: var(--color-navy);
  text-decoration: underline;
}