/* ═══════════════════════════════════════════════════════════════════════════
   Platitude — application layout.
   Every colour here resolves to a design system token. No raw hex except
   brand-accent alphas, which the design system permits.
   ═══════════════════════════════════════════════════════════════════════════ */

.page { max-width: 880px; margin: 0 auto; padding: 0 var(--space-5) var(--space-10); }
.page--wide { max-width: 1280px; }

/* ── Header ───────────────────────────────────────────────────────────────── */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-default);
  border-bottom: 1px solid var(--bg-border);
}

.app-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.app-header__brand { display: flex; align-items: center; gap: var(--space-3); }
.app-header__brand img { height: 30px; width: auto; display: block; }

/* Shown only if the logo asset is missing, so the header never collapses. */
.brand-fallback {
  font-family: var(--font-accent);
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  color: var(--content-primary);
  letter-spacing: -.01em;
}

.app-header__sub {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--poodle-primary);
  padding-left: var(--space-3);
  border-left: 1px solid var(--bg-border);
}

.app-header__spacer { flex: 1; }
.app-header__right { display: flex; align-items: center; gap: var(--space-3); }

/* On a phone the header has more in it than fits. Drop the identity block and
   the sub-brand label first — both are context, not controls — and keep the
   logo, the admin link and the two buttons. */
@media (max-width: 640px) {
  .app-header__inner { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .app-header__who,
  .app-header__sub { display: none; }
  .app-header__right { gap: var(--space-2); }
  .app-header__right .pl-btn { padding: 8px 12px; font-size: 13px; }
  .app-header__brand img { height: 26px; }
}

.app-header__who {
  text-align: right;
  line-height: 1.3;
  font-size: 13px;
}
.app-header__who strong { display: block; color: var(--content-primary); }
.app-header__who span { color: var(--content-secondary); font-size: 12px; }

/* ── Round banner ─────────────────────────────────────────────────────────── */

.round-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-base);
  background: rgba(126, 5, 232, .06);
  border: 1px solid rgba(126, 5, 232, .18);
}
.round-bar__title { font-family: var(--font-accent); font-size: 18px; font-weight: 700; }
.round-bar__meta  { color: var(--content-secondary); font-size: 13px; }

/* ── Form ─────────────────────────────────────────────────────────────────── */

.form-section {
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.form-section__head { margin-bottom: var(--space-5); }
.form-section__step {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--poodle-primary);
  margin-bottom: var(--space-2);
}
.form-section__title { font-family: var(--font-accent); font-size: 20px; margin: 0 0 6px; }
.form-section__blurb { color: var(--content-secondary); font-size: 14px; margin: 0; }

.field { margin-bottom: var(--space-5); }
.field:last-child { margin-bottom: 0; }

.field__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: 6px;
  font-size: 12px;
  color: var(--content-secondary);
}
.field__count { font-variant-numeric: tabular-nums; }
.field__count--short { color: var(--accent-warning); font-weight: var(--font-weight-semibold); }
.field__count--ok    { color: var(--accent-success); font-weight: var(--font-weight-semibold); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── Nominee picker ───────────────────────────────────────────────────────── */

.picker { position: relative; }

.picker__results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-default);
  border: 1px solid var(--bg-border-hover);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-md);
}
.picker__results[hidden] { display: none; }

.picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  color: var(--content-primary);
  border-bottom: 1px solid var(--bg-border);
}
.picker__item:last-child { border-bottom: none; }
.picker__item:hover { background: rgba(126, 5, 232, .05); }
.picker__item[disabled] { opacity: .5; cursor: not-allowed; }
.picker__item-main { flex: 1; min-width: 0; }
.picker__item-name { font-weight: var(--font-weight-semibold); }
.picker__item-dept { font-size: 12px; color: var(--content-secondary); }

.picked {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-xs);
  background: var(--bg-wash);
}
.picked__name { font-weight: var(--font-weight-semibold); }
.picked__dept { font-size: 13px; color: var(--content-secondary); }

/* ── Same-department warning ──────────────────────────────────────────────── */

