/* ScenarioSets: trainee-facing pages (entry/group-choice, and the shared scenario+notes view). Same base tokens,
   buttons and inputs as every other module's trainee style.css (groupcards/assets/style.css etc.). */

:root {
  --blue: #2178ba;
  --blue-dark: #1a5683;
  --teal: #3ec1d5;
  --text: #212529;
  --muted: #6c757d;
  --line: #dee2e6;
  --bg: #f4f7fa;
  --danger: #dc3545;
  --ok: #198754;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.4;
}

a { color: var(--blue); }
h1 { margin: 0 0 0.6em; color: var(--blue-dark); }
h2 { margin: 0 0 0.4em; color: var(--blue-dark); font-size: 1.1rem; }

.btn {
  font: inherit;
  padding: 0.45em 1em;
  border: 1px solid var(--blue);
  background: #fff;
  color: var(--blue);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
/* .btn's own "display" above is normal author CSS, which beats the browser's built-in "[hidden]{display:none}"
   regardless of specificity (author always outranks user-agent at equal importance) - so a .btn only actually
   disappears when hidden if something author-side says so too, at least as specific as .btn itself (see
   "Download PDF with notes", assets/view.js, toggled live via this). */
.btn[hidden] { display: none; }
.btn:hover { background: #eaf3fa; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); }
.btn.big { font-size: 1.2rem; padding: 0.6em 1.6em; margin-top: 1rem; }

textarea {
  font: inherit;
  width: 100%;
  padding: 0.6em 0.7em;
  border: 1px solid #b9c4cf;
  border-radius: 6px;
  background: #fff;
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; }

.hint { color: var(--muted); font-size: 0.9rem; }
.notice { padding: 0.7em 1em; border-radius: 6px; margin: 0 0 1em; }
.notice.error { background: #fdecee; color: #842029; border: 1px solid #f1b0b7; }

input[type=text], input[type=password], input[type=date] {
  font: inherit;
  width: 100%;
  padding: 0.45em 0.6em;
  border: 1px solid #b9c4cf;
  border-radius: 6px;
  background: #fff;
}
input:focus { outline: 2px solid var(--teal); outline-offset: 0; }
label { display: block; font-weight: 600; margin: 0.9em 0 0.3em; text-align: left; }

/* ---------- Entry / group choice ---------- */

body.page { padding: 4vh 16px; }
/* "Not found" and similar one-line messages only (scs_not_found()) - the group-choice screen itself is a
   .card-panel.wide below, the same container every other module's own group-choice page uses. */
.entry-wrap { max-width: 700px; margin: 0 auto; text-align: center; }
.lead { font-size: 1.1rem; margin: 0 0 1.2rem; }
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 0.5rem;
}
/* Same size as CloudView's own .group-btn (cloudview/assets/style.css) - both trainee group-choice screens
   should read identically. */
.group-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 16px;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--blue);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--blue-dark);
}
.group-btn:hover { background: var(--blue-dark); }
.date-note { margin-top: 1.6em; }
/* The group-choice screen's own logo, below the group grid (outside .card-panel.wide, same as .org-logo's own
   usual placement elsewhere) - capped at 250px here specifically, matching CloudView's own group-choice logo
   exactly, rather than this module's usual 300px (see .org-logo below). */
body.page .org-logo { max-width: min(100%, 250px); }

/* The scenario-name (+ optional version) entry screen, the inline admin sign-in for an out-of-range date, and
 * the group-choice screen itself (.wide): all a plain, left-aligned panel, same shape as every other module's
 * own entry/group-choice screen (GroupCards'/CloudView's own .card-panel, copied here since this module is
 * otherwise fully self-contained and never loads the shared top-level stylesheet some other modules do). */
