/* Materiaalijahti — Muoviamo design system (see docs/design-system.md). */
:root{
  --coral: #E85D63;
  --green: #2E9C7E;
  --turquoise: #1C8CA8;
  --dark-blue: #0F3A47;
  --beige: #C9B79C;
  --light-gray: #E6E6E6;

  /* Brand turquoise is 3.9:1 with white — too low for button text (WCAG AA 4.5:1).
     Buttons and turquoise text use the darker shade; brand turquoise stays for borders/accents. */
  --cta-primary: #1C8CA8;
  --cta-primary-strong: #156f86;
  --cta-primary-hover: #0f5568;
  --bg-main: #FFFFFF;
  --bg-soft: #F7F7F7;
  --text-primary: #0F3A47;
  --text-secondary: #5F6B6F;
  --border: #E6E6E6;
  --success: #2E9C7E;
  --danger: #E85D63;
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  --radius: 20px;
  --radius-sm: 16px;
  --font-display: "Baloo 2", "Montserrat", "Trebuchet MS", sans-serif;
  --font-body: "Montserrat", "Segoe UI", sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
}

*{ box-sizing: border-box; }
[hidden]{ display: none !important; }

body{
  margin: 0;
  min-height: 100vh;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-wrap: break-word;      /* long words / addresses never force sideways scrolling */
  background: var(--bg-soft);
}

a{ color: inherit; }

:focus-visible{
  outline: 3px solid var(--turquoise);
  outline-offset: 3px;
}

.skip-link{
  position: absolute;
  left: -9999px;
}
.skip-link:focus{
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--bg-main);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
}

.page-shell{
  width: min(100%, 46rem);
  margin: 0 auto;
  padding: calc(1rem + var(--safe-top)) 1rem 3rem;
}

.topbar{
  display: flex;
  flex-wrap: wrap;                 /* WCAG 1.4.12: room for user text spacing at 320px */
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0 1rem;
}

.brand{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--dark-blue);
}