.exemption {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-base);
  background: rgba(255, 131, 0, .07);
  border: 1px solid rgba(255, 131, 0, .28);
}
.exemption__title {
  font-family: var(--font-accent);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--content-primary);
}
.exemption__body { font-size: 14px; color: var(--content-primary); margin: 0 0 var(--space-4); }

/* ── Strength meter ───────────────────────────────────────────────────────── */

.strength {
  position: sticky;
  bottom: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-4);
  z-index: 10;
}

.strength__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.strength__score {
  font-family: var(--font-accent);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  color: var(--content-primary);
  font-variant-numeric: tabular-nums;
}
.strength__score small { font-size: 14px; color: var(--content-secondary); font-weight: 400; }
.strength__band { font-size: 13px; font-weight: var(--font-weight-semibold); }

.meter {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--poodle-primary), var(--poodle-50));
  transition: width .25s ease;
}
.meter__target {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--content-primary);
  opacity: .55;
}

.strength__hints { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.strength__hints li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: 13px;
  color: var(--content-secondary);
  border-top: 1px solid var(--bg-border);
}
.strength__hints li::before { content: '→'; color: var(--poodle-primary); flex-shrink: 0; }

.strength__blockers { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.strength__blockers li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: 13px;
  color: var(--content-primary);
  border-top: 1px solid var(--bg-border);
}
.strength__blockers li::before { content: '•'; color: var(--accent-alert); flex-shrink: 0; }

.strength__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* ── Preview of what the nominee reads ────────────────────────────────────── */

.preview {
  border-left: 3px solid var(--poodle-primary);
  background: rgba(126, 5, 232, .06);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: var(--space-4) var(--space-5);
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.7;
}

.notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xs);
  font-size: 13px;
  margin-bottom: var(--space-4);
}
.notice--warn  { background: rgba(255, 131, 0, .08); border: 1px solid rgba(255, 131, 0, .28); }
.notice--alert { background: rgba(249, 54, 67, .08); border: 1px solid rgba(249, 54, 67, .28); }
.notice--info  { background: rgba(26, 86, 255, .07); border: 1px solid rgba(26, 86, 255, .22); }
.notice--good  { background: rgba(48, 187, 71, .08); border: 1px solid rgba(48, 187, 71, .28); }

/* ── Radio / choice cards ─────────────────────────────────────────────────── */

.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }

.choice {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-xs);
  background: var(--bg-default);
  cursor: pointer;
  transition: border-color var(--duration-base), background var(--duration-base);
}
.choice:hover { border-color: var(--bg-border-hover); background: var(--bg-hover); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__label { display: block; font-weight: var(--font-weight-semibold); font-size: 14px; margin-bottom: 2px; }
.choice__hint  { display: block; font-size: 12px; color: var(--content-secondary); }
.choice:has(input:checked) {
  border-color: var(--poodle-primary);
  background: rgba(126, 5, 232, .06);
  box-shadow: 0 0 0 1px var(--poodle-primary);
}

/* ── States ───────────────────────────────────────────────────────────────── */

.empty {
  padding: var(--space-10) var(--space-5);
  text-align: center;
  color: var(--content-secondary);
}
.empty h2 { color: var(--content-primary); }

.loading { padding: var(--space-10); text-align: center; color: var(--content-secondary); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.stat {
  padding: var(--space-4) var(--space-5);
}
.stat__label {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--content-secondary);
  margin-bottom: 6px;
}
.stat__value {
  font-family: var(--font-accent);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  color: var(--content-primary);
  font-variant-numeric: tabular-nums;
}
.stat__note { margin-top: 6px; font-size: 12px; color: var(--content-secondary); }

/* ── Admin ────────────────────────────────────────────────────────────────── */

.admin-panel { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); }
.admin-panel__title {
  font-family: var(--font-accent);
  font-size: 17px;
  margin: 0 0 var(--space-4);
}

.review-card { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); }
.review-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--bg-border);
  margin-bottom: var(--space-4);
}
.review-card__who { font-weight: var(--font-weight-semibold); }

