/* Vergent — stylesheet. Section headers mark the views; TOOL PAGES and TOOLS PAGE share the glass look. */

/* ── CSS Variables ── */
:root {
  --bg: #F7F5F0;
  --card: #FFFFFF;
  --primary: #2D6A4F;
  --primary-light: #40916C;
  --primary-pale: #D8F3DC;
  --accent: #D62828;
  --accent-pale: #FDDEDE;
  --text: #1B1B1B;
  --text-muted: #5C5C5C;
  --text-light: #6E6E6E;
  --border: #E8E4DD;
  --border-light: #F0ECE5;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
  --warn: #E8A838;
  --danger: #D62828;
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Source Serif 4", Georgia, serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Prevent iOS Safari auto-zoom on input focus.
   iOS zooms in whenever a user taps an input with font-size < 16px
   and does not fully reset the zoom afterwards — resulting in the
   whole page appearing "slightly zoomed in" for the rest of the session.
   Forcing 16px on all form fields at mobile widths eliminates this. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input:not([type]),
  textarea,
  select {
    font-size: 20px !important;
  }
}

textarea:focus, input:focus, button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

/* ── Accessibility: screen-reader-only ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Disable sticky hover on touch devices ── */
@media (hover: none) {
  *:hover { transition: none !important; }
  .btn-card:hover { box-shadow: var(--shadow); border-color: var(--border); }
  .sa-emotion-btn:hover { transform: none; border-color: transparent; }
  .sa-emoji-btn:hover { transform: none; }
  .btn-chip:hover { background: var(--card); color: var(--text); border-color: var(--border); }
  .score-dot:hover { transform: none; }
  
}

/* ── Animations ── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pdfPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(45,106,79,0.25); }
  50% { box-shadow: 0 4px 24px rgba(45,106,79,0.45); }
}

.animate-fade-up {
  animation: fadeUp 0.5s ease both;
}

.animate-fade-up-delay {
  animation: fadeUp 0.6s ease 0.15s both;
}

/* ── Views ── */
.view {
  display: none;
}

.view.active {
  display: flex;
  overflow-x: hidden;
}

/* Full-page scrollable views need column layout */
#view-public_landing.active,
#view-icf_article.active {
  display: block;
  overflow-x: hidden;
  max-width: 100vw;
}
/* The landing header is position:sticky, and sticky only works if no ancestor is
   a scroll container. `overflow-x: hidden` makes the browser compute overflow-y
   as auto, which turns this view into one — the header then scrolled away with
   the page. `clip` cuts sideways overflow exactly the same but creates no scroll
   container, so the header stays put. The `hidden` line above it is the fallback
   for Safari 15 and older, where the page behaves as it did before. */
#view-public_landing.active { overflow-x: clip; }

/* ── Layout Containers ── */
.view-center {
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

/* Auth views (login, register) with header + centered content */
#view-login.active,
#view-register.active {
  display: block;
  overflow-x: hidden;
}
.auth-content {
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

/* #view-landing (Tools page): see "TOOLS PAGE" section at the end of the file */

.view-top {
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}

.view-form {
  min-height: 100vh;
  flex-direction: column;
  padding: 32px 24px;
}

.container-narrow {
  max-width: 480px;
  width: 100%;
}

.container-extra-wide {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

/* ── Buttons ── */
.btn {
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  -webkit-appearance: none;
  appearance: none;
}

.landing-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-group-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  padding-left: 4px;
}

.landing-group-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-card {
  width: 100%;
  padding: 20px 24px;
  font-size: 20px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  border-radius: 16px;
  text-align: left;
  position: relative;
}

.btn-card-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  min-height: 56px;
  max-height: 56px;
  border-radius: 12px;
  background: #E8F5E9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-card-icon svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  color: var(--primary);
}

.btn-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.btn-card-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.btn-card-desc {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.4;
}

.btn-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  padding: 14px 24px;
  font-size: 18px;
  border: 1px solid transparent;
  box-shadow: 0 4px 16px rgba(45,106,79,0.27);
}

.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(45,106,79,0.4);
}

.btn-primary.disabled,
.btn-primary:disabled {
  background: #b0b0a8;
  box-shadow: none;
  cursor: default;
}

.btn-primary-solid {
  background: var(--primary);
  color: #fff;
  padding: 14px 24px;
  font-size: 18px;
}

.btn-primary-solid.disabled,
.btn-primary-solid:disabled {
  background: #b0b0a8;
  cursor: default;
  box-shadow: none;
}

.btn-secondary {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 14px 24px;
  font-size: 18px;
}

.btn-secondary.disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-ghost {
  background: var(--card);
  color: var(--text-muted);
  padding: 8px 16px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}

.btn-back-landing, .btn-home, .btn-nav {
  background: linear-gradient(135deg, #f5faf7 0%, #edf5f0 50%, #e8f3eb 100%);
  color: #2D6A4F;
  border: 1px solid #d4e8da;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(45, 106, 79, 0.08), 0 1px 2px rgba(45, 106, 79, 0.05);
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .btn-ghost:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-pale);
  }
  .btn-back-landing:hover, .btn-home:hover, .btn-nav:hover {
    background: linear-gradient(135deg, #edf5f0 0%, #e0efe5 50%, #d4e8da 100%);
    border-color: #b7d9c4;
    box-shadow: 0 2px 6px rgba(45, 106, 79, 0.12), 0 1px 3px rgba(45, 106, 79, 0.08);
    transform: translateY(-1px);
  }
}

.btn-ghost:focus {
  outline: none;
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--card);
}

.btn-back-landing:focus, .btn-home:focus, .btn-nav:focus {
  outline: none;
  background: linear-gradient(135deg, #f5faf7 0%, #edf5f0 50%, #e8f3eb 100%);
  border-color: #d4e8da;
}

.btn-back-landing:active, .btn-home:active, .btn-nav:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(45, 106, 79, 0.06);
}

.btn-full {
  width: 100%;
  padding: 20px;
  font-size: 20px;
}

.btn-pdf {
  animation: pdfPulse 2s ease-in-out infinite;
}

.btn-pdf.exported {
  animation: none;
  box-shadow: var(--shadow);
}

.pdf-warning {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  line-height: 1.5;
}

/* PDF download overlay */
.pdf-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.pdf-overlay-box {
  background: var(--card);
  border-radius: 16px;
  padding: 32px 40px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  min-width: 260px;
}

.pdf-overlay-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.pdf-overlay-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
}

.pdf-overlay-progress {
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.pdf-overlay-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.5s ease;
  width: 0%;
}

/* ── Page header with centered logo ── */
.page-header-logo {
  display: block;
  height: 28px;
  width: auto;
  margin: 0 auto 8px;
}

#view-landing .page-header-logo { display: none; }

.brand-icon {
  display: block;
  width: 48px;
  height: auto;
  margin: 0 auto 8px;
}

.brand-wordmark {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #2D6A4F 0%, #52B788 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  margin-bottom: 4px;
}

.brand-wordmark .tm {
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  -webkit-text-fill-color: #52B788;
  opacity: 0.6;
  vertical-align: super;
  margin-left: 2px;
}

.page-subtitle {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
  text-align: center;
}

/* ── Cards ── */
.card {
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ── Progress Bar ── */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ── Phase Chips ── */
.chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}

.chip-active {
  background: var(--primary);
  color: #fff;
}

.chip-done {
  background: var(--primary-pale);
  color: var(--primary);
}

/* ── Dictation (js/dictation.js) ──
   The same pill on every text field (the ICF item page's design): mic + "Dictate"; while recording red
   with a stop square, "Stop dictation" and a red outline on the field. Hidden when the browser has no speech
   recognition (html.no-dictation). */
.dict-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.dict-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
  height: 40px; padding: 0 16px 0 12px; border-radius: 20px; cursor: pointer; -webkit-appearance: none;
  border: 1px solid rgba(45, 106, 79, 0.25); background: rgba(255, 255, 255, 0.8); color: var(--primary);
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.dict-btn:hover:not(:disabled) { background: #fff; border-color: rgba(45, 106, 79, 0.45); }
.dict-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.dict-btn:disabled { opacity: 0.45; cursor: default; }
.dict-btn svg { flex: 0 0 auto; pointer-events: none; }
.dict-btn .dict-stop { display: none; }
.dict-btn.is-recording { background: #C62828; border-color: #C62828; color: #fff; box-shadow: 0 0 0 5px rgba(198, 40, 40, 0.18); }
.dict-btn.is-recording:hover { background: #B71C1C; border-color: #B71C1C; }
.dict-btn.is-recording .dict-mic { display: none; }
.dict-btn.is-recording .dict-stop { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .dict-btn.is-recording { animation: dict-pulse 1.6s ease-in-out infinite; }
}
@keyframes dict-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(198, 40, 40, 0.18); }
  50% { box-shadow: 0 0 0 9px rgba(198, 40, 40, 0.08); }
}
textarea.dict-recording, input.dict-recording { border-color: #C62828 !important; box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15) !important; }
.dict-msg { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.92);
  font-size: 16px; font-weight: 600; line-height: 1.4; color: #B3261E; }
.dict-msg[hidden] { display: none; }
.dict-notice-icon { color: var(--primary); }
.dict-notice-ok { background: var(--primary); color: #fff; border: 1px solid var(--primary); }   /* a start, not a warning */
.dict-notice-ok:hover { filter: brightness(1.08); }
.dict-notice-icon svg { width: 40px; height: 40px; }
html.no-dictation .dict-btn, html.no-dictation .dict-foot { display: none !important; }

/* ── Counter ── */
.counter {
  font-size: 16px;
  color: var(--text-light);
  font-family: "DM Mono", monospace;
}

/* Inline scoring inside card */

.icf-inline-scoring-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.icf-score-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 16px;
  color: var(--text);
  -webkit-appearance: none;
}

.icf-score-option:hover {
  border-color: var(--text-light);
}

.icf-score-option .score-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: "DM Mono", monospace;
  font-size: 16px;
  background: var(--border-light);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.icf-score-option.selected {
  border-color: transparent;
  background: var(--bg);
}

.icf-score-option.selected .score-num {
  color: #fff;
}

.icf-score-option .score-text {
  font-size: 15px;
  color: var(--text-muted);
}

.icf-score-option.selected .score-text {
  font-weight: 600;
  color: var(--text);
}

/* Description area */
.icf-inline-desc {
  display: none;
}

.icf-inline-desc.visible {
  display: block;
  margin-bottom: 8px;
}

.icf-inline-desc label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

.icf-inline-desc textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-size: 17px;
  font-family: "Source Serif 4", Georgia, serif;
  line-height: 1.5;
  resize: vertical;
  color: var(--text);
  background: #FFFBF5;
  min-height: 110px;
}

/* ── Age Select ── */
.age-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.age-button {
  width: 100%;
}

/* ── Form ── */
.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.form-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.form-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-size: 17px;
  font-family: "Source Serif 4", Georgia, serif;
  line-height: 1.6;
  resize: vertical;
  color: var(--text);
  background: #FAFAF8;
}

/* ── ICF Form ── */

.icf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border-light);
}

.icf-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: var(--text);
}

.icf-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-pale);
  margin-top: 32px;
}

/* Score dot button */
.score-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
  -webkit-appearance: none;
}

.score-dot:hover {
  border-color: var(--text-light);
}

.score-dot.selected {
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: "DM Mono", monospace;
}

/* Group-level text area */

.icf-group-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-size: 17px;
  font-family: "Source Serif 4", Georgia, serif;
  line-height: 1.5;
  resize: vertical;
  color: var(--text);
  background: #FFFBF5;
}

/* Per-category description toggle */

.icf-cat-desc-area {
  padding: 4px 0 8px 28px;
}

.icf-cat-desc-area .icf-group-textarea {
  font-size: 16px;
  padding: 10px;
  border-radius: 8px;
}

/* ── Confirm Dialog ── */
/* The three-card introduction (js/cycle.js): a window over the Tools page on a computer, the whole screen on a phone. */
.intro-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px; font-family: "Source Serif 4", Georgia, serif; }
.intro-overlay[hidden], .intro-box [hidden] { display: none; }        /* .btn sets its own display */
body.intro-open { overflow: hidden; }
.intro-box { position: relative; width: 100%; max-width: 520px; background: #fff; border-radius: 24px; padding: 34px 32px 26px;
  box-shadow: 0 24px 60px rgba(27, 67, 50, 0.28); display: flex; flex-direction: column; }
.intro-close { position: absolute; top: 10px; right: 14px; width: 40px; height: 40px; border: 0; background: none; font-size: 28px;
  line-height: 1; color: var(--text-light); cursor: pointer; border-radius: 50%; }
.intro-close:hover, .intro-close:focus-visible { background: var(--primary-pale); color: var(--primary); }
.intro-card { text-align: center; }
.intro-disc { width: 104px; height: 104px; margin: 4px auto 18px; border-radius: 50%; background: var(--primary-pale);
  display: flex; align-items: center; justify-content: center; }
.intro-disc img { width: 70px; height: 70px; object-fit: contain; }
.intro-title { font-size: 25px; font-weight: 700; color: var(--text); margin: 0 0 12px; line-height: 1.25; }
.intro-text { font-size: 18px; line-height: 1.6; color: #3f3f3f; margin: 0; text-align: left; }
.intro-dots { display: flex; justify-content: center; gap: 8px; margin: 22px 0 18px; }
.intro-dots span { width: 9px; height: 9px; border-radius: 50%; background: #cfe3d6; transition: background 0.2s, transform 0.2s; }
.intro-dots span.on { background: var(--primary); transform: scale(1.25); }
.intro-buttons { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.intro-nav { display: flex; gap: 10px; margin-left: auto; }
/* Back and Next the same size: the app's .btn-ghost is a small secondary button with a bottom margin of its own */
.intro-nav .btn { min-height: 50px; padding: 12px 24px; font-size: 17px; border-radius: 14px; margin: 0; }
/* A tip under the text: a picture of the explanation animation's pause button (the same look as in Learn) */
.intro-info { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 10px 14px; border-radius: 14px;
  background: var(--primary-pale); color: #2b4a3a; font-size: 16px; line-height: 1.45; text-align: left; }
.intro-info-btn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-light);
  background: #fff; color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.intro-info-btn svg { width: 14px; height: 14px; display: block; }
.intro-skip { border: 0; background: none; color: var(--text-light); font: inherit; font-size: 16px; cursor: pointer; padding: 10px 6px;
  text-decoration: underline; text-underline-offset: 3px; }
.intro-skip:hover, .intro-skip:focus-visible { color: var(--primary); }
.intro-card.intro-enter { animation: fadeUp 0.25s ease both; }
@media (prefers-reduced-motion: reduce) { .intro-card.intro-enter { animation: none; } .intro-dots span { transition: none; } }
@media (max-width: 600px) {
  .intro-overlay { padding: 0; background: #fff; backdrop-filter: none; }
  .intro-box { max-width: none; height: 100%; border-radius: 0; box-shadow: none; justify-content: center;
    padding: calc(56px + env(safe-area-inset-top, 0px)) 22px calc(22px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
  .intro-close { top: calc(10px + env(safe-area-inset-top, 0px)); }
  .intro-card { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
  .intro-title { font-size: 24px; }
  .intro-buttons { flex-wrap: wrap; }
  .intro-nav { flex: 1 1 100%; order: -1; }
  .intro-nav .btn { flex: 1; min-height: 52px; }
  .intro-skip { margin: 6px auto 0; }
}

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  font-family: "Source Serif 4", Georgia, serif;
  animation: fadeUp 0.2s ease;
}

.dialog-overlay.active {
  display: flex;
}

/* Leave dialog: the app's own card look, the safe choice is the green one, and each
   sentence sits on its own line because the dialog is read in a hurry. Red stays for irreversible things only. */
.dialog-box {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 26px 24px 24px;
  max-width: 430px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(27, 67, 50, 0.28);
  margin: auto;
}

.dialog-icon {
  margin-bottom: 10px;
  text-align: center;
}
.dialog-icon .icon { width: 34px; height: 34px; }

.dialog-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: 10px;
}

.dialog-text {
  font-size: 17px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.55;
  margin-bottom: 24px;
}
/* one sentence per line, with air between them */
.dialog-text span { display: block; }
.dialog-field { margin: 4px 0 18px; text-align: left; }
.dialog-field label { display: block; margin-bottom: 6px; font-weight: 600; }
.dialog-field input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; border: 2px solid #c9d6ce; border-radius: 12px;
  font: inherit; font-size: 17px; background: #fff; color: inherit; }
.dialog-field input:focus { outline: 3px solid rgba(45, 106, 79, 0.35); border-color: #2D6A4F; }
.dialog-field input[aria-invalid="true"] { border-color: #b3261e; }
.dialog-text span + span { margin-top: 10px; }

.dialog-buttons {
  display: flex;
  flex-direction: column-reverse;   /* the safe choice first, also for the thumb */
  gap: 10px;
}

.dialog-buttons .btn {
  flex: 1;
  min-height: 54px;
  padding: 14px 18px;
  border-radius: 27px;
  font-size: 18px;
}

/* the safe choice is the green one (.btn-dialog-cancel: the dictation notice) */
.btn-dialog-cancel,
.btn-dialog-green {
  background: var(--green-grad);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 20px rgba(45, 106, 79, 0.30);
}

/* the other choice is quiet: red is kept for irreversible things (deleting an account) */
.btn-dialog-quiet {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  border: 1.5px solid rgba(45, 106, 79, 0.35);
}
.btn-dialog-danger {
  background: rgba(255, 255, 255, 0.9);
  color: #C62828;
  border: 1.5px solid rgba(198, 40, 40, 0.5);
}

@media (min-width: 560px) {
  .dialog-buttons { flex-direction: row; }
  .dialog-buttons .btn-dialog-cancel { order: 2; }
}

/* The app's own dialog (appDialog): the green button is always last — right when the two sit side by side,
   lowest when stacked (phone, or a label that would wrap on desktop: .is-stacked, measured when the dialog opens). */
#confirmDialog .dialog-buttons { flex-direction: column; }
#confirmDialog .dialog-buttons .btn-dialog-green { order: 2; }
@media (min-width: 560px) {
  #confirmDialog .dialog-buttons { flex-direction: row; }
}
#confirmDialog .dialog-buttons.is-stacked { flex-direction: column; }

/* Buttons */

@media (max-width: 680px) {
  /* Dialog overlay: reduce padding to give content more room */
  .dialog-overlay {
    padding: 12px;
  }
  /* Plan dialog box: tighter padding on mobile */
  
  /* Stack cards vertically, center them, constrain max width */
  
  
  /* Slightly smaller type so everything fits comfortably */
  
  
  
  
  
  
  
  
  /* Highlight badge: center above card instead of right-aligned */
  
  /* If current-plan badge is shown, hide the highlight badge on the same card
     to prevent overlap (both are absolutely positioned at top: -12px) */
  
  
}

/* ── Footer text ── */
.footer-note {
  margin-top: 48px;
  font-size: 15px;
  color: var(--text-light);
  max-width: 400px;
  text-align: center;
  line-height: 1.5;
}

/* ── Legal footer links ── */
.legal-footer {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ── Legal pages ── */

.legal-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin: 24px 0 4px;
}

.legal-meta {
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: 32px;
}

/* ── Section title ── */
.section-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.section-desc {
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.5;
}

/* ── Plan / Suunnitelma ── */

.plan-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.plan-field label {
  margin-bottom: 4px;
}

.plan-textarea {
  background: #FFFBF5;
  border-color: var(--border);
  min-height: 60px;
}

.plan-textarea:focus {
  background: #fff;
}

/* ── Report View ── */

.report-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-pale);
}

.report-section-desc {
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* Results table */
.report-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.report-table th {
  background: var(--bg);
  font-weight: 700;
  color: var(--text-muted);
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border);
}

.report-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.report-table tr:last-child td {
  border-bottom: none;
}

.report-table .score-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  color: #fff;
  font-size: 15px;
  font-family: "DM Mono", monospace;
  min-width: 28px;
  text-align: center;
}

/* ── Metadata Fields ── */
.meta-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.meta-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 17px;
  font-family: "Source Serif 4", Georgia, serif;
  color: var(--text);
  background: #FAFAF8;
  -webkit-appearance: none;
  appearance: none;
}

.meta-input:read-only {
  background: var(--border-light);
  color: var(--text-muted);
}

select.meta-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C5C5C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ── Plan checkbox ── */

.plan-checkbox {
  display: none;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  
  
  
  
  .score-dot {
    width: 28px;
    height: 28px;
  }
  
  
}

/* Container */

.sa-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sa-group-label { text-align: center; font-size: 14px; color: var(--text-muted); margin-bottom: 6px; }

.sa-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
}

/* Tilannekuva */
.sa-hint-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 6px;
}

.sa-image-wrapper {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  margin-bottom: 20px;
}

.sa-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sa-image.is-loading { visibility: hidden; }

/* Text card (word card mode) */
.sa-textcard-wrapper {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sa-textcard {
  width: 100%;
  height: 100%;
  border: 4px solid #2D6A4F;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Same friendly hand-lettered face as the topic label above the picture, so
     the word cards read as the child's half of the tool rather than the
     professional's. Comic Neue is loaded at 700 only — keep the weight there. */
  font-family: "Comic Neue", "Comic Sans MS", "Source Serif 4", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #2D6A4F;
  text-align: center;
  padding: 24px;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  transition: border-color 0.3s, color 0.3s;
}

/* Text card in tier list */
.tier-textcard {
  width: 90px;
  height: 90px;
  border: 3px solid #2D6A4F;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Comic Neue", "Comic Sans MS", "Source Serif 4", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 4px;
  background: var(--card);
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
  line-height: 1.2;
  box-sizing: border-box;
  max-width: 90px;
}

/* Category select divider for text cards */
.sa-textcards-divider {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.sa-textcards-divider h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.sa-textcards-divider p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

/* Emotions grid (below nav) */
.sa-emotions-divider {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin: 16px 0 10px;
}

.sa-emotions-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.sa-emotions-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.sa-emotion-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 3px solid transparent;
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sa-emotion-btn:hover {
  transform: scale(1.08);
  border-color: var(--primary-light);
}

.sa-emotion-btn.selected {
  border-color: var(--primary);
  background: var(--primary-pale);
  transform: scale(1.08);
}

.sa-emotion-btn img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.sa-emotion-btn .sa-emotion-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
}

.sa-emotion-btn.selected .sa-emotion-label {
  color: var(--primary);
}

/* Emoji row */
.sa-emoji-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.sa-emoji-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 3px solid transparent;
  border-radius: 14px;
  background: #F0EDE8;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sa-emoji-btn:hover {
  transform: scale(1.12);
}

.sa-emoji-btn.selected {
  border-color: var(--primary);
  background: var(--primary-pale);
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--primary-pale), var(--shadow);
}

.sa-emoji-btn img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

/* Selected emotion display */
.sa-selected-emotion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--primary-pale);
  border-radius: 24px;
  margin-bottom: 16px;
  font-size: 0.85rem;
}

.sa-selected-emotion-label {
  font-weight: 600;
  color: var(--primary);
}

.sa-selected-emotion-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.sa-selected-emotion-text {
  color: var(--text);
  font-weight: 500;
}

.sa-selected-emotion-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 50%;
  transition: background 0.15s;
}

.sa-selected-emotion-clear:hover {
  background: rgba(0,0,0,0.08);
}

/* Navigation buttons */
.sa-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 420px;
}

.sa-nav .btn {
  flex: 1;
}

/* ── Tier List ── */
.tier-row {
  display: flex;
  align-items: stretch;
  margin-bottom: 8px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 80px;
}

.tier-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  flex-shrink: 0;
  padding: 10px 8px;
  gap: 4px;
}

.tier-label img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.tier-images {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  align-items: flex-start;
  align-content: flex-start;
}

.tier-image-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 130px;
}

.tier-image-card > img {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.tier-img-wrap {
  position: relative;
  display: inline-block;
}

.tier-img-wrap > img:first-child {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.tier-emotion-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.tier-row-empty .tier-images {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.tier-empty-text {
  color: var(--text-light);
  font-size: 0.8rem;
  font-style: italic;
}

/* ── Self-assessment emotion legend ── */
.sa-emotion-legend {
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.sa-legend-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sa-legend-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.sa-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: var(--text-muted);
}

.sa-legend-item img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Self-assessment mobile responsive ── */
@media (max-width: 768px) {
  .sa-image-wrapper {
    max-width: 300px;
  }

  .sa-emoji-btn img {
    width: 42px;
    height: 42px;
  }

  .sa-emoji-row {
    gap: 8px;
  }

  .tier-label {
    width: 70px;
  }

  .tier-image-card {
    width: 100px;
  }

  .tier-image-card > img {
    width: 90px;
    height: 90px;
  }

  .tier-img-wrap > img:first-child {
    width: 90px;
    height: 90px;
  }

  .tier-emotion-badge {
    width: 28px !important;
    height: 28px !important;
  }

  .tier-textcard {
    width: 90px;
    height: 90px;
    font-size: 11px;
  }
}

/* ══════════════════════════════════════════════════
   SKILL CALCULATOR
   ══════════════════════════════════════════════════ */

.sc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.sc-optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 16px;
}

.sc-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 17px;
  resize: vertical;
  background: var(--card);
  color: var(--text);
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.sc-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-pale);
}

.sc-supporter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-light);
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-appearance: none;
}

.btn-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-pale);
}

.btn-chip.selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-chip.disabled,
.btn-chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.sc-submit {
  margin-top: 8px;
  width: 100%;
  font-size: 20px;
  padding: 16px;
}

/* ── Loading ── */
.ai-thinker {
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
}

@keyframes think-bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }
@keyframes think-dot1 { 0%,100%{ opacity:0.15; transform:translateY(0) } 50%{ opacity:0.8; transform:translateY(-5px) } }
@keyframes think-dot2 { 0%,100%{ opacity:0.15; transform:translateY(0) } 50%{ opacity:0.8; transform:translateY(-5px) } }
@keyframes think-dot3 { 0%,100%{ opacity:0.15; transform:translateY(0) } 50%{ opacity:0.8; transform:translateY(-5px) } }
@keyframes think-blink { 0%,90%,94%,100%{ transform:scaleY(1) } 92%{ transform:scaleY(0.1) } }

.thinker-body { animation: think-bob 3s ease-in-out infinite; }
.think-dot-1 { animation: think-dot1 1.8s ease-in-out infinite; }
.think-dot-2 { animation: think-dot2 1.8s ease-in-out 0.3s infinite; }
.think-dot-3 { animation: think-dot3 1.8s ease-in-out 0.6s infinite; }
.thinker-eyes { animation: think-blink 5s ease-in-out infinite; transform-origin: 60px 48px; }

.sc-loading-title {
  font-size: 22px;
  color: var(--text);
  margin-bottom: 8px;
}

/* ── Results ── */

.sc-step {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.sc-step:last-child {
  border-bottom: none;
}

.sc-alternatives {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media print {
  #skillResultBack { display: none !important; }
}

/* ── Skill Calc: "Muu" tukija input ── */
.sc-other-wrap {
  margin-top: 8px;
}

.sc-other-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 17px;
  background: var(--card);
  color: var(--text);
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.sc-other-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-pale);
}

/* ── Mediation Planner ── */

.med-tip { font-size: 16px; color: #6D5600; background: #FFF8E1; padding: 10px 14px; border-radius: 8px; margin-top: 12px; line-height: 1.5; }

/* ── Taitopassi ── */

.pp-section-title { font-size: 20px; font-weight: 700; color: var(--primary); margin-top: 12px; padding-top: 16px; border-top: 2px solid var(--border-light); }

.pp-image-drop { border: 2px dashed var(--border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; min-height: 100px; display: flex; align-items: center; justify-content: center; position: relative; }
.pp-image-drop:hover, .pp-image-drop.dragover { border-color: var(--primary); background: var(--primary-pale); }
.pp-image-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); font-size: 17px; }
.pp-image-preview { max-width: 120px; max-height: 120px; border-radius: 10px; object-fit: cover; }
.pp-image-remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(0,0,0,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s; }
.pp-image-remove:hover { background: rgba(214,40,40,0.8); }
.pp-image-remove .icon-sm { width: 14px; height: 14px; filter: brightness(10); }

/* ── Transition Strategies ── */
.chip-sub { display: block; font-size: 13px; font-weight: 400; opacity: 0.7; margin-top: 2px; }

/* ── Vaiheistaja ── */

.bd-task-input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 17px; background: var(--card); color: var(--text); }
.bd-task-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-pale); }

.result-nav { display: flex; justify-content: space-between; align-items: center; }
@media print { .result-nav .btn-home { display: none !important; } }

/* ══════════════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════════════ */
.settings-section { margin-bottom: 24px; }

.settings-section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding-left: 2px;
}

.settings-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

/* Account and plan card: icon, product, access until, pill; a customer
   paying in three sees the installments as bars like the AI credits; paid in full as one line with a check */