.lang-switch{ display: flex; gap: 0.25rem; }
.lang-switch a{
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
}
.lang-switch a[aria-current="true"]{ background: var(--dark-blue); color: #fff; }

h1, h2, h3{ font-weight: 700; line-height: 1.2; }
h1{ font-size: 1.75rem; margin: 0 0 0.5rem; }
.lead{ font-size: 1.125rem; color: var(--text-secondary); margin-top: 0; }
.error-code{ font-size: 0.875rem; color: var(--text-secondary); }

.card{
  background: var(--bg-main);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 1rem;
}

.button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--cta-primary);
}
.button{ border-color: var(--cta-primary-strong); }
.button--primary{ background: var(--cta-primary-strong); color: #fff; }
.button--primary:hover{ background: var(--cta-primary-hover); border-color: var(--cta-primary-hover); }
.button--secondary{ background: transparent; color: var(--cta-primary-strong); }
.button--secondary:hover{ background: var(--bg-soft); }

/* Selectable list of themes / projects. */
.choice-list{
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.choice-list > li{ display: flex; min-width: 0; }
.choice-card{
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 1rem;
  min-height: 64px;
  padding: 16px 20px;
  background: var(--bg-main);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text-primary);
}
a.choice-card:hover{ border-color: var(--cta-primary); }
.choice-card__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
}
.choice-card__arrow{ font-size: 1.5rem; color: var(--cta-primary-strong); }
.choice-card__note{ grid-column: 1 / -1; color: var(--text-secondary); font-size: 0.9375rem; }
.choice-card--soon{
  background: var(--bg-soft);
  box-shadow: none;
  border-style: dashed;
}
.choice-card--soon .choice-card__title{ color: var(--text-secondary); }
.badge{
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--beige);
  color: var(--dark-blue);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (min-width: 40rem){
  .choice-list:not(.choice-list--single){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.eyebrow{
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.875rem;
}
.note{ color: var(--text-secondary); margin: 1rem 0 1.5rem; }

.site-footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 2rem;
}
.site-footer__link{ color: var(--text-secondary); font-size: 0.9375rem; min-height: 24px; }
.prose ul{ padding-left: 1.25rem; }
.prose li + li{ margin-top: 0.5rem; }

@media (min-width: 64rem){
  .page-shell{ width: min(100%, 72rem); }
}

/* Project preview card */
.project-preview h1{ font-size: 2rem; }
.project-preview__image{
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: 0.5rem 0 1rem;
}
.facts{ display: grid; gap: 0.75rem; margin: 1.25rem 0 1.5rem; }
.facts__item{
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--cta-primary);
  background: var(--bg-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.facts dt{ font-weight: 700; }
.facts dd{ margin: 0.125rem 0 0; }
.facts__note{ display: block; color: var(--text-secondary); font-size: 0.9375rem; margin-top: 0.25rem; }

.disclosure{ margin-top: 1rem; }
.disclosure > summary{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.5rem 0;
  font-weight: 600;
  color: var(--cta-primary-strong);
  cursor: pointer;
  list-style: none;
}
.disclosure > summary::-webkit-details-marker{ display: none; }
.disclosure > summary::before{
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.disclosure[open] > summary::before{ transform: rotate(45deg); }
.disclosure__less{ display: none; }
.disclosure[open] .disclosure__more{ display: none; }
.disclosure[open] .disclosure__less{ display: inline; }
.disclosure__body h2{ font-size: 1.25rem; margin-top: 0.5rem; }
.disclosure__body p, .project-preview .lead{ max-width: 65ch; }
@media (prefers-reduced-motion: reduce){
  .disclosure > summary::before{ transition: none; }
}
@media (min-width: 40rem){
  .facts{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sync status chip (capture). Text stays dark blue on white for contrast;
   the state colour is carried by the border and icon, never by colour alone. */
.status-chip{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.25rem 0.75rem 0.25rem 0.375rem;
  border: 2px solid var(--chip-color, var(--green));
  border-radius: 999px;
  background: var(--bg-main);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9375rem;
}
.status-chip__icon{
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--chip-color, var(--green));
  color: var(--dark-blue);
  font-size: 1rem;
}
.status-chip[data-state="saved"]{ --chip-color: var(--green); }
.status-chip[data-state="saving"]{ --chip-color: var(--turquoise); }
.status-chip[data-state="offline"]{ --chip-color: var(--beige); }
.status-chip[data-state="failed"]{ --chip-color: var(--coral); }
.status-chip__retry{
  min-height: 44px;
  margin-left: 0.25rem;
  padding: 0 0.75rem;
  border: 2px solid var(--cta-primary-strong);
  border-radius: 999px;
  background: var(--cta-primary-strong);
  color: #fff;
  font: inherit;
  cursor: pointer;
}


/* Forms */
.form{ display: grid; gap: 1.5rem; margin-top: 1rem; }
.field fieldset{ border: 0; margin: 0; padding: 0; min-width: 0; }
.field__label{ display: block; font-weight: 700; margin-bottom: 0.25rem; padding: 0; }
.field__optional{ font-weight: 500; color: var(--text-secondary); }
.field__help{ margin: 0 0 0.5rem; color: var(--text-secondary); font-size: 0.9375rem; }
.field input[type="text"],
.field input[type="number"],
.field textarea{
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  border: 2px solid #8a9599;
  border-radius: 12px;
  background: var(--bg-main);
  color: var(--text-primary);
  font: inherit;
}
.field textarea{ min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible{ border-color: var(--cta-primary-strong); }
.field :is(input, textarea)[aria-invalid="true"],
.field fieldset[aria-invalid="true"] .option,
.option:has(input[aria-invalid="true"]){ border-color: var(--coral); }
.field__error{
  margin: 0.375rem 0 0;
  color: #a3262c;
  font-weight: 600;
}
.field__error::before{ content: "⚠ "; }
.options{ display: grid; gap: 0.5rem; }
.option{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg-main);
  cursor: pointer;
}
.option:has(input:checked){ border-color: var(--cta-primary-strong); background: #eef7fa; }
.option:has(input:focus-visible){ outline: 3px solid var(--turquoise); outline-offset: 2px; }
.option input{ width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--cta-primary-strong); flex: none; }
.button[disabled], .button[aria-busy="true"]{ opacity: 0.7; cursor: progress; }

.notice{ padding: 0.75rem 1rem; border-radius: 12px; margin: 1rem 0; }
.notice--error{ background: #fdeced; border: 2px solid var(--coral); color: var(--text-primary); }
.notice--info{ background: #eef7fa; border: 2px solid var(--cta-primary); color: var(--text-primary); }

/* Capture shell */
.hunt-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.hunt-bar .eyebrow{ margin: 0; }

.visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Listening recorder */
.step > h1{ margin-bottom: 0.75rem; }
.recorder{ display: grid; gap: 0.75rem; margin: 1.25rem 0; }
.recorder__privacy{ margin: 0; color: var(--text-secondary); }
.recorder__live{ display: grid; gap: 0.75rem; justify-items: center; text-align: center; }
.recorder__countdown{ margin: 0; font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--cta-primary-strong); }
.recorder__time{ margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.recorder__progress{ width: 100%; height: 14px; accent-color: var(--cta-primary-strong); }
.recorder__result{ display: grid; gap: 0.75rem; }
.recorder__result audio{ width: 100%; }
.recorder__done{ margin: 0; font-weight: 700; color: var(--text-primary); }
.recorder__done span[aria-hidden]{ color: var(--green); }
.step [data-action="next"]{ margin-top: 1rem; }

/* Hunt overview */
.hunt-summary{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0 0.5rem; }
.hunt-summary__item{ padding: 0.75rem 1rem; background: var(--bg-soft); border-radius: var(--radius-sm); }
.hunt-summary dt{ font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }
.hunt-summary dd{ margin: 0.125rem 0 0; font-weight: 700; }
.hunt-summary dd[data-part="count"]{ font-family: var(--font-display); font-size: 2rem; line-height: 1.1; }
.hunt-summary dd span[aria-hidden]{ color: var(--green); }
.link-button{
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cta-primary-strong);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.hunt-empty{ color: var(--text-secondary); margin: 1rem 0; }
.finding-grid{
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 45%), 1fr));
  gap: 0.75rem;
}
.finding{
  position: relative;
  display: grid;
  width: 100%;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-main);
  overflow: hidden;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.finding:hover{ border-color: var(--cta-primary); }
.finding img, .finding__placeholder{ width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.finding__placeholder{ display: grid; place-items: center; background: var(--bg-soft); color: var(--text-secondary); font-size: 0.875rem; }
.finding__label{ padding: 0.5rem 0.625rem; font-size: 0.875rem; font-weight: 600; }
.finding__badge{ position: absolute; top: 0.5rem; left: 0.5rem; }
.hunt-actions{ display: grid; gap: 0.75rem; margin-top: 1rem; }

/* Observation capture */
.panel{ display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.panel:focus{ outline: none; }
.panel__actions{ display: grid; gap: 0.75rem; }
.panel__actions--footer{ margin-top: 1.5rem; justify-items: center; }
.panel__actions--footer .button{ justify-self: stretch; }
.file-button{ position: relative; }
.file-button:focus-within{ outline: 3px solid var(--turquoise); outline-offset: 3px; }
.photo-preview{
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.location-status{ margin: 0; font-weight: 600; min-height: 1.5em; }
.location-manual{ display: grid; gap: 0.375rem; border: 0; margin: 0; padding: 0; }
.location-manual input{
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  border: 2px solid #8a9599;
  border-radius: 12px;
  font: inherit;
  margin-bottom: 0.5rem;
}
.location-manual input[aria-invalid]{ border-color: var(--coral); }
.link-button--danger{ color: #a3262c; }
.button--danger{ background: #a3262c; border-color: #a3262c; color: #fff; }
.dialog{
  width: min(92vw, 28rem);
  border: 0;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  color: var(--text-primary);
}
.dialog::backdrop{ background: rgba(15, 58, 71, 0.55); }
.dialog h2{ margin-top: 0; }

/* Resume banner */
.resume{ border: 2px solid var(--cta-primary); }
.resume h2{ margin-top: 0; font-size: 1.375rem; }

/* Continuation email */
.email-box{ margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid var(--border); }
.email-box h2{ margin-top: 0; font-size: 1.375rem; }
.email-box input[type="email"]{
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  border: 2px solid #8a9599;
  border-radius: 12px;
  font: inherit;
}
.email-box input[aria-invalid]{ border-color: var(--coral); }
.email-address{ font-size: 1.25rem; font-weight: 700; word-break: break-all; margin: 0; }
.email-status{ font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.email-status::before{ content: "✓ "; color: var(--green); }
.email-status--failed::before{ content: "⚠ "; color: #a3262c; }
.email-status--sending::before{ content: none; }

/* Classroom view */
.classroom-section{ margin-top: 2rem; }
.classroom-section__title{ font-size: 1.5rem; }
h3.classroom-section__title{ font-size: 1.3125rem; }
.section-heading{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.section-heading .classroom-section__title{ margin: 0; }
.section-heading .button--compact{ margin-top: 0; }
.gallery-grid a.finding{ text-decoration: none; }
.finding-details{ display: grid; gap: 1rem; margin-top: 2rem; }
.finding-detail{
  background: var(--bg-main);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.finding-detail:focus{ outline: 3px solid var(--turquoise); outline-offset: 3px; }
.finding-detail__title{ margin-top: 0; font-size: 1.25rem; }
.finding-detail__photo{ display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: var(--bg-soft); border-radius: var(--radius-sm); }
.finding-detail__facts{ display: grid; gap: 0.5rem; margin: 1rem 0 0; }
.finding-detail__facts dt{ font-weight: 700; }
.finding-detail__facts dd{ margin: 0; }
.pre-line{ white-space: pre-line; }

.viewer{
  width: min(96vw, 64rem);
  max-height: 94vh;
  border: 0;
  border-radius: var(--radius);
  padding: 1rem;
  color: var(--text-primary);
}
.viewer::backdrop{ background: rgba(15, 58, 71, 0.8); }
.viewer__bar{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.viewer__bar h2{ margin: 0; font-size: 1.375rem; }
.viewer__close{ width: auto; }
.viewer__body .finding-detail{ box-shadow: none; padding: 0.5rem 0; }
.viewer__nav{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
.viewer__nav .button[disabled]{ opacity: 0.4; cursor: default; }
.viewer__nav .button{ gap: 0.4rem; }

/* Classroom listening moment. */
.listening-moment__player{ margin: 1rem 0 0; }
.listening-moment__player audio{ display: block; width: 100%; max-width: 36rem; }
.listening-moment__player figcaption{ margin-top: 0.5rem; color: var(--text-secondary); }
.listening-moment__notes{ display: grid; gap: 0.5rem; margin: 1rem 0 0; }
.listening-moment__notes dt{ font-weight: 700; }
.listening-moment__notes dd{ margin: 0; }
.listening-moment__empty{ color: var(--text-secondary); }

/* Classroom workshop preparation. */
.workshop-prep{ display: grid; gap: 1rem; margin-top: 1rem; }
.workshop-prep__item{ background: var(--bg-main); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.workshop-prep__title{ margin-top: 0; font-size: 1.25rem; }
.workshop-prep__placeholder{ color: var(--text-secondary); margin-bottom: 0; }
.workshop-prep__facts{ display: grid; gap: 0.75rem; margin: 0; }
.workshop-prep__facts dt{ font-weight: 700; }
.workshop-prep__facts dd{ margin: 0; }
.workshop-prep__facts ul{ margin: 0.25rem 0 0; padding-left: 1.25rem; }
.workshop-prep__facts a{ color: var(--cta-primary-strong); }
@media (min-width: 48rem){
  .workshop-prep{ grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
}

/* Workshop entry points (classroom view) and workshop pages. */
.workshop-links{ list-style: none; display: grid; gap: 0.75rem; margin: 1rem 0 0; padding: 0; }
.workshop-links__item{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem;
  min-height: 3rem; padding: 1rem 1.25rem;
  background: var(--bg-main); border-radius: var(--radius); box-shadow: var(--shadow);
  font-weight: 700; font-size: 1.125rem; color: var(--text-primary); text-decoration: none;
}
a.workshop-links__item:hover .workshop-links__name{ display: grid; gap: 0.125rem; }
.workshop-links__count{ font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary); }
.workshop-links__action{ text-decoration: underline; }
a.workshop-links__item:focus-visible{ outline: 3px solid var(--turquoise); outline-offset: 3px; }
.workshop-links__action{ font-size: 1rem; color: var(--cta-primary-strong); }
.workshop-links__item--current{ box-shadow: none; background: transparent; border: 2px solid var(--cta-primary-strong); }
.back-link{ margin: 0 0 1rem; }
.back-link a{ color: var(--cta-primary-strong); font-weight: 700; }
/* WCAG 2.5.8: stand-alone text links get at least a 24×24 px target. */
.back-link a, .listening-moment a, .admin-filter a, .admin-pages a, .admin-download, .admin-table td a{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 24px;
}
.workshop-source{ margin-top: 3rem; }
@media (min-width: 48rem){
  .workshop-links{ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

/* Practice photo prompts (capture + classroom; only when assigned to the project). */
.prompt-list{ margin-top: 1.5rem; }
.prompt-list h2{ font-size: 1.25rem; margin-bottom: 0.25rem; }
.prompt-list ul{ list-style: none; display: grid; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; }
.prompt-card{
  display: grid; gap: 0.25rem; width: 100%; min-height: 3rem; padding: 0.875rem 1rem;
  border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-main);
  color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
}
.prompt-card:hover{ border-color: var(--cta-primary-strong); }
.prompt-card:focus-visible{ outline: 3px solid var(--turquoise); outline-offset: 3px; }
.prompt-card__text{ font-weight: 700; }
.prompt-card__count{ color: var(--text-secondary); font-size: 0.9375rem; }
.prompt-card__required{ font-size: 0.9375rem; font-weight: 700; }
.prompt-photo{ display: grid; gap: 0.25rem; justify-items: center; }
.prompt-photo img{ width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.prompt-answers{ display: grid; gap: 1rem; margin-top: 1rem; }
.prompt-answer{ background: var(--bg-main); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.prompt-answer__title{ margin-top: 0; font-size: 1.25rem; }
.prompt-answer__empty{ color: var(--text-secondary); margin-bottom: 0; }
.prompt-answer__photos{ list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 45%), 1fr)); gap: 0.75rem; margin: 0; padding: 0; }
.prompt-answer__photos img{ display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.prompt-answer__photos a:focus-visible{ outline: 3px solid var(--turquoise); outline-offset: 3px; display: block; }

/* Workshop outputs (only when saving is enabled). */
.workshop-outputs{ margin-top: 3rem; }
.output-list{ list-style: none; display: grid; gap: 1rem; margin: 1rem 0 0; padding: 0; }
.output{ background: var(--bg-main); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.output:focus{ outline: 3px solid var(--turquoise); outline-offset: 3px; }
.output__title{ margin-top: 0; font-size: 1.25rem; }
.output__photo{ display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: var(--bg-soft); border-radius: var(--radius-sm); }
.output__audio{ display: block; width: 100%; max-width: 36rem; }
.output__meta, .output__missing, .workshop-outputs__empty{ color: var(--text-secondary); }
.output__meta a{ color: var(--cta-primary-strong); }
.output__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.output__actions .button--compact{ margin-top: 0; }
.output-add{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.output-add .button{ width: auto; margin-top: 0; }
.output-form{ display: grid; gap: 1.25rem; margin-top: 1rem; padding: 1.25rem; background: var(--bg-main); border-radius: var(--radius); box-shadow: var(--shadow); }
.output-form h3{ margin: 0; }
.output-form__file{ position: relative; width: auto; margin-top: 0; cursor: pointer; }
.output-form__file:focus-within{ outline: 3px solid var(--turquoise); outline-offset: 3px; }
.output-form__preview{ display: block; max-width: 100%; max-height: 40vh; margin-top: 0.75rem; border-radius: var(--radius-sm); }
.output-form__recorder{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.output-form__recorder .button{ width: auto; margin-top: 0; }
.output-form audio{ display: block; width: 100%; max-width: 36rem; margin-top: 0.75rem; }
.output-form__error{ margin: 0; color: #a3262c; font-weight: 600; }
.output-form__error::before{ content: "⚠ "; }
@media (min-width: 48rem){
  .output-list{ grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
}

/* Admin (staff only). */
.page-admin-sessions .page-shell{ width: min(100%, 90rem); }
.admin-login__input{ width: 100%; min-height: 48px; padding: 0.625rem 0.875rem; border: 2px solid #8a9599; border-radius: 12px; font: inherit; }
.admin-bar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.admin-bar .button{ width: auto; margin-top: 0; }
.admin-filter, .admin-pages{ display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1rem 0; }
.admin-filter a, .admin-pages a{ color: var(--cta-primary-strong); font-weight: 600; }
.admin-filter a[aria-current]{ color: var(--text-primary); text-decoration: none; border-bottom: 3px solid var(--cta-primary-strong); }
.admin-card{ margin: 1rem 0 2rem; padding: 1.25rem; background: var(--bg-main); border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-card h2{ margin-top: 0; font-size: 1.375rem; }
.admin-card .button{ width: auto; }
.admin-card a{ color: var(--cta-primary-strong); }
.admin-subtitle{ font-size: 1.375rem; }
.admin-action{ margin-top: 1rem; }
.admin-danger{ border: 2px solid #a3262c; }
.admin-danger h2{ color: #a3262c; }
.admin-facts code{ font-size: 0.875rem; overflow-wrap: anywhere; }
.admin-download, .admin-table td a{ color: var(--cta-primary-strong); font-weight: 600; }
.admin-facts{ display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.admin-facts dt{ font-weight: 700; }
.admin-facts dd{ margin: 0; }
.admin-list{ margin: 0.25rem 0 1rem; padding-left: 1.25rem; overflow-wrap: anywhere; }
.admin-list--errors{ color: #a3262c; }
.admin-details{ margin-bottom: 1rem; }
.admin-details summary{ cursor: pointer; font-weight: 600; min-height: 24px; }
.admin-table{ position: relative; /* keeps the visually-hidden caption inside the scroll box */ overflow-x: auto; background: var(--bg-main); border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-table:focus-visible{ outline: 3px solid var(--turquoise); outline-offset: 3px; }
.admin-table table{ width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.admin-table th, .admin-table td{ padding: 0.625rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table td:nth-child(3){ white-space: normal; min-width: 12rem; }
.admin-table .num{ text-align: right; }
.admin-table thead th{ background: var(--bg-soft); }

/* Adjust-location mini-map (capture). */
.location-map{ height: 16rem; margin: 0.75rem 0 0.25rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-soft); z-index: 0; }
.map-pin--picker{ cursor: grab; }

/* Classroom map (Leaflet). */
.button--compact{ width: auto; min-height: 44px; padding: 8px 16px; font-size: 1rem; margin-top: 0.5rem; }
.map{
  height: min(60vh, 28rem);
  min-height: 16rem;
  margin-top: 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  overflow: hidden;
  z-index: 0;                      /* keep Leaflet's panes below the sticky header and dialog */
}
.map:focus-visible{ outline: 3px solid var(--turquoise); outline-offset: 3px; }
.map__fallback{ margin: 0; padding: 1rem; color: var(--text-secondary); }
.map__unlocated{ color: var(--text-secondary); margin-top: 0.75rem; }
.map .leaflet-control-attribution{ font-size: 0.75rem; }
.map .leaflet-control-attribution a{ color: var(--cta-primary-strong); }
.map-pin{ background: none; border: 0; }
.map-pin span{
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--cta-primary-strong);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  color: #fff;
  font: 700 1rem/1 var(--font-body);
}
.map-pin b{ display: block; transform: rotate(45deg); font-weight: 700; }
.map-pin.is-selected span{ background: #b8323a; transform: rotate(-45deg) scale(1.15); }
.map-pin:focus{ outline: none; }
.map-pin:focus-visible span{ outline: 3px solid var(--dark-blue); outline-offset: 3px; }
.map-accuracy{ fill: var(--cta-primary); fill-opacity: 0.15; stroke: var(--cta-primary-strong); stroke-width: 2; }

@media (min-width: 64rem){
  .finding-details{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer__body .finding-detail{ display: grid; grid-template-columns: 3fr 2fr; gap: 1.5rem; align-items: start; }
  .viewer__body .finding-detail__facts{ margin: 0; }
}

/* Classroom on a projector / large screen: wider page, larger type, gallery and map
   side by side (the map stays in view while the gallery scrolls). */
@media (min-width: 64rem){
  :is(.page-classroom, .page-workshop) .page-shell{ width: min(100%, 90rem); padding-inline: 2rem; }
  :is(.page-classroom, .page-workshop) main{ font-size: 1.125rem; }
  :is(.page-classroom, .page-workshop) h1{ font-size: 2.5rem; }
  :is(.page-classroom, .page-workshop) .classroom-section__title{ font-size: 1.875rem; }
  :is(.page-classroom, .page-workshop) h3.classroom-section__title{ font-size: 1.5rem; }
  :is(.page-classroom, .page-workshop) .gallery-grid{ grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .classroom-overview--with-map{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; }
  .classroom-overview--with-map > .classroom-section:last-child{ position: sticky; top: 1rem; }
  .classroom-overview--with-map .map{ height: min(75vh, 44rem); }
}
@media (min-width: 100rem){
  :is(.page-classroom, .page-workshop) main{ font-size: 1.25rem; }
  :is(.page-classroom, .page-workshop) .finding-details{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Printed observation sheets: group summary, listening notes, then one finding per
   page with its photo and answers, then workshop preparation. Interactive parts
   (gallery, map, player, buttons, dialog) are left out. */
@media print{
  @page{ margin: 15mm; }
  body{ background: #fff; color: #000; font-size: 12pt; }
  .page-shell{ width: auto; padding: 0; }
  .skip-link, .lang-switch, .site-footer, .viewer, .classroom-overview, .classroom-workshops, .back-link, .output-add, .output-form, .output__actions,
  .listening-moment__player audio, .listening-moment a, .section-heading, [data-action], [data-show-on-map]{ display: none !important; }
  .topbar{ padding: 0 0 4mm; }
  .facts__item{ border-color: #000; }
  .classroom-section{ margin-top: 8mm; }
  .finding-details, .workshop-prep{ display: block; }
  .finding-detail, .workshop-prep__item{ box-shadow: none; padding: 0; border-radius: 0; background: none; }
  .finding-detail{ break-before: page; }
  .finding-detail__photo{ width: auto; max-width: 100%; max-height: 120mm; margin: 0 auto; background: none; break-inside: avoid; }
  .finding-detail__facts > div, .workshop-prep__facts > div{ break-inside: avoid; }
  #prepare-title{ break-before: page; }
  .workshop-prep__item{ margin-top: 6mm; break-inside: avoid; }
  .workshop-prep__facts a{ color: #000; }
  .workshop-prep__facts a[href^="https:"]::after{ content: " (" attr(href) ")"; word-break: break-all; }
  .listening-moment__player figcaption, .listening-moment__empty, .workshop-prep__placeholder{ color: #000; }
}