.qa { margin-bottom: var(--space-4); }
.qa__q {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--content-secondary);
  margin-bottom: 4px;
}
.qa__a { font-size: 14px; line-height: 1.65; white-space: pre-wrap; }

.matrix { font-size: 12px; }
.matrix td, .matrix th { text-align: center; padding: 6px 8px !important; }
.matrix .diag { background: rgba(255, 131, 0, .14); font-weight: var(--font-weight-bold); }
.matrix .rowhead { text-align: left !important; font-weight: var(--font-weight-semibold); white-space: nowrap; }

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-base);
  background: var(--content-primary);
  color: var(--bg-default);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-md);
  max-width: min(560px, calc(100vw - 32px));
}
.toast[hidden] { display: none; }

.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;
}

/* ── Narrow screens ───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .page { padding: 0 var(--space-4) var(--space-8); }
  .form-section { padding: var(--space-5) var(--space-4); }
  .strength { padding: var(--space-4); }
  .round-bar { padding: var(--space-4); }
  .choices { grid-template-columns: 1fr; }

  /* The meter is sticky on desktop so the score stays in view while writing.
     On a phone that eats a third of the screen — let it sit inline instead. */
  .strength { position: static; }

  .strength__actions { flex-direction: column; align-items: stretch; }
  .strength__actions .pl-btn { width: 100%; }

  h1 { font-size: 24px; }
  .form-section__title { font-size: 18px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
}

/* Worked example, revealed under a field on request. Quoted rather than
   presented as instruction — it is showing a level of detail, not a template
   to copy. */
.example-text {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--bg-border-hover);
  background: var(--bg-wash);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--content-secondary);
  font-style: italic;
}

#previewBlock summary { color: var(--content-primary); }
#previewBlock summary::marker { color: var(--poodle-primary); }

/* ── Logo ─────────────────────────────────────────────────────────────────────
   Two files rather than one recoloured by CSS: an <img> cannot inherit
   currentColor, and the design system is explicit that the logo is referenced
   as a real asset, never redrawn or restyled. Purple on light surfaces, white
   on dark, exactly as the guide specifies. */

.pl-logo { display: block; width: auto; }
.pl-logo--dark  { display: none; }

[data-theme="dark"] .pl-logo--light { display: none; }
[data-theme="dark"] .pl-logo--dark  { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pl-logo--light { display: none; }
  :root:not([data-theme="light"]) .pl-logo--dark  { display: block; }
}

.app-header__brand .pl-logo { height: 28px; }
@media (max-width: 640px) { .app-header__brand .pl-logo { height: 24px; } }

/* ── Strength meter, compact ──────────────────────────────────────────────────
   It is pinned to the bottom of the viewport so the score moves while you
   write. That only works if it stays small: at five bullet points it covered
   the very fields it was asking you to fill in. So the one thing most worth
   fixing sits in the bar, and the rest is one click away. */

.strength__lead {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--bg-border);
  font-size: 13px;
  line-height: 1.5;
  color: var(--content-primary);
}
.strength__lead::before { content: '→'; color: var(--poodle-primary); flex: none; }
.strength__lead:empty { display: none; }

.strength__detail { max-height: 34vh; overflow-y: auto; }

.linky-toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--content-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.linky-toggle:hover { color: var(--content-primary); }

/* The lead line already says the most important thing, so the expanded list
   should not repeat it. */
.strength__detail .strength__blockers li:first-child { border-top: none; }

.strength__detail ul { margin-top: 0; }
.strength__detail li { padding: 6px 0; }

/* The meter floats over the bottom of the page, so when the browser scrolls a
   focused field into view it must leave room for it — otherwise you tab into a
   textarea that is sitting behind the bar. */
.form-section .pl-input,
.form-section .pl-select,
.form-section .pl-textarea,
.exemption .pl-textarea {
  scroll-margin-bottom: 220px;
}

@media (max-width: 640px) {
  /* The meter is not sticky on a phone, so no allowance is needed. */
  .form-section .pl-input,
  .form-section .pl-select,
  .form-section .pl-textarea,
  .exemption .pl-textarea {
    scroll-margin-bottom: 0;
  }
}