.acct-head { display: grid; grid-template-columns: 52px 1fr auto; gap: 4px 14px; align-items: center; }
.acct-icon { grid-column: 1; grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: linear-gradient(150deg, #eaf7ee, #c7ead3); color: #1b5e3b;
  border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 4px 12px rgba(27, 67, 50, 0.10); }
.acct-icon svg { width: 28px; height: 28px; }
.acct-name { grid-column: 2; grid-row: 1; align-self: end; font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--ink, #132b21); }
.acct-until { grid-column: 2; grid-row: 2; align-self: start; font-size: 18px; line-height: 1.4; color: var(--ink-soft, #3a4c43); }
.acct-until b { color: var(--ink, #132b21); }
.acct-pill { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 999px; background: #D8F3DC; color: #1b5e3b; font-size: 16px; font-weight: 700; white-space: nowrap; }
.acct-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2D6A4F; }
.acct-pays, .acct-paid { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(45, 106, 79, 0.14); }
.acct-pays-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px;
  font-size: 18px; font-weight: 700; color: var(--ink, #132b21); }
.acct-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.acct-bar { display: block; height: 12px; border-radius: 6px; background: rgba(45, 106, 79, 0.14); }
.acct-step.is-paid .acct-bar { background: var(--green-grad, #2D6A4F); }
.acct-amt { display: block; margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--ink, #132b21); font-variant-numeric: tabular-nums; }
.acct-when { display: block; font-size: 16px; line-height: 1.4; color: var(--ink-soft, #3a4c43); }
.acct-step.is-paid .acct-when::before { content: "✓ "; color: #2D6A4F; font-weight: 700; }
.acct-paid { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--ink, #132b21); }
.acct-chk { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2D6A4F
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/15px no-repeat; }
.acct-sub { color: var(--ink-soft, #3a4c43); }
@media (max-width: 599px) {
  .acct-head { grid-template-columns: 48px 1fr; grid-template-rows: auto auto auto; }
  .acct-icon { width: 48px; height: 48px; grid-row: 1 / span 3; align-self: start; }
  .acct-name { font-size: 20px; }
  .acct-pill { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 6px; }
}

/* Backward compat — retained so any remaining .settings-plan-plus class still renders sensibly */

.settings-usage-note {
  font-size: 15px;
  color: var(--text-light);
  margin-top: 10px;
  line-height: 1.4;
}

.settings-support-text {
  font-size: 17px;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.5;
}

.settings-support-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-link {
  font-size: 17px;
  color: var(--primary);
  text-decoration: none;
  font-family: "Source Serif 4", Georgia, serif;
}

.settings-link:hover {
  text-decoration: underline;
}

.settings-info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 17px;
  border-bottom: 1px solid var(--border-light);
}

.settings-info-row:last-of-type {
  border-bottom: none;
}

.settings-info-label {
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE — 480px and below
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Global spacing ── */
  .view-center { padding: 24px 16px; justify-content: flex-start; }
  .auth-content { padding: 24px 16px; min-height: calc(100vh - 64px); }
  .view-top { padding: 16px 12px; }
  .view-form { padding: 20px 14px; }

  /* ── Landing page ── */
  
  .page-subtitle { font-size: 16px; }
  .landing-group-title { font-size: 15px; }

  .btn-card { padding: 12px 14px; gap: 12px; border-radius: 14px; }
  .btn-card-icon { width: 38px; height: 38px; min-width: 38px; max-width: 38px; min-height: 38px; max-height: 38px; border-radius: 10px; }
  .btn-card-name { font-size: 18px; }
  .btn-card-desc { font-size: 15px; }

  /* ── Section titles ── */
  .section-title { font-size: 25px; }
  .section-desc { font-size: 17px; }
  .form-title { font-size: 22px; }

  
  
  
  
  
  
  

  /* ── ICF scoring dots ── */
  .score-dot { width: 32px; height: 32px; font-size: 16px; }
  
  

  /* ── ICF Form (extra-wide) ── */
  .container-extra-wide { max-width: 100%; }
  

  

  .meta-input, .form-textarea, .meta-label { font-size: 17px; }

  
  
  
  

  /* ── Report ── */
  .report-section-title { font-size: 21px; }
  
  
  

  
  
  

  /* ── Vaiheistaja steps ── */
  
  .bd-task-input { min-width: 0; }

  /* ── Self-assessment ── */
  .sa-image-wrapper { max-width: 280px; }
  .sa-textcard-wrapper { max-width: 280px; }
  .sa-textcard { font-size: 1.5rem; }
  .sa-emoji-btn img { width: 36px; height: 36px; }
  .sa-emoji-row { gap: 6px; }
  .sa-nav { gap: 8px; }
  .sa-nav .btn { font-size: 0.85rem; padding: 10px 12px; }
  .sa-emotion-btn img { width: 44px; height: 44px; }
  .sa-emotions-row { gap: 6px; }
  .sa-emotion-btn { padding: 6px 3px; }
  .sa-emotion-btn .sa-emotion-label { font-size: 13px; }

  /* ── Tier list ── */
  .tier-label { width: 60px; }
  .tier-image-card { width: 80px; }
  .tier-image-card > img,
  .tier-img-wrap > img:first-child { width: 70px; height: 70px; }
  .tier-textcard { width: 70px; height: 70px; max-width: 70px; font-size: 9px; border-width: 2px; }
  .tier-emotion-badge { width: 24px !important; height: 24px !important; }

  /* ── Skill calc / Mediation / Tools ── */
  .sc-textarea, .sc-other-input { font-size: 18px; }
  
  .sc-supporter-chips { gap: 6px; }
  .sc-submit { font-size: 18px; padding: 14px 20px; }
  
  
  

  /* ── Passport form ── */
  .pp-section-title { font-size: 18px; }

  
  
  

  /* ── Legal pages ── */
  .legal-title { font-size: 25px; }
  
  
  
  
  
  
  
  

  /* ── Footer ── */
  .footer-note { font-size: 15px; }
  .legal-footer { font-size: 15px; }

  /* ── PDF buttons full width ── */
  .btn-pdf { font-size: 15px; }

  /* ── Inline grid in plan ── */
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ── Tablet tweaks (481–768px) ── */
@media (min-width: 481px) and (max-width: 768px) {
  .container-extra-wide { max-width: 100%; }
  
  .sa-image-wrapper { max-width: 320px; }
}

/* ── Custom Icons ── */
.icon { width: 1.1em; height: 1.1em; vertical-align: middle; display: inline-block; object-fit: contain; }
.btn-card-icon img { width: 34px; height: 34px; object-fit: contain; }
.icon-sm { width: 19px; height: 19px; vertical-align: middle; display: inline-block; object-fit: contain; }

/* ══════════════════════════════════════════════════
   AUTH STYLES
   ══════════════════════════════════════════════════ */
.auth-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-field {
  display: flex;
  flex-direction: column;
}
.auth-input {
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 18px;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.15s;
}
.auth-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-pale);
}
.auth-submit {
  padding: 14px;
  font-size: 20px;
  font-weight: 600;
  border-radius: 12px;
  margin-top: 4px;
}
.auth-error {
  background: var(--accent-pale);
  color: var(--accent);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 16px;
  text-align: center;
}

.auth-success-msg {
  background: var(--primary-pale);
  color: var(--primary);
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 17px;
  text-align: center;
  line-height: 1.5;
}

/* ─── ALTCHA widget ─── */
altcha-widget {
  --altcha-max-width: 100%;
  --altcha-border-width: 1px;
  --altcha-border-radius: 10px;
  --altcha-color-border: #d1d5db;
  --altcha-color-text: #333;
  --altcha-color-base: #f9fafb;
  display: block;
}

/* Dots */

.welcome-dot.active {
  background: var(--primary);
  transform: scale(1.25);
}

/* ── Onboarding Hero (landing page) ── */

.onboarding-hero {
  position: relative;
  background: var(--primary-pale);
  border: 1px solid #b7e4c7;
  border-radius: 14px;
  padding: 20px 20px 16px;
  animation: fadeUp 0.4s ease both;
}
.onboarding-hero-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-light);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.onboarding-hero-close:hover {
  color: var(--text);
}
.onboarding-hero-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.onboarding-hero-text {
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ── Toast (for PDF tip, "try core tool" suggestion etc.) ── */

/* ── Ensure landing page scrolls naturally ── */
#view-public_landing.active {
  display: block;
  min-height: 100vh;
}

/* ── Header ── */
.pl-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.pl-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pl-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.pl-logo-img {
  height: 34px;
  width: auto;
  display: block;
}
.pl-logo-text {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* Same green fade as .brand-wordmark inside the app. The stop sits at 100%
     rather than 50% because at header size the word is far narrower than the
     34px wordmark — a 50% stop would leave most of it flat #52B788. */
  background: linear-gradient(90deg, #2D6A4F 0%, #52B788 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pl-logo-text .tm {
  font-size: 0.55em;
  vertical-align: super;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}
.pl-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pl-nav-link {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 1.12rem;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pl-nav-link:hover {
  color: var(--primary);
  background: var(--primary-pale);
}
.pl-nav-cta {
  text-decoration: none;
  background: var(--primary);
  color: #fff;
  font-size: 1.12rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 8px;
  transition: background 0.2s, transform 0.15s;
  font-family: inherit;
  margin-left: 4px;
}
.pl-nav-cta:hover {
  background: var(--primary-light);
  transform: translateY(-1px);
}

/* Dropdown */
.pl-nav-dropdown {
  position: relative;
}
.pl-nav-dropdown-btn {
  line-height: 1;
}
.pl-nav-dropdown-btn svg {
  transition: transform 0.2s;
}

/* Invisible bridge between button and dropdown to prevent hover loss */
.pl-nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  display: none;
}
.pl-nav-dropdown:hover::after,
.pl-nav-dropdown.open::after {
  display: block;
}

.pl-nav-dropdown:hover .pl-nav-dropdown-btn svg,
.pl-nav-dropdown.open .pl-nav-dropdown-btn svg {
  transform: rotate(180deg);
}

/* Hamburger */
.pl-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 101;
}
.pl-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.2s;
}
.pl-hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.pl-hamburger.active span:nth-child(2) {
  opacity: 0;
}
.pl-hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Hero ── */
.pl-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px 48px;
  display: flex;
  align-items: center;
  gap: 48px;
}
.pl-hero-content {
  flex: 1;
  min-width: 0;
}
.pl-hero-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
  text-wrap: balance;
}
.pl-hero-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 2px;
  animation: plScaleInLine 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
@keyframes plScaleInLine {
  from { width: 0; opacity: 0; }
  to { width: 80px; opacity: 1; }
}
.pl-hero-sub {
  font-size: 1.4rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 520px;
}
.pl-hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.pl-hero-image {
  flex: 1;
  min-width: 0;
}
.pl-hero-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

/* ── Buttons ── */
.pl-btn {
  display: inline-block;
  text-decoration: none;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 10px;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  text-align: center;
}
.pl-btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 12px rgba(45,106,79,0.25);
}
.pl-btn-primary:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(45,106,79,0.3);
}
.pl-btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.pl-btn-outline:hover {
  background: var(--primary-pale);
  transform: translateY(-2px);
}

/* ── Section titles ── */
.pl-section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}

/* ── Features ── */
.pl-features {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 24px;
  position: relative;
}
.pl-features::before {
  content: "";
  position: absolute;
  top: 20px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, var(--primary-pale) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}
.pl-features::after {
  content: "";
  position: absolute;
  bottom: 40px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, var(--primary-pale) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.4;
  pointer-events: none;
}
/* The toolkit: four cards on a soft green panel. The panel repeats the glass
   look of the Tools page inside the app, so the landing shows what the product
   feels like; no numbers, because the four cards are claims, not steps. Long
   body text, so the measure is capped and the line height is generous. */
.pl-kit-panel {
  position: relative;
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 44px 40px 48px;
  border-radius: 34px;
  background: linear-gradient(165deg, #DCEFE3 0%, #EAF5EB 48%, #F8F6F1 100%);
  border: 1px solid rgba(45, 106, 79, 0.14);
  box-shadow: 0 22px 60px rgba(27, 67, 50, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.pl-kit-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.pl-kit-card {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  padding: 32px 34px 34px;
  box-shadow: 0 8px 24px rgba(27, 67, 50, 0.07), inset 0 1px 0 #fff;
}
.pl-kit-disc {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff 0%, #F1FAF4 100%);
  border: 1px solid rgba(45, 106, 79, 0.14);
  box-shadow: 0 6px 16px rgba(27, 67, 50, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.pl-kit-disc img { width: 48px; height: 48px; object-fit: contain; display: block; }
.pl-kit-title {
  margin: 0 0 12px;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* a touch darker than --text-muted: these paragraphs are long */
.pl-kit-text {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #4C4C4C;
  max-width: 46ch;
}

@media (max-width: 860px) {
  .pl-kit-panel { margin-top: 28px; padding: 26px 18px 30px; border-radius: 26px; }
  .pl-kit-grid { grid-template-columns: 1fr; gap: 16px; }
  .pl-kit-card { padding: 24px 22px 26px; border-radius: 20px; }
  .pl-kit-disc { width: 64px; height: 64px; margin-bottom: 16px; }
  .pl-kit-disc img { width: 38px; height: 38px; }
  .pl-kit-title { font-size: 1.35rem; }
  .pl-kit-text { font-size: 1.15rem; line-height: 1.65; }
}

/* ── About ──
   Same language as the privacy card further down: cream ground, one white
   card, quiet type. The people are the one bold element — real faces at a size
   where you can read them, roles first because that is what an international
   reader weighs. Everything else stays level with the rest of the page. */
.pl-about {
  background: var(--bg);
  padding: 72px 0 80px;
}
.pl-about-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}
.pl-about-lead {
  font-size: 1.35rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

/* A ring: the middle card is whole, the ones either side show half, and the
   track is moved by script so that after the green card comes the first one
   again. Width is set so exactly one card and two halves fit. */
.pl-deck-wrap { position: relative; max-width: 760px; margin: 8px auto 0; }
.pl-deck {
  overflow: hidden;
  padding: 12px 0 24px;
  /* the half-cards at either side fade out instead of stopping at a hard edge */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.pl-deck-track {
  display: flex;
  gap: 16px;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.pl-deck-track.no-anim { transition: none; }
.pl-card {
  position: relative;
  flex: 0 0 364px;
  display: grid;
  grid-template-columns: 68px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 11px;
  box-shadow: 0 10px 24px -14px rgba(27, 27, 27, 0.3);
}
/* The face is as tall as the title and the line beside it, and square. */
.pl-card-face {
  grid-row: 1 / 3;
  align-self: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
}
.pl-card-face-many {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.5);
  box-shadow: none;
  color: #fff;
}
.pl-card-face-many svg { width: 55%; height: 55%; }
/* The face spans both text rows, so when the description is short the spare
   height used to be split between the rows and left a gap under the title.
   Pinning the title to the bottom of its row and the description to the top of
   the next keeps them together whatever the length of either. The title is big
   enough to read the person's level at a glance, and wraps to two lines in the
   languages that need it. */
.pl-card-role {
  grid-column: 2;
  align-self: end;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 3px;
}
.pl-card-did {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
}
.pl-card-name {
  grid-column: 1 / 3;
  grid-row: 3;
  font-size: 1rem;
  color: var(--text-light);
  margin: 10px 0 0;
  padding-top: 7px;
  border-top: 1px solid var(--border-light);
}
.pl-card-more { background: var(--primary); border-color: var(--primary); }
.pl-card-more .pl-card-role { color: #fff; }
.pl-card-more .pl-card-did { color: rgba(255,255,255,0.85); }
.pl-card-more .pl-card-name { color: #fff; font-weight: 700; font-size: 1.05rem; border-top-color: rgba(255,255,255,0.35); }

.pl-deck-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--primary);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-deck-prev { left: -20px; }
.pl-deck-next { right: -20px; }
.pl-deck-arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.pl-deck-arrow[disabled] { opacity: 0.3; cursor: default; }
.pl-deck-arrow:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }

@media (max-width: 640px) {
  .pl-deck-wrap { margin: 8px -20px 0; max-width: none; }
  .pl-deck { padding: 10px 0 20px; }
  .pl-deck-track { gap: 12px; }
  .pl-card { flex-basis: 78vw; }
  .pl-deck-arrow { display: none; }
}

/* The interviews: three overlapping pictures, each caption a frosted chip.
   The zone carries the wash and has no transform of its own, so the wash's
   z-index: -1 reaches the section's stacking context and paints under every
   card above and below it. */
.pl-about { position: relative; z-index: 0; }
.pl-about-inner { position: relative; }
.pl-photos-zone { position: relative; }

/* Full-bleed green wash from the app's palette. The circles fade to nothing
   inside the box and the mask softens the top and bottom, so no edge shows.
   The bottom edge stops short of the numbers band on purpose:
   that band's top wave is painted in the page colour, so any wash still showing
   under it was cut by the wave into a hard cream shape instead of blending. */
.pl-photo-wash {
  position: absolute;
  top: -190px;
  bottom: -24px;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle 380px at 10% 30%, rgba(82, 183, 136, 0.38), rgba(82, 183, 136, 0) 70%),
    radial-gradient(circle 360px at 88% 20%, rgba(199, 232, 148, 0.50), rgba(199, 232, 148, 0) 70%),
    radial-gradient(circle 420px at 76% 80%, rgba(149, 213, 178, 0.55), rgba(149, 213, 178, 0) 70%),
    radial-gradient(circle 340px at 16% 78%, rgba(116, 198, 157, 0.34), rgba(116, 198, 157, 0) 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}

.pl-about-photos {
  position: relative;
  margin-top: 64px;
  aspect-ratio: 100 / 64;
}
/* A dotted line in the landing's own stroke: it comes out from under the lead
   picture, runs along the bottom, dives under the lower picture and slips
   under the upper one. */
.pl-photo-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pl-photo-deco svg { display: block; width: 100%; height: 100%; }

.pl-about-photo {
  position: absolute;
  margin: 0;
  border-radius: 18px;
  border: 4px solid #fff;
  box-shadow: 0 18px 40px rgba(27, 67, 50, 0.22);
}
/* The photographs are painted as backgrounds instead of <img> elements (user
  ), so the browser's own menu offers nothing to save and the picture
   cannot be dragged out. -webkit-touch-callout does the same for a long press on
   iOS. This only stops casual saving: the files are still fetched normally and
   anyone who opens the network tab can take them. */
.pl-photo-shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pl-photo-classroom { background-image: url("https://cdn.vergentapp.com/about/interview3.webp"); background-position: 70% 50%; aspect-ratio: 4 / 3; }
.pl-photo-set       { background-image: url("https://cdn.vergentapp.com/about/interview1.webp"); background-position: 50% 42%; }
.pl-photo-remote    { background-image: url("https://cdn.vergentapp.com/about/interview2.webp"); background-position: 62% 46%; }
/* The caption hangs over the corner of its own picture and frosts it. */
.pl-about-photo figcaption {
  position: absolute;
  left: -14px;
  right: 22%;
  bottom: -18px;
  margin: 0;
  padding: 11px 14px;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #132b21;
  /* the same light card as the expert carousel (.pl-card), so the two card
     shapes on this page read as one family */
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 24px -14px rgba(27, 27, 27, 0.3);
}
/* The classroom recording leads; the crop sits right of centre so the teacher
   is the subject and the tripod's foot is out of frame. */
.pl-about-photo-lead { left: 0; top: 12%; width: 56%; z-index: 2; }
.pl-about-photo-lead figcaption { left: -18px; right: 26%; bottom: -22px; font-size: 1.15rem; }
.pl-about-photos figure:nth-of-type(2) { left: 40%; top: 0; width: 45%; z-index: 3; }
.pl-about-photos figure:nth-of-type(3) { right: 2%; bottom: 6%; width: 45%; z-index: 4; }
/* the third caption is anchored right, so the three do not line up on one edge */
.pl-about-photos figure:nth-of-type(3) figcaption { left: auto; right: -16px; width: 88%; }

@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .pl-photo-wash { background-image: none; }
}

/* Phones and small tablets: the pictures stack, the dotted line has no route */
@media (max-width: 760px) {
  .pl-photo-wash { top: -120px; bottom: -24px; }
  .pl-about-photos {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 44px;
  }
  .pl-photo-deco { display: none; }
  .pl-about-photo-lead,
  .pl-about-photos figure:nth-of-type(2),
  .pl-about-photos figure:nth-of-type(3) {
    position: relative;
    inset: auto;
    width: auto;
  }
  .pl-photo-classroom { background-position: 65% 50%; }
  .pl-about-photo figcaption,
  .pl-about-photo-lead figcaption {
    left: 10px;
    right: 24px;
    bottom: -16px;
    font-size: 1.12rem;
  }
  .pl-about-photos figure:nth-of-type(3) figcaption { left: 24px; right: 10px; width: auto; }
}

/* The numbers: the one dark band in the section */
.pl-about-band {
  position: relative;
  background: var(--primary);
  margin-top: 56px;
  padding: 68px 24px 44px;
}
.pl-about-band-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pl-about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 0 8px;
}
.pl-about-stat-number {
  font-size: 2.7rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  white-space: nowrap;
}
.pl-about-stat-stars {
  color: var(--primary-pale);
  letter-spacing: 0.04em;
}
.pl-about-stat-label {
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  max-width: 220px;
}

/* Why it matters: the drawing on the left carries the claim, the figure and
   the goal sit beside it. */
.pl-about-stakes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 72px;
}
.pl-stakes-figure { margin: 0; }
.pl-stakes-figure svg { display: block; width: 100%; height: auto; font-family: inherit; }
.pl-stakes-text { text-align: left; }
.pl-about-stakes-num {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 12px;
}
.pl-stakes-lead {
  font-size: 1.28rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.pl-stakes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pl-stakes-list li {
  position: relative;
  padding-left: 22px;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.pl-stakes-list li:last-child { margin-bottom: 0; }
.pl-stakes-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
.pl-stakes-list strong { color: var(--text); font-weight: 700; }
.pl-stakes-source {
  font-size: 1rem;
  color: var(--text-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pl-stakes-source:hover { color: var(--primary); }
/* The goal, with "save a generation" struck through with a marker pen (user
  ). The stroke is a gradient, not a solid box: it fades in and out at
   the ends and sits low and a little short of the line, the way a felt tip runs
   over paper. box-decoration-break keeps the ends soft if the phrase wraps. */
.pl-about-mission mark {
  background-color: transparent;
  color: inherit;
  padding: 0 0.16em;
  margin: 0 -0.1em;
  background-image: linear-gradient(101deg,
    rgba(255, 209, 102, 0) 0.4%,
    rgba(255, 209, 102, 0.9) 2.6%,
    rgba(255, 199, 82, 0.78) 50%,
    rgba(255, 209, 102, 0.9) 96.5%,
    rgba(255, 209, 102, 0) 99.6%);
  background-repeat: no-repeat;
  background-size: 100% 0.86em;    /* heights and heights of fall were compared: this
  background-position: 0 0.58em; one sits over the words, not above them */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pl-about-mission {
  font-size: 2.2rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--text);
  text-align: center;
  text-wrap: balance;
  max-width: 36em;
  margin: 72px auto 0;
}

/* ICF band: the framework the assessments are built on. Pale green so it
   reads as its own section after the dark numbers band; text left, drawing right
   (the stakes block below mirrors it with the drawing left). */
.pl-icf {
  position: relative;
  background: var(--primary-pale);
  margin-top: 0;            /* the band starts where the dark numbers band ends */
  padding: 34px 24px 60px;  /* room for the wave at the bottom edge */
  text-align: center;
}
.pl-icf-inner {
  max-width: 820px;
  margin: 0 auto;
}
.pl-icf-globe { display: block; width: 44px; height: 44px; margin: 0 auto 14px; }
.pl-icf-lead {
  font-size: 1.28rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 10px;
}
.pl-icf-link {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pl-icf-link:hover { color: var(--text); }
.pl-icf-note {
  max-width: 820px;
  margin: 14px auto 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .pl-about-band-inner { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  /* three stats: two side by side, the last one centred on its own row */
  .pl-about-stat:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pl-about { padding: 56px 0 64px; }
  .pl-about-inner { padding: 0 20px; }
  .pl-about-band { margin-top: 44px; padding: 54px 20px 36px; }
  .pl-icf { padding: 28px 20px 46px; }
  .pl-about-stakes { grid-template-columns: 1fr; gap: 28px; padding-top: 56px; }
}

/* ── Pricing ── */
.pl-pricing {
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 24px;
}

/* Gold shimmer button — for Ammatti "Valitse Ammatti" */

/* ── Legal Overlays (public landing) ── */

/* ── Footer ── */
.pl-footer {
  position: relative;
  overflow: visible;   /* the language dropdown opens upwards out of the footer */
  background: #1B1B1B;
  padding: 40px 24px;
}
.pl-footer-inner { position: relative; z-index: 2; }
.pl-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.pl-footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 16px;
}
.pl-footer-brand .tm {
  font-size: 0.55em;
  vertical-align: super;
  color: rgba(255,255,255,0.5);
}
.pl-footer-logo {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
}
.pl-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
  margin-bottom: 20px;
}
.pl-footer-links a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 1.12rem;
  transition: color 0.2s;
}
.pl-footer-links a:hover {
  color: #fff;
}
.pl-footer-copy {
  color: rgba(255,255,255,0.35);
  font-size: 1.05rem;
}
.pl-footer-company {
  margin-bottom: 20px;
  text-align: center;
}

.pl-footer-company a { color: rgba(255,255,255,0.7); text-decoration: none; }
.pl-footer-company a:hover { color: #fff; text-decoration: underline; }
.pl-footer-company p {
  color: rgba(255,255,255,0.5);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
}

/* ── Animations & Keyframes ── */
@keyframes plFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes plShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes plSlideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes plSlideLeft {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Scroll-triggered reveal ── */
.pl-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.pl-reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.pl-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for grid children */
.pl-reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.pl-reveal-stagger > *:nth-child(2) { transition-delay: 0.07s; }
.pl-reveal-stagger > *:nth-child(3) { transition-delay: 0.14s; }
.pl-reveal-stagger > *:nth-child(4) { transition-delay: 0.21s; }
.pl-reveal-stagger > *:nth-child(5) { transition-delay: 0.28s; }
.pl-reveal-stagger > *:nth-child(6) { transition-delay: 0.35s; }
.pl-reveal-stagger > *:nth-child(7) { transition-delay: 0.42s; }
.pl-reveal-stagger > *:nth-child(8) { transition-delay: 0.49s; }

/* ── Header scroll effect ── */
.pl-header.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
.pl-header-inner {
  transition: height 0.3s ease;
}
.pl-header.scrolled .pl-header-inner {
  height: 56px;
}

/* No decorative glows here. They used to sit half outside this block, and with
   `overflow: hidden` they were cut off at its edges — a hard rectangle around
   the Sign in button, and a first section that read as a different shade than
   the one below it. The background is now one even colour down the page. If a
   glow is ever wanted back, it must not be clipped by this block. */
.pl-hero {
  position: relative;
  overflow: hidden;
}
.pl-hero-content,
.pl-hero-image {
  position: relative;
  z-index: 1;
}
.pl-hero-content {
  animation: plSlideRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pl-hero-image {
  animation: plSlideLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.pl-hero-image img {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
  animation: plFloat 6s ease-in-out infinite;
}
.pl-hero-image:hover img {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}

/* ── CTA Shimmer button ── */
.pl-btn-primary {
  position: relative;
  overflow: hidden;
}
.pl-btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.25) 45%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.25) 55%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: plShimmer 6s ease-in-out infinite;
  pointer-events: none;
}

/* Waves that frame the green blocks. The wave belongs to the green section
   itself, not to the gap between sections: cream bites into the green from
   above and below, so the colour always matches the neighbour — also where the
   green is a gradient (the purchase section). Loose dividers between sections
   were how green waves ended up floating on cream. */
.pl-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 44px;
  display: block;
  pointer-events: none;
  z-index: 1;
}
.pl-wave-top { top: -1px; }
.pl-wave-bottom { bottom: -1px; transform: rotate(180deg); }
/* the content of a framed section clears the wave */
.pl-about-band-inner,
.pl-icf-inner,
.pl-icf-note,
.pl-offer-inner { position: relative; z-index: 2; }
@media (max-width: 640px) {
  .pl-wave { height: 30px; }
}

/* ── Footer hover animation ── */
.pl-footer-links a {
  position: relative;
}
.pl-footer-links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.3s ease;
}
.pl-footer-links a:hover::after {
  width: 100%;
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .pl-hamburger {
    display: flex;
  }
  .pl-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    padding: 80px 24px 32px;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    gap: 4px;
    align-items: stretch;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    visibility: hidden;
  }
  .pl-nav.open {
    transform: translateX(0);
    visibility: visible;
  }
  .pl-mobile-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .pl-mobile-backdrop.active {
    display: block;
    opacity: 1;
  }
  .pl-nav-link {
    padding: 12px 14px;
  }
  .pl-nav-cta {
    margin-left: 0;
    margin-top: 8px;
    text-align: center;
  }
  /* Mobile: show standalone org order link, hide pricing dropdown menu & arrow */
  
  
  
  .pl-nav-dropdown {
    position: static;
  }
  .pl-nav-dropdown::after {
    display: none !important;
  }
  
  .pl-hero {
    flex-direction: column;
    padding: 40px 20px 32px;
    gap: 32px;
  }
}

/* ── Tablet: pull the display sizes back, leave body copy alone ── */
@media (max-width: 768px) {
  .pl-hero-title { font-size: 2.05rem; line-height: 1.22; }
  .pl-section-title { font-size: 1.8rem; }
  
  .pl-about-stat-number { font-size: 2rem; }
  .pl-about-stakes-num { font-size: 1.8rem; }
}

/* ── Phone ── */
@media (max-width: 640px) {
  /* Header and navigation */
  .pl-nav-link, .pl-nav-cta { font-size: 1.12rem; }

  /* Hero */
  .pl-hero-title { font-size: 2.15rem; line-height: 1.2; }
  .pl-hero-sub { font-size: 1.28rem; line-height: 1.6; }
  .pl-btn { font-size: 1.2rem; }

  /* Section headings */
  .pl-section-title { font-size: 1.85rem; line-height: 1.25; }
  

  

  

  /* About and figures */
  .pl-about-lead { font-size: 1.22rem; line-height: 1.65; margin-bottom: 36px; }
  .pl-about-photo figcaption { font-size: 1.12rem; }
  .pl-about-stat-number { font-size: 2.05rem; }
  .pl-about-stat-label { font-size: 1.1rem; }
  .pl-about-stakes-num { font-size: 1.85rem; }
  .pl-icf-lead { font-size: 1.18rem; }
  .pl-stakes-lead, .pl-stakes-list li { font-size: 1.18rem; }
  .pl-about-mission { font-size: 1.72rem; margin-top: 56px; }

  
  
  
  
  
  
  
  
  
  
  

  

  
  
  
  
  
  

  /* Footer */
  .pl-footer-brand { font-size: 1.15rem; }
  .pl-footer-links a { font-size: 1.12rem; }
  .pl-footer-copy { font-size: 1.05rem; }
  .pl-footer-company p { font-size: 1.05rem; line-height: 1.6; }
}

/* ── Study tool (quiz) ── */
.quiz-theme-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.quiz-theme-card { text-align: left; align-items: center; position: relative; overflow: hidden; }
.quiz-theme-card .btn-card-text { flex: 1; }
.quiz-theme-icon { width: 56px; height: 56px; min-width: 56px; border-radius: 14px; background: #E8F5E9; color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quiz-theme-right { margin-left: auto; padding-left: 12px; text-align: center; flex-shrink: 0; }
.quiz-theme-count { font-size: 15px; color: var(--text-muted); white-space: nowrap; }
.quiz-theme-arrow { width: 38px; height: 38px; margin: 6px auto 0; border-radius: 50%; background: #E8F5E9; color: var(--primary); display: flex; align-items: center; justify-content: center; }
.quiz-theme-arrow.done { background: var(--primary); color: #fff; }
.quiz-theme-bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--primary-light); }
.quiz-theme-bar.done { background: var(--primary); }
.quiz-progressbar { height: 6px; background: var(--border-light); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.quiz-progressbar-fill { height: 100%; background: var(--primary-light); border-radius: 3px; transition: width .3s ease; }
.quiz-progressbar-fill.done { background: var(--primary); }
.quiz-error { color: var(--danger); }

.quiz-run-nav { align-items: center; }
.quiz-head { margin-top: 20px; }
.quiz-theme-name { font-weight: 600; color: var(--primary); }
.quiz-counter { font-size: 16px; color: var(--text-muted); margin-top: 4px; }
.quiz-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-top: 16px; box-shadow: var(--shadow); }
.quiz-article { font-size: 16px; color: var(--text-light); margin-bottom: 10px; }
.quiz-question { font-size: 21px; line-height: 1.5; margin-bottom: 18px; }
.quiz-statement-prompt { font-weight: 600; color: var(--primary); }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option { text-align: left; background: var(--bg); border: 2px solid var(--border); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 18px; line-height: 1.45; cursor: pointer; color: var(--text); transition: border-color .15s, background .15s; }
.quiz-option:hover:not(:disabled) { border-color: var(--primary-light); background: #fff; }
.quiz-option:disabled { cursor: default; opacity: .85; }
.quiz-option.correct { border-color: var(--primary); background: var(--primary-pale); opacity: 1; }
.quiz-option.wrong { border-color: var(--accent); background: var(--accent-pale); opacity: 1; }
.quiz-verdict { margin-top: 16px; font-weight: 600; }
.quiz-verdict.ok { color: var(--primary); }
.quiz-verdict.no { color: var(--accent); }
.quiz-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.quiz-actions .btn { min-width: 150px; }
.quiz-why { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
/* Card form (W1a–W1j): headline → points → why not → figure → everyday */
.quiz-why-head { font-size: 23px; line-height: 1.3; font-weight: 700; color: var(--primary); padding-left: 14px; border-left: 4px solid var(--primary); margin: 0 0 16px; }
.quiz-why-points { list-style: none; margin: 0 0 18px; padding: 0; }
.quiz-why-points li { position: relative; padding-left: 22px; font-size: 18px; line-height: 1.5; margin-bottom: 10px; }
.quiz-why-points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--primary-light); }
.quiz-why-points b { font-weight: 600; }
.quiz-why-others { margin-bottom: 18px; }
.quiz-why-others h4, .quiz-why-sect { font-size: 16px; font-weight: 600; color: var(--text-muted); margin: 0 0 8px; }
.quiz-why-row { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--text-muted); margin-bottom: 6px; }
.quiz-why-key { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--border-light); color: var(--text); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.quiz-why-key.many { flex-basis: auto; padding: 0 8px; border-radius: 12px; }
.quiz-why-quote { border-left: 4px solid var(--primary-pale); padding: 6px 0 6px 14px; margin: 0 0 18px; font-size: 18px; line-height: 1.5; }
.quiz-why-quote em { font-style: italic; }
.quiz-why-quote span { display: block; margin-top: 6px; font-size: 16px; color: var(--text-muted); }
.quiz-why-say { margin: 0 0 18px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #EAF6EC, var(--primary-pale)); }
.quiz-why-pair { padding: 10px 14px; border-top: 1px solid rgba(45,106,79,.15); font-size: 16px; line-height: 1.45; }
.quiz-why-pair:first-child { border-top: 0; }
.quiz-why-pair .no { display: block; color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(214,40,40,.55); }
.quiz-why-pair .yes { display: block; color: var(--text); font-weight: 600; margin-top: 2px; }
.quiz-why-pair .yes::before { content: "→ "; color: var(--primary); }
.quiz-why-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 16px; line-height: 1.4; }
.quiz-why-table th { text-align: left; font-weight: 700; color: var(--primary); padding: 6px 8px 8px; border-bottom: 2px solid var(--primary-pale); }

.quiz-why-table td { padding: 8px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.quiz-why-table.labeled td:first-child { color: var(--text-muted); font-size: 15px; width: 34%; }
.quiz-why-ways { list-style: none; margin: 0 0 18px; padding: 0; }
.quiz-why-ways li { position: relative; padding: 8px 10px 8px 40px; margin: 0 0 6px; background: var(--bg); border-radius: 10px; font-size: 16px; line-height: 1.45; }
.quiz-why-ways li::before { content: "✓"; position: absolute; left: 14px; top: 8px; color: var(--primary); font-weight: 700; }
/* Photographs in the figure slot. The placeholder names the file
   that belongs here, so a picture can be dropped in without touching the bank. */
.quiz-why-photo { margin: 0 0 18px; }
.quiz-why-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.quiz-why-photo-placeholder { aspect-ratio: 16 / 10; border: 2px dashed var(--border); border-radius: 14px; background: var(--primary-pale);
  display: flex; align-items: center; justify-content: center; }
.quiz-why-photo-placeholder span { font-family: "DM Mono", monospace; font-size: 15px; letter-spacing: .04em; color: var(--primary); }
.quiz-why-svg { margin: 0 0 18px; }
.quiz-why-svg svg { width: 100%; height: auto; display: block; }
@media (min-width: 900px) {
  /* The figures are laid out 360 wide for phones; on a desktop card they stretched to ~860 px (2.4×) with
     30–36 px text. Capped so their text is about the size of the card's body text. */
  .quiz-why-svg svg { max-width: 480px; margin: 0 auto; }
}
/* Animated figures (T): paused until half on screen (js adds .is-playing), pause button under the figure's
   right edge (WCAG 2.2.2). The animation's own SVG style freezes it at its key frame under reduced motion. */
.quiz-anim-frame { position: relative; }
.quiz-why-anim:not(.is-playing) .quiz-anim-frame > svg *,
.quiz-why-anim.is-paused .quiz-anim-frame > svg * { animation-play-state: paused !important; }
.quiz-anim-bar { display: flex; justify-content: flex-end; margin-top: 4px; }
.quiz-why-svg .quiz-anim-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-light); background: rgba(255, 255, 255, 0.85);
  color: var(--primary); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; opacity: 0.75; transition: opacity 0.15s; }
.quiz-why-svg .quiz-anim-toggle:hover, .quiz-why-svg .quiz-anim-toggle:focus-visible { opacity: 1; }
.quiz-why-svg .quiz-anim-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.quiz-why-svg .quiz-anim-toggle svg { width: 14px; height: 14px; max-width: none; margin: 0; display: block; }
@media (min-width: 900px) {
  .quiz-anim-frame { max-width: 480px; margin: 0 auto; }
  .quiz-anim-frame > svg { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .quiz-anim-bar { display: none; } }
.quiz-source { margin-top: 14px; font-size: 16px; color: var(--text-light); position: relative; }
.quiz-source-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; line-height: 1.45; }
.quiz-source-i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); font-size: 12px; font-style: italic; vertical-align: 2px; color: var(--text-light); }
.quiz-source-courses { display: none; margin-top: 6px; font-size: 15px; line-height: 1.45; }
.quiz-source.open .quiz-source-courses { display: block; }
/* The courses open on click / tap only, not on hover; hover just marks the i as clickable. */
@media (hover: hover) and (pointer: fine) {
  .quiz-source:hover .quiz-source-i { border-color: var(--primary); color: var(--primary); }
}
.quiz-source-note { font-size: 15px; color: var(--text-light); margin-top: 20px; line-height: 1.5; }
/* Question card footer. Phone (< 900 px): the original order, unchanged — Next, then the dashed line and Report an
   error. Desktop (>= 900 px): one row, Report an error on the left, Next on the right. The report box
   opens below the footer. */
.quiz-foot { display: flex; flex-direction: column; }
.quiz-foot .quiz-actions { order: -1; }
.quiz-report { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 10px; }
@media (min-width: 900px) {
  .quiz-foot {
    flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 14px;
  }
  .quiz-foot .quiz-actions { order: 0; margin: 0 0 0 auto; }
  .quiz-foot .quiz-report { margin: 0; border-top: 0; padding-top: 0; display: flex; flex-wrap: wrap; gap: 6px; }
}
.quiz-report-btn { font-size: 15px; color: var(--text-light); padding: 4px 8px; }
.quiz-report-box { margin-top: 8px; }
.quiz-report-box textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 8px; font: inherit; font-size: 17px; }
.quiz-report-actions { display: flex; gap: 10px; margin-top: 10px; }
.quiz-report-actions .btn { padding: 10px 20px; font-size: 16px; line-height: 1.2; border-radius: 10px; margin: 0; border: 1px solid transparent; box-shadow: none; }
.quiz-report-actions .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.quiz-report-actions .btn-primary:hover { background: var(--primary-light); border-color: var(--primary-light); }
.quiz-report-actions .btn-ghost { background: var(--card); color: var(--text-muted); border-color: var(--border); }
.quiz-report-msg { font-size: 16px; color: var(--primary); margin-top: 6px; }
.btn-sm { padding: 6px 12px; font-size: 16px; }

.quiz-review-toggle { font-size: 16px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.quiz-review-banner { margin-top: 12px; padding: 10px 12px; background: #FFF6E5; border: 1px solid var(--warn); border-radius: 10px; font-size: 16px; }
.quiz-review-nav { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 16px; }
.quiz-jump { width: 64px; border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; font: inherit; }
.quiz-review-meta { margin-top: 10px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; font-size: 16px; }
.quiz-review-id { font-family: ui-monospace, monospace; color: var(--text-muted); margin-bottom: 6px; }
.quiz-review-claim { margin-top: 4px; }
.quiz-review-claim code { font-size: 15px; color: var(--primary); }
.quiz-review-flags { margin-top: 6px; color: var(--warn); font-weight: 600; }

.quiz-score { font-size: 28px; font-weight: 700; color: var(--primary); margin: 8px 0 16px; }
.quiz-sub { font-size: 18px; margin-top: 12px; margin-bottom: 8px; }
.quiz-summary-row { padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.quiz-summary-title { font-size: 17px; }
.quiz-summary-num { font-size: 16px; color: var(--text-muted); }
.quiz-round-line { font-size: 16px; color: var(--text-muted); }
/* The theme's result line (revision and the learned badge removed) */
.quiz-pass { font-weight: 600; margin-bottom: 12px; }
.quiz-pass.ok { color: var(--primary); }
.quiz-pass.no { color: var(--warn); }

/* Cycle graphic + onboarding card */
.cycle-wrap { margin: 8px 0 4px; }
.cycle-svg { width: 100%; max-width: 280px; height: auto; display: block; margin: 0 auto; }
.cycle-svg text { font-family: inherit; }

/* ═══════════════════════════════════════════════════
   TOOLS PAGE (#view-landing) —
   Glass cards on a green-tinted background.
   ≥ 900px: header nav (Tools · Learn · Profile · Log out), cards in two columns.
   < 900px: header with Log out, grouped glass panels, fixed bottom tab bar.
   ═══════════════════════════════════════════════════ */
#view-landing,
#view-access,
#view-welcome,
body.in-tool {
  --tools-w: 640px;
  --glass: rgba(255, 255, 255, 0.56);
  --glass-border: rgba(255, 255, 255, 0.88);
  --glass-shadow: 0 10px 30px rgba(27, 67, 50, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-blur: blur(18px) saturate(170%);
  --ink: #132b21;
  --ink-soft: #3a4c43;
  --green-grad: linear-gradient(145deg, #52B788, #2D6A4F);
  background-color: #e6f1e9;
  background-image:
    radial-gradient(circle 330px at 0% 3%, rgba(82, 183, 136, 0.50), rgba(82, 183, 136, 0) 70%),
    radial-gradient(circle 300px at 100% 16%, rgba(149, 213, 178, 0.85), rgba(149, 213, 178, 0) 70%),
    radial-gradient(circle 320px at 0% 32%, rgba(199, 232, 148, 0.55), rgba(199, 232, 148, 0) 70%),
    radial-gradient(circle 280px at 60% 44%, rgba(216, 243, 220, 0.9), rgba(216, 243, 220, 0) 70%),
    radial-gradient(circle 360px at 100% 58%, rgba(116, 198, 157, 0.45), rgba(116, 198, 157, 0) 70%),
    radial-gradient(circle 320px at 0% 74%, rgba(149, 213, 178, 0.7), rgba(149, 213, 178, 0) 70%),
    radial-gradient(circle 340px at 90% 90%, rgba(199, 232, 148, 0.6), rgba(199, 232, 148, 0) 70%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#view-landing.active,
#view-access.active,
#view-welcome.active {
  justify-content: flex-start;
  padding: 0 20px calc(116px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-x: clip; /* keeps the sticky header working where supported */
}

/* ── Header ── */
.app-header {
  position: sticky; top: 0; z-index: 60;
  width: calc(100% + 40px); margin: 0 -20px 4px;
  background: rgba(255, 255, 255, 0.50);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 20px rgba(27, 67, 50, 0.06);
}
.app-header-inner {
  max-width: calc(var(--tools-w) + 40px); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.app-brand { display: flex; align-items: center; gap: 10px; }
.app-brand-icon { width: 34px; height: 34px; object-fit: contain; }
.app-brand-name {
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  background: linear-gradient(90deg, #2D6A4F 0%, #52B788 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.app-roundbtn {
  width: 46px; height: 46px; min-width: 46px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--green-grad);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 16px rgba(45, 106, 79, 0.30);
}
.app-roundbtn svg { width: 23px; height: 23px; }
.app-roundbtn:hover { box-shadow: 0 8px 20px rgba(45, 106, 79, 0.42); }
.app-topnav { display: none; align-items: center; gap: 10px; }
.app-navbtn {
  height: 46px; padding: 0 20px 0 14px; border-radius: 23px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 18px; font-weight: 600; color: var(--primary);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(27, 67, 50, 0.08);
}
.app-navbtn svg { width: 24px; height: 24px; }
.app-navbtn:hover { background: rgba(255, 255, 255, 0.9); }
.app-navbtn.is-active {
  color: #fff; background: var(--green-grad);
  box-shadow: 0 6px 16px rgba(45, 106, 79, 0.30);
}
.app-topnav .nav-profile { margin-left: 6px; }

/* ── Page title ── */
.tools-title {
  width: 100%; max-width: var(--tools-w); margin: 24px 0 22px;
  font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink);
}
#view-landing .tools-body {
  display: flex; flex-direction: column; gap: 30px;
  width: 100%; max-width: var(--tools-w);
}

/* ── Groups and cards ── */
#view-landing .landing-group { gap: 12px; }
#view-landing .landing-group-title {
  font-size: 15px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--primary); padding-left: 6px;
}
#view-landing .btn-card,
#view-landing .onboarding-hero,
body.in-tool .btn-card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
#view-landing .btn-card,
body.in-tool .btn-card {
  border-radius: 24px; padding: 18px 48px 18px 16px; min-height: 100px; gap: 16px;
}
#view-landing .btn-card:hover,
body.in-tool .btn-card:hover {
  transform: translateY(-2px); border-color: #fff;
  box-shadow: 0 16px 36px rgba(27, 67, 50, 0.16), inset 0 1px 0 #fff;
}
#view-landing .btn-card::after,
body.in-tool .btn-card::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2.5px solid var(--primary); border-top: 2.5px solid var(--primary);
  transform: translateY(-50%) rotate(45deg); opacity: 0.55;
}
#view-landing .btn-card-icon,
body.in-tool .btn-card-icon {
  width: 60px; height: 60px; min-width: 60px; max-width: 60px; min-height: 60px; max-height: 60px;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.97), rgba(216, 243, 220, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(45, 106, 79, 0.13);
}
#view-landing .btn-card-icon img,
body.in-tool .btn-card-icon img { width: 38px; height: 38px; }
#view-landing .btn-card-name,
body.in-tool .btn-card-name { font-size: 21px; color: var(--ink); line-height: 1.25; }
#view-landing .btn-card-desc,
body.in-tool .btn-card-desc { font-size: 17.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }

/* ── Onboarding card on the Tools page ── */
#view-landing .onboarding-hero { background: rgba(216, 243, 220, 0.55); border-radius: 28px; padding: 22px 20px 20px; }
#view-landing .onboarding-hero-title { font-size: 20px; color: #1f5139; }
#view-landing .onboarding-hero-text { font-size: 19px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 0; }
#view-landing .onboarding-hero-text p { margin: 0; }
#view-landing .onboarding-hero-text p + p { margin-top: 0.8em; }   

/* ── Bottom tab bar (phone) ── */
.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: space-around; align-items: center;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 -6px 24px rgba(27, 67, 50, 0.08);
}
.app-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 88px; padding: 0; cursor: pointer;
  background: none; border: 0;
  font-family: inherit; font-size: 15px; font-weight: 600; color: #5d6f66;
}
.app-tab-ico { width: 62px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; }
.app-tab-ico svg { width: 28px; height: 28px; }
.app-tab.is-active { color: var(--primary); }
.app-tab.is-active .app-tab-ico { background: rgba(82, 183, 136, 0.22); }

/* ── Phone and tablet (< 900px): grouped panels ── */
@media (max-width: 899px) {
  #view-landing .landing-group-buttons,
  body.in-tool .tool-choices {
    gap: 0; overflow: hidden; border-radius: 28px;
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
  }
  #view-landing .landing-group-buttons .btn-card,
  body.in-tool .tool-choices .btn-card {
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 16px 48px 16px 16px; min-height: 96px;
  }
  body.in-tool .tool-choices .btn-card:hover,
  #view-landing .landing-group-buttons .btn-card:hover { transform: none; background: rgba(255, 255, 255, 0.45); box-shadow: none; }
  #view-landing .landing-group-buttons .btn-card + .btn-card::before,
  body.in-tool .tool-choices .btn-card + .btn-card::before {
    content: ""; position: absolute; top: 0; left: 92px; right: 0; height: 1px;
    background: rgba(45, 106, 79, 0.15);
  }
  #view-landing .landing-group-buttons .btn-card-icon,
  body.in-tool .tool-choices .btn-card-icon {
    background: linear-gradient(150deg, #eaf7ee, #c7ead3);
    box-shadow: none; border-color: rgba(255, 255, 255, 0.9);
  }
}

/* ── Desktop (≥ 900px): header nav, two columns, no tab bar ── */
@media (min-width: 900px) {
  #view-landing,
  #view-access,
  #view-welcome,
  body.in-tool {
    --tools-w: 900px;
    background-image:
      radial-gradient(circle 560px at 4% 4%, rgba(82, 183, 136, 0.45), rgba(82, 183, 136, 0) 70%),
      radial-gradient(circle 520px at 98% 18%, rgba(149, 213, 178, 0.85), rgba(149, 213, 178, 0) 70%),
      radial-gradient(circle 480px at 50% 48%, rgba(216, 243, 220, 0.9), rgba(216, 243, 220, 0) 70%),
      radial-gradient(circle 600px at 96% 76%, rgba(116, 198, 157, 0.40), rgba(116, 198, 157, 0) 70%),
      radial-gradient(circle 540px at 2% 88%, rgba(199, 232, 148, 0.60), rgba(199, 232, 148, 0) 70%);
  }
  #view-landing.active, #view-access.active, #view-welcome.active { padding-bottom: 48px; }
  .app-topnav { display: flex; }
  .app-header-logout, .app-tabbar { display: none; }   /* desktop: the header carries the navigation */
  #view-landing .landing-group-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  #view-landing .landing-group-buttons .btn-card:only-child { grid-column: 1 / -1; }
  #view-landing .onboarding-hero {
    display: grid; grid-template-columns: 250px 1fr; column-gap: 32px; align-items: center;
    padding: 24px 34px 26px 30px;
  }
  #view-landing .onboarding-hero-title { grid-column: 1 / -1; }
  #view-landing #onboardingCycle { grid-column: 1; grid-row: 2; margin: 0; }
  #view-landing .onboarding-hero-text { grid-column: 2; grid-row: 2; font-size: 21px; }
}

/* ═══════════════════════════════════════════════════
   TOOL PAGES (body.in-tool, js/toolshell.js) —
   Shared look for every tool view, taken from the Tools page: green glass background (set together with
   #view-landing above), glass cards, header. ≥ 900px: Tools-page navigation in the header and a glass
   Back pill in the content. < 900px: header = back arrow + tool name, the view's own first back button
   is hidden (.is-shell-back) and there is no tab bar.
   ═══════════════════════════════════════════════════ */
body.in-tool { --tool-hdr-h: 65px; }
body.in-tool .view.active {
  justify-content: flex-start;
  min-height: calc(100vh - var(--tool-hdr-h));
  padding: 4px 20px 48px;
  color: var(--ink);
}
body.in-tool .page-header-logo { display: none; }

/* Header: full width at body level (the Tools-page header sits inside its view) */
.tool-header { width: 100%; margin: 0; }
.tool-header[hidden] { display: none; }
.tool-header .app-header-inner { justify-content: flex-start; gap: 14px; padding: 10px 20px; }
.tool-header .app-brand { display: none; }
/* Phone back button: white glass circle with the same arrow image as the Back pills */
.tool-header-back {
  width: 44px; height: 44px; min-width: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(27, 67, 50, 0.12);
}
.tool-header-back[hidden] { display: none; }
.tool-header-back img { width: 26px; height: 26px; object-fit: contain; }
.tool-header-back:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
/* Name: hidden while the page's own title is on screen (.show-name from js/toolshell.js) */
.tool-header-name {
  flex: 1; min-width: 0; font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 0.2s ease;
}
.tool-header.show-name .tool-header-name { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tool-header-name { transition: none; } }
@media (max-width: 899px) {
  body.in-tool .is-shell-back { display: none !important; }
}

/* Phone menu (right edge of the header): Tools, Learn, Settings, Log out */
.tool-header-menu {
  width: 44px; height: 44px; min-width: 44px; margin-left: auto; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--primary);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(27, 67, 50, 0.12);
}
.tool-header-menu svg { width: 24px; height: 24px; }
.tool-header-menu[aria-expanded="true"] { color: #fff; background: var(--green-grad); }
.tool-header-menu:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
.tool-menu-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(15, 40, 28, 0.18); }
.tool-menu {
  position: fixed; z-index: 210; top: calc(var(--tool-hdr-h, 65px) + 8px); right: 12px;
  width: min(290px, calc(100vw - 24px)); padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 40px rgba(15, 40, 28, 0.22);
  transform-origin: top right;
}
.tool-menu.is-open { animation: toolMenuIn 0.16s ease-out; }
@keyframes toolMenuIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.tool-menu[hidden], .tool-menu-backdrop[hidden] { display: none; }
.tool-menu-item {
  width: 100%; min-height: 56px; padding: 0 14px; border: 0; border-radius: 16px; cursor: pointer;
  display: flex; align-items: center; gap: 14px; text-align: left;
  font-family: inherit; font-size: 19px; font-weight: 600; color: var(--ink); background: none;
}
.tool-menu-item svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--primary); }
.tool-menu-item:hover, .tool-menu-item:focus-visible { background: rgba(82, 183, 136, 0.14); outline: none; }
.tool-menu-item.is-active { color: var(--primary); background: rgba(82, 183, 136, 0.22); }
.tool-menu-sep { height: 1px; margin: 4px 10px; background: rgba(45, 106, 79, 0.15); }
@media (prefers-reduced-motion: reduce) { .tool-menu.is-open { animation: none; } }

/* Titles */
body.in-tool .section-title {
  font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink);
}
body.in-tool .section-desc { font-size: 19px; color: var(--ink-soft); }

/* Back pill (desktop): glass like the header nav, same arrow image as before */
body.in-tool .btn-back-landing,
body.in-tool .btn-nav {
  height: 46px; padding: 0 20px 0 14px; margin-bottom: 0; gap: 6px; border-radius: 23px;
  font-size: 18px; font-weight: 600; color: var(--primary);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(27, 67, 50, 0.08);
}
body.in-tool .btn-back-landing:hover,
body.in-tool .btn-nav:hover { background: rgba(255, 255, 255, 0.9); border-color: #fff; transform: none; }
body.in-tool .btn-back-landing:focus,
body.in-tool .btn-nav:focus { background: rgba(255, 255, 255, 0.62); border-color: rgba(255, 255, 255, 0.95); }
body.in-tool .btn-back-landing:focus-visible,
body.in-tool .btn-nav:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
body.in-tool .btn-back-landing > img[src$="takaisin.png"],
body.in-tool .btn-nav > img[src$="takaisin.png"] { width: 24px; height: 24px; }

/* Shared on tool pages: result-page titles; the Home button is hidden (header Tools / phone menu do the same) */
body.in-tool .form-title { font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px; }
body.in-tool .result-nav .btn-home { display: none; }

/* Choice lists (glass cards; grouped panel on phones, two columns on desktop) */
.tool-choices { display: flex; flex-direction: column; gap: 12px; }
body.in-tool .btn-card-name,
body.in-tool .btn-card-desc { text-wrap: balance; } /* even lines: keeps "(3–6 y)" in one piece on phones */

@media (min-width: 900px) {
  body.in-tool { --tool-hdr-h: 71px; }
  body.in-tool .view.active { padding-top: 24px; }
  .tool-header .app-header-inner { justify-content: space-between; padding: 12px 20px; }
  .tool-header .app-brand { display: flex; }
  .tool-header-back, .tool-header-name, .tool-header-menu, .tool-menu, .tool-menu-backdrop { display: none !important; }
  /* equal cards in two columns; an odd last card keeps the same size (no full-width card) */
  body.in-tool .tool-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media print { .tool-header, .tool-menu, .tool-menu-backdrop { display: none !important; } }

/* Self-assessment: pictures (sa_main). Desktop: picture left, choices right, one screen. Phone: same order as before. */
body.in-tool #view-sa_main .container-narrow {
  max-width: var(--tools-w); padding: 0; margin-top: 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
}
body.in-tool #view-sa_main .container-narrow > * { grid-column: 1 / -1; }
body.in-tool #view-sa_main .progress-bar { grid-row: 3; }
body.in-tool #view-sa_main .sa-center { grid-row: 4; }
body.in-tool #view-sa_main .sa-header { display: contents; }
body.in-tool #view-sa_main #saBackBtn { grid-column: 1 / -1; grid-row: 1; justify-self: start; margin-bottom: 18px; }
body.in-tool #view-sa_main #saGroupLabel {
  grid-column: 1; grid-row: 2; text-align: left; font-size: 17px; line-height: 1.35; color: var(--ink-soft); margin: 0;
}
body.in-tool #view-sa_main .counter {
  grid-column: 2; grid-row: 2; align-self: start; font-family: inherit; font-size: 17px; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.in-tool #view-sa_main .progress-bar {
  height: 10px; margin-top: 8px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}
body.in-tool #view-sa_main .progress-bar-fill { background: var(--green-grad); border-radius: 5px; }
body.in-tool #view-sa_main .sa-center { margin-top: 20px; }
body.in-tool #view-sa_main .sa-image-wrapper,
body.in-tool #view-sa_main .sa-textcard-wrapper { max-width: 320px; margin-bottom: 20px; }
body.in-tool #view-sa_main .sa-image-wrapper {
  border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 34px rgba(27, 67, 50, 0.16);
}
body.in-tool #view-sa_main .sa-textcard { border-radius: 28px; box-shadow: 0 14px 34px rgba(27, 67, 50, 0.16); }
body.in-tool #view-sa_main .sa-hint-text,
body.in-tool #view-sa_main .sa-emotions-divider { font-size: 17px; color: var(--ink-soft); margin: 0 0 10px; }
body.in-tool #view-sa_main .sa-emotions-divider { margin-top: 22px; }
/* emoji choices: glass tiles */
body.in-tool #view-sa_main .sa-emoji-row { gap: 12px; margin-bottom: 18px; }
body.in-tool #view-sa_main .sa-emoji-btn {
  width: 80px; height: 80px; padding: 0; justify-content: center; border-radius: 24px;
  border: 3px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.6); box-shadow: 0 6px 16px rgba(27, 67, 50, 0.10);
}
body.in-tool #view-sa_main .sa-emoji-btn img { width: 56px; height: 56px; }
body.in-tool #view-sa_main .sa-emoji-btn.selected {
  border-color: var(--primary); background: rgba(216, 243, 220, 0.95);
  box-shadow: 0 0 0 4px rgba(82, 183, 136, 0.25), 0 6px 16px rgba(27, 67, 50, 0.12);
}
/* chosen feeling */
body.in-tool #view-sa_main .sa-selected-emotion {
  padding: 8px 10px 8px 16px; margin-bottom: 18px; font-size: 17px;
  background: rgba(216, 243, 220, 0.85); border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(27, 67, 50, 0.08);
}
body.in-tool #view-sa_main .sa-selected-emotion-img { width: 32px; height: 32px; }
body.in-tool #view-sa_main .sa-selected-emotion-clear {
  width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.8);
}
body.in-tool #view-sa_main .sa-selected-emotion-clear .icon-sm { width: 16px; height: 16px; }
/* Previous / Skip / Next: same height, pill shape */
body.in-tool #view-sa_main .sa-nav { max-width: none; gap: 8px; }
body.in-tool #view-sa_main .sa-nav .btn {
  height: 54px; margin: 0; padding: 0 12px; gap: 6px; border-radius: 27px; font-size: 18px; white-space: nowrap;
}
body.in-tool #view-sa_main #saPrev,
body.in-tool #view-sa_main #saSkip {
  color: var(--primary); background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 4px 12px rgba(27, 67, 50, 0.08);
}
body.in-tool #view-sa_main #saSkip { color: var(--ink-soft); flex: 0.8; }
body.in-tool #view-sa_main #saNext { flex: 1.2; color: #fff; background: var(--green-grad); box-shadow: 0 8px 20px rgba(45, 106, 79, 0.30); }
body.in-tool #view-sa_main #saNext.disabled, body.in-tool #view-sa_main #saNext:disabled { background: #b0b0a8; box-shadow: none; }
body.in-tool #view-sa_main .sa-nav .icon-sm { width: 22px; height: 22px; }
/* feelings: one glass panel, equal tiles (4 + 3) */
body.in-tool #view-sa_main .sa-emotions-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 8px;
  border-radius: 28px; background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
