/* The participant chrome: ground, voices, identity block.
 *
 * Shared by every page a participant meets — the entrance (/), the join sheet
 * (/join/<code>), the identity step (/identity/<code>), the survey itself and
 * the debrief (/thanks) — so the walk from a QR code to the withdrawal link
 * looks like one place rather than five. The survey and debrief joined on
 * 27 August 2026; before that they still wore the old teal Bootstrap bar, and
 * the pages a participant spent the most time on were the two that did not
 * look like the tool they were in.
 *
 * This file holds ONLY what those pages have in common. Page-specific rules
 * live beside it (home.css). It is CG's own: static/css/share-card.css is a
 * FLEET-SHARED file, byte-identical in eight tools and checked by
 * server-ops/sync_shared_assets.py, so nothing here may edit it — the join
 * sheet keeps the fleet card and simply stands on CG's ground.
 *
 * In a stylesheet rather than a <style> block or style= attributes: these pages
 * are the wrong place to add to FL-020's pile.
 */

:root {
  --cg-ground: #F6F8FB;
  --cg-ink: #092C6D;
  --cg-muted: #5A6B84;
  --cg-line: #DCE3EC;
  --cg-cyan: #14BFC3;
}

/* These files are linked ONLY from participant pages, so bare element selectors
   are safe here and no marker class on <body> is needed. */
body {
  background: var(--cg-ground);
  color: var(--cg-ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* base.html wraps each page's block in <main id="main">; it has to become a
   flex child so the stage can fill the space between header and footer. */
#main { flex: 1; display: flex; }

.cg-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  overflow: hidden;
}
/* The longer pages start at the top instead of centring: a form taller than the
   viewport would otherwise have its first field pushed off the screen. */
.cg-stage--top { align-items: flex-start; }

/* The voices live here, behind everything, injected by voices.js. Absolutely
   positioned so nothing the motion does can move the primary action. */
.cg-voices { position: absolute; inset: 0; z-index: 0; }

/* Clears the middle so content never has to compete with a bubble that happens
   to drift behind it. Radial rather than linear because these compositions are
   centred and have no left or right — which is also what makes them mirror
   under dir="rtl" without changes (FL-030, Decision 2). */
.cg-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 46% 52% at 50% 50%,
    rgba(246,248,251,.97) 0%, rgba(246,248,251,.93) 42%,
    rgba(246,248,251,.55) 72%, rgba(246,248,251,0) 100%);
}
/* Where a solid card carries the content, the veil only has to keep the edges
   calm — the card itself does the rest. */
.cg-veil--soft {
  background: radial-gradient(ellipse 60% 62% at 50% 46%,
    rgba(246,248,251,.92) 0%, rgba(246,248,251,.78) 48%,
    rgba(246,248,251,.34) 76%, rgba(246,248,251,0) 100%);
}

/* Content that sits on the stage: above the veil, and centred with a sane
   maximum so a form does not run to the window edge. */
.cg-page {
  position: relative; z-index: 2;
  width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem;
}
.cg-stage > .share-page { position: relative; z-index: 2; width: 100%; }

.cg-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 41rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
}

/* Identity: the mark plus the name. The asset is 434x324, so a 92px width is
   69px tall — the width/height attributes in the templates say so, which keeps
   the line from jumping while the SVG loads. The mark carries no wordmark of
   its own, unlike the other tools' lockups, so the name is set beside it here:
   selectable, translatable, and legible at any size. */
.cg-brand { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.cg-mark { display: block; width: 92px; height: auto; }
.cg-wordmark {
  margin: 0; font-size: .95rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--cg-ink);
}
.cg-brand--small .cg-mark { width: 64px; }
.cg-brand--small .cg-wordmark { font-size: .8rem; letter-spacing: .12em; }

@media (max-width: 720px) {
  .cg-stage { padding: 1.6rem 1.15rem 2rem; }
  .cg-page { gap: 1.1rem; }
  .cg-entry { max-width: none; }
  .cg-inner { gap: 1.05rem; max-width: none; }
  .cg-mark { width: 76px; }
  .cg-wordmark { font-size: .85rem; letter-spacing: .11em; }
  /* Wider and shallower: on a phone the copy runs the full width, so the clear
     area has to be a band across the middle rather than a disc in it. */
  .cg-veil {
    background: radial-gradient(ellipse 88% 56% at 50% 50%,
      rgba(246,248,251,.98) 0%, rgba(246,248,251,.95) 52%,
      rgba(246,248,251,.62) 80%, rgba(246,248,251,0) 100%);
  }
  .cg-veil--soft {
    background: radial-gradient(ellipse 96% 64% at 50% 46%,
      rgba(246,248,251,.94) 0%, rgba(246,248,251,.84) 54%,
      rgba(246,248,251,.4) 82%, rgba(246,248,251,0) 100%);
  }
}

/* The code-entry form. Shared by the entrance and /enter-code since the
   Start button moved the code off the first page (17 August 2026). */