.card-panel {
  margin: 0 auto;
  background: #fff;
  padding: 28px 32px;
  border-radius: 12px;
  border-top: 5px solid var(--blue);
  box-shadow: 0 4px 24px rgba(1, 0, 48, 0.1);
}
.card-panel.narrow { max-width: 420px; }
.card-panel.wide { max-width: 900px; }
.brand-h1 { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo { height: 1.3em; width: auto; border-radius: 4px; vertical-align: middle; }
.footer-link { margin: 1.5rem 0 0; }

/* A panel of its own under the entry form, pointing trainers at admin.php - same idea as GroupCards' own. */
.aside-panel {
  max-width: 420px;
  margin: 24px auto 0;
  padding: 20px 32px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.aside-panel p { margin: 0 0 0.8em; color: var(--muted); }

/* "Additional options": a panel that slides in from the right edge, with its tab attached to the edge - copied
 * from GroupCards' own (same class names, same behaviour: a different date for the same set reused over several
 * days of a course). */
.opt-panel {
  position: fixed;
  right: 0;
  bottom: 24px;
  z-index: 50;
  width: min(340px, 90vw);
  padding: 4px 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 4px 20px rgba(1, 0, 48, 0.18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.opt-panel.open {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease;
}
.opt-tab {
  position: absolute;
  right: 100%;
  bottom: 0;
  visibility: visible;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55em 0.9em;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: 10px 0 0 10px;
  box-shadow: -2px 2px 10px rgba(1, 0, 48, 0.2);
  cursor: pointer;
  white-space: nowrap;
}
.opt-tab:hover { background: var(--blue-dark); }
/* This module's own h2 (above) is smaller/tighter than GroupCards'/CloudView's own - match theirs here so the
   slideout itself reads identically everywhere, without changing this module's h2 anywhere else it's used. */
.opt-panel h2 { margin: 1.2em 0 0.5em; font-size: 1.2rem; }
.opt-date { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.opt-date label { margin: 0; }
.opt-date .hint { margin: 0; }
.opt-leave { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---------- The shared scenario + notes view ---------- */

body.scs-view { padding: 3vh 16px 6vh; }
/* Hiding notes narrows the whole page, not just each row - roughly the width the notes column itself took up
   (about a third of the row), so the title/toolbar and every row shrink and stay centred together. --scs-img-extra
   (set once by view.js's growWrapFor(), never negative) adds however much a scenario image's own natural width -
   scaled to fit inside 300x300, see .scs-scenario-image below - exceeds the layout's original 110px image width,
   so a large image doesn't squeeze the description text into a narrower column than before. Expressed as a
   variable (rather than view.js setting max-width directly) so it composes with notes-hidden's own narrower
   width, whichever is currently active, instead of always overriding it. */
.scs-wrap { max-width: calc(1100px + var(--scs-img-extra, 0px)); margin: 0 auto; }
.scs-wrap.notes-hidden { max-width: calc(700px + var(--scs-img-extra, 0px)); }
.scs-wrap h1 .hint { display: block; font-size: 1rem; font-weight: 400; margin-top: 0.2em; }

/* The organisation's logo, under the scenarios/notes view (outside .scs-wrap, not inside it): never wider than
   its own size, the page, or 300px. */
.org-logo { display: block; margin: 20px auto 20px; max-width: min(100%, 300px); height: auto; }

/* The title and the Hide/Show notes button share one line: the button lines up with the bottom of the group
   name (the hint's own line), not the main heading, because align-items: flex-end matches it to the bottom of
   the h1 as a whole - and the group name is what's on the h1's last line. */
.scs-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.scs-header h1 { margin: 0; }

.scs-rows { display: flex; flex-direction: column; gap: 16px; margin-top: 1em; }

.scs-pdf-link { margin: 16px 0 0; display: flex; justify-content: flex-end; gap: 8px; }

/* Each row: the scenario (~2/3) and its shared notes (~1/3), stretched to the same height as each other - the
   taller of the two content blocks (or the notes box's own min-height, whichever is larger). */
.scs-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}

.scs-scenario {
  flex: 2 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
/* The image stays put on the left; wrapped description text stays in its own column rather than flowing under it.
   Shown at its own aspect ratio (no cropping), scaled - never upscaled - to fit inside 300x300: max-width/height
   with width/height auto is what lets the browser pick whichever of the two ends up the binding constraint. The
   found bug: flex containers default to align-items: stretch, which was stretching the image's own box to match
   its row's height (usually taller than 300px, so capped there by max-height) regardless of its own width -
   .scs-scenario's own align-items: flex-start (above) stops that; object-fit: contain here is a second, belt-
   and-braces guard so even a stretched box still letterboxes the image rather than distorting it. */
.scs-scenario-image { flex: none; max-width: min(300px, 25vw); max-height: 300px; width: auto; height: auto; object-fit: contain; display: block; border: none; border-radius: 8px; }
.scs-scenario-text { flex: 1 1 auto; min-width: 0; }
.scs-scenario-body :first-child { margin-top: 0; }
.scs-scenario-body :last-child { margin-bottom: 0; }
.scs-scenario-body ul, .scs-scenario-body ol { margin: 0.5em 0; padding-left: 1.4em; }
.scs-scenario-body li { margin-bottom: 0.2em; }

.scs-notes { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.scs-notes-area { flex: 1 1 auto; min-height: 8em; height: 100%; }

/* Read-only while someone else is actively typing in this same box (assets/view.js's typing lock) - deliberately
   no visual change to the textarea itself (readonly's own default look is overridden below), just the status line
   underneath, which always takes up its line's height (rather than popping the box shorter when it appears) so
   the box itself doesn't resize as locks come and go. */
.scs-notes-area[readonly] { background: #fff; color: inherit; cursor: default; }
.scs-notes-status { margin: 0.35em 0 0; min-height: 1.2em; font-size: 0.85em; color: var(--muted); font-style: italic; visibility: hidden; }
.scs-notes-status.visible { visibility: visible; }

/* Instructions: its own row, no notes column at all - fills the row's full width, with side padding so the text
   itself doesn't stretch edge to edge. That padding goes away once notes are hidden (below), since the whole
   page (including this row) is narrower at that point and the extra padding would just double up. */
.scs-instructions-body { width: 100%; padding: 0 8%; }
.scs-instructions-body :first-child { margin-top: 0; }

/* "Hide notes": each scenario's notes box disappears - .scs-scenario, left as the row's only flex child, fills
   the rest of the (now narrower - see .scs-wrap.notes-hidden above) row on its own, no extra width rule needed. */
.notes-hidden .scs-notes { display: none; }
.notes-hidden .scs-instructions-body { padding: 0; }

@media (max-width: 700px) {
  .scs-row { flex-direction: column; }
  .scs-scenario, .scs-notes { flex: 1 1 auto; }
  /* Image floats left and the description wraps around (and then under) it, rather than sitting in a narrow column beside it.
     flow-root makes the scenario box contain the float; the image is capped to 45% of the width so the text keeps room. */
  .scs-scenario { display: flow-root; }
  .scs-scenario-image { float: left; max-width: 45%; margin: 0 14px 6px 0; }
  .scs-scenario-text { min-width: 0; }
  .scs-instructions-body { padding: 0; }
  .scs-header { align-items: flex-start; }
}

b, strong { font-weight: 600; }