body.in-tool #view-sa_main .sa-emotions-row { display: contents; }
body.in-tool #view-sa_main .sa-emotion-btn { grid-column: span 2; }
body.in-tool #view-sa_main #saEmotionsBottom .sa-emotion-btn:first-child { grid-column: 2 / span 2; }  /* 4 + 3, bottom row centred */
body.in-tool #view-sa_main .sa-emotion-btn {
  min-width: 0; padding: 10px 2px 8px; gap: 6px; font-family: inherit;
  border: 3px solid transparent; border-radius: 20px; background: rgba(255, 255, 255, 0.55); box-shadow: none;
}
body.in-tool #view-sa_main .sa-emotion-btn img { width: 48px; height: 48px; }
body.in-tool #view-sa_main .sa-emotion-btn .sa-emotion-label { font-size: 13.5px; letter-spacing: -0.01em; color: var(--ink-soft); }
body.in-tool #view-sa_main .sa-emotion-btn.selected { border-color: var(--primary); background: rgba(216, 243, 220, 0.95); transform: none; }
body.in-tool #view-sa_main .sa-emotion-btn.selected .sa-emotion-label { color: var(--primary); }

@media (min-width: 900px) {
  body.in-tool #view-sa_main .container-narrow { column-gap: 24px; margin-top: 0; }
  body.in-tool #view-sa_main .sa-center {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44px; align-items: start; margin-top: 24px;
  }
  body.in-tool #view-sa_main .sa-image-wrapper,
  body.in-tool #view-sa_main .sa-textcard-wrapper { grid-column: 1; grid-row: 1 / span 6; max-width: none; margin: 0; }
  body.in-tool #view-sa_main .sa-hint-text { grid-column: 2; grid-row: 1; align-self: end; text-align: left; margin-bottom: 14px; }
  body.in-tool #view-sa_main .sa-emoji-row { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  body.in-tool #view-sa_main .sa-selected-emotion { grid-column: 2; grid-row: 3; justify-self: start; }
  body.in-tool #view-sa_main .sa-emotions-divider { grid-column: 2; grid-row: 4; text-align: left; margin-top: 4px; }
  body.in-tool #view-sa_main .sa-emotions-grid { grid-column: 2; grid-row: 5; }
  body.in-tool #view-sa_main .sa-nav { grid-column: 2; grid-row: 6; margin-top: 24px; }
  body.in-tool #view-sa_main .sa-emotion-btn img { width: 56px; height: 56px; }
  body.in-tool #view-sa_main .sa-emotion-btn .sa-emotion-label { font-size: 15px; letter-spacing: 0; }
}