.cg-entry {
  width: 100%; max-width: 20rem;
  display: flex; flex-direction: column; gap: .6rem; margin: .2rem 0 0;
}
.cg-entry label {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cg-muted); text-align: center;
}
.cg-code {
  width: 100%; height: 56px;
  border: 2px solid var(--cg-line); border-radius: 10px; background: #fff;
  text-align: center; font-size: 1.5rem; font-weight: 700;
  letter-spacing: .34em; text-indent: .34em; color: var(--cg-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cg-code::placeholder { color: #B8C4D4; font-weight: 600; letter-spacing: .34em; }
.cg-code:focus {
  outline: none; border-color: var(--cg-cyan);
  box-shadow: 0 0 0 4px rgba(20,191,195,.18);
}

.cg-go {
  height: 52px; border: 0; border-radius: 10px;
  background: var(--cg-ink); color: #fff;
  font-size: 1.02rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cg-go:hover { background: #0B3B8C; }
.cg-go:active { transform: translateY(1px); }
/* The entrance's Start is a link, not a submit: there is nothing to post. */
.cg-go--link { text-decoration: none; min-width: 13rem; padding: 0 2rem; }
.cg-code:focus-visible, .cg-go:focus-visible {
  outline: 3px solid var(--cg-cyan); outline-offset: 3px; border-radius: 6px;
}

.cg-error { color: #B3261E; font-size: .88rem; margin: 0; min-height: 1.2em; }


/* ── the entrance and the code step ───────────────────────────────────────
   Merged from home.css on 17 August 2026, when the code moved to its own
   page: the two pages share the mark, the heading, the lede, the field and
   the button, and a file called home.css linked from /enter-code would be a
   lie about where its rules apply. */
.cg-proposition {
  font-size: clamp(1.85rem, 4.6vw, 2.85rem);
  line-height: 1.12; letter-spacing: -.022em; font-weight: 800;
  text-wrap: balance; max-width: 18ch; margin: 0;
}

.cg-proposition--sm { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }

.cg-lede {
  color: var(--cg-muted); font-size: 1.02rem; line-height: 1.62;
  max-width: 34rem; margin: 0;
}
.cg-lede strong { color: var(--cg-ink); font-weight: 650; }

.cg-meta { font-size: .85rem; color: var(--cg-muted); margin: 0; }
.cg-edu { font-size: .86rem; margin: 0; }
.cg-edu a { color: var(--cg-muted); text-decoration: none; }
.cg-edu a:hover { color: var(--cg-ink); text-decoration: underline; }

.cg-edu a:focus-visible {
  outline: 3px solid var(--cg-cyan); outline-offset: 3px; border-radius: 6px;
}

@media (max-width: 720px) {
  .cg-proposition { max-width: none; }
  .cg-lede { font-size: .96rem; }
}

/* ── the survey and the debrief ───────────────────────────────────────────
   Joined the chrome on 27 August 2026 (visual only — no field, id, wording or
   behaviour changed; the consent copy is versioned under FL-004 and stayed
   byte-identical). These two pages keep their Bootstrap widget markup — the
   collapse, the cards, the button classes the survey script generates — so
   everything below either styles a cg-* class the templates now carry, or
   re-colours a Bootstrap class inside the .cg-flow scope. Re-colouring in CSS
   rather than renaming classes in JS keeps the survey script untouched: it
   builds the DOM and must go on finding what it built. */

/* The panel: what used to be a teal `alert` with white text. Ink on the
   chrome's white, with the mark's cyan standing where the teal was. */
.cg-panel {
  background: #fff;
  border: 1px solid var(--cg-line);
  border-inline-start: 4px solid var(--cg-cyan);
  border-radius: 10px;
  padding: .95rem 1.15rem;
  color: var(--cg-ink);
  text-align: start;
}
.cg-panel--success { border-inline-start-color: #2E9E63; }
.cg-panel--success h3 { font-size: 1.3rem; font-weight: 800; color: var(--cg-ink); }

/* The collapse toggle inside the help panel. Its old `btn-outline-light` was
   drawn for the teal ground and disappears on white. */
.cg-panel__toggle {
  border: 1px solid var(--cg-line);
  color: var(--cg-muted);
  background: transparent;
  white-space: nowrap;   /* "▶ Show" is one gesture, not an icon over a word */
  flex-shrink: 0;
}
.cg-panel__toggle:hover { background: var(--cg-ground); color: var(--cg-ink); border-color: var(--cg-line); }
/* The ▼/▶ labels follow the button's own aria-expanded, which Bootstrap
   maintains — the old inline display:none meant "Hide" never appeared. */
.cg-panel__toggle[aria-expanded="true"] .when-collapsed { display: none; }
.cg-panel__toggle[aria-expanded="false"] .when-expanded { display: none; }
.cg-panel__inset { margin-inline-start: 20px; margin-top: 12px; }

/* The debrief's content column: the old w-sm-75/w-md-50 utilities are not in
   this Bootstrap build, so the column was only ever shaped by its content. */
.cg-sheet { width: 100%; max-width: 44rem; text-align: start; }

/* The survey form: same fix, stated instead of inherited. */
.cg-flow #form-quiz { width: 100%; max-width: 46rem; }

/* The help panel sits over the form, so it takes the form's measure rather
   than Bootstrap's container widths. The explicit width matters: these are
   children of .cg-page, a centred flex column, and a centred flex child sizes
   to max-content — on a phone that is wider than the screen, and body's
   overflow-x:clip then cuts the right edge off instead of scrolling to it. */
.cg-flow .container,
.cg-flow .main { width: 100%; }
.cg-flow .container { max-width: 46rem; }

/* Bootstrap re-coloured inside the flow: navy where the framework said green
   or blue, the cyan ring where it said blue. No sizes change here. */
.cg-flow .btn-success {
  background: var(--cg-ink);
  border-color: var(--cg-ink);
}
.cg-flow .btn-success:hover,
.cg-flow .btn-success:focus { background: #0B3B8C; border-color: #0B3B8C; }
.cg-flow .btn-success:disabled { background: #93A5C4; border-color: #93A5C4; }
.cg-flow .btn-outline-primary { color: var(--cg-ink); border-color: var(--cg-ink); }
.cg-flow .btn-outline-primary:hover { background: var(--cg-ink); border-color: var(--cg-ink); color: #fff; }
.cg-flow .btn-outline-secondary { color: var(--cg-muted); border-color: var(--cg-line); }
.cg-flow .btn-outline-secondary:hover { background: var(--cg-ground); color: var(--cg-ink); border-color: var(--cg-line); }
.cg-flow .form-check-input:checked { background-color: var(--cg-ink); border-color: var(--cg-ink); }
.cg-flow .form-check-input:focus {
  border-color: var(--cg-cyan);
  box-shadow: 0 0 0 .25rem rgba(20, 191, 195, .25);
}
/* The comfort scale's pressed state (btn-check + label). */
.cg-flow .btn-check:checked + .btn-outline-secondary {
  background: var(--cg-ink);
  border-color: var(--cg-ink);
  color: #fff;
}
.cg-flow .btn-check:focus + .btn-outline-secondary {
  box-shadow: 0 0 0 .25rem rgba(20, 191, 195, .25);
}

/* Touch devices get touch-sized controls. Participants meet the survey on
   their phones almost every time (it is joined from a QR code in a classroom),
   and Bootstrap's 1em radio is a precision target. 1.5em ≈ 24px plus the
   label's own hit area; the answer rows are spaced so neighbouring values
   cannot be fat-fingered. Gated on pointer:coarse rather than width — a small
   window on a laptop still has a mouse. */
@media (pointer: coarse) {
  .cg-flow .form-check-input {
    width: 1.5em;
    height: 1.5em;
    margin-top: .125em;
  }
  .cg-flow .form-check { min-height: 2em; margin-bottom: .35rem; }
  .cg-flow .form-check-label { padding-inline-start: .15rem; padding-block: .15rem; }
  /* The comfort scale's five steps: tall enough to be five separate targets. */
  .cg-flow .btn-group .btn-sm { padding: .45rem .8rem; font-size: .95rem; }
}

/* The debrief's cards keep their Bootstrap class; only the paint changes. The
   withdrawal card keeps its amber edge — it is the one thing on the page that
   must not read as routine. */
.cg-flow .card { border-color: var(--cg-line); border-radius: 10px; }
.cg-flow .card.border-warning {
  border-color: #E4B04A;
  border-inline-start: 4px solid #E4B04A;
}

/* The join sheet is made to be printed and handed out. Ink on paper should be
   the card, not the background. */
@media print {
  .cg-voices, .cg-veil { display: none !important; }
  body { background: #fff; }
}

/* ── the educator's sign-in ──────────────────────────────────────────────────
   The entrance composition with a form in it (27 August 2026). It reuses the
   entrance's ground, veil, mark, heading and .cg-go button; only the two
   text fields are new, because .cg-code is a six-character code box with
   .34em of letterspacing and would be absurd for an e-mail address. */
.cg-signin {
  width: 100%; max-width: 22rem;
  display: flex; flex-direction: column; gap: .9rem;
  margin: .2rem 0 0;
  text-align: start;
}
.cg-signin__field { display: flex; flex-direction: column; gap: .3rem; }
.cg-signin__field label {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cg-muted);
}
.cg-signin__field input {
  width: 100%; height: 46px; box-sizing: border-box;
  padding: 0 .8rem;
  border: 2px solid var(--cg-line); border-radius: 10px; background: #fff;
  font: inherit; font-size: 1rem; color: var(--cg-ink);
}
.cg-signin__field input:focus {
  outline: none; border-color: var(--cg-cyan);
  box-shadow: 0 0 0 4px rgba(20, 191, 195, .18);
}
.cg-signin .cg-go { margin-top: .3rem; }
/* The lockup is a link on the sign-in page (back to the entrance); it must not
   pick up an underline from the browser default. */
a.cg-brand { text-decoration: none; color: inherit; }
a.cg-brand:focus-visible { outline: 3px solid var(--cg-cyan); outline-offset: 4px; border-radius: 8px; }