/* Self-assessment results (sa_tierlist). Desktop: emoji in the tinted panel. Phone: emoji above the panel, pictures 3 across. */
body.in-tool #view-sa_tierlist .container-extra-wide { max-width: var(--tools-w); }
body.in-tool #view-sa_tierlist .form-header { margin-bottom: 24px; }
#saTierListContent { display: flex; flex-direction: column; gap: 14px; }
body.in-tool .tier-row {
  margin: 0; min-height: 0; border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: var(--glass-shadow);
}
body.in-tool .tier-label { width: 112px; padding: 16px 0 16px 16px; }
body.in-tool .tier-label img {
  width: 72px; height: 72px; padding: 4px; background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(27, 67, 50, 0.12);
}
body.in-tool .tier-images {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; padding: 16px;
}
body.in-tool .tier-image-card { width: auto; }
body.in-tool .tier-img-wrap { display: block; width: 100%; }
body.in-tool .tier-img-wrap > img:first-child,
body.in-tool .tier-img-wrap > .tier-textcard {
  width: 100%; height: auto; max-width: none; aspect-ratio: 1; display: block;
  border-radius: 18px; box-shadow: 0 4px 12px rgba(27, 67, 50, 0.14);
}
body.in-tool .tier-img-wrap > img:first-child { border: 2px solid #fff; }
body.in-tool .tier-img-wrap > .tier-textcard { display: flex; font-size: 17px; padding: 8px; border-width: 3px; }
body.in-tool .tier-emotion-badge { right: -4px; bottom: -4px; width: 40px !important; height: 40px !important; border-width: 3px; }
body.in-tool .tier-row-empty .tier-images { display: flex; min-height: 88px; }
body.in-tool .tier-empty-text { font-size: 17px; font-style: normal; color: var(--ink-soft); }
/* legend */
body.in-tool .sa-emotion-legend {
  margin-top: 24px; padding: 20px 24px; border-radius: 28px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
body.in-tool .sa-legend-title { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
body.in-tool .sa-legend-grid { gap: 12px 28px; }
body.in-tool .sa-legend-item { font-size: 18px; color: var(--ink-soft); gap: 8px; white-space: nowrap; }
body.in-tool .sa-legend-item img { width: 38px; height: 38px; }
/* PDF */
body.in-tool #tierExportPdf {
  display: flex; width: 100%; max-width: 440px; height: 62px; margin: 32px auto 14px; padding: 0 24px;
  border-radius: 31px; font-size: 20px; color: #fff; background: var(--green-grad); border: 0;
}
body.in-tool #tierExportPdf .icon-sm { width: 24px; height: 24px; }
body.in-tool #view-sa_tierlist .pdf-warning { max-width: 560px; margin: 0 auto 24px; font-size: 15px; color: var(--ink-soft); }

@media (max-width: 899px) {
  body.in-tool #view-sa_tierlist .form-header { margin: 16px 0 0; }
  #saTierListContent { gap: 18px; }
  /* the tint belongs to the pictures only: the row itself is not a panel on phones */
  body.in-tool .tier-row { flex-direction: column; gap: 8px; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  body.in-tool .tier-label { width: auto; flex-direction: row; justify-content: flex-start; padding: 0 0 0 4px; background: none !important; }
  body.in-tool .tier-label img { width: 52px; height: 52px; padding: 3px; }
  body.in-tool .tier-images {
    flex: none;   /* in the column layout flex: 1 would override the height the move animation sets */
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: var(--glass-shadow);
  }
  body.in-tool .tier-img-wrap > img:first-child, body.in-tool .tier-img-wrap > .tier-textcard { border-radius: 14px; }
  body.in-tool .tier-img-wrap > .tier-textcard { font-size: 13px; padding: 4px; border-width: 2px; }
  body.in-tool .tier-emotion-badge { right: -3px; bottom: -3px; width: 32px !important; height: 32px !important; border-width: 2px; }
  body.in-tool .tier-row-empty .tier-images { justify-content: flex-start; min-height: 0; }
  body.in-tool .sa-emotion-legend { padding: 16px 18px; }
  body.in-tool .sa-legend-grid { gap: 10px 20px; }
  body.in-tool .sa-legend-item { font-size: 17px; }
  body.in-tool .sa-legend-item img { width: 34px; height: 34px; }
}

/* Moving cards on the results page: hint, card buttons, tap menu, move animation (js: saMoveCard) */
#view-sa_tierlist .section-desc { margin-bottom: 12px; }
.sa-move-hint {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 10px 16px;
  border-radius: 18px; font-size: 17px; line-height: 1.4; color: #1f5139;
  background: rgba(216, 243, 220, 0.8); border: 1px solid rgba(255, 255, 255, 0.95);
}
.sa-move-hint svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--primary); }
button.tier-image-card {
  position: relative; padding: 0; border: 0; border-radius: 18px; background: none; cursor: pointer;
  font: inherit; color: inherit; -webkit-tap-highlight-color: transparent;
}
button.tier-image-card:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.6); outline-offset: 3px; }
.tier-image-card.is-menu-open .tier-img-wrap > :first-child { box-shadow: 0 0 0 3px var(--primary), 0 6px 16px rgba(27, 67, 50, 0.2); }
.tier-image-card.is-moving { z-index: 5; }
.tier-image-card.is-moved .tier-img-wrap > :first-child { animation: saMovedRing 1.2s ease-out; }
@keyframes saMovedRing {
  0% { box-shadow: 0 0 0 0 rgba(82, 183, 136, 0.9), 0 4px 12px rgba(27, 67, 50, 0.14); }
  100% { box-shadow: 0 0 0 16px rgba(82, 183, 136, 0), 0 4px 12px rgba(27, 67, 50, 0.14); }
}
.sa-move-menu {
  position: fixed; z-index: 220; padding: 10px 12px 12px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 16px 40px rgba(15, 40, 28, 0.24);
  animation: toolMenuIn 0.16s ease-out; transform-origin: top center;
}
.sa-move-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; text-align: center; color: #3a4c43; }
.sa-move-options { display: flex; gap: 10px; }
.sa-move-opt {
  width: 64px; height: 64px; padding: 4px; border-radius: 50%; cursor: pointer;
  border: 3px solid rgba(255, 255, 255, 0.95); background: #fff; box-shadow: 0 4px 12px rgba(27, 67, 50, 0.14);
}
.sa-move-opt img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sa-move-opt:hover, .sa-move-opt:focus-visible { border-color: var(--primary); outline: none; }
.sa-move-opt.is-current { opacity: 0.4; cursor: default; box-shadow: none; border-color: rgba(255, 255, 255, 0.95); }
@media (prefers-reduced-motion: reduce) {
  .sa-move-menu, .tier-image-card.is-moved .tier-img-wrap > :first-child { animation: none; }
}
/* Dragging cards (part 2; js: saDragStart / saDragEnd) */
button.tier-image-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
#saTierListContent img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
@media (hover: hover) { button.tier-image-card { cursor: grab; } }
body.sa-dragging, body.sa-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.tier-image-card.is-drag-source { opacity: 0.3; }
button.tier-image-card.tier-drag-ghost {   /* beats button.tier-image-card { position: relative } */
  position: fixed; z-index: 400; margin: 0; pointer-events: none;
  transform: scale(1.07) rotate(-2deg); filter: drop-shadow(0 18px 26px rgba(15, 40, 28, 0.30));
  transition: transform 0.15s ease;
}
button.tier-image-card.tier-drag-ghost.is-returning { transform: none; transition: left 0.22s ease, top 0.22s ease, transform 0.22s ease; }
.tier-drop-slot {
  aspect-ratio: 1; border-radius: 18px;
  border: 3px dashed rgba(45, 106, 79, 0.6); background: rgba(82, 183, 136, 0.18);
  animation: saSlotIn 0.18s ease-out;
}
@keyframes saSlotIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
body.in-tool .tier-row.is-drop-target { box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.65), var(--glass-shadow); }
.tier-row.is-drop-target .tier-empty-text { display: none; }
body.in-tool .tier-row-empty.is-drop-target .tier-images { display: grid; }
@media (max-width: 899px) {
  body.in-tool .tier-row.is-drop-target { box-shadow: none; }
  body.in-tool .tier-row.is-drop-target .tier-images { box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.7), var(--glass-shadow); }
  .tier-drop-slot { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  button.tier-image-card.tier-drag-ghost, button.tier-image-card.tier-drag-ghost.is-returning { transition: none; }
  .tier-drop-slot { animation: none; }
}
/* the row no longer clips (a moving card has to stay visible outside its panel): corners on the parts instead */
@media (min-width: 900px) {
  body.in-tool .tier-label { border-radius: 27px 0 0 27px; }
  body.in-tool .tier-images { border-radius: 0 27px 27px 0; }
}
@media (max-width: 899px) {
  .sa-move-hint { font-size: 16px; padding: 9px 14px; }
}

/* Self-assessment: environment (sa_select) and picture set (sa_category) */
#view-sa_select .container-narrow,
#view-sa_category .container-narrow { max-width: var(--tools-w); }
.sa-cat-groups { display: flex; flex-direction: column; }
/* word cards (adolescents): own group with a section heading, no rule */
body.in-tool .sa-textcards-divider { margin-top: 36px; padding-top: 0; border-top: 0; }
body.in-tool .sa-textcards-divider h3 { font-size: 24px; line-height: 1.25; color: var(--ink); margin-bottom: 6px; }
body.in-tool .sa-textcards-divider p { font-size: 18px; color: var(--ink-soft); margin-bottom: 16px; max-width: 640px; }

/* Group heading between two choice lists (tool pages) */
body.in-tool .tool-group-head { margin-top: 36px; }
body.in-tool .tool-group-head h3 { font-size: 24px; line-height: 1.25; color: var(--ink); margin-bottom: 6px; }
body.in-tool .tool-group-head p { font-size: 18px; color: var(--ink-soft); margin-bottom: 16px; max-width: 640px; }

/* ICF form steps 1–2 (age_select, icf_intro).
   Intro: glass cards; desktop = two cards side by side, "About the ICF" full width, consent and Start in one row. */
#view-age_select .container-narrow,
#view-icf_intro .container-narrow { max-width: var(--tools-w); }
.icf-start-grid { display: grid; gap: 14px; margin-top: 20px; }
.icf-start-card {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  border-radius: 24px; padding: 20px 22px; color: var(--ink);
}
.icf-start-card h3 { font-size: 21px; font-weight: 700; line-height: 1.25; margin: 0 0 10px; color: var(--ink); }
.icf-start-card p { font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 10px; text-wrap: pretty; }
.icf-start-card p:last-child { margin-bottom: 0; }
.icf-start-card p:empty { display: none; }
.icf-start-card a { color: var(--primary); font-weight: 600; }
.icf-start-note { font-style: italic; }
.icf-start-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.icf-start-steps li { display: flex; gap: 12px; font-size: 17px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.icf-start-steps li::before { content: ""; flex: 0 0 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: #52B788; }
.icf-start-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.icf-start-legend div { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--ink); }
.icf-scale-num {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: "DM Mono", monospace; font-weight: 700; font-size: 15px;
}
.icf-start-consent {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.95);
  font-size: 17px; line-height: 1.45; color: var(--ink); cursor: pointer;
}
.icf-start-consent input { width: 24px; height: 24px; flex: 0 0 24px; margin: 1px 0 0; accent-color: #2D6A4F; }
.icf-start-btn {
  margin-top: 14px; width: 100%; min-height: 58px; border: 0; border-radius: 29px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 20px; font-weight: 700; color: #fff;
  background: var(--green-grad); box-shadow: 0 8px 20px rgba(45, 106, 79, 0.30);
}
.icf-start-btn img { width: 24px; height: 24px; }
.icf-start-btn:disabled, .icf-start-btn.disabled { background: #b0b0a8; box-shadow: none; cursor: not-allowed; }
.icf-start-btn:focus-visible, .icf-start-consent input:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
@media (min-width: 900px) {
  .icf-start-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .icf-start-wide { grid-column: 1 / -1; }
  .icf-start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; margin-top: 22px; }
  .icf-start-actions .icf-start-consent, .icf-start-actions .icf-start-btn { margin-top: 0; }
}

/* Area assessment on the ICF form: an age without items in the area is grey and cannot be
   chosen — no item counts and no explanatory text. */
.age-button:disabled { cursor: default; }
.age-button:disabled .btn-card-icon,
.age-button:disabled .btn-card-text { filter: grayscale(1); opacity: 0.45; }
body.in-tool .age-button:disabled::after { display: none; }
body.in-tool .age-button:disabled:hover { transform: none; border-color: var(--glass-border); box-shadow: var(--glass-shadow); }
@media (max-width: 899px) {
  body.in-tool .tool-choices .age-button:disabled:hover { background: transparent; box-shadow: none; }
}
.icf-item-meta[hidden] { display: none; }
.icf-plan-noplan { margin: 12px 0 8px; padding: 10px 12px; border-radius: 14px; font-size: 17px; line-height: 1.45;
  background: rgba(82, 183, 136, 0.14); color: var(--ink); }

/* ICF form step 3: one item at a time (icf_conversation).
   Glass item card, 0–4 as full-width rows, How to rate in a sticky side panel (≥ 900px) or a bottom sheet
   (phone), Previous/Next under the card (desktop) or in a fixed bar (phone; the ? button floats above it). */
body.in-tool #view-icf_conversation .container-narrow { max-width: var(--tools-w); padding: 0; }
.icf-item-progress { margin: 18px 0 16px; }
.icf-item-progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 17px; }
.icf-item-section { color: var(--ink-soft); }
.icf-item-count { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.icf-item-bar { height: 10px; margin-top: 8px; border-radius: 5px; overflow: hidden;
  background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); }
.icf-item-bar-fill { height: 100%; border-radius: 5px; background: var(--green-grad); transition: width 0.25s ease; }
.icf-item-card {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  border-radius: 24px; padding: 20px 20px 22px; color: var(--ink);
}
.icf-item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.icf-item-code { font-family: "DM Mono", monospace; font-size: 14px; font-weight: 500; color: var(--primary);
  background: rgba(82, 183, 136, 0.18); border-radius: 8px; padding: 2px 8px; }
.icf-item-group { font-size: 16px; color: var(--ink-soft); }
body.in-tool #view-icf_conversation .icf-item-title { font-size: 28px; margin: 0 0 16px; text-wrap: balance; }
.icf-item-help { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 18px; padding: 14px 16px 16px; }
.icf-item-help h3, .icf-rate-head h3, #icfDescField label { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.icf-item-help ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.icf-item-help li { font-size: 17px; line-height: 1.45; color: var(--ink); }
.icf-item-help li::marker { color: #52B788; }
.icf-rate-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 10px; }
.icf-rate-head h3 { margin: 0; }
.icf-how-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 18px; cursor: pointer;
  border: 1px solid rgba(45, 106, 79, 0.25); background: rgba(255, 255, 255, 0.75);
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--primary); white-space: nowrap;
}
.icf-how-btn b { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; }
#view-icf_conversation .icf-inline-scoring-row { display: flex; flex-direction: column; gap: 8px; }
#view-icf_conversation .icf-score-option {
  gap: 14px; min-height: 56px; padding: 0 16px 0 12px; border-radius: 16px; text-align: left; width: 100%;
  border: 1.5px solid rgba(45, 106, 79, 0.16); background: rgba(255, 255, 255, 0.72);
  font-family: inherit; font-size: 18px; color: var(--ink);
}
#view-icf_conversation .icf-score-option:hover { border-color: rgba(45, 106, 79, 0.4); }
#view-icf_conversation .icf-score-option .score-num {
  width: 32px; height: 32px; font-size: 15px; font-weight: 700; color: var(--ink-soft);
  background: #fff; border: 2px solid rgba(45, 106, 79, 0.22);
}
#view-icf_conversation .icf-score-option .score-text { font-size: 18px; color: var(--ink); }
#view-icf_conversation .icf-score-option.selected {
  border-color: var(--c); background: rgba(255, 255, 255, 0.72);
  background: color-mix(in srgb, var(--c) 14%, white);
}
#view-icf_conversation .icf-score-option.selected .score-num { color: #fff; border-color: transparent; }
#view-icf_conversation .icf-score-option.selected .score-text { font-weight: 700; color: var(--ink); }
#view-icf_conversation .icf-score-option:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }

.icf-item-desc.visible { margin: 20px 0 0; }
#view-icf_conversation #icfDescField label { display: block; }
#view-icf_conversation .icf-inline-desc textarea {
  box-sizing: border-box; min-height: 110px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid rgba(45, 106, 79, 0.22); background: rgba(255, 255, 255, 0.85);
  font-family: inherit; font-size: 18px; color: var(--ink);
}
#view-icf_conversation .icf-inline-desc textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.25); }
#view-icf_conversation .icf-inline-desc textarea.has-error { border-color: #C62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15); }
.icf-item-desc-error { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: #B3261E; }
.icf-item-desc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.icf-item-desc-hint { font-size: 15px; color: var(--ink-soft); }
/* Previous / Next */
.icf-item-nav { display: flex; gap: 10px; margin-top: 16px; }
.icf-item-nav button {
  flex: 1; min-height: 56px; border-radius: 28px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 18px; font-weight: 700;
}
.icf-item-nav img { width: 22px; height: 22px; }
.icf-item-prev {
  flex: 0.8 !important; color: var(--primary); background: #fff;
  border: 1.5px solid rgba(45, 106, 79, 0.55); box-shadow: 0 4px 12px rgba(27, 67, 50, 0.12);
}
.icf-item-prev:disabled { cursor: default; box-shadow: none; color: #8A9A92;
  border-color: rgba(45, 106, 79, 0.18); background: rgba(255, 255, 255, 0.55); }
.icf-item-prev:disabled img { filter: grayscale(1); opacity: 0.45; }
.icf-item-next { color: #fff; border: 0; background: var(--green-grad); box-shadow: 0 8px 20px rgba(45, 106, 79, 0.30); }
.icf-item-prev:focus-visible, .icf-item-next:focus-visible, .icf-how-btn:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
/* How to rate: side panel (desktop) */
.icf-item-aside h3 { font-size: 21px; margin: 0 0 8px; color: var(--ink); }
.icf-item-aside p { font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 12px; }
/* How to rate: bottom sheet (phone) */
.icf-sheet-backdrop { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 40, 28, 0.40); opacity: 0; transition: opacity 0.22s ease; }
.icf-sheet-backdrop[hidden] { display: none; }
.icf-sheet-backdrop.is-open { opacity: 1; }
.icf-sheet { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-sizing: border-box;
  padding: 10px 22px calc(28px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0;
  background: #f6fbf7; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15); color: var(--ink);
  transform: translateY(24px); transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.icf-sheet-backdrop.is-open .icf-sheet { transform: none; }
.icf-sheet:focus { outline: none; }
.icf-sheet-grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(45, 106, 79, 0.3); margin: 0 auto 14px; }
.icf-sheet-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.icf-sheet-top h3 { font-size: 22px; margin: 0; }
.icf-sheet-close { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; flex: 0 0 44px;
  background: rgba(45, 106, 79, 0.12); font-size: 26px; line-height: 1; color: var(--primary); }
.icf-sheet-close:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
.icf-sheet p { font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 14px; }
body.icf-sheet-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .icf-sheet-backdrop, .icf-sheet, .icf-item-bar-fill { transition: none; }
}
@media (max-width: 899px) {
  .icf-item-aside { display: none !important; }
  .icf-item-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    border-top: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 -6px 24px rgba(27, 67, 50, 0.08);
  }
  body.in-tool #view-icf_conversation.active,
  body.tg-help-on #view-icf_conversation.active { padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important; }
  /* the ? button floats above the bar, not in it */
  body:has(#view-icf_conversation.active) .tg-help { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) {
  .icf-how-btn { display: none; }
  .icf-item-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
  .icf-item-aside { position: sticky; top: calc(var(--tool-hdr-h) + 16px); }
  body.in-tool #view-icf_conversation.active { overflow-x: clip; }
  .icf-item-nav { justify-content: space-between; }
  .icf-item-nav button { flex: 0 0 auto !important; padding: 0 28px; }
}

/* ICF form: environmental factors (icf_env_intro + environment items).
   +4 … −4 rows use the same row style as 0–4; the number chip is a little wider for the sign.
   How to rate shows the scale of the current item: .is-env switches the side panel and the sheet. */
#view-icf_env_intro .container-narrow { max-width: var(--tools-w); }
.icf-env-num { width: 40px !important; flex-basis: 40px !important; border-radius: 20px !important; font-size: 14px !important; }
#view-icf_conversation .icf-env-option { min-height: 52px; }
#view-icf_conversation .icf-env-option .score-num { width: 40px; border-radius: 20px; font-size: 14px; }
.icf-rate-env { display: none; }
.is-env .icf-rate-std { display: none; }
.is-env .icf-rate-env { display: block; }
.icf-env-intro-nav { margin-top: 22px; }
@media (max-width: 899px) {
  .icf-item-nav.icf-env-intro-nav { position: static; padding: 0; background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ICF form: review page (icf_form).
   Details card, one glass card per group, rows = code + title + numbered dots (desktop: one line; phone: dots
   under the title), description always open for rated rows, note + Create report / Back to items. */
body.in-tool #view-icf_form .container-extra-wide { max-width: var(--tools-w); padding: 0; }
.icf-review-card {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  border-radius: 24px; padding: 18px 20px 20px; margin-bottom: 14px; color: var(--ink);
}
.icf-review-details { margin-top: 18px; }
.icf-review-details h3 { font-size: 20px; margin: 0 0 12px; color: var(--ink); }
.icf-review-meta { display: grid; gap: 12px; }
.icf-review-meta label { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 5px; text-transform: none; letter-spacing: 0; }
#view-icf_form .icf-review-meta .meta-input,
#view-icf_form .icf-review-meta .form-textarea {
  width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(45, 106, 79, 0.22);
  background: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 17px; color: var(--ink); padding: 10px 12px; min-height: 46px;
}
#view-icf_form .icf-review-meta .meta-input[readonly] { background: rgba(255, 255, 255, 0.5); color: var(--ink-soft); }
#view-icf_form .icf-review-meta .form-textarea { min-height: 84px; resize: vertical; }
.icf-review-section { font-size: 22px; margin: 26px 0 10px; color: var(--ink); }
.icf-review-ghead { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 4px; }
.icf-review-ghead h4 { font-size: 18px; margin: 0; color: var(--ink); }
.icf-review-ghead span { font-size: 14px; color: var(--ink-soft); }
.icf-review-row { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 8px; align-items: center;
  padding: 12px 0; border-top: 1px solid rgba(45, 106, 79, 0.10); }
.icf-review-ghead + .icf-review-row { border-top: 0; }
.icf-review-code { font-family: "DM Mono", monospace; font-size: 13px; color: var(--primary); background: rgba(82, 183, 136, 0.18);
  border-radius: 7px; padding: 2px 7px; align-self: start; margin-top: 2px; justify-self: start; }
.icf-review-title { font-size: 17px; line-height: 1.35; }
.icf-review-dots { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: nowrap; }
#view-icf_form .icf-review-dots .score-dot {
  width: 36px; height: 36px; border: 2px solid rgba(45, 106, 79, 0.2); background: #fff;
  font-family: "DM Mono", monospace; font-size: 14px; font-weight: 700; color: var(--ink-soft);
}
#view-icf_form .icf-review-dots .score-dot:hover { border-color: rgba(45, 106, 79, 0.5); }
#view-icf_form .icf-review-dots .score-dot.selected { border-color: transparent; color: #fff; }
#view-icf_form .icf-review-dots .score-dot:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
.icf-review-dots.is-env { gap: 4px; }
#view-icf_form .icf-review-dots.is-env .score-dot { width: 32px; height: 32px; font-size: 12px; }
#view-icf_form .icf-review-row .icf-cat-desc-area { grid-column: 1 / -1; padding: 0; }
#view-icf_form .icf-cat-desc-area label { display: block; font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
#view-icf_form .icf-cat-desc-area .icf-group-textarea {
  box-sizing: border-box; min-height: 64px; border-radius: 14px; border: 1px solid rgba(45, 106, 79, 0.22);
  background: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 17px; color: var(--ink); padding: 10px 12px;
}
.icf-review-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: 16px; line-height: 1.5; }
.icf-review-note b { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; margin-top: 1px; }
.icf-review-actions { display: flex; flex-direction: column-reverse; gap: 10px; margin: 18px 0 30px; }
.icf-review-actions button { flex: 0 0 auto !important; width: 100%; min-height: 58px; border-radius: 29px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 18px; font-weight: 700; }
.icf-review-actions img { width: 24px; height: 24px; }
@media (min-width: 900px) {
  .icf-review-meta { grid-template-columns: 1fr 1fr; }
  .icf-review-wide { grid-column: 1 / -1; }
  .icf-review-row { grid-template-columns: 76px 1fr auto; }
  .icf-review-dots { grid-column: auto; }
  #view-icf_form .icf-review-row .icf-cat-desc-area { grid-column: 2 / -1; }
  .icf-review-actions { flex-direction: row; justify-content: space-between; }
  .icf-review-actions button { width: auto; padding: 0 30px; }
}

/* ICF form: report sections 1–4 (icf_report). */
body.in-tool #view-icf_report .container-extra-wide { max-width: var(--tools-w); padding: 0; }
.icf-rep-card {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  border-radius: 24px; padding: 18px 20px 20px; margin-bottom: 14px; color: var(--ink);
}
.icf-rep-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.icf-rep-meta span { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 2px; }
.icf-rep-meta b { font-size: 17px; color: var(--ink); }
.icf-rep-h { font-size: 24px; color: var(--ink); margin: 30px 0 6px; }
.icf-rep-h4 { font-size: 19px; color: var(--ink); margin: 20px 0 10px; }
.icf-rep-lead { font-size: 17px; color: var(--ink-soft); margin: 0 0 12px; }
.icf-rep-empty { font-size: 16px; font-style: italic; color: var(--ink-soft); margin: 0; }
.icf-rep-gauge { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; }
.icf-rep-dial { position: relative; width: 180px; height: 180px; }
.icf-rep-dial svg { width: 180px; height: 180px; transform: rotate(-90deg); }
.icf-rep-dial-track { fill: none; stroke: rgba(45, 106, 79, 0.12); stroke-width: 16; }
.icf-rep-dial-fill { fill: none; stroke-width: 16; stroke-linecap: round; }
.icf-rep-dial-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.icf-rep-dial-num b { font-size: 44px; line-height: 1; }
.icf-rep-dial-num span { font-size: 15px; color: var(--ink-soft); }
.icf-rep-class { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.icf-rep-gauge-info p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 8px; }
.icf-rep-gauge-info p.icf-rep-note { font-size: 14px; font-style: italic; }
.icf-rep-subs { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.icf-rep-sub { display: grid; grid-template-columns: minmax(0, 1fr) 110px 50px; gap: 10px; align-items: center; font-size: 16px; }
.icf-rep-bar { height: 10px; border-radius: 5px; background: rgba(45, 106, 79, 0.12); overflow: hidden; }
.icf-rep-bar i { display: block; height: 100%; border-radius: 5px; }
.icf-rep-sub b { font-family: "DM Mono", monospace; font-size: 14px; text-align: right; white-space: nowrap; }
.icf-rep-chart { position: relative; min-height: 104px; }
.icf-rep-grp { font-size: 16px; font-weight: 700; color: var(--primary); padding: 12px 0 6px; border-top: 1px solid rgba(45, 106, 79, 0.12); }
.icf-rep-grp:first-child { border-top: 0; padding-top: 0; }
.icf-rep-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 17px; }
.icf-rep-code { font-family: "DM Mono", monospace; font-size: 13px; color: #fff; border-radius: 7px; padding: 3px 8px; justify-self: start; }
.icf-rep-codel { font-family: "DM Mono", monospace; font-size: 13px; color: var(--primary); background: rgba(82, 183, 136, 0.18); border-radius: 7px; padding: 2px 7px; }
.icf-rep-score { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
.icf-rep-score b { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: "DM Mono", monospace; font-size: 13px; }
.icf-rep-desc { padding: 6px 0 10px; font-size: 17px; }
.icf-rep-desc blockquote { margin: 6px 0 0 2px; padding: 8px 12px; border-left: 3px solid #52B788; background: rgba(255, 255, 255, 0.6);
  border-radius: 0 12px 12px 0; font-size: 16px; color: var(--ink); }
.icf-rep-env { display: grid; gap: 14px; }
.icf-rep-envcol { margin-bottom: 0; }
.icf-rep-envcol h4 { font-size: 18px; margin: 0 0 8px; }
.icf-rep-envcol.is-pos h4 { color: #1B7D3A; }
.icf-rep-envcol.is-neg h4 { color: #B3261E; }
.icf-rep-envitem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid rgba(45, 106, 79, 0.10); font-size: 17px; }
.icf-rep-envcol h4 + .icf-rep-envitem { border-top: 0; }
.icf-rep-chip { min-width: 40px; height: 28px; padding: 0 6px; box-sizing: border-box; border-radius: 14px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-family: "DM Mono", monospace; font-size: 13px; font-weight: 700; }
.icf-rep-envdesc { font-size: 15px; color: var(--ink-soft); margin-top: 2px; }
.icf-rep-support { font-size: 17px; line-height: 1.5; white-space: pre-wrap; }
@media (max-width: 899px) {
  .icf-rep-meta { grid-template-columns: 1fr 1fr; }
  .icf-rep-gauge { grid-template-columns: 1fr; justify-items: center; }
  .icf-rep-gauge-info { width: 100%; }
  .icf-rep-class { text-align: center; }
  .icf-rep-sub { grid-template-columns: minmax(0, 1fr) 64px 50px; }
  .icf-rep-row { grid-template-columns: auto minmax(0, 1fr); }
  .icf-rep-row .icf-rep-score { grid-column: 2; }
}
@media (min-width: 900px) {
  .icf-rep-env { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ICF form: plan section + loading view */
.icf-plan-phase { margin-bottom: 14px; }
.icf-plan-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 4px; }
.icf-plan-num { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--green-grad); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; }
.icf-plan-head h4 { font-size: 20px; margin: 2px 0; color: var(--ink); }
.icf-plan-head p { font-size: 16px; margin: 0; color: var(--ink-soft); }
.icf-plan-field { margin-top: 12px; }
.icf-plan-field label { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 5px; text-transform: none; letter-spacing: 0; }
.icf-plan-field textarea, .icf-plan-field input[type=text] {
  width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(45, 106, 79, 0.22);
  background: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 17px; line-height: 1.5; color: var(--ink); padding: 10px 12px;
}
.icf-plan-field textarea { min-height: 80px; resize: vertical; }
.icf-plan-field textarea:focus, .icf-plan-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.25); }
.icf-plan-ai { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; border-radius: 14px;
  background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.25); font-size: 15px; line-height: 1.45; color: var(--ink); }
.icf-plan-ai > b { flex: 0 0 22px; height: 22px; border-radius: 50%; background: #3B82F6; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.icf-plan-error { margin: 12px 0 8px; padding: 10px 12px; border-radius: 14px; background: rgba(198, 40, 40, 0.07);
  border: 1px solid rgba(198, 40, 40, 0.3); font-size: 16px; line-height: 1.45; color: #7F1D1D; }
.icf-plan-retry { min-height: 44px; padding: 0 20px; border-radius: 22px; border: 1.5px solid rgba(45, 106, 79, 0.55); background: #fff;
  color: var(--primary); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.icf-plan-hint { font-size: 14px; color: var(--ink-soft); margin: 10px 0 10px; }
.icf-plan-intro { font-size: 17px; line-height: 1.55; margin: 0 0 12px; color: var(--ink); }
.icf-plan-sub { font-size: 17px; font-weight: 700; color: var(--primary); margin: 18px 0 8px; }
.icf-plan-item { position: relative; display: block; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px; padding: 12px 46px 12px 14px; margin-bottom: 8px; }
.icf-plan-item.is-prio { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.icf-plan-n { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #52B788; color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; box-sizing: border-box; }
.icf-plan-t { font-weight: 700; font-size: 17px; color: var(--ink); }
.icf-plan-d { font-size: 16px; line-height: 1.5; color: var(--ink); margin-top: 3px; }
.icf-plan-sectitle { font-size: 16px; font-weight: 700; color: var(--ink); margin: 12px 0 6px; }
.icf-plan-step { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(82, 183, 136, 0.16); font-size: 15px; line-height: 1.45; }
#planStructured [contenteditable], #areaPlanStructured [contenteditable] { border-radius: 6px; outline: none; cursor: text; }
#planStructured [contenteditable]:hover, #areaPlanStructured [contenteditable]:hover { box-shadow: 0 0 0 2px rgba(82, 183, 136, 0.25); }
#planStructured [contenteditable]:focus, #areaPlanStructured [contenteditable]:focus { background: #fff; box-shadow: 0 0 0 2px var(--primary); }
.icf-plan-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(45, 106, 79, 0.08); color: var(--ink-soft); font-size: 20px; line-height: 1; }
.icf-plan-x:hover { background: rgba(198, 40, 40, 0.12); color: #B3261E; }
.icf-plan-x:focus-visible, .icf-plan-retry:focus-visible, .icf-plan-area summary:focus-visible,
.icf-plan-pdf:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
.icf-plan-undo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; overflow: hidden;
  min-height: 48px; box-sizing: border-box; padding: 8px 10px 8px 14px; margin-bottom: 8px; border-radius: 16px;
  background: rgba(45, 106, 79, 0.08); border: 1px dashed rgba(45, 106, 79, 0.35); font-size: 16px; color: var(--ink-soft); }
.icf-plan-undo-btn { min-height: 36px; padding: 0 16px; border-radius: 18px; border: 1.5px solid rgba(45, 106, 79, 0.55); background: #fff;
  color: var(--primary); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.icf-plan-undo-btn:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
.icf-plan-undo-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #52B788; transform-origin: left;
  animation: icf-undo-timer 5s linear forwards; }
@keyframes icf-undo-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .icf-plan-undo-timer { animation: none; } }
.icf-plan-area { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 18px; margin-bottom: 10px; }
.icf-plan-area summary { list-style: none; cursor: pointer; padding: 14px 16px; min-height: 24px; font-weight: 700; font-size: 17px;
  display: flex; justify-content: space-between; align-items: center; color: var(--ink); }
.icf-plan-area summary::-webkit-details-marker { display: none; }
.icf-plan-area summary::after { content: "▾"; color: var(--primary); }
.icf-plan-area[open] summary::after { content: "▴"; }
.icf-plan-area-body { padding: 0 16px 14px; }
.icf-plan-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; margin-top: 16px; }
.icf-plan-row .icf-plan-field { margin-top: 0; }
.icf-plan-check { display: flex; gap: 10px; align-items: center; min-height: 46px; box-sizing: border-box; padding: 8px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.95); font-size: 16px; color: var(--ink); cursor: pointer; }
.icf-plan-check input { width: 22px; height: 22px; accent-color: #2D6A4F; }
.icf-plan-pdf { width: 100%; min-height: 58px; margin-top: 8px; border: 0; border-radius: 29px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 18px; font-weight: 700;
  color: #fff; background: var(--green-grad); box-shadow: 0 8px 20px rgba(45, 106, 79, 0.30); }
.icf-plan-pdf img { width: 24px; height: 24px; }
.icf-plan-pdf.exported { background: #2D6A4F; }
.icf-plan-pdfwarn { font-size: 14px; color: var(--ink-soft); text-align: center; margin: 8px 0 30px; }
#view-icf_loading .container-narrow { max-width: 600px; }

/* Area assessment report (icf_area_report): ratings + plan, same cards as the
   full report. Rated items: name, score and word, description as a quote; items at 0 as a short list. */
body.in-tool #view-icf_area_report .container-extra-wide { max-width: var(--tools-w); padding: 0; }
#view-icf_area_report .icf-rep-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#view-icf_area_report .icf-rep-card > .icf-plan-hint:first-child { margin-top: 0; }
.icf-area-rate { padding: 12px 0; border-top: 1px solid rgba(45, 106, 79, 0.12); }
.icf-area-rate:first-child { border-top: 0; padding-top: 0; }
.icf-area-rate .icf-rep-row { grid-template-columns: minmax(0, 1fr) auto; padding: 0; }
.icf-area-rate .icf-rep-title { font-weight: 700; }
.icf-area-rate blockquote { margin: 8px 0 0 2px; padding: 8px 12px; border-left: 3px solid #52B788; background: rgba(255, 255, 255, 0.6);
  border-radius: 0 12px 12px 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.icf-area-zero { padding-top: 14px; border-top: 1px solid rgba(45, 106, 79, 0.12); }
.icf-area-zero:first-child { border-top: 0; padding-top: 0; }
.icf-area-zero > .icf-rep-score { font-size: 16px; font-weight: 700; color: var(--ink); }
.icf-area-zero ul { margin: 8px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 17px; color: var(--ink); }
.icf-area-zero li::marker { color: #3B82F6; }
@media (max-width: 899px) {
  #view-icf_area_report .icf-rep-meta { grid-template-columns: 1fr 1fr; }
  .icf-area-rate .icf-rep-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .icf-area-rate .icf-rep-row .icf-rep-score { grid-column: 1; }
}
.icf-loading-card { margin: 40px auto; text-align: center; padding: 30px 24px; }

body.in-tool .icf-loading-title.section-title { font-size: 26px; margin: 10px 0 6px; }
.icf-loading-card p { font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 18px; }
.icf-loading-track { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(45, 106, 79, 0.12); overflow: hidden; }
.icf-loading-fill { height: 100%; width: 0; border-radius: 6px; background: var(--green-grad); transition: width 0.8s ease; }
.icf-loading-stage { font-size: 16px; font-weight: 600; color: var(--primary); margin-top: 10px; min-height: 24px; }
@media (prefers-reduced-motion: reduce) { .icf-loading-fill { transition: none; } }
@media (max-width: 899px) {
  .icf-plan-row { grid-template-columns: 1fr; }
  .icf-loading-card { margin: 24px auto; }
}

/* Wizard form: Skill Coach (skill_calc), Stepper (bd_input) and Mediation (mediation_form) the same look.
   The rules live on the .scw container so both tools share them. < 900 px: one question at a time (.scw-step.is-current from
   app.js), steps 1–5 + summary 6, Previous/Next in the ICF item bar (.icf-item-nav, follows the keyboard: .kb-follow).
   ≥ 900 px: every question at once in two glass cards (age + supporters | challenge, situation, tried before) and a
   Create button under the right card; no progress, bar or summary. Old .sc-* form classes stay for Mediation and
   Skills Passport. */
body.in-tool #view-skill_calc .container-narrow, body.in-tool #view-bd_input .container-narrow,
body.in-tool #view-mediation_form .container-narrow,
body.in-tool #view-trans_profile .container-narrow,
body.in-tool #view-passport_form .container-narrow { max-width: var(--tools-w); padding: 0; }
body.in-tool .scw .scw-lead { font-size: 18px; line-height: 1.45; color: var(--ink-soft); margin: 6px 0 0; }
body.in-tool .scw .scw-progress { margin: 14px 0; }
#view-skill_calc .icf-item-count:empty, #view-mediation_form .icf-item-count:empty,
#view-trans_profile .icf-item-count:empty, #view-passport_form .icf-item-count:empty { display: none; }
body.in-tool .scw-card {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  border-radius: 24px; padding: 20px 20px 22px; color: var(--ink);
}
body.in-tool .scw .scw-q { font-size: 28px; line-height: 1.2; margin: 0 0 6px; text-wrap: balance; }
/* the question gets focus on a step change (screen readers read it); it is not a control, so no focus ring */
body.in-tool .scw .scw-q:focus, body.in-tool .scw .scw-q:focus-visible { outline: none; }
body.in-tool .scw .scw-q label { display: inline; margin: 0; font: inherit; color: inherit; text-transform: none; letter-spacing: 0; cursor: default; }
body.in-tool .scw-opt { display: inline-block; margin-left: 2px; font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); white-space: nowrap; }
body.in-tool .scw-help { font-size: 17px; line-height: 1.45; color: var(--ink-soft); margin: 0 0 14px; }
/* step 5 has two fields — on the phone under one question title, on the desktop as two questions */
body.in-tool .scw-sub + .scw-sub { margin-top: 22px; }
body.in-tool .scw-sublabel { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--ink); margin: 14px 0 4px; }
body.in-tool .scw-sublabel label { display: inline; margin: 0; font: inherit; color: inherit; text-transform: none; letter-spacing: 0; cursor: default; }
body.in-tool .scw-opt-desk { display: none; }
/* field: textarea, error, then hint (left) and the Dictate button dictation.js adds after the field (right) */
body.in-tool .scw-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; margin-top: 14px; }
body.in-tool .scw-help + .scw-field { margin-top: 0; }
body.in-tool .scw-field > textarea { grid-column: 1 / -1; grid-row: 1; }
body.in-tool .scw-field > .scw-error { grid-column: 1 / -1; grid-row: 2; }
body.in-tool .scw-field > .scw-hint { grid-column: 1; grid-row: 3; margin-top: 8px; font-size: 15px; line-height: 1.35; color: var(--ink-soft); }
body.in-tool .scw-field > .dict-foot { grid-column: 2; grid-row: 3; margin-top: 8px; }
body.in-tool .scw .scw-textarea {
  width: 100%; box-sizing: border-box; min-height: 140px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid rgba(45, 106, 79, 0.22); background: rgba(255, 255, 255, 0.85);
  font-family: inherit; font-size: 18px; line-height: 1.5; color: var(--ink); resize: none;
}
body.in-tool .scw .scw-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.25); }
body.in-tool .scw .scw-textarea.has-error { border-color: #C62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15); }
body.in-tool .scw-error { margin: 6px 0 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: #B3261E; }
body.in-tool .scw-error[hidden] { display: none; }
/* age: the same cards as the ICF age page */
body.in-tool .scw .scw-ages { margin-top: 14px; }
body.in-tool .scw .scw-ages .btn-card.selected {
  border-color: var(--primary); background: rgba(216, 243, 220, 0.95);
  box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.35), var(--glass-shadow);
}
body.in-tool .scw .scw-ages.has-error { border-radius: 24px; box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.25); }
/* supporters: chips, chosen ones with a tick */
body.in-tool .scw .scw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.in-tool .scw .scw-chips .btn-chip {
  height: 48px; margin: 0; padding: 0 18px; border-radius: 24px;
  border: 1.5px solid rgba(45, 106, 79, 0.16); background: rgba(255, 255, 255, 0.72);
  font-family: inherit; font-size: 18px; font-weight: 500; color: var(--ink); box-shadow: none;
}
body.in-tool .scw .scw-chips .btn-chip:hover { border-color: rgba(45, 106, 79, 0.4); color: var(--ink); background: rgba(255, 255, 255, 0.9); }
body.in-tool .scw .scw-chips .btn-chip.selected {
  padding-left: 14px; font-weight: 700; color: var(--primary); border-color: var(--primary); background: rgba(216, 243, 220, 0.95);
}
body.in-tool .scw .scw-chips .btn-chip.selected::before { content: "\2713"; margin-right: 6px; }
body.in-tool .scw .scw-chips .btn-chip:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
body.in-tool .scw .sc-other-wrap { margin-top: 10px; }
body.in-tool .scw .sc-other-input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid rgba(45, 106, 79, 0.22); background: rgba(255, 255, 255, 0.85);
  font-family: inherit; font-size: 18px; color: var(--ink);
}
/* summary (phones) */
body.in-tool .scw-sum { margin-top: 2px; }
body.in-tool .scw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 0; border-top: 1px solid rgba(45, 106, 79, 0.12); }
body.in-tool .scw-row:first-child { border-top: 0; padding-top: 4px; }
body.in-tool .scw-row-label { display: block; font-size: 15px; color: var(--ink-soft); }
body.in-tool .scw-row-value {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere;
}
body.in-tool .scw-row-value.is-empty { font-weight: 400; font-style: italic; color: var(--ink-soft); }
body.in-tool .scw-edit {
  min-height: 40px; padding: 0 14px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(45, 106, 79, 0.25); background: rgba(255, 255, 255, 0.8);
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--primary);
}
body.in-tool .scw-edit:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
/* bar: the last button says Create / Back to summary (no arrow) */
body.in-tool .scw .scw-nav .icf-item-next.is-final { font-size: 17px; line-height: 1.2; padding: 0 12px; }
body.in-tool .scw .scw-nav.is-return .icf-item-prev { display: none; }
/* desktop Create */
body.in-tool .scw-create {
  width: 100%; min-height: 58px; border: 0; border-radius: 29px; cursor: pointer;
  font-family: inherit; font-size: 19px; font-weight: 700; color: #fff;
  background: var(--green-grad); box-shadow: 0 8px 20px rgba(45, 106, 79, 0.30);
}
body.in-tool .scw-create:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 3px; }
@media (max-width: 899px) {
  body.in-tool .scw-title { display: none; }
  body.in-tool .scw:not(.is-step-1) .scw-lead { display: none; }
  body.in-tool .scw-step { display: none; }
  body.in-tool .scw-step.is-current { display: block; }
  body.in-tool .scw-dcreate { display: none; }
  body.in-tool #view-skill_calc.active, body.in-tool #view-bd_input.active, body.in-tool #view-mediation_form.active,
  body.in-tool #view-trans_profile.active, body.in-tool #view-passport_form.active,
  body.tg-help-on #view-skill_calc.active, body.tg-help-on #view-bd_input.active,
  body.tg-help-on #view-mediation_form.active,
  body.tg-help-on #view-trans_profile.active,
  body.tg-help-on #view-passport_form.active { padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(#view-skill_calc.active) .tg-help, body:has(#view-bd_input.active) .tg-help,
  body:has(#view-mediation_form.active) .tg-help,
  body:has(#view-trans_profile.active) .tg-help,
  body:has(#view-passport_form.active) .tg-help { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) {
  body.in-tool .scw-progress, body.in-tool .scw-nav, body.in-tool .scw-sumstep { display: none !important; }
  body.in-tool .scw .scw-lead { max-width: 620px; font-size: 19px; }
  body.in-tool .scw-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 22px; }
  body.in-tool .scw-col-a { position: sticky; top: calc(var(--tool-hdr-h) + 16px); }
  body.in-tool .scw-colcard {
    background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 24px; padding: 18px 20px 20px;
  }
  body.in-tool .scw-step + .scw-step { margin-top: 22px; }
  body.in-tool .scw-card { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
  body.in-tool .scw .scw-q { font-size: 19px; line-height: 1.3; margin: 0 0 4px; }
  body.in-tool .scw-opt { font-size: 16px; margin-left: 4px; }
  body.in-tool .scw-help { font-size: 15px; margin: 0 0 10px; }
  body.in-tool .scw .scw-q-group { display: none; }
  body.in-tool .scw-sublabel { font-size: 19px; margin: 0 0 4px; }
  body.in-tool .scw-sub + .scw-sub { margin-top: 22px; }
  body.in-tool .scw-opt-desk { display: inline-block; }
  body.in-tool .scw-field { margin-top: 8px; }
  body.in-tool .scw .scw-textarea { min-height: 88px; font-size: 17px; resize: vertical; }
  body.in-tool .scw #scProblem, body.in-tool .scw #medIncident { min-height: 110px; }
  body.in-tool .scw .scw-ages { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  body.in-tool .scw .scw-ages .btn-card { min-height: 0; padding: 7px 12px 7px 8px; gap: 10px; border-radius: 16px; align-items: center; }
  body.in-tool .scw .scw-ages .btn-card::after { display: none; }
  body.in-tool .scw .scw-ages .btn-card-icon { width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-height: 36px; border-radius: 10px; }
  body.in-tool .scw .scw-ages .btn-card-icon img { width: 28px; height: 28px; }
  body.in-tool .scw .scw-ages .btn-card-text { display: flex; align-items: baseline; gap: 2px 8px; flex-wrap: wrap; }
  body.in-tool .scw .scw-ages .btn-card-name { font-size: 17px; white-space: nowrap; }
  body.in-tool .scw .scw-ages .btn-card-desc { font-size: 14px; margin: 0; }
  body.in-tool .scw .scw-chips .btn-chip { height: 44px; padding: 0 16px; font-size: 17px; }
  body.in-tool .scw .sc-other-input { font-size: 17px; }
  body.in-tool .scw-dcreate { margin-top: 16px; }
}

/* Skill Coach loading + result. Loading: the ICF loading card with the thinking figure.
   Result: title + age line, details card, sections as glass cards (.icf-rep-*), editable texts and × / Undo from the
   ICF plan (.icf-plan-*); the skill card is the page's one bold element. Old .sc-result-* classes stay for Mediation. */
#view-skill_loading .container-narrow { max-width: 600px; }
.skl-card .ai-thinker { display: block; width: 104px; height: 104px; margin: 0 auto 4px; }
body.in-tool #view-skill_result .container-narrow { max-width: var(--tools-w); padding: 0; }
.skr-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.skr-meta span { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 2px; }
.skr-meta b { font-size: 17px; color: var(--ink); }
.skr-meta-wide { grid-column: 1 / -1; }
.skr-meta blockquote {
  margin: 4px 0 0 2px; padding: 8px 12px; border-left: 3px solid #52B788; border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, 0.6); font-size: 16px; line-height: 1.5; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.skr-skill .icf-plan-ai { margin-top: 0; }

.skr-action {
  font-size: 21px; line-height: 1.45; font-weight: 600; color: var(--ink);
  padding: 14px 16px; border-radius: 16px; border-left: 5px solid #2D6A4F;
  background: linear-gradient(135deg, rgba(216, 243, 220, 0.95), rgba(183, 228, 199, 0.75));
}
.skr-sub { font-size: 16px; font-weight: 700; color: var(--ink); margin: 16px 0 3px; }
.skr-p { font-size: 17px; line-height: 1.55; color: var(--ink); }
.skr-after { margin-top: 4px; }
.skr-list { list-style: none; margin: 0; padding: 0; }
.skr-list > li:last-child > .icf-plan-item, .skr-list > li:last-child > .icf-plan-undo { margin-bottom: 0; }
.icf-plan-item.skr-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.skr-step .icf-plan-num { width: 34px; }
.skr-step-body { min-width: 0; }
.skr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.skr-tag { display: inline-block; font-size: 14px; font-weight: 600; color: var(--primary); background: rgba(82, 183, 136, 0.16); border-radius: 12px; padding: 3px 10px; }
.skr-quote {
  margin-top: 8px; padding: 8px 12px; border-left: 3px solid #52B788; border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, 0.6); font-size: 16px; line-height: 1.5; color: var(--ink);
}
.skr-two { display: grid; }
/* fixed guidance (yellow = not the AI's draft), small labels, two columns, benefit lists, praise steps */
.skr-note { background: #FFF6D8; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; font-size: 16px; line-height: 1.45; color: #1b3a2a; }
.skr-note b { display: block; margin-bottom: 2px; }
.skr-note-after { margin: 12px 0 0; }
.skr-lbl { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 4px; }
.skr-note + .skr-lbl { margin-top: 4px; }
.skr-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
.skr-ben-list { list-style: none; margin: 0; padding: 0; }
.skr-ben-list > li { margin: 0 0 6px; }
.skr-ben { display: flex; align-items: flex-start; gap: 8px; }
.skr-ben::before { content: ''; flex: 0 0 7px; height: 7px; border-radius: 50%; background: #2D6A4F; margin-top: 11px; }
.skr-ben-t { flex: 1; min-width: 0; font-size: 17px; line-height: 1.45; color: var(--ink); }
.skr-ben .icf-plan-x { position: static; flex: 0 0 32px; margin-top: -3px; }
.skr-ben-list .icf-plan-undo { margin: 0; }
.skr-conf { border-top: 1px solid rgba(45, 106, 79, 0.15); margin-top: 14px; padding-top: 14px; }
.skr-praise { list-style: none; margin: 0 0 4px; padding: 0; }
.skr-praise > li { display: flex; gap: 10px; margin: 0 0 10px; }
.skr-pn { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #2D6A4F; color: #fff; font-weight: 700; font-size: 14px;
  display: grid; place-items: center; margin-top: 2px; }
.skr-praise small { display: block; color: var(--ink-soft); font-size: 14px; }
.skr-praise > li > div { flex: 1; min-width: 0; }
.skr-section .icf-rep-card { margin-bottom: 0; }
.skr-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.skr-actions .icf-plan-pdf { margin: 0; }
.skr-new {
  min-height: 52px; border-radius: 26px; cursor: pointer; font-family: inherit; font-size: 18px; font-weight: 700;
  color: var(--primary); background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 4px 12px rgba(27, 67, 50, 0.08);
}
.skr-new:hover { background: rgba(255, 255, 255, 0.9); }
.skr-new:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
#skillResultContent [contenteditable] { border-radius: 6px; outline: none; cursor: text; }
#skillResultContent [contenteditable]:hover { box-shadow: 0 0 0 2px rgba(82, 183, 136, 0.25); }
#skillResultContent [contenteditable]:focus { background: #fff; box-shadow: 0 0 0 2px var(--primary); }
#skillResultContent:focus { outline: none; }
/* Create failed (form): the message at the button */
.scw-create-error {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(198, 40, 40, 0.07);
  border: 1px solid rgba(198, 40, 40, 0.3); font-size: 16px; line-height: 1.45; color: #7F1D1D;
}
.scw-create-error[hidden] { display: none; }
.scw-sumstep .scw-create-error { margin: 0 0 10px; }
@media (min-width: 900px) {
  .skr-two { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .skr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .skr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
  .skr-grid > li > .icf-plan-item, .skr-grid > li > .icf-plan-undo { margin-bottom: 0; }
  .skr-actions { flex-direction: row; }
  .skr-actions .icf-plan-pdf { flex: 2; }
  .skr-new { flex: 1; min-height: 58px; border-radius: 29px; }
}

/* Mediation result. The Skill Coach page structure (.skr-*) with one difference: a mediation
   phase carries a goal, actions, ready-made questions and a tip, so each phase is its own glass card with a green
   header band (number, name, ×) instead of a white tile inside one card. The gap needs to beat
   ".skr-section .icf-rep-card { margin-bottom: 0 }", hence the extra class in the selector. */
body.in-tool #view-mediation_result .container-narrow { max-width: var(--tools-w); padding: 0; }
.skr-section .icf-rep-card.mdr-pcard { margin-bottom: 20px; padding-top: 0; }
.skr-section .icf-rep-card.mdr-pcard:last-child { margin-bottom: 0; }
.mdr-phead {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 0 -20px 16px; padding: 16px 56px 16px 20px;
  border-bottom: 1px solid rgba(45, 106, 79, 0.14); background: rgba(216, 243, 220, 0.45); border-radius: 24px 24px 0 0;
}
.mdr-phead .icf-plan-num { flex: 0 0 36px; height: 36px; font-size: 18px; }
.mdr-pname { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.mdr-phead .icf-plan-x { top: 50%; right: 12px; transform: translateY(-50%); }
.mdr-goal { font-size: 17px; line-height: 1.5; color: var(--ink); }
.mdr-lbl { font-size: 16px; font-weight: 700; color: var(--ink); margin: 18px 0 6px; }
.mdr-act { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 17px; line-height: 1.5; color: var(--ink); margin: 8px 0 0; }
.mdr-act > i { color: var(--primary); font-weight: 700; font-style: normal; }
.mdr-q {
  margin-top: 8px; padding: 10px 14px; border-left: 3px solid #52B788; border-radius: 0 12px 12px 0;
  background: rgba(82, 183, 136, 0.12); font-size: 17px; line-height: 1.5; color: var(--ink);
}
.mdr-tip {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 18px;
  padding: 12px 14px; border-radius: 14px; background: rgba(255, 248, 225, 0.9); font-size: 16px; line-height: 1.5;
}
.mdr-tip img { width: 20px; height: 20px; margin-top: 1px; }
/* Things to note: the same tile as elsewhere, amber so a "mediation is not enough" note is not missed */
.mdr-note { border-left: 4px solid #D97706; }
.mdr-note .icf-plan-d { margin-top: 0; color: #7C4A02; }
#medResultContent [contenteditable] { border-radius: 6px; outline: none; cursor: text; }
#medResultContent [contenteditable]:hover { box-shadow: 0 0 0 2px rgba(82, 183, 136, 0.25); }
#medResultContent [contenteditable]:focus { background: #fff; box-shadow: 0 0 0 2px var(--primary); }
#medResultContent:focus { outline: none; }

/* Transitions form. The wizard of the other tools, plus the transition type as rows that
   open: phones show one explanation at a time (the ▾ / ▴ of the report's area sections, .icf-plan-area), desktop shows
   all three, because the choice is easier to make side by side. The rows carry no icon, so the phone rule
   "body.in-tool .tool-choices .btn-card { min-height: 96px }" (sized for a 64px icon) is overridden here, and the
   divider that starts at 92px is moved to the text edge. The rows read as one block: only the outer corners round. */
body.in-tool .scw .scw-ages.trw-acc .btn-card {
  min-height: 0; padding: 14px 46px 14px 16px; align-items: flex-start; border-radius: 0;
}
body.in-tool .scw .scw-ages.trw-acc .btn-card:first-child { border-radius: 16px 16px 0 0; }
body.in-tool .scw .scw-ages.trw-acc .btn-card:last-child { border-radius: 0 0 16px 16px; }
body.in-tool .scw .scw-ages.trw-acc .btn-card + .btn-card::before { left: 16px; }
body.in-tool .scw .scw-ages.trw-acc .btn-card-desc { white-space: normal; margin-top: 4px; font-size: 16px; line-height: 1.45; }
body.in-tool .scw .scw-ages.trw-acc .btn-card::after {
  content: "▾"; position: absolute; right: 16px; top: 13px; width: auto; height: auto; border: 0;
  transform: none; opacity: 1; color: var(--primary); font-size: 18px; line-height: 1.2;
}
body.in-tool .scw .scw-ages.trw-acc .btn-card.is-open::after { content: "▴"; }
.trw-sub { font-weight: 400; font-size: 15px; color: var(--ink-soft); }
.trw-tick { color: var(--primary); font-weight: 700; margin-right: 6px; display: none; }
.trw-acc .btn-card.selected .trw-tick { display: inline; }
@media (max-width: 899px) {
  /* one row open at a time */
  body.in-tool .scw .scw-ages.trw-acc .btn-card:not(.is-open) .btn-card-desc { display: none; }
}
@media (min-width: 900px) {
  /* desktop: every explanation open, no marker */
  body.in-tool .scw .scw-ages.trw-acc .btn-card { padding: 12px 14px; align-items: flex-start; border-radius: 0; }
  body.in-tool .scw .scw-ages.trw-acc .btn-card::after { display: none; }
  body.in-tool .scw .scw-ages.trw-acc .btn-card-desc { font-size: 15px; }
}

/* Transitions plan. The result layout of the other tools (.skr-*): title + age line,
   details card, sections as glass cards. A phase (before / during / after) is its own card with a green header band,
   and the strategies are white tiles inside it — name, how, and the words to say as a quote. */
body.in-tool #view-trans_plan .container-narrow { max-width: var(--tools-w); padding: 0; }
.skr-section .icf-rep-card.trp-pcard { margin-bottom: 20px; padding-top: 0; }
.skr-section .icf-rep-card.trp-pcard:last-child { margin-bottom: 0; }
.trp-phead {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 0 -20px 16px; padding: 16px 20px;
  border-bottom: 1px solid rgba(45, 106, 79, 0.14); background: rgba(216, 243, 220, 0.45); border-radius: 24px 24px 0 0;
}
.trp-phead .icf-plan-num { flex: 0 0 36px; height: 36px; font-size: 18px; }
.trp-pname { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.trp-say {
  margin: 8px 0 0; padding: 10px 14px; border-left: 3px solid #52B788; border-radius: 0 12px 12px 0;
  background: rgba(82, 183, 136, 0.12); font-size: 17px; line-height: 1.5; color: var(--ink); font-style: italic;
}
#transPlanContent [contenteditable] { border-radius: 6px; outline: none; cursor: text; }
#transPlanContent [contenteditable]:hover { box-shadow: 0 0 0 2px rgba(82, 183, 136, 0.25); }
#transPlanContent [contenteditable]:focus { background: #fff; box-shadow: 0 0 0 2px var(--primary); }
#transPlanContent:focus { outline: none; }

/* Settings inside the tool shell. The page gets the same green glass background, header and
   glass cards as the tools; the cards keep their own inner layout. Signing out is the visible action and deleting the
   account sits behind a quiet line that has to be opened first — nobody should hit it while reaching for Sign out. */
body.in-tool #view-settings .container-narrow { max-width: var(--tools-w); padding: 0; }
body.in-tool .settings-section-title { color: var(--ink); letter-spacing: .04em; }
body.in-tool .settings-card {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 24px;
  padding: 18px 20px 20px; color: var(--ink);
}
body.in-tool .settings-info-row { border-color: rgba(45, 106, 79, 0.12); }
body.in-tool .settings-usage-note, body.in-tool .settings-support-text { color: var(--ink-soft); font-size: 16px; }
.settings-user { font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; }
.settings-logout { width: 100%; min-height: 52px; border-radius: 26px; }
.settings-danger { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(45, 106, 79, 0.12); }
.settings-danger-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 0; background: none; border: 0;
  font: inherit; font-size: 15px; color: var(--ink-soft); cursor: pointer; text-align: left;
}
.settings-danger-toggle::after {
  content: "▾"; margin-left: auto; color: var(--ink-soft); font-size: 16px;
}
.settings-danger-toggle.is-open::after { content: "▴"; }
.settings-danger-toggle:hover { color: var(--ink); }
.settings-danger-box[hidden] { display: none; }
.settings-danger-text { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 6px 0 10px; }
.settings-danger-btn { width: 100%; color: #C62828; border-color: rgba(198, 40, 40, 0.5); }

/* Bottom tab bar on the three destinations. The bar itself is app level now; showView adds
   body.has-tabbar on the landing page, Learn's theme list and the settings page, and hides the bar everywhere else.
   Where the bar shows, the page keeps room for it and the guide button rises above it. */
.app-tabbar[hidden] { display: none; }
@media (max-width: 899px) {
  body.has-tabbar .view.active { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .tg-help { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}

/* Learn inside the tool shell. Learn used to live outside the shell on a beige background;
   now it gets the same green glass page and header as the tools. The theme cards are .btn-card buttons, so the glass
   look comes for free — but they carry their own round arrow (start / continue / see the results), so the shell's
   shared ">" chevron is switched off on them to avoid two arrows on the same row. */
body.in-tool #view-quiz_themes .container-narrow,
body.in-tool #view-quiz_run .container-narrow,
body.in-tool #view-quiz_summary .container-narrow { max-width: var(--tools-w); padding: 0; }
body.in-tool .quiz-theme-card::after { display: none; }
body.in-tool .quiz-theme-list { margin-top: 14px; }
body.in-tool .quiz-source-note { color: var(--ink-soft); }
@media (max-width: 899px) {
  body.in-tool .quiz-theme-card { padding: 14px 16px; min-height: 0; }
  body.in-tool .quiz-theme-card + .quiz-theme-card::before { display: none; }
}

/* Learn: the quiz view inside the shell. The question card becomes a glass card, the head
   becomes the same progress row as the wizard forms (theme name, "Question 3 / 28", bar) and the options become the
   card-style choices used elsewhere. The Why block, the figures and the sources keep their own content styling. */
body.in-tool .quiz-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; margin: 18px 0 0;
}
body.in-tool .quiz-theme-name { font-size: 17px; font-weight: 700; color: var(--ink); }
body.in-tool .quiz-counter { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-soft); text-align: right; }
body.in-tool .quiz-progressbar {
  grid-column: 1 / -1; height: 8px; margin-top: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.65);
}
body.in-tool .quiz-progressbar-fill { background: var(--green-grad); }
body.in-tool .quiz-card {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 24px;
  padding: 20px; margin-top: 14px; color: var(--ink);
}
body.in-tool .quiz-article { font-size: 15px; color: var(--ink-soft); }
body.in-tool .quiz-question { font-size: 22px; line-height: 1.4; color: var(--ink); }
body.in-tool .quiz-option {
  background: rgba(255, 255, 255, 0.85); border: 1.5px solid rgba(45, 106, 79, 0.18); border-radius: 14px;
  padding: 13px 16px; font-size: 17px; color: var(--ink); box-shadow: 0 2px 8px rgba(27, 67, 50, 0.06);
}
body.in-tool .quiz-option:hover:not(:disabled) { border-color: var(--primary); background: #fff; }
body.in-tool .quiz-option.correct { border-color: var(--primary); background: rgba(82, 183, 136, 0.18); }
body.in-tool .quiz-option.wrong { border-color: var(--accent); background: rgba(214, 40, 40, 0.10); }
body.in-tool .quiz-verdict { font-size: 17px; }
/* Verdict (approved): centred box; Correct gets a badge, a larger title and a short confetti burst */
body.in-tool .quiz-verdict { scroll-margin-bottom: 24px; }
@media (max-width: 899px) { body.in-tool .quiz-verdict { scroll-margin-bottom: 100px; } }   /* above the floating ? button */
body.in-tool .quiz-verdict.ok,
body.in-tool .quiz-verdict.no {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  margin: 18px 0 4px; border-radius: 20px; font-size: 17px;
}
body.in-tool .quiz-verdict.ok {
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, rgba(216, 243, 220, 0.95), rgba(216, 243, 220, 0.6));
  border: 1.5px solid rgba(64, 145, 108, 0.35);
}
body.in-tool .quiz-verdict.no {
  padding: 14px 16px 15px;
  background: rgba(253, 222, 222, 0.5);
  border: 1.5px solid rgba(214, 40, 40, 0.2);
  animation: qvFade 0.25s ease both;
}
.qv-badge {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #52B788, #2D6A4F);
  box-shadow: 0 6px 16px rgba(45, 106, 79, 0.35);
  display: flex; align-items: center; justify-content: center;
  animation: qvPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.qv-badge svg { width: 30px; height: 30px; }
.qv-badge::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(82, 183, 136, 0.55);
  animation: qvRing 0.8s ease-out 0.1s both;
}
.quiz-verdict.ok .qv-title { font-size: 28px; font-weight: 700; color: #1f5139; margin-top: 10px; line-height: 1.2; animation: qvRise 0.36s ease 0.14s both; }
.quiz-verdict.no .qv-title { font-size: 22px; font-weight: 700; color: #a61e1e; line-height: 1.25; }
.quiz-verdict .qv-sub { font-size: 17px; color: var(--ink-soft); margin-top: 2px; font-weight: 400; }
.quiz-verdict.ok .qv-sub { margin-top: 6px; }
.qv-burst { position: absolute; left: 50%; top: 46px; width: 0; height: 0; pointer-events: none; z-index: 2; }
.qv-burst span {
  position: absolute; left: 0; top: 0; width: 7px; height: 11px; border-radius: 2px; background: var(--c);
  opacity: 0; animation: qvPiece 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.08s both;
}
.qv-burst span.dot { width: 7px; height: 7px; border-radius: 50%; }
@keyframes qvPop { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes qvRing { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes qvRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes qvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qvPiece {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(0.6); }
  55%  { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.1), calc(-50% + var(--dy) + 34px)) rotate(calc(var(--r) * 1.4)) scale(0.9); }
}
/* A reopened, already answered question: no celebration again */
.quiz-verdict.qv-static, .quiz-verdict.qv-static *, .quiz-verdict.qv-static .qv-badge::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .qv-burst { display: none; }
  .qv-badge, .qv-badge::after, .quiz-verdict.ok .qv-title, body.in-tool .quiz-verdict.no { animation: none; }
}
body.in-tool .quiz-why { border-top-color: rgba(45, 106, 79, 0.14); }
body.in-tool .quiz-actions .btn-primary { min-height: 52px; border-radius: 26px; padding: 0 28px; font-size: 18px; }
body.in-tool .quiz-report-btn { border-radius: 20px; }

/* Learn: the summary inside the shell. The result pages' structure: the theme name and the
   score in a glass card, the per-article results as white tiles with their own bar, the earlier rounds in their own
   card, and the two actions side by side at the bottom like the other result pages. js/quiz.js is untouched. */
body.in-tool #view-quiz_summary .quiz-theme-name {
  font-size: 15px; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px;
}
body.in-tool #view-quiz_summary .quiz-score,
body.in-tool #view-quiz_summary .quiz-pass,
body.in-tool #view-quiz_summary .quiz-theme-name { grid-column: 1 / -1; }
body.in-tool #view-quiz_summary .quiz-scorecard {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 24px;
  padding: 18px 20px 20px; margin: 16px 0 0;
}
body.in-tool #view-quiz_summary .quiz-score { font-size: 30px; margin: 4px 0 8px; color: var(--ink); }
body.in-tool #view-quiz_summary .quiz-pass { font-size: 17px; margin: 0; }
body.in-tool #view-quiz_summary .quiz-pass.ok { color: var(--primary); }
body.in-tool .quiz-sub { font-size: 20px; font-weight: 700; color: var(--ink); margin: 22px 0 10px; }
body.in-tool #quizSummaryArticles {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 24px; padding: 14px 16px;
}
body.in-tool .quiz-summary-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
  background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 8px; border-bottom: 0;
}
body.in-tool .quiz-summary-row:last-child { margin-bottom: 0; }
body.in-tool .quiz-summary-title { font-size: 17px; font-weight: 700; color: var(--ink); }
body.in-tool .quiz-summary-num { font-size: 15px; font-weight: 700; color: var(--ink-soft); text-align: right; }
body.in-tool .quiz-summary-row .quiz-progressbar {
  grid-column: 1 / -1; height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(45, 106, 79, 0.10);
}
body.in-tool #quizSummaryRounds {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 24px; padding: 4px 18px 16px;
  margin-top: 16px;
}
body.in-tool .quiz-round-line { font-size: 16px; color: var(--ink); padding: 6px 0; border-top: 1px solid rgba(45, 106, 79, 0.10); }
body.in-tool #view-quiz_summary .quiz-actions { display: flex; gap: 12px; margin-top: 18px; }
body.in-tool #view-quiz_summary .quiz-actions .btn { flex: 1; min-height: 56px; border-radius: 28px; font-size: 18px; }
@media (max-width: 899px) {
  body.in-tool #view-quiz_summary .quiz-actions { flex-direction: column; }
}

/* Skills Passport form. The wizard of the other tools, but a step is a whole section, not a
   single question: the passport is filled in with the child and the topic should stay together. No summary step — the
   passport is fifteen free texts, so the summary would be as long as the form; the last section downloads the PDF. */
.ppw-field { margin-top: 14px; }
.ppw-lbl { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink); margin: 0 0 6px; }
body.in-tool .scw .ppw-field .scw-textarea { min-height: 76px; }
body.in-tool .scw .ppw-drop {
  min-height: 110px; margin-top: 10px; border: 2px dashed rgba(45, 106, 79, 0.35); border-radius: 16px;
  background: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; padding: 12px;
}
body.in-tool .scw .ppw-drop .pp-image-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 16px; color: var(--ink-soft); text-align: center; }
body.in-tool .scw .ppw-drop .pp-image-placeholder .icon { width: 40px; height: 40px; }
.ppw-drophint { margin-top: 8px; }
.pp-drop-phone { display: none; }
@media (max-width: 899px) {
  /* a phone cannot drag a file onto the box, so the wording is "upload" there */
  .pp-drop-desktop { display: none; }
  .pp-drop-phone { display: inline; }
}

.ppw-closing { margin-top: 12px; }
@media (min-width: 900px) {
  .ppw-field { margin-top: 12px; }
  body.in-tool .scw .ppw-field .scw-textarea { min-height: 68px; }
}

/* Stepper tasks + steps. Tasks: numbered rows that grow with the text. Steps: a card per
   task (phones one at a time, .is-current), each step a row with the number and the move triangles on the left, the
   text in the middle, the duration control (− value +) below (beside on desktop) and × in the corner. The Dictate
   button dictation.js adds is shown as a mic circle only in the step being edited. */
body.in-tool #view-bd_tasks .container-narrow, body.in-tool #view-bd_steps .container-narrow { max-width: var(--tools-w); padding: 0; }
.bdw-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bdw-task { display: grid; grid-template-columns: 30px minmax(0, 1fr) 40px; gap: 10px; align-items: center; }
.bdw-task .icf-plan-n { align-self: start; margin-top: 8px; }
.bdw-taskin {
  width: 100%; box-sizing: border-box; min-height: 50px; padding: 11px 12px; border-radius: 14px; resize: none; overflow: hidden;
  border: 1px solid rgba(45, 106, 79, 0.22); background: rgba(255, 255, 255, 0.85);
  font-family: inherit; font-size: 18px; line-height: 1.35; color: var(--ink);
}
.bdw-taskin:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.25); }
.bdw-task .icf-plan-x, .bdw-taskx { position: static; width: 40px; height: 40px; }
.bdw-add {
  width: 100%; min-height: 50px; margin-top: 10px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed rgba(45, 106, 79, 0.4); background: rgba(255, 255, 255, 0.45);
  font-family: inherit; font-size: 17px; font-weight: 600; color: var(--primary);
}
.bdw-add:hover { background: rgba(255, 255, 255, 0.75); }
.bdw-add:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 2px; }
#view-bd_steps .bdw-progress { margin: 14px 0; }
.bdw-tcard { margin-bottom: 14px; }
.bdw-taskhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.bdw-tname { font-size: 24px; line-height: 1.2; margin: 0; color: var(--ink); border-radius: 6px; }
.bdw-tname:hover { box-shadow: 0 0 0 2px rgba(82, 183, 136, 0.25); }
.bdw-tname:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px var(--primary); }
.bdw-total { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--primary); background: rgba(82, 183, 136, 0.18); border-radius: 14px; padding: 4px 12px; white-space: nowrap; }
.bdw-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bdw-step {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 10px; padding: 10px 44px 10px 10px;
  border-radius: 16px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.95);
}
.bdw-step.is-moved { background: rgba(216, 243, 220, 0.95); transition: background 600ms ease-out; }
.bdw-left { grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bdw-num {
  width: 34px; height: 34px; margin: 4px 0 2px; border-radius: 50%; background: var(--green-grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
}
.bdw-arrow { width: 44px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bdw-arrow img { width: 26px; height: 26px; object-fit: contain; }
.bdw-arrow[disabled] { opacity: 0.25; cursor: default; }
.bdw-arrow:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: 0; border-radius: 10px; }
.bdw-text {
  width: 100%; box-sizing: border-box; resize: none; overflow: hidden; border: 1px solid transparent; border-radius: 10px;
  background: transparent; padding: 5px 8px; font-family: inherit; font-size: 18px; line-height: 1.4; color: var(--ink);
}
.bdw-text:focus { outline: none; background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.25); }
.bdw-tools { grid-column: 2; display: flex; align-items: center; gap: 10px; }
.bdw-time { display: inline-flex; align-items: center; margin-left: auto; border: 1px solid rgba(45, 106, 79, 0.25); border-radius: 22px; background: rgba(255, 255, 255, 0.9); overflow: hidden; }
.bdw-time button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 20px; font-weight: 700; color: var(--primary); }
.bdw-time button:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: -3px; }
.bdw-timev, .bdw-timein {
  min-width: 76px; padding: 0 4px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center;
  border-left: 1px solid rgba(45, 106, 79, 0.18); border-right: 1px solid rgba(45, 106, 79, 0.18);
  font-family: inherit; font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; cursor: text;
}
.bdw-timein { border-top: 0; border-bottom: 0; background: #fff; text-align: center; width: 76px; }
.bdw-timev:focus-visible { outline: 3px solid rgba(45, 106, 79, 0.45); outline-offset: -3px; }
/* the Dictate button appears only in the step being edited, as a mic circle */
.bdw-step .dict-foot { grid-column: 2; margin: 0; justify-content: flex-start; }
.bdw-step:not(:focus-within) .dict-foot { display: none; }
.bdw-step .dict-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
.bdw-step .dict-btn .dict-label { display: none; }
.bdw-undo { list-style: none; }
.bdw-undo .icf-plan-undo { margin: 0; }
@media (max-width: 899px) {
  body.in-tool #view-bd_tasks.active, body.in-tool #view-bd_steps.active,
  body.tg-help-on #view-bd_tasks.active, body.tg-help-on #view-bd_steps.active { padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(#view-bd_tasks.active) .tg-help, body:has(#view-bd_steps.active) .tg-help { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  #view-bd_steps .bdw-tcard { display: none; }
  #view-bd_steps .bdw-tcard.is-current { display: block; }
  #view-bd_tasks .scw-dcreate, #view-bd_steps .scw-dcreate { display: none; }
}
@media (min-width: 900px) {
  #view-bd_tasks .scw-nav, #view-bd_steps .scw-nav, #view-bd_steps .bdw-progress { display: none !important; }
  .bdw-taskin { font-size: 17px; }
  .bdw-tname { font-size: 21px; }
  .bdw-step { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 8px 60px 8px 10px; }
  .bdw-step > .icf-plan-x { right: 10px; }
  .bdw-left { grid-row: 1; flex-direction: row; gap: 4px; }
  .bdw-num { margin: 0 2px 0 0; }
  .bdw-text { grid-row: 1; font-size: 17px; }
  .bdw-tools { grid-column: 3; grid-row: 1; }
  .bdw-time { margin-left: 10px; }
  .bdw-step .dict-foot { grid-row: 2; grid-column: 2; }
}

/* Stepper finished instruction: the Skill Coach result layout — title + age line, details
   card, a card per task (two columns on desktop), read-only steps with their durations. */
body.in-tool #view-bd_final .container-narrow { max-width: var(--tools-w); padding: 0; }
.bdw-meta3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bdw-fcards { display: grid; gap: 14px; margin-top: 18px; }
.bdw-fcard { margin: 0; }
.bdw-fsteps { list-style: none; margin: 0; padding: 0; }
.bdw-fstep {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid rgba(45, 106, 79, 0.1); font-size: 17px; line-height: 1.45; color: var(--ink);
}
.bdw-fstep:first-child { border-top: 0; }
.bdw-fstep .icf-plan-n { align-self: start; }
.bdw-ftime { font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 899px) { .bdw-meta3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .bdw-fcards { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Phone keyboard open (js/phone_keyboard.js): a .kb-follow bar sits on the keyboard (top set by the
   script), a little lower; the floating ? button waits until the keyboard closes; the page gets the keyboard height
   as extra bottom room so the lowest field can scroll above the bar. */
@media (max-width: 899px) {
  html.kb-open .kb-follow { padding-top: 8px; padding-bottom: 8px; }
  html.kb-open .kb-follow button { min-height: 48px; }
  html.kb-open .tg-help { display: none !important; }
  html.kb-open body.in-tool .view.active:is(#view-skill_calc, #view-icf_conversation) {
    padding-bottom: calc(var(--kb-h, 0px) + 180px) !important;
  }
}

/* Assessment: area choice (assess_select). Areas first, then "All areas at once";
   the Pro badge sits on the lower edge of the full assessment's icon tile. */
#view-assess_select .container-narrow { max-width: var(--tools-w); }
#view-assess_select .btn-card-icon { position: relative; overflow: visible; }

/* ═══════════════════════════════════════════════════
   TOOL GUIDES (js/guide.js) —
   First-open guide: bottom sheet on phones, centred dialog from 900px.
   Floating ? button (bottom left) inside tools reopens it.
   ═══════════════════════════════════════════════════ */
body.tg-open { overflow: hidden; }
.tg-backdrop {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 40, 28, 0.40);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.22s ease;
}
.tg-backdrop.is-in { opacity: 1; }
.tg-backdrop.is-out { opacity: 0; }
.tg-sheet {
  position: relative; width: 100%; max-height: 94vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 22px;
  border-radius: 30px 30px 0 0;
  background-color: rgba(255, 255, 255, 0.90);
  background-image:
    radial-gradient(circle 260px at 0% 0%, rgba(149, 213, 178, 0.45), rgba(149, 213, 178, 0) 70%),
    radial-gradient(circle 240px at 100% 6%, rgba(199, 232, 148, 0.35), rgba(199, 232, 148, 0) 70%);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 -12px 40px rgba(15, 40, 28, 0.25);
  color: #132b21; text-align: left; outline: none;
  transform: translateY(100%); transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tg-backdrop.is-in .tg-sheet { transform: translateY(0); }
.tg-backdrop.is-out .tg-sheet { transform: translateY(100%); }
.tg-sheet.is-dragging { transition: none; }
.tg-grab { padding-top: 12px; touch-action: none; cursor: grab; }
.tg-grip { width: 44px; height: 5px; border-radius: 3px; background: rgba(45, 106, 79, 0.25); margin: 0 auto 12px; }
.tg-close {
  position: absolute; top: 28px; right: 16px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(27, 67, 50, 0.10); color: #3a4c43;
}
.tg-close svg { width: 20px; height: 20px; }
.tg-head { display: flex; align-items: center; gap: 14px; margin: 4px 52px 16px 0; }
.tg-icon {
  width: 62px; height: 62px; min-width: 62px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(216, 243, 220, 0.95));
  border: 1px solid #fff; box-shadow: 0 4px 12px rgba(45, 106, 79, 0.15);
}
.tg-icon img { width: 40px; height: 40px; object-fit: contain; }
.tg-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--primary); }
.tg-title { font-size: 26px; font-weight: 700; line-height: 1.15; color: #132b21; margin: 0; }
.tg-lead { font-size: 22px; font-weight: 700; line-height: 1.3; color: #1f5139; margin: 0 0 6px; }
.tg-text { font-size: 18px; line-height: 1.5; color: #3a4c43; margin: 0 0 16px; }

.tg-steps, .tg-points { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.tg-steps { counter-reset: tg; }
.tg-steps li, .tg-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 17.5px; line-height: 1.45; color: #22362c; }
.tg-steps li { counter-increment: tg; }
.tg-steps li::before {
  content: counter(tg); flex: 0 0 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #52B788, #2D6A4F); color: #fff; font-size: 16px; font-weight: 700;
}
.tg-pico {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(82, 183, 136, 0.20); color: var(--primary);
}
.tg-pico svg { width: 18px; height: 18px; }

.tg-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px;
  border-radius: 16px; font-size: 16.5px; line-height: 1.45;
  background: rgba(232, 168, 56, 0.14); border: 1px solid rgba(232, 168, 56, 0.40); color: #4a3a14;
}
.tg-note svg { flex: 0 0 22px; width: 22px; height: 22px; color: #b7791f; margin-top: 1px; }
.tg-note b { color: #5c440a; }

.tg-next { margin: 0 0 16px; font-size: 16.5px; color: #3a4c43; }
.tg-next-title { font-weight: 700; color: #1f5139; margin-bottom: 6px; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-chip {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(45, 106, 79, 0.18);
  font-size: 15px; font-weight: 600; color: #1f5139;
}

.tg-compare { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.tg-cmp { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font-size: 17.5px; line-height: 1.4; }
.tg-cmp svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; }
.tg-cmp-no { background: rgba(214, 40, 40, 0.07); color: #6d5252; }
.tg-cmp-no span { text-decoration: line-through; text-decoration-color: rgba(214, 40, 40, 0.5); }
.tg-cmp-no svg { color: #c0392b; }
.tg-cmp-yes { background: rgba(82, 183, 136, 0.16); color: #173d2b; font-weight: 600; }
.tg-cmp-yes svg { color: var(--primary); }

.tg-emoji {
  display: flex; justify-content: center; gap: 20px; margin: 0 0 16px; padding: 10px 12px;   /* three faces, centred */
  border-radius: 18px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.95);
}
.tg-emoji img { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; }

.tg-flow { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.tg-flow-task { font-size: 17px; color: #6d5252; }
.tg-flow-task span { text-decoration: line-through; text-decoration-color: rgba(214, 40, 40, 0.5); }
.tg-flow ol { list-style: none; padding: 0; margin: 0; counter-reset: fl; display: flex; flex-wrap: wrap; gap: 6px; }
.tg-flow li {
  counter-increment: fl; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 5px; border-radius: 999px; font-size: 16px; font-weight: 600; color: #1f5139;
  background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(45, 106, 79, 0.18);
}
.tg-flow li::before {
  content: counter(fl); width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
}

.tg-actions {
  position: sticky; bottom: 0; margin: 0 -22px; padding: 4px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92) 18px);
}
.tg-primary {
  width: 100%; height: 58px; border-radius: 29px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 19px; font-weight: 700; color: #fff;
  background: linear-gradient(145deg, #52B788, #2D6A4F);
  box-shadow: 0 10px 24px rgba(45, 106, 79, 0.35);
}
.tg-primary:hover { box-shadow: 0 12px 28px rgba(45, 106, 79, 0.45); }

@media (min-width: 900px) {
  .tg-backdrop { align-items: center; padding: 24px; }
  .tg-sheet {
    max-width: 600px; max-height: 88vh; border-radius: 30px; padding: 28px 32px 0;
    box-shadow: 0 24px 60px rgba(15, 40, 28, 0.30);
    transform: translateY(16px) scale(0.98); opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }
  .tg-backdrop.is-in .tg-sheet { transform: none; opacity: 1; }
  .tg-backdrop.is-out .tg-sheet { transform: translateY(16px) scale(0.98); opacity: 0; }
  .tg-grab { padding-top: 0; touch-action: auto; cursor: default; }
  .tg-grip { display: none; }
  .tg-close { top: 22px; right: 22px; }
  .tg-actions { margin: 0 -32px; padding: 4px 32px 30px; }
}

/* Floating help button */
.tg-help {
  position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 150;
  width: 58px; height: 58px; border-radius: 50%; padding: 2px 0 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 36px; font-weight: 700; line-height: 1; color: #fff;
  background: linear-gradient(145deg, #52B788, #2D6A4F);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px rgba(45, 106, 79, 0.35);
  animation: tgBreath 2.8s ease-in-out infinite;
}
.tg-help[hidden] { display: none; }
.tg-help::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 3px solid rgba(82, 183, 136, 0.7);
  animation: tgRing 2.8s ease-out infinite; pointer-events: none;
}
@keyframes tgBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes tgRing { 0% { transform: scale(1); opacity: 0.75; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
/* keep the last lines of a tool clear of the button */
body.tg-help-on .view.active { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }

/* Touch screens: the sticky-hover rule near the top (*:hover { transition: none }) would cancel the
   slide and fade under the finger that opened the guide, so give them back here. */
@media (hover: none) {
  .tg-backdrop:hover { transition: opacity 0.22s ease !important; }
  .tg-backdrop .tg-sheet:hover { transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
}
@media (hover: none) and (min-width: 900px) {
  .tg-backdrop .tg-sheet:hover { transition: transform 0.22s ease, opacity 0.22s ease !important; }
}
@media (hover: none) {
  .tg-backdrop .tg-sheet.is-dragging:hover { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-help, .tg-help::after { animation: none; }
  .tg-backdrop, .tg-backdrop:hover, .tg-sheet, .tg-backdrop .tg-sheet:hover { transition: none !important; }
}
@media print { .tg-help, .tg-backdrop { display: none !important; } }

/* ═══════════════════════════════════════════════════
   PURCHASE SECTION + CHECKOUT POPUP (public landing)
   docs/maksut-ja-krediitit.md. Dark green band, offer card on the right, large text for an older audience
   (smallest text 16 px). Replaces the old placeholder pricing cards (the .pl-price* rules above are now unused).
   ═══════════════════════════════════════════════════ */
.pl-offer { position: relative; overflow: hidden; color: #fff; padding: 104px 24px 112px;
  background: radial-gradient(90% 70% at 88% 4%, rgba(116, 198, 157, 0.35) 0%, rgba(116, 198, 157, 0) 60%),
              radial-gradient(70% 60% at 0% 100%, rgba(10, 30, 20, 0.55) 0%, rgba(10, 30, 20, 0) 70%),
              linear-gradient(160deg, #1d4a34 0%, #1f5139 45%, #143a28 100%); }
.pl-offer-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.08fr; column-gap: 56px;
  grid-template-areas: ". card" "head card" "checks card" "trust card" ". card"; grid-template-rows: 1fr auto auto auto 1fr; align-items: start; }
.pl-offer-head { grid-area: head; }
.pl-offer-checks { grid-area: checks; }
.pl-offer-trust { grid-area: trust; }
.pl-offer-card { grid-area: card; }
.pl-offer-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.16); color: #cdeedb; font-weight: 600; font-size: 18px; }
.pl-offer-pill svg { width: 20px; height: 20px; color: #95D5B2; }
.pl-offer-title { font-size: 3.4rem; line-height: 1.06; font-weight: 700; margin: 20px 0 16px; color: #fff; letter-spacing: -0.01em; text-wrap: balance; }
.pl-offer-title-hl { display: block; color: #FFD166; }
.pl-offer-lead { font-size: 1.35rem; line-height: 1.55; color: rgba(255, 255, 255, 0.9); margin: 0 0 26px; max-width: 30em; }
.pl-offer-checks { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 14px; }
.pl-offer-checks li { display: flex; gap: 14px; align-items: center; font-size: 1.28rem; color: #fff; line-height: 1.35; }
.pl-offer-checks .ck { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #74C69D; display: flex; align-items: center; justify-content: center; }
.pl-offer-checks .ck svg { width: 17px; height: 17px; color: #143a28; }
.pl-offer-trust { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px; background: rgba(255, 255, 255, 0.05); }
.pl-offer-trust div { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 16px 12px; font-size: 1.12rem; color: #fff; line-height: 1.3; }
.pl-offer-trust div + div { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.pl-offer-trust svg { flex: none; width: 32px; height: 32px; color: #95D5B2; }

.pl-offer-card { position: relative; border-radius: 26px; padding: 58px 30px 24px; margin-top: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), #1a4633;
  border: 2px solid #95D5B2; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.pl-offer-tab { position: absolute; top: -22px; left: 30px; background: #FFD166; color: #1b3a2a; font-weight: 700; font-size: 19px;
  padding: 9px 18px; border-radius: 12px; display: flex; gap: 8px; align-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.pl-offer-tab svg { width: 18px; height: 18px; }
.pl-offer-seal { position: absolute; top: -44px; right: -34px; width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe7a3, #FFD166 55%, #efb43a); color: #1b3a2a;
  display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(10deg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); font-weight: 800; line-height: 1; }
.pl-offer-seal::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 2px dashed rgba(27, 58, 42, 0.35); }
.pl-offer-seal b { font-size: 31px; }
.pl-offer-seal small { font-size: 16px; letter-spacing: 0.02em; margin-top: 3px; }

/* Cookie consent (js/consent.js): a card at the bottom, Decline and Allow equally prominent */
.consent-bar { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 10050;
  max-width: 760px; margin: 0 auto; background: #fffdf7; color: #1b3a2a; border-radius: 20px; padding: 22px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); font-family: "Source Serif 4", Georgia, serif; }
.consent-bar h2 { font-size: 21px; margin: 0 0 6px; }
.consent-bar p { font-size: 17px; line-height: 1.45; margin: 0 0 16px; }
.consent-bar a { color: #2D6A4F; }
.consent-btns { display: flex; gap: 12px; }
.consent-btn { flex: 1; font: 700 18px "Source Serif 4", Georgia, serif; border-radius: 999px; padding: 13px 16px; cursor: pointer;
  background: #2D6A4F; color: #fff; border: 2px solid #2D6A4F; min-height: 48px; }
.consent-btn:focus-visible { outline: 3px solid #FFD166; outline-offset: 2px; }
@media (max-width: 640px) { .consent-btns { flex-direction: column; } }
/* Campaign band under the hero: the purchase section's green, one centred white heading, nothing else */
.pl-camp { position: relative; overflow: hidden; color: #fff; padding: 52px 24px; text-align: center;
  background: radial-gradient(90% 120% at 90% 0%, rgba(116, 198, 157, 0.32) 0%, rgba(116, 198, 157, 0) 60%),
              linear-gradient(160deg, #1d4a34 0%, #1f5139 45%, #143a28 100%); }
.pl-camp-text { max-width: 1000px; margin: 0 auto; font-size: 46px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em;
  text-wrap: balance; overflow-wrap: anywhere; }
@media (max-width: 640px) { .pl-camp { padding: 40px 20px; } .pl-camp-text { font-size: 32px; } }
.pl-offer-campaign { max-width: 1140px; margin: 0 auto 60px; padding: 24px 36px; border-radius: 24px;
  background: #FFD166; color: #1b3a2a; font-size: 3.4rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em;
  text-align: center; text-wrap: balance; overflow-wrap: anywhere; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); }

.pl-offer-product { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; }
.pl-mock { position: relative; height: 170px; }
.pl-mock-laptop { position: absolute; left: 0; top: 10px; width: 196px; }
.pl-mock-screen { border: 7px solid #0c1c14; border-bottom-width: 9px; border-radius: 10px 10px 2px 2px; background: #0c1c14; overflow: hidden; height: 124px; }
.pl-mock-screen img { width: 100%; height: auto; display: block; }
.pl-mock-base { height: 9px; margin: 0 -14px; background: linear-gradient(180deg, #cfd8d3, #93a39a); border-radius: 0 0 10px 10px; }
.pl-mock-phone { position: absolute; right: 2px; bottom: 0; width: 62px; height: 124px; border: 4px solid #0c1c14; border-radius: 13px;
  background: #0c1c14; overflow: hidden; box-shadow: -6px 8px 18px rgba(0, 0, 0, 0.35); }
.pl-mock-phone img { width: 100%; height: auto; display: block; }
.pl-offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pl-offer-list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.pl-offer-list svg { width: 28px; height: 28px; color: #95D5B2; margin-top: 1px; }
.pl-offer-list b { display: block; font-size: 1.22rem; color: #fff; line-height: 1.3; }
.pl-offer-list small { display: block; font-size: 1.06rem; color: rgba(255, 255, 255, 0.85); line-height: 1.4; margin-top: 2px; }

.pl-offer-divider { height: 1px; background: rgba(255, 255, 255, 0.16); margin: 22px 0 16px; }
.pl-offer-price { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.pl-offer-price .was { font-size: 1.9rem; color: rgba(255, 255, 255, 0.55); text-decoration: line-through; text-decoration-thickness: 2px; }
.pl-offer-price .now { font-size: 4.6rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.02em; }
.pl-offer-price .vat { font-size: 1.1rem; color: rgba(255, 255, 255, 0.85); }
.pl-offer-opts { display: grid; gap: 10px; margin-top: 18px; }
.pl-offer-opt { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.05); color: #fff; font-size: 1.25rem; }
.pl-offer-opt .dot { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; }
.pl-offer-opt.on { border-color: #FFD166; background: rgba(255, 209, 102, 0.12); }
.pl-offer-opt.on .dot { border-color: #FFD166; }
.pl-offer-opt.on .dot::after { content: ''; width: 13px; height: 13px; border-radius: 50%; background: #FFD166; }
.pl-offer-opt .lbl { font-weight: 700; }
.pl-offer-opt .amt { margin-left: auto; font-weight: 700; text-align: right; }
.pl-offer-opt .amt small { display: block; font-weight: 400; font-size: 1.02rem; color: rgba(255, 255, 255, 0.85); }
/* Pay in 3: the full schedule under the option, so the three payments and their
   dates are visible before the buyer clicks — and so nothing reads as a
   subscription that keeps charging. */
.pl-offer-sched {
  margin: 12px 2px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}
.pl-offer-sched-head { display: block; font-size: 1.1rem; margin-bottom: 8px; }
.pl-offer-sched > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.1rem;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pl-offer-sched > div:last-of-type { border-bottom: 0; }
.pl-offer-sched > div span { color: rgba(255, 255, 255, 0.85); }
.pl-offer-sched p { margin: 10px 0 0; font-size: 1.02rem; line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.pl-offer-cta { width: 100%; margin-top: 18px; min-height: 70px; border: 0; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, #ffe39a 0%, #FFD166 55%, #f3bd45 100%); color: #173826; font: inherit; font-size: 1.75rem; font-weight: 800;
  display: flex; justify-content: center; align-items: center; gap: 12px; box-shadow: 0 10px 26px rgba(255, 209, 102, 0.3); }
.pl-offer-cta svg { width: 30px; height: 30px; }
.pl-offer-secure { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; margin-top: 16px; font-size: 1.1rem; color: #fff; text-align: center; line-height: 1.45; }
.pl-offer-secure svg { display: inline-block; width: 20px; height: 20px; vertical-align: -3px; margin-right: 6px; }

@media (max-width: 899px) {
  .pl-offer { padding: 56px 18px 64px; }
  .pl-offer-inner { grid-template-columns: 1fr; grid-template-areas: "head" "card" "checks" "trust"; grid-template-rows: none; }
  .pl-offer-trust br { display: none; }
  .pl-offer-title { font-size: 2.6rem; }
  .pl-offer-campaign { font-size: 2.6rem; padding: 20px 18px; margin-bottom: 44px; border-radius: 20px; }
  .pl-offer-lead { font-size: 1.25rem; margin-bottom: 8px; }
  .pl-offer-pill { font-size: 17px; }
  .pl-offer-card { margin: 44px 0 34px; padding: 44px 18px 20px; }
  .pl-offer-seal { right: -6px; top: -40px; width: 88px; height: 88px; }
  .pl-offer-seal b { font-size: 25px; }
  .pl-offer-product { grid-template-columns: 1fr; gap: 0; }
  .pl-mock { display: none; }   /* decorative; the phone keeps room for large text */
  .pl-offer-list { gap: 16px; }
  .pl-offer-list b { font-size: 1.28rem; }
  .pl-offer-list small { font-size: 1.12rem; }
  .pl-offer-price .now { font-size: 4rem; }
  .pl-offer-price .was { font-size: 1.7rem; }
  .pl-offer-opt { font-size: 1.25rem; padding: 14px 14px; gap: 12px; }
  .pl-offer-cta { font-size: 1.6rem; min-height: 66px; }
  .pl-offer-checks li { font-size: 1.25rem; }
  .pl-offer-trust div { font-size: 1.2rem; padding: 16px; flex-direction: row; text-align: left; gap: 14px; }
  .pl-offer-trust { grid-template-columns: 1fr; }
  .pl-offer-trust div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
}

/* Checkout popup */
.pl-buy-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(6, 18, 12, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.pl-buy { position: relative; width: min(680px, 100%); max-height: calc(100vh - 32px); overflow: auto; color: #fff; border-radius: 24px; padding: 24px 26px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), #1a4633; border: 2px solid #95D5B2; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.pl-buy-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 22px; line-height: 1; }
.pl-buy h3 { font-size: 1.9rem; margin: 0 0 4px; color: #fff; }
.pl-buy-sum { color: #fff; font-size: 1.2rem; margin: 0 0 6px; }
.pl-buy-sum b { color: #FFD166; }
.pl-buy-fields label { display: block; font-weight: 700; font-size: 1.15rem; margin: 12px 0 6px; color: #fff; }
.pl-buy input[type=text], .pl-buy input[type=email] { width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, 0.3); background: #fff; color: #173826; font: inherit; font-size: 1.2rem; padding: 13px 14px; }
.pl-buy-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pl-buy-hint { font-size: 1.02rem; color: rgba(255, 255, 255, 0.85); margin-top: 6px; line-height: 1.4; }
/* Renewal: Pay once / Pay in 3 in the popup */
.pl-buy-plan { margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); min-width: 0; }
.pl-buy-plan-head { float: left; width: 100%; padding: 0 0 10px; font-size: 1.35rem; font-weight: 700; color: #fff; }
.pl-buy-plan .pl-buy-opts { clear: both; }      /* the legend floats, so the border line does not run through it */
.pl-buy input[readonly] { background: #e6eee8; color: #2c4337; cursor: default; }   /* renewal: the account's email */
.pl-buy-extra { margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); min-width: 0; }
.pl-buy-extra-head { display: flex; align-items: center; gap: 10px; float: left; width: 100%; padding: 0; font-size: 1.35rem; font-weight: 700; color: #fff; }
.pl-buy-extra .pl-buy-why { clear: both; padding-top: 6px; }
.pl-buy-extra-head svg { width: 26px; height: 26px; color: #FFD166; }
.pl-buy-optional { font-size: 1.05rem; font-weight: 400; color: rgba(255, 255, 255, 0.85); margin-left: auto; }
.pl-buy-why { font-size: 1.1rem; color: #fff; line-height: 1.45; margin: 6px 0 12px; }
.pl-buy-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* Light green cards, so they do not read as text fields; the
   chosen one turns warm yellow, the same accent as the button below. */
.pl-buy-opt { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 12px 14px; cursor: pointer; border-radius: 14px; background: #DFF2E5; color: #173826; border: 2px solid rgba(45, 106, 79, 0.22); }
.pl-buy-opt .dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #5f7268; margin-top: 3px; display: flex; align-items: center; justify-content: center; }
.pl-buy-opt.on { background: #FBE6AE; border-color: #E9B824; box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.3); }
.pl-buy-opt.on .dot { border-color: #2D6A4F; }
.pl-buy-opt.on .dot::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #2D6A4F; }
.pl-buy-opt b { font-size: 1.3rem; display: block; }
.pl-buy-opt small { font-size: 1.06rem; color: #2c4337; line-height: 1.4; display: block; margin-top: 2px; }
.pl-buy-foot { position: sticky; bottom: 0; margin: 12px -26px 0; padding: 10px 26px 12px; background: #1d4a36; border-top: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.25); }
.pl-buy-foot .pl-offer-cta { margin-top: 8px; min-height: 62px; font-size: 1.5rem; }
.pl-buy-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.3rem; }
.pl-buy-total b { font-size: 2rem; }
.pl-buy-sched { margin-top: 4px; display: grid; gap: 2px; }
.pl-buy-sched div { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.12rem; color: #fff; }
.pl-buy-sched small { font-size: 1rem; color: rgba(255, 255, 255, 0.8); }
.pl-buy-sched b { font-size: 1.2rem; }
@media (max-width: 899px) {
  .pl-buy-backdrop { align-items: flex-end; padding: 0; }
  .pl-buy { width: 100%; max-height: 94vh; border-radius: 24px 24px 0 0; padding: 20px 16px 0; border-bottom: 0; }
  .pl-buy h3 { font-size: 1.7rem; }
  .pl-buy-fields { grid-template-columns: 1fr; gap: 0; }
  .pl-buy-sum { margin-bottom: 10px; }
  .pl-buy-opts { grid-template-columns: 1fr; }
  .pl-buy-opt { padding: 12px 14px; }
  .pl-buy-foot { margin: 12px -16px 0; padding: 10px 16px 12px; }
  .pl-buy-foot .pl-offer-cta { min-height: 60px; font-size: 1.3rem; gap: 10px; padding: 0 12px; }
  .pl-buy-foot .pl-offer-cta svg { width: 24px; height: 24px; }
  /* the tick moved into the foot, so the foot is tightened on a
     phone: it must not eat the popup it belongs to */
  .pl-buy-foot .pl-buy-consents { margin: 8px 0 0; padding: 8px 0 0; }
  .pl-buy-foot .pl-buy-check { font-size: 1.04rem; line-height: 1.35; }
  .pl-buy-badge { margin-top: 6px; }
  .pl-buy-badge .pl-stripe-badge img { height: 30px; }
}

/* Official Stripe badge (cdn.vergentapp.com/stripe/powered-by-stripe-white.svg, from Stripe's brand assets; not modified).
   Shown a little above its native 150 × 34 so its lettering stays legible; the aspect ratio is kept. */
.pl-stripe-badge { display: inline-flex; line-height: 0; border-radius: 6px; }
.pl-stripe-badge img { display: block; width: auto; height: 40px; }

.pl-buy-badge { display: flex; justify-content: center; margin-top: 10px; }
.pl-buy-bul { margin: 2px 0 0; padding-left: 20px; font-size: 1.06rem; color: #2c4337; line-height: 1.4; }
.pl-buy-bul li::marker { color: #2D6A4F; }

/* Real form controls: the radios are visually hidden, the label shows the state; keyboard focus stays visible */
.pl-offer-opt input, .pl-buy-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pl-offer-opt:has(input:focus-visible), .pl-buy-opt:has(input:focus-visible) { outline: 3px solid #FFD166; outline-offset: 3px; }
.pl-offer-opt:hover:not(.on) { border-color: rgba(255, 255, 255, 0.5); }
.pl-buy-opt:hover:not(.on) { box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.45); }
.pl-offer-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pl-offer-cta:disabled { opacity: 0.6; cursor: default; }
/* Get Vergent: under the mouse (and on keyboard focus) the button lifts a little, brightens, its shadow deepens and the
   cart moves forward; pressing brings it down. No hover on touch screens (it would stay raised after a tap); with
   reduced motion only the colour and shadow change. */
.pl-offer-cta { transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; }
.pl-offer-cta svg { transition: transform 0.18s ease; }
@media (hover: hover) {
  .pl-offer-cta:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 32px rgba(243, 189, 69, 0.45); }
  .pl-offer-cta:not(:disabled):hover svg { transform: translateX(3px); }
}
.pl-offer-cta:not(:disabled):focus-visible { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 32px rgba(243, 189, 69, 0.45); }
.pl-offer-cta:not(:disabled):focus-visible svg { transform: translateX(3px); }
.pl-offer-cta:not(:disabled):active { transform: translateY(0); box-shadow: 0 6px 16px rgba(243, 189, 69, 0.3); }
@media (prefers-reduced-motion: reduce) {
  .pl-offer-cta, .pl-offer-cta svg { transition: box-shadow 0.18s ease, filter 0.18s ease; }
  .pl-offer-cta:not(:disabled):hover, .pl-offer-cta:not(:disabled):focus-visible, .pl-offer-cta:not(:disabled):active,
  .pl-offer-cta:not(:disabled):hover svg, .pl-offer-cta:not(:disabled):focus-visible svg { transform: none; }
}
/* The hidden attribute must win over the display rules above */
.pl-offer [hidden], .pl-buy [hidden], .pl-buy-backdrop[hidden] { display: none !important; }
.pl-offer-price-error { margin: 10px 0 0; text-align: center; font-size: 1.1rem; color: #FFD166; }
.pl-offer-price s.was { text-decoration: line-through; }
.pl-buy input[aria-invalid="true"] { border-color: #ffb3b3; box-shadow: 0 0 0 3px rgba(255, 179, 179, 0.35); }
.pl-buy-err { margin-top: 6px; font-size: 1.02rem; font-weight: 700; color: #ffc9c9; }
.pl-buy-status { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 209, 102, 0.14);
  border: 1px solid rgba(255, 209, 102, 0.6); color: #fff; font-size: 1.08rem; line-height: 1.4; }
.pl-buy input:focus-visible, .pl-buy-close:focus-visible { outline: 3px solid #FFD166; outline-offset: 2px; }
.pl-buy-close { cursor: pointer; }
html.pl-buy-open, html.pl-buy-open body { overflow: hidden; }

/* ═══════════════════════════════════════════════════
   AI CREDITS (docs/maksut-ja-krediitit.md point 6)
   Settings section (bars show what is LEFT), the out-of-credits notice on the Tools page, at a tool's create button
   and in the assessment report. The notice has a soft yellow background: it stands out
   from the glass cards as a state to act on, but does not alarm like the red error box. Text sizes for
   the target group: main text 18–19 px, nothing under 16 px. The official black Stripe badge (unmodified) under the
   top-up buttons, because the cards are light.
   ═══════════════════════════════════════════════════ */
.credits-meter { margin: 16px 0 0; }
.credits-meter[hidden] { display: none; }
.credits-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 18px; }
.credits-meter-name { font-weight: 600; color: var(--ink, #132b21); }
.credits-meter-pct { font-weight: 700; color: #1B4332; white-space: nowrap; }
.credits-bar { height: 12px; margin-top: 8px; border-radius: 6px; background: rgba(45, 106, 79, 0.14); overflow: hidden; }
.credits-bar-fill { height: 100%; width: 0; border-radius: 6px; background: var(--green-grad, #2D6A4F); transition: width 0.4s ease; }
.credits-meter-note { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink-soft, #3a4c43); }
.credits-enough { margin: 16px 0 0; font-size: 18px; line-height: 1.45; color: var(--ink, #132b21); }
.credits-add-title { margin: 22px 0 10px; font-size: 18px; font-weight: 700; color: var(--ink, #132b21); }

.credits-offers { display: grid; grid-template-columns: 1fr; gap: 10px; }
.credits-offers:empty { display: none; }
/* One offer = one radio card, like the purchase window's extra credits (.pl-buy-opt) */
.credits-opt {
  position: relative; display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; row-gap: 4px; align-items: center;
  padding: 12px 14px; border-radius: 16px; background: #fff; border: 2px solid rgba(45, 106, 79, 0.22);
  color: var(--ink, #132b21); cursor: pointer;
}
.credits-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.credits-opt .dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #5f7268; display: flex; align-items: center; justify-content: center; }
.credits-opt.on { border-color: #2D6A4F; box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.18); }
.credits-opt.on .dot { border-color: #2D6A4F; }
.credits-opt.on .dot::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #2D6A4F; }
.credits-opt:hover:not(.on) { border-color: rgba(45, 106, 79, 0.5); }
.credits-opt:has(input:focus-visible) { outline: 3px solid #2D6A4F; outline-offset: 3px; }
.credits-opt b { font-size: 20px; font-weight: 700; color: #1B4332; }
.credits-bul { grid-column: 1 / -1; margin: 2px 0 0; padding: 0 0 0 20px; font-size: 16px; line-height: 1.4; color: var(--ink-soft, #3a4c43); }
.credits-bul li::marker { color: #2D6A4F; }
/* Stripe badge on the left, Buy on the right; on a narrow card they wrap and Buy stays right */
.credits-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.credits-buy {
  margin-left: auto; min-height: 52px; padding: 0 28px; border: 0; border-radius: 26px; cursor: pointer;
  background: var(--green-grad, linear-gradient(145deg, #52B788, #2D6A4F)); color: #fff; font: inherit; font-size: 18px;
  font-weight: 700; box-shadow: 0 6px 16px rgba(27, 67, 50, 0.25);
}
.credits-buy:hover { filter: brightness(1.05); }
.credits-buy:focus-visible { outline: 3px solid #2D6A4F; outline-offset: 3px; }
.credits-buy:disabled { opacity: 0.6; cursor: default; }
.credits-msg { margin: 10px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink, #132b21); }
.credits-msg[hidden] { display: none; }
.credits-stripe { display: inline-flex; line-height: 0; border-radius: 6px; }
.credits-stripe img { display: block; width: auto; height: 34px; }

.credits-notice {
  position: relative; padding: 18px 20px 20px; border-radius: 24px; color: var(--ink, #132b21);
  background: #FEF3C7; border: 1px solid #F1CF6E; box-shadow: 0 10px 30px rgba(120, 90, 0, 0.10);
}
.credits-notice[hidden] { display: none; }
.credits-notice-text { margin: 0 0 14px; font-size: 19px; line-height: 1.45; font-weight: 600; }
.credits-notice-tools { margin: 0 0 18px; }
.credits-notice-tools .credits-notice-text { padding-right: 40px; }
.credits-notice-close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 22px;
  background: transparent; color: var(--ink-soft, #3a4c43); font-size: 26px; line-height: 1; cursor: pointer;
}
.credits-notice-close:hover { background: rgba(120, 90, 0, 0.10); }
.credits-notice-close:focus-visible { outline: 3px solid #2D6A4F; outline-offset: 2px; }
.credits-notice-tool { margin: 12px 0 0; }
.scw-sumstep .credits-notice-tool { margin: 0 0 12px; }
/* In the assessment report the notice takes the place of the red error box, with the same yellow */
.icf-plan-error.is-credits { padding: 18px 20px 20px; border-radius: 24px; background: #FEF3C7;
  border: 1px solid #F1CF6E; box-shadow: 0 10px 30px rgba(120, 90, 0, 0.10); color: var(--ink, #132b21); }

.credits-test { margin-top: 20px; padding-top: 14px; border-top: 1px dashed rgba(45, 106, 79, 0.35); }
.credits-test[hidden] { display: none; }
.credits-test-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--ink-soft, #3a4c43); }
.credits-test-btns { display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 900px) {
  .credits-offers { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
  .credits-stripe img { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .credits-bar-fill { transition: none; }
}

/* ═══════════════════════════════════════════════════
   ADMIN AREA: admin.html + js/admin.js at /admin. Same green glass look as the app's tool
   pages; desktop first, one column on a phone. Large text as elsewhere (smallest 16 px).
   ═══════════════════════════════════════════════════ */
body.admin-page {
  --ink: #132b21; --ink-soft: #3a4c43; --green-grad: linear-gradient(145deg, #52B788, #2D6A4F);
  min-height: 100vh; color: var(--ink); background-color: #e6f1e9;
  background-image:
    radial-gradient(circle 360px at 0% 4%, rgba(82, 183, 136, 0.45), rgba(82, 183, 136, 0) 70%),
    radial-gradient(circle 320px at 100% 22%, rgba(149, 213, 178, 0.8), rgba(149, 213, 178, 0) 70%),
    radial-gradient(circle 360px at 0% 60%, rgba(199, 232, 148, 0.5), rgba(199, 232, 148, 0) 70%),
    radial-gradient(circle 380px at 100% 90%, rgba(116, 198, 157, 0.45), rgba(116, 198, 157, 0) 70%);
  background-attachment: fixed;
}
.admin-page [hidden] { display: none !important; }
.admin-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 4px 20px rgba(27, 67, 50, 0.06); }
.admin-header-inner { max-width: 940px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; }
.admin-brand { text-decoration: none; }
.admin-badge { margin-left: 4px; padding: 3px 12px; border-radius: 999px; background: #1b3a2a; color: #fff;
  font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
.admin-logout { height: 46px; padding: 0 18px 0 14px; border-radius: 23px; display: inline-flex; align-items: center; gap: 8px;
  font: 600 18px/1 "Source Serif 4", Georgia, serif; color: #2D6A4F; background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 4px 12px rgba(27, 67, 50, 0.08); cursor: pointer; }
.admin-logout svg { width: 22px; height: 22px; }
.admin-logout:hover { background: #fff; }

.admin-main { max-width: 940px; margin: 0 auto; padding: 32px 20px 80px; }
.admin-main h1 { font-size: 34px; line-height: 1.15; margin: 0 0 12px; color: var(--ink); }
.admin-main h1:focus { outline: none; }
.admin-lead { font-size: 19px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 10px; max-width: 46em; }
.admin-card { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 24px;
  box-shadow: 0 10px 30px rgba(27, 67, 50, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9); padding: 24px 26px; }

/* Sign in */
.admin-login { max-width: 460px; margin: 40px auto 0; }
.admin-login h1 { font-size: 30px; }
.admin-login form { display: grid; gap: 8px; margin-top: 14px; }
.admin-login label { font-size: 17px; font-weight: 600; margin-top: 8px; }

/* Form controls */
.admin-page input[type="email"], .admin-page input[type="password"], .admin-page input[type="datetime-local"],
.admin-page input[type="text"], .admin-page select, .admin-page textarea {
  width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid #b9cfc2; background: #fff;
  font: 18px/1.4 "Source Serif 4", Georgia, serif; color: var(--ink); }
.admin-page textarea { resize: vertical; min-height: 80px; }
.admin-page input:focus-visible, .admin-page select:focus-visible, .admin-page textarea:focus-visible,
.admin-page button:focus-visible { outline: 3px solid #2D6A4F; outline-offset: 2px; }
.admin-page [aria-invalid="true"] { border-color: #D62828; }
.admin-btn { min-height: 52px; padding: 0 28px; border: 0; border-radius: 26px; background: var(--green-grad); color: #fff;
  font: 700 19px/1 "Source Serif 4", Georgia, serif; cursor: pointer; box-shadow: 0 6px 16px rgba(45, 106, 79, 0.30); }
.admin-btn:hover { box-shadow: 0 8px 20px rgba(45, 106, 79, 0.42); }
.admin-btn:disabled { opacity: 0.7; cursor: default; }
.admin-login .admin-btn { margin-top: 14px; }
.admin-error { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: #FDDEDE; color: #8a1616;
  font-size: 17px; line-height: 1.4; }

/* Campaign cards */
.admin-list { display: grid; gap: 20px; margin-top: 24px; }
.admin-camp { display: grid; gap: 16px; }
.admin-camp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-camp-head h2 { font-size: 25px; line-height: 1.2; margin: 0; color: var(--ink); }
.admin-state { padding: 5px 14px; border-radius: 999px; font-size: 16px; font-weight: 600; line-height: 1.35;
  background: #eceeed; color: #3a4c43; }
.admin-state.is-live { background: #D8F3DC; color: #1b5e3b; }
.admin-state.is-scheduled { background: #FEF3C7; color: #6b4e00; }
.admin-state.is-ended { background: #eceeed; color: #5c5c5c; }
.admin-switch { display: inline-flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; cursor: pointer;
  justify-self: start; position: relative; }
.admin-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.admin-switch-track { width: 56px; height: 32px; border-radius: 16px; background: #c5d3cb; position: relative;
  transition: background 0.15s ease; flex: none; }
.admin-switch-track span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 0.15s ease; }
.admin-switch input:checked + .admin-switch-track { background: #2D6A4F; }
.admin-switch input:checked + .admin-switch-track span { transform: translateX(24px); }
.admin-switch input:focus-visible + .admin-switch-track { outline: 3px solid #2D6A4F; outline-offset: 2px; }
.admin-field { display: grid; gap: 6px; min-width: 0; }
.admin-field > label { font-size: 17px; font-weight: 600; }
.admin-field-foot { display: flex; justify-content: space-between; gap: 12px; }
.admin-hint { font-size: 16px; line-height: 1.4; color: var(--ink-soft); margin: 0; }
/* Band under the hero: the {end} reminder above the field, and a small preview in the band's colours */
.admin-meta-card { display: grid; gap: 16px; }
/* Emails */
.admin-mail-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-mail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.admin-mail-form { display: grid; gap: 18px; }
.admin-mail-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.admin-mail-badge { background: #E3F2E9; color: #1f5139; border-radius: 999px; padding: 2px 10px; font-size: 14px; font-weight: 700; }
.admin-mail-row { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.admin-chip { font: 15px "DM Mono", ui-monospace, monospace; background: #FFF6D8; color: #1b3a2a; border: 1px solid #e8d9a6;
  border-radius: 8px; padding: 1px 7px; margin: 0 4px 2px 0; cursor: pointer; }
.admin-link { background: none; border: 0; color: #2D6A4F; text-decoration: underline; font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap; }
.admin-mail-preview { position: sticky; top: 16px; display: grid; gap: 10px; }
.admin-mail-subject { margin: 0; font-weight: 700; }
#mailFrame { width: 100%; height: 620px; border: 1px solid #dbe8e0; border-radius: 12px; background: #eef5f0; }
#mailText { white-space: pre-wrap; font: 15px/1.5 "DM Mono", ui-monospace, monospace; background: #f6f8fa; padding: 12px; border-radius: 8px; }
.admin-mail-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
.admin-mail-actions .admin-msg { margin-right: auto; }
@media (max-width: 900px) { .admin-mail-grid, .admin-mail-pick { grid-template-columns: 1fr; } .admin-mail-preview { position: static; } }
.admin-meta-foot { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.admin-meta-foot .admin-msg { margin-right: auto; }
.admin-btn-light { background: #fff; color: #1b3a2a; border: 2px solid #2D6A4F; box-shadow: none; }
.admin-check { display: flex; gap: 8px; align-items: center; font-size: 16px; }
.admin-meta-outbox { margin: 0; padding-left: 22px; font: 15px/1.6 "DM Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.admin-band-end { background: #FFF6D8; border-radius: 10px; padding: 8px 12px; color: #1b3a2a; }
.admin-band-prev { margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; text-align: center; color: #fff; font-weight: 700;
  font-size: 20px; line-height: 1.2; background: linear-gradient(160deg, #1d4a34 0%, #1f5139 45%, #143a28 100%); overflow-wrap: anywhere; }
.admin-count { font-size: 16px; color: var(--ink-soft); white-space: nowrap; }
/* Time zone on its own row, start and end side by side below it: Chrome gives datetime-local a fixed inner width,
   which three columns cannot hold */
.admin-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.admin-label-row label { font-size: 17px; font-weight: 600; }
.admin-clear { flex: none; min-height: 36px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: #2D6A4F;
  font: 600 16px/1.2 "Source Serif 4", Georgia, serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.admin-clear:hover { background: rgba(45, 106, 79, 0.08); }
.admin-camp-foot, .admin-grant-foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.admin-msg { margin: 0 auto 0 0; font-size: 17px; color: #1b5e3b; }
.admin-msg.is-error { color: #a31a1a; font-weight: 600; }

/* Tabs: Campaigns · AI credits, a glass pill under the header */
.admin-tabs { display: inline-flex; gap: 6px; padding: 6px; margin: 0 0 26px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 6px 18px rgba(27, 67, 50, 0.08); }
.admin-tab { min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: none; color: #2D6A4F;
  font: 700 18px/1.2 "Source Serif 4", Georgia, serif; cursor: pointer; }
.admin-tab:hover { background: rgba(45, 106, 79, 0.08); }
.admin-tab[aria-selected="true"] { background: var(--green-grad); color: #fff; box-shadow: 0 4px 12px rgba(45, 106, 79, 0.30); }

/* AI credits: the grant form and the ledger */
.admin-grant { display: grid; gap: 18px; margin-top: 20px; }
.admin-field-email { max-width: 560px; }
.admin-amount-row { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.admin-page .admin-amount-row input { width: 200px; flex: none; }
.admin-estimate { font-size: 19px; font-weight: 600; color: #1b5e3b; }
.admin-estimate:empty { display: none; }
.admin-ledger { display: grid; gap: 8px; margin-top: 20px; }
.admin-ledger h2 { font-size: 25px; line-height: 1.2; margin: 0; color: var(--ink); }
.admin-ledger-empty { margin: 8px 0 0; font-size: 18px; color: var(--ink-soft); }
.admin-ledger-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 18px; line-height: 1.4; }
.admin-ledger-table th { text-align: left; font-size: 16px; font-weight: 700; color: var(--ink-soft); padding: 8px 12px;
  border-bottom: 2px solid #cfe0d6; }
.admin-ledger-table td { padding: 12px; border-bottom: 1px solid #e0ebe4; vertical-align: top; overflow-wrap: anywhere; }
.admin-ledger-table tr:last-child td { border-bottom: 0; }
.admin-ledger-table th:first-child, .admin-ledger-table td:first-child { padding-left: 0; }
.admin-ledger-table th:last-child, .admin-ledger-table td:last-child { padding-right: 0; }
.admin-ledger-table .admin-l-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-ledger-table td.admin-l-amount { font-weight: 700; }
.admin-l-time { white-space: nowrap; }
.admin-deleted { font-style: italic; color: #5c5c5c; }
.admin-l-by-label { display: none; }

@media (max-width: 899px) {
  .admin-times { grid-template-columns: 1fr; }
  .admin-times > span { display: none; }   /* the desktop spacer beside the zone */
}
@media (max-width: 599px) {
  .admin-header-inner { padding: 10px 14px; }
  .admin-logout span { display: none; }   /* icon only; the button's aria-label keeps its name */
  .admin-logout { padding: 0 12px; }
  .admin-main { padding: 24px 14px 64px; }
  .admin-main h1 { font-size: 28px; }
  .admin-card { padding: 20px 16px; border-radius: 20px; }
  .admin-camp-head h2 { font-size: 22px; }
  .admin-camp-foot, .admin-grant-foot { flex-direction: column-reverse; align-items: stretch; }
  .admin-msg { margin: 0; }
  .admin-btn { width: 100%; }
  /* Four tabs no longer fit on one phone row, so the strip wraps instead of pushing the page sideways. */
  .admin-tabs { display: flex; flex-wrap: wrap; margin-bottom: 22px; }
  .admin-tab { flex: 1 1 40%; padding: 0 10px; }
  .admin-ledger h2 { font-size: 22px; }
  /* The ledger as stacked rows: time and amount on top, the account, then the giver (column headers only for
     screen readers; the explicit roles in admin.html keep the table semantics) */
  .admin-ledger-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
    clip-path: inset(50%); white-space: nowrap; }
  .admin-ledger-table, .admin-ledger-table tbody, .admin-ledger-table td { display: block; }
  .admin-ledger-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0;
    border-bottom: 1px solid #e0ebe4; }
  .admin-ledger-table tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .admin-ledger-table td { padding: 0; border: 0; }
  .admin-ledger-table td:first-child, .admin-ledger-table td:last-child { padding: 0; }
  .admin-ledger-table .admin-l-time { grid-column: 1; grid-row: 1; font-size: 16px; color: var(--ink-soft); }
  .admin-ledger-table .admin-l-amount { grid-column: 2; grid-row: 1; }
  .admin-ledger-table .admin-l-email { grid-column: 1 / -1; grid-row: 2; font-weight: 600; }
  .admin-ledger-table .admin-l-by { grid-column: 1 / -1; grid-row: 3; font-size: 16px; color: var(--ink-soft); }
  .admin-l-by-label { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-switch-track, .admin-switch-track span { transition: none; }
}

/* ═══════════════════════════════════════════════════
   ACCESS PAUSED OR ENDED: #view-access instead of the app when a customer's installment is
   overdue or the 12-month access has ended. The Tools page's glass look; one card, links under it. Previews approved.
   ═══════════════════════════════════════════════════ */
.access-gate { width: 100%; max-width: 640px; margin: 28px 0 60px; display: flex; flex-direction: column; gap: 16px; }
.access-card { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 24px; padding: 30px 30px 28px;
  color: var(--ink); }
.access-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; }
.access-icon svg { width: 34px; height: 34px; }
.access-icon.is-due { background: #FEF3C7; color: #8a5a00; border: 1px solid #F1CF6E; }
.access-icon.is-ended { background: #D8F3DC; color: #1b5e3b; border: 1px solid #b7e4c7; }
.access-card h1 { font-size: 34px; line-height: 1.15; margin: 0 0 12px; color: var(--ink); letter-spacing: -0.01em; }
.access-card h1:focus { outline: none; }
.access-lead { font-size: 20px; line-height: 1.5; margin: 0 0 20px; color: var(--ink-soft); }
.access-pays { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid #dbe8e0; }
.access-pay { display: grid; grid-template-columns: 1fr auto 118px; grid-template-areas: "name sum state" "date sum state";
  gap: 2px 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid #dbe8e0; font-size: 18px; }
.access-pay.is-due { background: linear-gradient(90deg, rgba(254, 243, 199, 0), rgba(254, 243, 199, 0.55), rgba(254, 243, 199, 0)); }
.access-pay-name { grid-area: name; font-weight: 600; }
.access-pay-date { grid-area: date; font-size: 16px; color: var(--ink-soft); }
.access-pay-sum { grid-area: sum; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.access-pay-state { grid-area: state; justify-self: end; font-size: 16px; font-weight: 600; padding: 4px 12px;
  border-radius: 999px; white-space: nowrap; }
.access-pay-state.is-paid { background: #D8F3DC; color: #1b5e3b; }
.access-pay-state.is-overdue { background: #FEF3C7; color: #6b4e00; border: 1px solid #F1CF6E; }
.access-pay-state.is-upcoming { background: #eceeed; color: #3a4c43; }
.access-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0 0 24px;
  padding: 0; list-style: none; }
.access-facts li { position: relative; padding-left: 32px; font-size: 18px; line-height: 1.4; color: var(--ink); }
.access-facts li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #2D6A4F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; }
.access-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.access-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px;
  border: 0; border-radius: 28px; background: var(--green-grad); color: #fff; font: 700 20px/1.2 "Source Serif 4", Georgia, serif;
  box-shadow: 0 6px 16px rgba(45, 106, 79, 0.30); cursor: pointer; }
.access-btn:hover { box-shadow: 0 8px 20px rgba(45, 106, 79, 0.42); }
.access-btn:disabled { opacity: 0.7; cursor: default; }
.access-btn:focus-visible, .access-foot a:focus-visible, .access-delete:focus-visible { outline: 3px solid #2D6A4F; outline-offset: 3px; }
.access-note { font-size: 16px; line-height: 1.45; color: var(--ink-soft); margin: 14px 0 0; }
.access-msg { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: #FEF3C7; border: 1px solid #F1CF6E;
  font-size: 17px; line-height: 1.45; color: var(--ink); }
.access-msg[hidden] { display: none; }
.access-foot { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; font-size: 17px; }
.access-foot a, .access-delete { color: #2D6A4F; text-decoration: underline; text-underline-offset: 3px; background: none;
  border: 0; padding: 4px 2px; font: inherit; cursor: pointer; }
@media (max-width: 599px) {
  .access-gate { margin: 18px 0 40px; }
  .access-card { padding: 24px 18px 22px; border-radius: 22px; }
  .access-card h1 { font-size: 28px; }
  .access-lead { font-size: 19px; }
  .access-actions { flex-direction: column; align-items: stretch; }
  .access-actions .access-btn { width: 100%; }
  .access-actions .credits-stripe { align-self: center; }
  /* Phone: name and state on the first line, date and amount on the second (a long date, e.g. Finnish, keeps one line) */
  .access-pay { grid-template-columns: auto 1fr auto; grid-template-areas: "name . state" "date sum sum"; column-gap: 12px; }
  .access-pay-date { white-space: nowrap; }
  .access-pay-sum { font-size: 16px; justify-self: start; }
  .access-facts { grid-template-columns: 1fr; }
}

/* Purchase popup: the two required consents. They sit in the sticky
   foot above the button. Links use the popup's gold accent —
   the browser's blue disappears into the dark green. */
.pl-buy a { color: #FFD166; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.pl-buy a:hover, .pl-buy a:focus-visible { color: #FFE3A3; }
.pl-buy-foot .pl-buy-consents { margin: 10px 0 0; padding: 10px 0 0; }
.pl-buy-consents { display: grid; gap: 10px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.pl-buy-check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 1.1rem; line-height: 1.45;
  color: #fff; cursor: pointer; }
.pl-buy-check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: #FFD166; cursor: pointer; }
.pl-buy-check input:focus-visible { outline: 3px solid #FFD166; outline-offset: 2px; }
.pl-offer-cancelled { margin: 12px 0 0; padding: 12px 16px; border-radius: 14px; background: #FEF3C7; border: 1px solid #F1CF6E;
  color: #132b21; font-size: 1.1rem; }
.pl-offer-cancelled[hidden] { display: none; }

/* ═══════════════════════════════════════════════════
   RETURN PAGE AFTER PAYMENT (preview approved): #view-welcome uses the access page's card
   ═══════════════════════════════════════════════════ */
.access-icon.is-ok { background: linear-gradient(150deg, #52B788, #2D6A4F); color: #fff; border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 16px rgba(45, 106, 79, 0.30); }
.access-icon.is-wait svg { animation: welSpin 1.2s linear infinite; }
@keyframes welSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .access-icon.is-wait svg { animation: none; } }
.wel-sum { margin: 0 0 22px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); border: 1px solid #cfe3d6; }
.wel-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 18px; color: var(--ink); }
.wel-row + .wel-row { border-top: 1px solid #e0ebe4; }
.wel-row > span { color: var(--ink-soft); }
.wel-row b { text-align: right; font-variant-numeric: tabular-nums; }
.wel-row b span { display: block; }
.wel-row.wel-small { font-size: 16px; }
.wel-form { display: grid; gap: 8px; margin: 0; }
.wel-form label { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.wel-form input { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid #b9d3c3;
  background: #fff; font: 400 19px/1.3 "Source Serif 4", Georgia, serif; color: var(--ink); }
.wel-form input:focus { outline: none; border-color: #2D6A4F; box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.25); }
.wel-form input[readonly] { background: #eef4f0; color: #2c4337; }
.wel-form input[aria-invalid="true"] { border-color: #b3261e; }
.wel-pw { position: relative; }
.wel-pw input { padding-right: 96px; }
.wel-pw button { position: absolute; right: 6px; top: 6px; bottom: 6px; min-width: 76px; padding: 0 12px; border: 0; border-radius: 10px;
  background: rgba(45, 106, 79, 0.10); color: #1b5e3b; font: 700 16px "Source Serif 4", Georgia, serif; cursor: pointer; }
.wel-pw button:focus-visible { outline: 3px solid #2D6A4F; outline-offset: 2px; }
.wel-hint { margin: 0; font-size: 16px; color: var(--ink-soft); }
.wel-err { margin: 0; font-size: 17px; color: #8a1c14; font-weight: 600; }
.wel-err[hidden] { display: none; }
.wel-form .access-btn, .wel-actions .access-btn { margin-top: 14px; width: 100%; }
.access-lead b { color: var(--ink); }
@media (max-width: 599px) {
  .wel-row { flex-direction: column; gap: 0; }
  .wel-row b { text-align: left; }
}

/* Admin area, Support tab: the password link */
.admin-card-title { font-size: 25px; line-height: 1.2; margin: 0; color: var(--ink); }
.admin-link-out { display: grid; gap: 8px; }
.admin-link-out[hidden] { display: none; }
.admin-link-out label { font-size: 18px; font-weight: 700; color: var(--ink); }
.admin-link-row { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-page .admin-link-row input { flex: 1 1 280px; font-size: 16px; }
.admin-btn-ghost { background: #fff; color: #2D6A4F; border: 1.5px solid #2D6A4F; box-shadow: none; }
@media (max-width: 599px) { .admin-link-row .admin-btn { width: 100%; } }

/* Sign-in: forgot password */
.auth-link { display: block; margin: 14px auto 0; padding: 8px 4px; background: none; border: 0; color: #2D6A4F; font: inherit;
  font-size: 17px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-link:focus-visible { outline: 3px solid #2D6A4F; outline-offset: 2px; border-radius: 6px; }
.auth-forgot { margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(45, 106, 79, 0.06); }
.auth-forgot[hidden] { display: none; }
.auth-forgot-text { margin: 0 0 12px; font-size: 17px; line-height: 1.45; color: var(--text, #1f2d27); }
.auth-forgot-msg { margin-top: 12px; font-size: 17px; line-height: 1.45; color: #1b5e3b; }
.auth-forgot-msg.is-error { color: #8a1c14; }
.auth-forgot-msg[hidden] { display: none; }

/* ═══════════════════════════════════════════════════
   CERTIFICATE (#view-certificate) —
   The end point of Learn: requirements, the ECTS note, one report card per tool
   and the download. Glass cards from the TOOL PAGES variables; the cards reuse
   .icf-rep-card so the look stays in one place.
   ═══════════════════════════════════════════════════ */
.cert-card .quiz-theme-icon,
.cert-card .quiz-theme-arrow { background: var(--primary); color: #fff; }

.cert-h { font-size: 21px; color: var(--ink); margin: 0 0 14px; }
.cert-req-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid rgba(45, 106, 79, 0.14); }
.cert-req-row:first-of-type { border-top: 0; padding-top: 0; }
.cert-req-mark { flex: 0 0 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(45, 106, 79, 0.12); color: var(--primary); font-weight: 700; font-size: 16px; margin-top: 2px; }
.cert-req-mark.done { background: var(--primary); color: #fff; }
.cert-req-main { flex: 1; min-width: 0; }
.cert-req-name { font-size: 18px; color: var(--ink); font-weight: 600; }
.cert-req-sub { font-size: 16px; color: var(--ink-soft); margin-top: 2px; }
.cert-req-main .quiz-progressbar { background: rgba(45, 106, 79, 0.14); max-width: 320px; }
.cert-req-row .btn { flex-shrink: 0; align-self: center; }

.cert-scope p { font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; }
.cert-scope p:last-child { margin-bottom: 0; }

/* One report per tool: a head that opens the card, and the body below it. */
.cert-task { padding: 0 !important; overflow: hidden; }
.cert-task-head { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0; text-align: left;
  font: inherit; padding: 16px 20px; cursor: pointer; color: var(--ink); }
.cert-task-head img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.cert-task-main { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cert-task-name { font-size: 19px; font-weight: 600; }
.cert-task-chev { color: var(--ink-soft); flex-shrink: 0; }
.cert-task-body { padding: 0 20px 20px; border-top: 1px solid rgba(45, 106, 79, 0.12); }

.cert-chip { font-size: 15px; border-radius: 999px; padding: 4px 12px; white-space: nowrap;
  background: rgba(45, 106, 79, 0.10); color: var(--ink-soft); }
.cert-chip.ok { background: var(--primary); color: #fff; }
.cert-chip.wait { background: #E4EEF7; color: #2A4E6E; }
/* Needs revision uses the same soft yellow as the "out of credits" notices:
   it asks for something, it is not an error. */
.cert-chip.fix { background: #FEF3C7; color: #7A5B12; border: 1px solid #F1CF6E; }

.cert-crit-title { font-size: 16px; font-weight: 600; color: var(--ink); margin: 16px 0 8px; }
.cert-crit { list-style: none; margin: 0 0 6px; padding: 0; }
.cert-crit li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.5; margin-bottom: 6px; color: var(--ink-soft); }
.cert-crit li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-light); }
.cert-len { font-size: 15px; color: var(--ink-soft); margin: 0 0 14px; }
.cert-task-body .form-textarea { width: 100%; min-height: 150px; background: rgba(255, 255, 255, 0.72); }
.cert-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.cert-words { font-size: 15px; color: var(--ink-soft); }
.cert-error { font-size: 16px; font-weight: 600; color: #B3261E; margin: 8px 0 0; }
.cert-error[hidden] { display: none; }
.cert-sent { font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); background: rgba(255, 255, 255, 0.55);
  border-radius: 14px; padding: 12px 14px; margin: 14px 0 0; white-space: pre-wrap; }
.cert-note { font-size: 15.5px; color: var(--ink-soft); margin: 10px 0 0; }
.cert-fb { background: #FEF3C7; border: 1px solid #F1CF6E; border-radius: 14px; padding: 12px 14px; margin: 16px 0 14px; }
.cert-fb h4 { font-size: 16px; margin: 0 0 4px; color: #6B4E0B; }
.cert-fb p { font-size: 16.5px; line-height: 1.5; margin: 0; color: #4a3c10; }

.cert-dl { text-align: center; }
.cert-dl .btn { min-width: 260px; }
.cert-dl-title { font-size: 21px; color: var(--ink); margin: 0 0 6px; }
.cert-dl p { font-size: 17px; color: var(--ink-soft); margin: 0 0 16px; }
.cert-name-row { font-size: 16px; color: var(--ink-soft); margin: 14px 0 0; }
.cert-name-row b { color: var(--ink); }
.cert-link { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.cert-name-edit { margin-top: 14px; text-align: left; }
.cert-name-fields { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cert-name-input { flex: 1; min-width: 200px; font: inherit; font-size: 18px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(45, 106, 79, 0.25); background: rgba(255, 255, 255, 0.8); color: var(--ink); }

@media (max-width: 899px) {
  .cert-task-head { padding: 14px 16px; gap: 12px; }
  .cert-task-body { padding: 0 16px 18px; }
  /* Phone: the status moves under the tool name so neither has to be cut. */
  .cert-task-main { flex-direction: column; align-items: flex-start; gap: 5px; }
  .cert-chip { white-space: normal; }
  .cert-req-row .btn { align-self: flex-start; }
  .cert-dl .btn { min-width: 0; width: 100%; }
}

/* Certificate reports on the admin page */
.admin-cert-card { display: flex; flex-direction: column; gap: 10px; }
.admin-cert-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-cert-state { font-size: 15px; border-radius: 999px; padding: 4px 12px; background: #E4EEF7; color: #2A4E6E; white-space: nowrap; }
.admin-cert-state.is-ok { background: #2D6A4F; color: #fff; }
.admin-cert-state.is-fix { background: #FEF3C7; color: #7A5B12; border: 1px solid #F1CF6E; }
.admin-cert-meta { font-size: 15px; color: #52606a; margin: 0; }
.admin-cert-flag { display: inline-block; margin-left: 8px; font-size: 14px; font-weight: 600; color: #7A5B12; }
.admin-cert-text { font: inherit; font-size: 16px; line-height: 1.5; white-space: pre-wrap; margin: 0;
  background: #f6f8f7; border-radius: 12px; padding: 12px 14px; }
.admin-cert-history summary { cursor: pointer; font-size: 15px; color: #2D6A4F; }
.admin-cert-history > * { margin-top: 8px; }
.admin-cert-fb-label { display: block; font-size: 15px; font-weight: 600; }
.admin-cert-fb { display: block; width: 100%; margin-top: 4px; }
.admin-cert-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.admin-cert-foot .admin-msg { margin-right: auto; }
.cert-number { font-family: "DM Mono", ui-monospace, monospace; font-size: 15px; color: var(--ink-soft); margin: -8px 0 16px; letter-spacing: .04em; }
.cert-confirm { text-align: left; background: rgba(255, 255, 255, 0.55); border-radius: 16px; padding: 14px 16px; margin: 0 0 4px; }
.cert-confirm h4 { font-size: 18px; margin: 0 0 4px; color: var(--ink); }
.cert-confirm p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 10px; }
.cert-confirm .cert-name-input { width: 100%; margin-bottom: 12px; }

/* ── Public review — the last card of the certificate page ──
   One accent only: the stars, in the amber of the "needs revision" chip family, large enough to tap (44 px).
   Everything else is the page's own form language (labels, glass inputs, the green primary button). */
.cert-review { --star-on: #D8961C; --star-off: rgba(45, 106, 79, 0.28); }
.cert-review .cert-h { margin-bottom: 6px; }
.cert-review-optional { font-size: 17px; font-weight: 400; color: var(--ink-soft); }
.cert-review-lead { font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px; max-width: 62ch; }
.cert-review-label { display: block; font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 8px; padding: 0; }
.cert-review-hint { font-size: 15.5px; line-height: 1.45; color: var(--ink-soft); margin: 6px 0 0; }
.cert-review .cert-error { margin-top: 6px; }

.cert-review-stars-field { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.cert-stars { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.cert-star { width: 48px; height: 48px; padding: 4px; margin: 0; cursor: pointer; border-radius: 12px; color: var(--star-off);
  display: inline-flex; }
.cert-star svg path { fill: rgba(255, 255, 255, 0.7); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round;
  transition: fill .12s ease, stroke .12s ease; }
.cert-star.is-on { color: var(--star-on); }
.cert-star.is-on svg path { fill: var(--star-on); }
.cert-star-input:focus-visible + .cert-star { outline: 3px solid var(--primary); outline-offset: 1px; }
.cert-star-input:checked + .cert-star svg { animation: certStarPick .28s ease-out; }
@keyframes certStarPick { 0% { transform: scale(.82); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.cert-stars-value { font-size: 17px; font-weight: 600; color: var(--ink-soft); margin-left: 10px; min-width: 3ch; }

.cert-review-text { width: 100%; min-height: 130px; background: rgba(255, 255, 255, 0.72); }
.cert-review-count { font-size: 15px; color: var(--ink-soft); text-align: right; margin-top: 4px; }
.cert-review-count.is-over { color: #B3261E; font-weight: 600; }

/* One column at every width: the certificate page is 480 px wide on the desktop too (.container-narrow). */
.cert-review-who { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.cert-review-col { min-width: 0; }
.cert-review-col .cert-name-input { width: 100%; min-width: 0; }
.cert-review-country { margin-top: 10px; }

.cert-review-photo { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(45, 106, 79, 0.14); }
.cert-review-avatar { flex: 0 0 88px; height: 88px; border-radius: 50%; overflow: hidden; display: flex; align-items: center;
  justify-content: center; background: rgba(45, 106, 79, 0.10); color: rgba(45, 106, 79, 0.45);
  border: 3px solid rgba(255, 255, 255, 0.9); box-shadow: 0 2px 10px rgba(27, 67, 50, 0.10); }
.cert-review-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cert-review-photo-main { flex: 1; min-width: 0; }
.cert-review-photo-main .cert-review-label { margin-bottom: 0; }
.cert-review-photo-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }

.cert-review-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.55); font-size: 16px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.cert-review-consent input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--primary); cursor: pointer; }
.cert-review-consent span { min-width: 0; overflow-wrap: anywhere; }

.cert-review-foot { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 18px; }
.cert-review-foot .cert-error { margin: 0; align-self: stretch; text-align: right; }
.cert-review-foot .btn { min-width: 220px; }

.cert-review.is-sent { text-align: center; }
.cert-review.is-sent .cert-h:focus { outline: none; }
.cert-review.is-sent .cert-review-lead { margin: 0 auto; }
.cert-review-thanks-mark { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center; }

@media (max-width: 899px) {
  .cert-review-foot { align-items: stretch; }
  .cert-review-foot .cert-error { text-align: left; }
  .cert-review-foot .btn { min-width: 0; width: 100%; }
  .cert-review-avatar { flex-basis: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .cert-star-input:checked + .cert-star svg { animation: none; }
  .cert-star svg path { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LANGUAGE PICKER — js/langpick.js
   First-visit picker in the front page's own look (A: cream like the hero, the hero title's green line, the
   Sign in button's green) over the blurred page; footer dropdown in the footer's dark look, opening upwards.
   ══════════════════════════════════════════════════════════════════════════ */
html.langpick-open, html.langpick-open body { overflow: hidden; }
.langpick {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(247, 245, 240, 0.42);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  animation: langpickIn 0.22s ease-out both;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .langpick { background: rgba(247, 245, 240, 0.9); }
}
.langpick-card {
  position: relative; width: min(540px, 100%); max-height: calc(100% - 8px); overflow: auto;
  background: var(--bg); color: var(--text); text-align: center;
  border-radius: 16px; padding: 40px 40px 28px;
  box-shadow: 0 28px 70px rgba(27, 27, 27, 0.22), 0 2px 10px rgba(27, 27, 27, 0.06);
  animation: langpickCardIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.langpick-card:focus { outline: none; }   /* focused on open (js/langpick.js); the buttons show the keyboard focus */
.langpick-card::before {    /* the soft green glow of the front page, in one corner */
  content: ""; position: absolute; width: 320px; height: 320px; left: -120px; top: -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(116, 198, 157, 0.35), rgba(116, 198, 157, 0) 70%); pointer-events: none;
}
.langpick-x {
  position: absolute; z-index: 2;   /* above the brand row, which is positioned too (the glow sits under it) */
  top: 10px; right: 10px; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: none; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.langpick-x:hover { background: rgba(27, 27, 27, 0.06); color: var(--text); }
.langpick-brand {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--primary); font-weight: 700; font-size: 1.25rem; margin-bottom: 18px;
}
.langpick-brand img { height: 28px; width: auto; }
.langpick-title {
  position: relative; display: inline-block; margin: 0; font-size: 2.1rem; line-height: 1.15; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text);
}
.langpick-title::after {
  content: ""; display: block; width: 80px; height: 4px; margin: 14px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}
.langpick-top {
  position: relative; display: block; width: 100%; margin: 26px 0 10px; padding: 15px 28px; border: 0; border-radius: 10px;
  background: var(--primary); color: #fff; font: inherit; font-size: 1.3rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 12px rgba(45, 106, 79, 0.25); transition: background 0.2s, box-shadow 0.2s;
}
.langpick-top:hover { background: var(--primary-light); box-shadow: 0 4px 20px rgba(45, 106, 79, 0.3); }
.langpick-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
.langpick-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px;
  padding: 12px 4px; border: 0; border-bottom: 1px solid rgba(27, 27, 27, 0.12); background: none;
  color: var(--text); font: inherit; font-size: 1.25rem; text-align: left; cursor: pointer; transition: color 0.2s;
}
.langpick-opt:hover { color: var(--primary); }
.langpick-chev { flex: none; color: var(--primary); }
.langpick-note { position: relative; margin: 20px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-light); }
.langpick button:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }
.langpick button:disabled { cursor: progress; opacity: 0.7; }
@keyframes langpickIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes langpickCardIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .langpick-card { padding: 34px 20px 22px; }
  .langpick-title { font-size: 1.8rem; }
  .langpick-grid { column-gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .langpick, .langpick-card { animation: none; }
}

/* Footer dropdown */
.pl-lang { position: relative; display: inline-block; }
.pl-lang-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
  color: rgba(255, 255, 255, 0.6); font: inherit; font-size: 1.12rem; cursor: pointer; transition: color 0.2s;
}
.pl-lang-btn:hover, .pl-lang-btn.is-open { color: #fff; }
.pl-lang-caret { transition: transform 0.2s; }
.pl-lang-btn.is-open .pl-lang-caret { transform: rotate(180deg); }
.pl-lang-btn:focus-visible { outline: 2px solid #95D5B2; outline-offset: 4px; border-radius: 4px; }
.pl-lang-menu {
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 20;
  width: 230px; margin: 0; padding: 6px; list-style: none; text-align: left;
  background: #262626; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.pl-lang-menu[hidden] { display: none; }
.pl-lang-menu [role="option"] {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px;
  border-radius: 8px; color: rgba(255, 255, 255, 0.82); font-size: 1.12rem; cursor: pointer; outline: none;
}
.pl-lang-menu [role="option"]:hover, .pl-lang-menu [role="option"]:focus { background: rgba(255, 255, 255, 0.08); color: #fff; }
.pl-lang-menu [role="option"]:focus-visible { box-shadow: inset 0 0 0 2px #95D5B2; }
.pl-lang-check { visibility: hidden; color: #95D5B2; }
.pl-lang-menu .is-current { color: #fff; font-weight: 600; }
.pl-lang-menu .is-current .pl-lang-check { visibility: visible; }

/* Settings: language dropdown — the app's light look, opening downwards; the section sits above the next
   glass cards (their backdrop-filter makes their own stacking contexts, which would paint over the open list). */
.settings-lang-section { position: relative; z-index: 40; }
.set-lang { position: relative; max-width: 380px; margin-top: 12px; }
.set-lang-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 18px;
  border: 1px solid rgba(45, 106, 79, 0.35); border-radius: 12px; background: #fff; color: var(--ink);
  font: inherit; font-size: 20px; text-align: left; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
.set-lang-btn:hover { border-color: var(--primary); }
.set-lang-btn.is-open { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.25); }
.set-lang-btn:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }
.set-lang-btn:disabled { cursor: progress; opacity: 0.7; }
.set-lang-name { flex: 1; }
.set-lang-globe { flex: none; color: var(--ink-soft); }
.set-lang-caret { flex: none; transition: transform 0.2s; }
.set-lang-btn.is-open .set-lang-caret { transform: rotate(180deg); }
.set-lang-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid rgba(45, 106, 79, 0.2); border-radius: 12px; box-shadow: 0 18px 44px rgba(19, 43, 33, 0.18);
}
.set-lang-menu[hidden] { display: none; }
.set-lang-menu [role="option"] {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px;
  border-radius: 8px; color: var(--ink); font-size: 19px; cursor: pointer; outline: none;
}
.set-lang-menu [role="option"]:hover, .set-lang-menu [role="option"]:focus { background: #e8f5ee; }
.set-lang-menu [role="option"]:focus-visible { box-shadow: inset 0 0 0 2px var(--primary-light); }
.set-lang-menu [aria-disabled="true"] { cursor: progress; opacity: 0.6; }
.set-lang-check { visibility: hidden; color: var(--primary); }
.set-lang-menu .is-current { font-weight: 600; }
.set-lang-menu .is-current .set-lang-check { visibility: visible; }
.settings-lang-msg { margin: 10px 0 0; font-size: 17px; }
.settings-lang-msg:empty { display: none; }
.settings-lang-msg.is-error { color: #b42318; }
/* the country below the language, in the same card */
.settings-country-title { margin: 24px 0 4px; font-size: 19px; font-weight: 600; color: var(--ink); }

/* Long compound words (Anforderungsvermeidung, ondersteuningsplanning) in narrow card names: hyphenated in the page's
   language (<html lang>, set by js/i18n.js; only words of 12+ letters), and broken as a last resort where the browser
   has no dictionary for the language, so they never run past the card's edge. */
.btn-card-name, .quiz-theme-name {
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word;
}
/* Layout measured with the app's own font (Source Serif 4) in every language at 390 and 1280.
   Learn theme descriptions: the same long-word rule as the names above (a narrow column on phones: de, nl). */
.quiz-theme-list .btn-card-desc {
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word;
}
/* fitText() (js/app.js) shrinks a text that does not fit, up to a set limit; one still too wide at its smallest gets
   .fit-overflow and only then hyphenates (in the page's language; broken as a last resort without a dictionary —
   'anywhere', so the box does not grow to the word either) */
.fit-overflow { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: anywhere; }
/* A feeling's word may use the whole inside of its button; fitText up to 15 %, then hyphenated (pl Zdenerwowanie,
   nl/fr Enthousiasme, it Soddisfazione, nl Tevredenheid, de Zufriedenheit) */
body.in-tool #view-sa_main .sa-emotion-btn { padding-left: 0; padding-right: 0; }
.sa-emotion-btn .sa-emotion-label { max-width: 100%; }
/* The campaign seal's word stays inside the dashed ring (fitText down to 65 %: it is a badge, the percentage matters) */
.pl-offer-seal small { max-width: 84%; text-align: center; overflow-wrap: break-word; }
/* At a create button the extra-credit options are one per row, as on the phone (the form column is narrow; de
   Gesamteinschätzungen); Settings keeps three columns */
.credits-notice-tool .credits-offers { grid-template-columns: 1fr; }
/* Certificate report card: the status chip goes under the tool's name when both do not fit on one line (de, nl) */
.cert-task-main { flex-wrap: wrap; row-gap: 6px; }
/* L8: the offer's heading keeps to the screen — its column no longer grows to the longest word (pl
   neurodywergentnych, es neurodivergentes on phones); fitText shrinks it up to 20 %, then it hyphenates */
.pl-offer-head { min-width: 0; }
/* L9–L12. L9 the front page's figure labels (nl neurodivergentietrainingen, fi
   neurokirjokoulutustemme) and L11 page titles (fi Sovittelusuunnitelma) are fitted — up to 15 % and 10 % — in
   js/app.js. L10: in Transitions' choice cards the name may wrap (nl Macro — grote verandering in het leven). */
body.in-tool .scw .scw-ages.trw-acc .btn-card-name { white-space: normal; }
/* L9: the figures' columns keep equal widths instead of growing to the longest word (the band ran past the phone's edge) */
.pl-about-stat { min-width: 0; }
/* Self-assessment's Back / Skip / Next shrink together up to 15 %; if that is not enough (sv Föregående, Hoppa
   över, Nästa) they keep their size and Next takes a row of its own, lowest, near the thumb */
body.in-tool #view-sa_main .sa-nav.fit-wrap { flex-wrap: wrap; }
body.in-tool #view-sa_main .sa-nav.fit-wrap #saNext { flex-basis: 100%; }
/* L13: a Learn Why card's table that would be wider than the card (refitTexts adds .fit-overflow): the cells may
   break long words — hyphenated in the page's language — so the columns stop growing to them (nl Groepssituaties) */
.quiz-why-table.fit-overflow th,
.quiz-why-table.fit-overflow td { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: anywhere; }

/* Amounts and dates stay on one line (Spanish 3 × | 43,33 €; Swedish 2027- | 09-26) */
.nowrap, .pl-offer-opt .amt { white-space: nowrap; }
/* LISÄMAAT: 16 countries + another country — the list scrolls inside itself rather than past the screen */
.set-lang-menu { max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; }