/* ---------------------------------------------------------------------------
   Dream Greener — Onboarding & Training
   Self-hosted fonts (Mulish), no CDN requests at runtime.
   Desktop/tablet first; collapses cleanly on a phone in a truck.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/mulish-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/mulish-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/mulish-700.woff2') format('woff2');
}

:root {
  /* Brand greens — Dream Greener style guide */
  --green-900: #2D4F0D;
  --green-800: #3A6413;
  --green-700: #3E6B13;
  --green-600: #497F17; /* primary action color */
  --green-500: #57931D;
  --green-300: #A6D82B;
  --green-100: #EAF3DC; /* pale tint of #497F17 */
  --green-050: #F4F8EC; /* pale tint of #497F17 */

  --surface: #ffffff;
  --surface-2: #F9F9F9;
  --page-bg: #F7F4F2; /* White Chalk */
  --border: #E5EBE9;
  --border-strong: #B6C1BC;

  --text: #414042; /* Black Iron */
  --text-soft: #5C6F68; /* Riverstone, darkened for AA on white (~5.3:1) */
  --text-muted: #647569; /* Riverstone, darkened for AA on white (~4.9:1) */

  --danger: #A5543C; /* Harvest dark */
  --danger-strong: #8B3E29; /* Harvest dark, hover/strong */
  --danger-bg: #F6E7E1;
  --warn: #8A6212;
  --warn-bg: #FBF0D6;
  --marigold: #F8D15D;
  --ok: #3A6413;
  --ok-bg: #EAF3DC;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(15, 26, 18, .06);
  --shadow-md: 0 6px 20px -8px rgba(15, 26, 18, .22);

  --font: 'Mulish', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shell-max: 1120px;

  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -.012em; margin: 0; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-600); }
a:hover { color: var(--green-700); }

code, .mono { font-family: var(--mono); font-size: .875em; }

/* --- Top bar ------------------------------------------------------------- */

.topbar {
  background: #263E4C; /* Dark Midnight — fixed brand chrome, same in light + dark theme */
  color: #EDF2F4;
  border-bottom: 3px solid var(--green-600);
}

.topbar__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: inherit;
  text-decoration: none;
  flex: 0 0 auto;
}

.brand__mark {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand__mark--lg { width: 64px; height: 64px; }

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: .975rem; font-weight: 700; letter-spacing: -.01em; }
.brand__text small { font-size: .7rem; color: #9FB0B8; text-transform: uppercase; letter-spacing: .08em; }

.mainnav { display: flex; gap: .25rem; flex: 1 1 auto; }

.mainnav__link {
  color: #C7D3D9;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  padding: .45rem .7rem;
  border-radius: var(--radius-sm);
}

.mainnav__link:hover { color: #fff; background: rgba(255, 255, 255, .07); }

.mainnav__link.is-active {
  color: var(--green-300);
  background: rgba(255, 255, 255, .12);
}

/* --- User menu ----------------------------------------------------------- */

.usermenu { position: relative; flex: 0 0 auto; }
.usermenu__details { position: relative; }

.usermenu__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .55rem .3rem .3rem;
  border-radius: 999px;
  color: #EDF2F4;
  font-size: .875rem;
}

.usermenu__summary::-webkit-details-marker { display: none; }
.usermenu__summary:hover { background: rgba(255, 255, 255, .08); }

.usermenu__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-600);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 700;
}

.usermenu__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .7;
}

.usermenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 220px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .4rem;
  z-index: 30;
}

.usermenu__meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin: 0;
  padding: .5rem .6rem .6rem;
  border-bottom: 1px solid var(--border);
}

.usermenu__username { font-family: var(--mono); font-size: .8rem; color: var(--text-muted); }

.usermenu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .5rem .6rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
}

.usermenu__item:hover { background: var(--green-050); color: var(--green-700); }
.usermenu__form { margin: 0; }

.usermenu__item--button {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  color: var(--danger);
}

.usermenu__item--button:hover { background: var(--danger-bg); color: var(--danger); }

/* --- Shell --------------------------------------------------------------- */

.shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}

.bare {
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.page { display: flex; flex-direction: column; gap: 1.5rem; }
.page--narrow { max-width: 620px; }

.page__head { display: flex; flex-direction: column; gap: .35rem; }

.page__head--row {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.page__title { font-size: 1.5rem; font-weight: 700; }
.page__lede { color: var(--text-soft); margin: 0; font-size: .95rem; max-width: 62ch; }
.crumb { margin: 0 0 .15rem; font-size: .85rem; }

/* --- Cards --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-sm);
}

.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.card--tile { display: flex; flex-direction: column; gap: .6rem; }

.card--tile.is-upcoming {
  background: var(--surface-2);
  border-style: dashed;
  box-shadow: none;
}

.card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.card__title { font-size: 1.05rem; font-weight: 600; }
.card__body { color: var(--text-soft); font-size: .92rem; margin: 0; flex: 1 1 auto; }
.card__meta { margin: 0; font-size: .875rem; color: var(--text-muted); }

.card--empty { text-align: center; padding: 2.5rem 1.5rem; }
.empty__title { font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
.empty__body { color: var(--text-soft); max-width: 46ch; margin: 0 auto 1rem; font-size: .93rem; }

.errorcode {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--text-muted);
  margin: 0 0 .5rem;
}

.tracebox {
  text-align: left;
  font-family: var(--mono);
  font-size: .78rem;
  background: var(--green-900);
  color: #cfe3d5;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 0 0 1rem;
}

/* --- Login --------------------------------------------------------------- */

.loginwrap { width: 100%; max-width: 400px; }

.card--login { padding: 2rem 1.75rem 1.5rem; }

.login__head { text-align: center; margin-bottom: 1.5rem; display: grid; justify-items: center; gap: .25rem; }
.login__title { font-size: 1.35rem; font-weight: 700; margin-top: .5rem; }
.login__sub { color: var(--text-muted); font-size: .875rem; margin: 0; }

.login__foot {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .8rem;
  text-align: center;
}

/* --- Forms --------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 1.05rem; }

.field { display: flex; flex-direction: column; gap: .35rem; }

.field__label { font-size: .85rem; font-weight: 600; color: var(--text-soft); }
.field__optional { font-weight: 400; color: var(--text-muted); font-size: .78rem; }

.field__input {
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  width: 100%;
}

.field__input:focus-visible,
.btn:focus-visible,
.usermenu__summary:focus-visible,
a:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

.field__input:focus { border-color: var(--green-500); }
.field__input.has-error { border-color: var(--danger); background: var(--danger-bg); }

.field__hint { font-size: .8rem; color: var(--text-muted); margin: 0; }

.fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem 1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.fieldset__legend { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 0 .35rem; }

.checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .4rem .9rem; }

.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--green-600); flex: 0 0 auto; }

.form__actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .58rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary { background: var(--green-600); color: #fff; }
.btn--primary:hover { background: var(--green-700); color: #fff; }

.btn--ghost { background: var(--surface); color: var(--text-soft); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

.btn--danger { background: var(--surface); color: var(--danger); border-color: #DDBBAF; }
.btn--danger:hover { background: var(--danger-bg); color: var(--danger-strong); }

.btn--ok { background: var(--surface); color: var(--ok); border-color: #B9D6A0; }
.btn--ok:hover { background: var(--ok-bg); }

.btn--sm { font-size: .8rem; padding: .35rem .65rem; }
.btn--block { width: 100%; }

.link { font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* --- Flash / alerts ------------------------------------------------------ */

.flashes { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }

.flash,
.alert {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  font-size: .9rem;
  background: var(--surface);
}

.flash--success { border-left-color: var(--ok); background: var(--ok-bg); color: #234D14; }
.flash--error,
.alert--error { border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger-strong); }
.flash--notice { border-left-color: var(--marigold); background: var(--warn-bg); color: #6B4A12; word-break: break-word; }

.alert { margin-bottom: 0; }
.alert__list { margin: .4rem 0 0; padding-left: 1.1rem; }

/* --- Tables -------------------------------------------------------------- */

.tablewrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.table { width: 100%; border-collapse: collapse; font-size: .9rem; }

.table th {
  text-align: left;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  font-weight: 700;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}

.table td { padding: .7rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--green-050); }

.table__sub { display: block; font-size: .8rem; color: var(--text-muted); }
.table__roles { color: var(--text-soft); max-width: 22rem; }
.table__actions { white-space: nowrap; }
.table__actions .btn { margin-right: .35rem; }

.row--inactive td { opacity: .62; }
.inlineform { display: inline; }
.muted { color: var(--text-muted); }

/* --- Pills, badges, status ---------------------------------------------- */

.pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: capitalize;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
  white-space: nowrap;
}

.pill--admin { background: var(--green-700); color: #fff; text-transform: none; }

.rolestrip { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: -.5rem 0 0; }
.rolestrip__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 700; }

.badge {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .18rem .45rem;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  color: var(--green-700);
}

.badge--muted { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border-strong); }
.badge--admin { background: var(--green-700); color: #fff; }

.status {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  padding: .1rem .45rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.status--on { background: var(--ok-bg); color: var(--ok); }
.status--off { background: #eceeed; color: var(--text-muted); }
.status--warn { background: var(--warn-bg); color: var(--warn); }

/* --- Footer -------------------------------------------------------------- */

.footerbar {
  flex: 0 0 auto;
  background: #263E4C; /* Dark Midnight — matches topbar, fixed in light + dark theme */
}

.footer {
  max-width: var(--shell-max);
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  font-size: .78rem;
  color: #C7D3D9;
  display: flex;
  gap: .5rem;
}

.footer__sep { opacity: .5; }

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 640px) {
  .topbar__inner { flex-wrap: wrap; gap: .5rem 1rem; padding: .55rem 1rem; min-height: 0; }
  .mainnav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .usermenu__name { display: none; }
  .shell { padding: 1.25rem 1rem 2.5rem; }
  .page__head--row { flex-direction: column; align-items: stretch; }
  .table__actions .btn { margin: .15rem .35rem .15rem 0; }
}

/* --- Dark mode ----------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    /* Base: Dark Midnight surfaces */
    --surface: #1D303C;
    --surface-2: #263E4C;
    --page-bg: #16242D;
    --border: #35505E;
    --border-strong: #46606D;

    --text: #F7F4F2;
    --text-soft: #B9C4C0; /* ~6.3:1 on --surface-2 */
    --text-muted: #9CACA6; /* ~4.7:1 on --surface-2 */

    /* Bold/link green on dark surfaces per the guide's dark-surface spec */
    --green-100: #2F4A1E;
    --green-050: #26391A;
    --green-600: #A6D82B;
    --green-700: #B4DE3D;

    --danger: #D98B72;
    --danger-strong: #F0C3B8;
    --danger-bg: #3A2018;
    --warn: #F0C878;
    --warn-bg: #332711;
    --ok: #8FCB5C;
    --ok-bg: #1C2E12;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 6px 20px -8px rgba(0, 0, 0, .7);

    color-scheme: dark;
  }

  /* --green-600/700 are brightened above for legibility on dark surfaces,
     so components that use them as a solid background need dark text. */
  .btn--primary { color: var(--green-900); }
  .btn--primary:hover { color: var(--green-900); }
  .usermenu__avatar { color: var(--green-900); }
  .pill--admin, .badge--admin { color: var(--green-900); }
  .filterpill.is-active { color: var(--green-900); }
  .status--off { background: #2B4048; }
  .flash--success { color: #BFE3A8; }
  .flash--error, .alert--error { color: var(--danger-strong); }
  .flash--notice { color: #F0DDAE; }
}

/* ===========================================================================
   Reference library
   =========================================================================== */

.librarysearch {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.librarysearch__input { flex: 1 1 260px; }

.filterpills {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
}

.filterpill {
  display: inline-flex;
  align-items: center;
  font-size: .85rem;
  font-weight: 600;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-soft);
  text-decoration: none;
}

.filterpill:hover { background: var(--surface-2); color: var(--text); }

.filterpill.is-active {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}

.libraryresults {
  margin: 0;
  font-size: .9rem;
  color: var(--text-soft);
}

.libgroup { display: flex; flex-direction: column; gap: .75rem; }

.libgroup__title {
  font-size: 1.05rem;
  font-weight: 600;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}

.doclist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.doccard {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: inherit;
}

.doccard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.doccard--superseded { background: var(--surface-2); }

.doccard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.doccard__title { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; }

.doccard__badges {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.doccard__superseded {
  margin: 0;
  font-size: .8rem;
  font-style: italic;
  color: var(--text-muted);
}

.doccard__summary {
  margin: 0;
  font-size: .88rem;
  color: var(--text-soft);
}

/* Search-term highlighting on result cards (library_highlight_terms() in
   index.php wraps matches in <mark>). Uses the theme's own green tint
   instead of the browser default yellow; padding/radius only, no font
   changes, so wrapped/highlighted text doesn't reflow the card. --green-100
   and --green-700 are redefined for dark surfaces already (see the dark
   mode block above), so this needs no separate dark-mode override. */
.doccard__title mark,
.doccard__summary mark {
  background: var(--green-100);
  color: inherit;
  border-radius: 3px;
  padding: 0 .1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- Doc-type / tag badges (extend the base .badge from earlier) --------- */

.badge--type-trainable { background: var(--green-100); color: var(--green-700); }
.badge--type-reference { background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border-strong); }
.badge--type-hybrid { background: var(--warn-bg); color: var(--warn); }
.badge--tag { background: var(--green-050); color: var(--green-700); border: 1px solid var(--green-300); }

.docmeta {
  margin: 0;
  font-size: .9rem;
  color: var(--text-muted);
}

.docmeta__sep { margin: 0 .3rem; opacity: .6; }

/* --- Document body (.prose) ----------------------------------------------- */

.prose { font-size: .97rem; line-height: 1.65; color: var(--text); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

.prose h1, .prose h2, .prose h3, .prose h4 {
  line-height: 1.3;
  margin: 1.5rem 0 .6rem;
  color: var(--text);
}

.prose h1 { font-size: 1.35rem; }
.prose h2 { font-size: 1.2rem; }
.prose h3 { font-size: 1.05rem; }

.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.prose li { margin-bottom: .3rem; }

.prose a { color: var(--green-600); }
.prose a:hover { color: var(--green-700); }

.prose strong { font-weight: 700; }

.prose blockquote {
  margin: 0 0 1rem;
  padding: .6rem 1rem;
  border-left: 3px solid var(--green-300);
  background: var(--surface-2);
  color: var(--text-soft);
}

.prose hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

.prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* Wrapper injected by content_wrap_tables() around every <table> so a wide
   fee table or matrix scrolls on its own instead of blowing out the page. */
.prose .table-scroll {
  overflow-x: auto;
  margin: 0 0 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
}

.prose table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: .88rem;
  margin: 0;
}

.prose th, .prose td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prose thead th {
  background: var(--surface-2);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
}

.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:nth-child(even) { background: var(--surface-2); }

/* --- Small screens --------------------------------------------------------- */

@media (max-width: 640px) {
  .librarysearch { flex-direction: column; align-items: stretch; }
  .doclist { grid-template-columns: 1fr; }
  .doccard__head { flex-direction: column; align-items: flex-start; gap: .4rem; }
}

/* --- Editorial note callout (injected by the content pipeline) ------------- */

.prose .doc-note {
  margin: 0 0 1.25rem;
  padding: .8rem 1rem;
  background: var(--surface-2);
  border-left: 3px solid var(--green-600);
  border-radius: 0 6px 6px 0;
  font-size: .9rem;
  color: var(--text-soft);
}
.prose .doc-note strong { color: var(--text); }

/* --- SOP callout types (Document Conventions color coding) ----------------- */
/* Mirrors the Word original: green = contract-grounded, gold = open item,
   gray = script/template, midnight = policy decision. Classes applied by the
   content pipeline; base .prose blockquote styling still applies. */

.prose blockquote.callout--contract {
  background: #EAF3DC;
  border-left-color: var(--green-600);
  color: var(--text);
}
.prose blockquote.callout--open {
  background: #FBF4DA;
  border-left-color: #C9A227;
  color: var(--text);
}
.prose blockquote.callout--script {
  background: #F1F3F2;
  border-left-color: var(--border-strong);
  color: var(--text);
}
.prose blockquote.callout--policy {
  background: #EAF0F3;
  border-left-color: #263E4C;
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  .prose blockquote.callout--contract { background: #24331B; border-left-color: var(--green-300); }
  .prose blockquote.callout--open     { background: #37301A; border-left-color: #E3C25A; }
  .prose blockquote.callout--script   { background: #253038; border-left-color: #5C7C79; }
  .prose blockquote.callout--policy   { background: #1F3140; border-left-color: #97B9B5; }
}

/* Audience callouts: section-opening context, not authority — Stillwater. */
.prose blockquote.callout--audience {
  background: #EEF4F3;
  border-left-color: #5C7C79;
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  .prose blockquote.callout--audience { background: #223438; border-left-color: #97B9B5; }
}

/* Operational callouts: note (informational), protect (safety-critical), pro tip. */
.prose blockquote.callout--note {
  background: #FBF4DA;
  border-left-color: #C9A227;
  color: var(--text);
}
.prose blockquote.callout--protect {
  background: #FBEEE9;
  border-left-color: var(--danger);
  color: var(--text);
}
.prose blockquote.callout--protip {
  background: #EAF3DC;
  border-left-color: var(--green-500);
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  .prose blockquote.callout--note    { background: #37301A; border-left-color: #E3C25A; }
  .prose blockquote.callout--protect { background: #3A2620; border-left-color: #CF785D; }
  .prose blockquote.callout--protip  { background: #24331B; border-left-color: var(--green-300); }
}

/* ===========================================================================
   Floating "On this page" nav (library document pages, 4+ h2[id] sections)
   Built entirely client-side by app.js (initDocToc). Inert markup — an empty
   <aside hidden> and a plain-block .doclayout wrapper — ships from show.php
   so short docs and no-JS visitors render identically to a bare .card.
   =========================================================================== */

.doclayout { display: block; }

.doctoc[hidden] { display: none; }

/* Hides the in-body "Table of Contents"/"Contents" h2 + its <ul> once the
   floating nav takes over. Class is added directly to those two elements by
   app.js (see initDocToc → hideInlineToc) — nothing here matches on text. */
.prose .doctoc-hide { display: none; }

/* --- Active layout (JS adds .doclayout--toc once it decides to render) --- */

@media (min-width: 1100px) {
  .doclayout--toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
    grid-template-areas: "doc toc";
    align-items: start;
    gap: 1.75rem;
  }

  .doclayout--toc .doclayout__doc { grid-area: doc; min-width: 0; }

  .doclayout--toc .doctoc {
    grid-area: toc;
    position: sticky;
    top: 1.25rem;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
  }

  .doctoc__toggle { display: none; }
}

.doctoc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: .85rem;
}

.doctoc__panel { padding: 1rem 1.1rem; }

.doctoc__heading {
  margin: 0 0 .6rem;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

.doctoc__list,
.doctoc__sublist { list-style: none; margin: 0; padding: 0; }

.doctoc__item { margin: 0 0 .1rem; }

.doctoc__link,
.doctoc__sublink {
  display: block;
  text-decoration: none;
  line-height: 1.35;
  border-radius: var(--radius-sm);
}

.doctoc__link {
  padding: .4rem .6rem;
  color: var(--text-soft);
  font-weight: 600;
  border-left: 2px solid transparent;
}

.doctoc__link:hover { color: var(--text); background: var(--surface-2); }

.doctoc__item.is-active > .doctoc__link {
  color: var(--green-700);
  background: var(--green-050);
  border-left-color: var(--green-600);
}

.doctoc__sublist {
  margin: .15rem 0 .35rem .6rem;
  padding-left: .6rem;
  border-left: 1px solid var(--border);
}

.doctoc__sublist[hidden] { display: none; }

.doctoc__sublink {
  padding: .3rem .6rem;
  color: var(--text-muted);
  font-weight: 400;
  font-size: .82rem;
}

.doctoc__sublink:hover { color: var(--text); }

.doctoc__sublink.is-active {
  color: var(--green-700);
  font-weight: 600;
}

.doctoc__link:focus-visible,
.doctoc__sublink:focus-visible,
.doctoc__toggle:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

/* Anchor targets clear the mobile sticky bar / give breathing room above the
   heading; only applied once the floating nav is actually active. */
.doclayout--toc .prose [id] { scroll-margin-top: 4.5rem; }

/* --- Narrow viewports: slim sticky toggle bar with a dropdown panel ------- */

@media (max-width: 1099.98px) {
  .doclayout--toc .doctoc {
    position: sticky;
    top: 0;
    z-index: 15;
    margin: 0 0 1.25rem;
  }

  .doctoc__heading { display: none; }

  .doctoc__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    border: 0;
    border-radius: var(--radius);
    padding: .7rem .95rem;
    cursor: pointer;
  }

  .doctoc__caret {
    flex: 0 0 auto;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .7;
    transition: transform .15s ease;
  }

  .doctoc__toggle[aria-expanded="true"] .doctoc__caret { transform: rotate(180deg); }

  .doctoc__panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: -1px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-md);
    max-height: min(70vh, 26rem);
    overflow-y: auto;
    z-index: 16;
  }

  .doctoc__panel.is-open { display: block; }
}

/* --- Document section hierarchy (owner request 8/4: clearer separation) ----
   Chapter (h2) > section (h3) > step (h4). Rules + spacing mark the
   boundaries; h4 demotes visually so in-section steps stop competing with
   section headings. Border vars flip automatically in dark mode. */

.prose h2 {
  font-size: 1.3rem;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--border-strong);
}
.prose h3 {
  margin-top: 2.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.prose h4 {
  font-size: .95rem;
  color: var(--text-soft);
  margin-top: 1.6rem;
}

/* No rule when a heading directly follows its parent heading or opens the doc. */
.prose h1 + h2,
.prose h2 + h3,
.prose > h2:first-child,
.prose > h3:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 1.6rem;
}

/* Card category label: quiet type identifier under the title. */
.doccard__category {
  margin: -.15rem 0 .4rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Headings inside callouts/blockquotes are labels, not section starts — no
   rules, no section spacing (fixes the floating line in STOP boxes). */
.prose blockquote h2,
.prose blockquote h3,
.prose blockquote h4 {
  border-top: none;
  padding-top: 0;
  margin-top: .8rem;
  color: var(--text);
}
.prose blockquote > :first-child { margin-top: 0; }

/* ===========================================================================
   Phase 3 — Course engine (dashboard My Training, course overview, lessons,
   checkpoints). Built entirely from the custom properties above, so every
   colour here follows the theme into dark mode with the rest of the app.
   Desktop/tablet first; the whole section stacks under 720px.
   =========================================================================== */

/* --- Shared bits ---------------------------------------------------------- */

/* Visible to a screen reader, invisible on screen. Lesson rows use it to say
   "Done." / "Locked." next to a glyph that is drawn, not spoken. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dot { opacity: .5; margin: 0 .15rem; }

/* Progress uses the real <progress> element: it carries its own value to
   assistive tech, and it needs no inline width style to draw a fill. */
.progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  color: var(--green-600);
  overflow: hidden;
}

.progress::-webkit-progress-bar { background: var(--border); border-radius: 999px; }
.progress::-webkit-progress-value { background: var(--green-600); border-radius: 999px; }
.progress::-moz-progress-bar { background: var(--green-600); border-radius: 999px; }

.progress--hero { height: 12px; }
.progress--sm { height: 5px; width: 140px; }

.progress.is-complete::-webkit-progress-value { background: var(--ok); }
.progress.is-complete::-moz-progress-bar { background: var(--ok); }

.progressblock { display: flex; flex-direction: column; gap: .4rem; }

.progressblock__meta {
  margin: 0;
  font-size: .85rem;
  color: var(--text-muted);
}

.progressblock__meta strong { color: var(--text); }

/* A small round state marker: the green tick used wherever something is done. */
.statusdot {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.statusdot.is-done { background: var(--green-600); color: #fff; }

/* Chips: short status facts (due date, total time, preview). */
.chiprow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-soft);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.chip--due { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.chip--overdue { background: var(--danger-bg); color: var(--danger-strong); border-color: transparent; }
.chip--done { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.chip--muted { background: var(--surface); color: var(--text-muted); border-color: var(--border-strong); }

/* Tags: inline labels inside a row (Checkpoint, Best 80%, Your answer). */
.tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .1rem .4rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  white-space: nowrap;
  vertical-align: middle;
}

.tag--checkpoint { background: var(--green-100); color: var(--green-700); }
.tag--score { background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); }
.tag--required { background: var(--warn-bg); color: var(--warn); }
.tag--yours { background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border-strong); }
.tag--right { background: var(--ok-bg); color: var(--ok); }

.previewnote {
  margin: 0;
  font-size: .82rem;
  font-style: italic;
  color: var(--text-muted);
}

.lockicon { vertical-align: -1px; }

/* --- Dashboard: My Training ---------------------------------------------- */

.trainingsection { display: flex; flex-direction: column; gap: .9rem; }

.sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}

.sectionhead__title { font-size: 1.15rem; font-weight: 700; }
.sectionhead__meta { margin: 0; font-size: .82rem; color: var(--text-muted); }

.courselist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

.coursecard {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.25rem 1.25rem;
}

.coursecard--complete {
  background: var(--ok-bg);
  border-color: var(--green-300);
}

.coursecard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.coursecard__title { font-size: 1.1rem; font-weight: 700; }

.coursecard__done {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  color: var(--ok);
}

.coursecard__body {
  margin: 0;
  font-size: .9rem;
  color: var(--text-soft);
  flex: 1 1 auto;
}

.coursecard__actions {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: .1rem;
}

/* --- Course overview ------------------------------------------------------ */

.coursehero { gap: .7rem; }
.coursehero .progressblock { max-width: 34rem; }
.coursehero__action { margin: .2rem 0 0; }

.completebanner {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: .2rem 0 0;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  background: var(--ok-bg);
  border: 1px solid var(--green-300);
  color: var(--text);
  font-size: .92rem;
}

.modulelist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modulecard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.modulecard--complete { border-color: var(--green-300); }

.modulecard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.modulecard__heading { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.modulecard__num {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.modulecard__title { font-size: 1.05rem; font-weight: 700; }

.modulecard__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
  flex: 0 0 auto;
}

.modulecard__count { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }

.modulecard__summary {
  margin: 0;
  font-size: .9rem;
  color: var(--text-soft);
  max-width: 68ch;
}

.lockline {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .45rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 600;
}

/* --- Lesson rows ---------------------------------------------------------- */

.lessonlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  border-top: 1px solid var(--border);
  padding-top: .5rem;
}

.lessonrow__inner {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .6rem;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

a.lessonrow__inner:hover { background: var(--green-050); }
a.lessonrow__inner:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }

.lessonrow__icon {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.lessonrow__main {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.lessonrow__title { font-size: .93rem; font-weight: 600; }

.lessonrow__meta {
  font-size: .8rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

.lessonrow.is-done .lessonrow__icon {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}

.lessonrow.is-done .lessonrow__title { color: var(--text-soft); }

.lessonrow.is-retry .lessonrow__icon {
  background: var(--warn-bg);
  border-color: var(--warn);
  color: var(--warn);
}

.lessonrow.is-locked { opacity: .55; }
.lessonrow.is-locked .lessonrow__icon { background: var(--surface-2); border-style: dashed; }
.lessonrow.is-locked .lessonrow__inner { cursor: default; }

/* --- Lesson page ---------------------------------------------------------- */

.crumb--trail { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.crumb__sep { color: var(--text-muted); }
.crumb__here { color: var(--text-muted); font-weight: 600; }

.lessonkicker {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.lessondone {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .1rem 0 0;
  font-size: .88rem;
  color: var(--ok);
  font-weight: 600;
}

.lessonnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lessonnav__link {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
}

.lessonnav__link:hover { color: var(--green-700); text-decoration: underline; }

/* Sticky action bar. Bleeds to the shell's padding edges so it reads as a bar
   rather than a floating card, but never wider than the 1120px shell. Sticky
   (not fixed) so it settles into place at the end of the page and leaves the
   site footer alone. */
.lessonbar {
  position: sticky;
  bottom: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 -1.25rem;
  padding: .8rem 1.25rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 20px -14px rgba(15, 26, 18, .45);
}

.lessonbar__back { font-size: .88rem; }
.lessonbar__form { margin: 0; }

.lessonbar__actions {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}

.lessonbar__state {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ok);
}

/* Admin-only media placeholder. Non-admin bodies never contain the element at
   all (training_strip_media_slots removes it), so this is only ever seen by
   the person who can do something about it. */
.prose .media-slot {
  margin: 0 0 1.25rem;
  padding: .9rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .88rem;
}

.prose .media-slot::before {
  content: "Photo or video coming";
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .25rem;
}

.prose .media-slot p { margin: 0; }

/* --- Checkpoints ---------------------------------------------------------- */

.quizintro { margin: 0; font-size: .92rem; color: var(--text-soft); max-width: 66ch; }

.attemptline { margin: 0; font-size: .84rem; color: var(--text-muted); }
.attemptline__passed { color: var(--ok); font-weight: 600; }

.quizform { display: flex; flex-direction: column; gap: 1.25rem; }

.questionlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.qcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem 1.2rem;
}

.qcard__fieldset { border: 0; margin: 0; padding: 0; display: block; }
.qcard__legend { display: block; width: 100%; padding: 0; }

.qcard__num {
  margin: 0 0 .3rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.qcard__prompt {
  display: block;
  margin: 0 0 .8rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.qcard__hint {
  margin: -.5rem 0 .7rem;
  font-size: .82rem;
  color: var(--text-muted);
}

.qcard__verdict { letter-spacing: .05em; }
.qcard--correct .qcard__verdict { color: var(--ok); }
.qcard--wrong .qcard__verdict { color: var(--danger); }

.qcard--correct { border-color: var(--green-300); background: var(--ok-bg); }
.qcard--wrong { border-color: #DDBBAF; background: var(--danger-bg); }
.qcard--review .choices { margin-bottom: .8rem; }

.qcard__why {
  margin: 0;
  padding-top: .7rem;
  border-top: 1px solid var(--border);
  font-size: .89rem;
  color: var(--text-soft);
}

.qcard__why strong { color: var(--text); }

.choices { display: flex; flex-direction: column; gap: .45rem; margin: 0; padding: 0; list-style: none; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .65rem .85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .93rem;
  cursor: pointer;
}

.choice:hover { border-color: var(--green-500); background: var(--green-050); }

.choice__input {
  width: 18px;
  height: 18px;
  margin: .1rem 0 0;
  accent-color: var(--green-600);
  flex: 0 0 auto;
  cursor: pointer;
}

.choice__text { flex: 1 1 auto; }

.choice:has(.choice__input:checked) {
  border-color: var(--green-600);
  background: var(--green-050);
  box-shadow: inset 0 0 0 1px var(--green-600);
}

.choice:has(.choice__input:focus-visible) {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

/* Review rows are static text, not disabled inputs: nothing to tab through,
   nothing that looks re-answerable. */
.choice--static { cursor: default; background: var(--surface); align-items: center; }
.choice--static:hover { border-color: var(--border-strong); background: var(--surface); }

.choice__mark {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  font-weight: 700;
  font-size: .85rem;
  color: var(--text-muted);
}

.choice__tags { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; flex: 0 0 auto; }

.choice--correct { border-color: var(--green-300); background: var(--ok-bg); }
.choice--correct .choice__mark { color: var(--ok); }
.choice--wrong { border-color: #DDBBAF; background: var(--danger-bg); }
.choice--wrong .choice__mark { color: var(--danger); }

.quizactions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }

.continueanyway { margin: 0; font-size: .86rem; color: var(--text-muted); max-width: 62ch; }

.scorebanner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

.scorebanner--pass { background: var(--ok-bg); border-color: var(--green-300); }
.scorebanner--fail { background: var(--warn-bg); border-color: var(--marigold); }

.scorebanner__pct {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  flex: 0 0 auto;
}

.scorebanner--pass .scorebanner__pct { color: var(--ok); }
.scorebanner--fail .scorebanner__pct { color: var(--warn); }

.scorebanner__text { display: flex; flex-direction: column; gap: .2rem; }
.scorebanner__headline { margin: 0; font-size: 1.15rem; font-weight: 700; }
.scorebanner__sub { margin: 0; font-size: .88rem; color: var(--text-soft); }

/* --- People grid ------------------------------------------------------------
   The Who's Who lesson's team cards. Photos come from the public org chart
   (dreamgreener.com/org-chart) sized to 480px at build time; people without a
   photo there get an initials tile so the grid never shows a broken image. */

.peoplegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .9rem;
  margin: 0 0 1.25rem;
}

.person {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.person img,
.person__initials {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
}

.person__initials {
  display: grid;
  place-items: center;
  background: var(--green-100);
  color: var(--green-800);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .02em;
}

.person figcaption { display: flex; flex-direction: column; gap: .1rem; }
.person figcaption strong { font-size: .92rem; line-height: 1.3; }
.person figcaption span { font-size: .78rem; color: var(--text-soft); line-height: 1.35; }

/* --- Manager & assignments -------------------------------------------------
   My Team, one team member's record, and the admin assignments page. Reuses
   .modulecard/.lessonrow/.tag/.chip/.attemptline from the sections above —
   the additions here are the summary strip, the per-person stacked course
   cells inside the team table, and the assignment form's two-select row. */

/* Three stat tiles above the My Team table. */
.teamstats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.teamstat {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 150px;
  padding: .75rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.teamstat__value { font-size: 1.55rem; font-weight: 700; line-height: 1; }
.teamstat__label { font-size: .8rem; color: var(--text-muted); }

.teamstat--warn .teamstat__value { color: var(--warn); }
.teamstat--ok .teamstat__value { color: var(--ok); }

/* One person's per-course training, stacked inside a single table cell. */
.teamcourses {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 220px;
}

.teamcourse { display: flex; flex-direction: column; gap: .25rem; }

.teamcourse__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.teamcourse__title { font-size: .85rem; font-weight: 600; color: var(--text); }

.teamcourse__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.teamcourse__bar .progress--sm { width: 100px; }

.teamcourse__pct {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* --- One team member's record ---------------------------------------------- */

.membercourse + .membercourse { margin-top: 1rem; }

.membercourse__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

.membercourse__title { font-size: 1.15rem; font-weight: 700; }

.membermodule {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.membermodule:first-of-type { margin-top: 1rem; }

.membermodule__head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}

.membermodule__title { font-size: .98rem; font-weight: 700; }

/* Attempt history: a muted line per attempt, indented to sit under the lesson
   row's title (icon width + gap + row padding). */
.attempthistory {
  list-style: none;
  margin: 0 0 .35rem 2.7rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

/* --- Admin: assignments ----------------------------------------------------- */

.assigncard__title { margin-bottom: .9rem; }

/* The role/person pair of selects, side by side on a tablet+ screen. */
.formrow {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.formrow .field { flex: 1 1 220px; }

/* --- Phase 3 on a phone ---------------------------------------------------- */

@media (max-width: 720px) {
  .courselist { grid-template-columns: 1fr; }

  .coursecard__head,
  .modulecard__head { flex-direction: column; align-items: stretch; gap: .5rem; }

  .modulecard__status { align-items: stretch; }
  .progress--sm { width: 100%; }

  .lessonrow__inner { align-items: flex-start; }
  .lessonrow__meta { align-self: center; }

  .lessonbar {
    margin: 0 -1rem;
    padding: .7rem 1rem;
    gap: .6rem;
  }

  .lessonbar__actions { width: 100%; justify-content: flex-end; }

  .scorebanner { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .scorebanner__pct { font-size: 2.2rem; }

  /* Tags drop to their own line; without flex-wrap the 100% basis would
     instead crush the choice text to one word per line. */
  .choice { align-items: flex-start; flex-wrap: wrap; }
  .choice__tags { width: 100%; padding-left: calc(1.2rem + .65rem); }
}

/* --- Phase 3 in dark mode -------------------------------------------------- */
/* --green-600 is brightened for dark surfaces, so anything using it as a solid
   background needs dark text — same treatment the buttons already get. */

@media (prefers-color-scheme: dark) {
  .statusdot.is-done { color: var(--green-900); }
  .lessonrow.is-done .lessonrow__icon { color: var(--green-900); }
  .qcard--wrong { border-color: #6A4234; }
  .choice--wrong { border-color: #6A4234; }
  .scorebanner--fail { border-color: var(--warn); }
  .lessonbar { box-shadow: 0 -8px 20px -12px rgba(0, 0, 0, .8); }
}

/* ===========================================================================
   Lesson interactives (docs/lesson-interactives-spec.md)
   Four authorable patterns inside a lesson .prose body: reveal, quick check,
   steps, tabs. Built on the existing tokens — green-600 actions, --radius /
   --radius-sm, --shadow-sm, the --ok / --danger tint pairs, and the same
   green-500 focus ring every other control in the app uses.

   Everything here degrades: the ".is-ready" class is added by app.js, so the
   no-JS rendering is the authored prose, stacked and fully visible.
   =========================================================================== */

.prose .ix { margin: 0 0 1.4rem; }
.prose .ix:last-child { margin-bottom: 0; }

/* A heading inside a tab panel or a step card titles that card — it does not
   open a new document section, so it drops the h2/h3/h4 section rule from the
   document-hierarchy block above. Same fix the callout headings already carry;
   without it the panel heading draws a second divider under the tab bar. */
.prose .ix-tabs__panel > h2,
.prose .ix-tabs__panel > h3,
.prose .ix-tabs__panel > h4,
.prose .ix-steps__step > h2,
.prose .ix-steps__step > h3,
.prose .ix-steps__step > h4 {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Screen-reader-only text for the ✓/✗ marks. */
.ix-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Reveal --------------------------------------------------------------- */
/* Setup line, a quiet secondary button, then the official wording. Without JS
   the button is hidden (it would be a dead control) and the body is open. */

.prose .ix-reveal {
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-300);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
}

.prose .ix-reveal__setup {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

.prose .ix-reveal__btn { display: none; }

.prose .ix-reveal.is-ready .ix-reveal__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .7rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.2;
  padding: .45rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
}

.prose .ix-reveal__btn:hover { background: var(--surface-2); color: var(--text); }

.prose .ix-reveal__btn:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

.prose .ix-reveal__btn::after {
  content: "";
  width: .42rem;
  height: .42rem;
  margin-top: -.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s ease;
}

.prose .ix-reveal__btn[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: .1rem;
}

.prose .ix-reveal__body { margin-top: .9rem; }
.prose .ix-reveal__body > *:last-child { margin-bottom: 0; }
.prose .ix-reveal__body[hidden] { display: none; }

.prose .ix-reveal.is-open .ix-reveal__body { animation: ix-open .16s ease-out; }

@keyframes ix-open {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* --- Quick check ---------------------------------------------------------- */
/* The quiz .choice row, compacted. Ungraded — nothing is submitted anywhere. */

.prose .ix-check {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.prose .ix-check__kicker {
  margin: 0 0 .35rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
}

.prose .ix-check__q {
  margin: 0 0 .75rem;
  font-weight: 700;
  color: var(--text);
}

.ix-check__choices {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.ix-check__choice {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: .92rem;
  line-height: 1.45;
  padding: .5rem .75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.ix-check.is-ready .ix-check__choice:hover {
  border-color: var(--green-500);
  background: var(--green-050);
}

.ix-check__choice:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

/* Answered: the group is locked via aria-disabled, so say so visually too. */
.ix-check.is-answered .ix-check__choice { cursor: default; }
.ix-check.is-answered .ix-check__choice[aria-disabled="true"]:not(.is-correct):not(.is-wrong) {
  opacity: .6;
}

.ix-check__text { flex: 1 1 auto; min-width: 0; }

.ix-check__mark {
  flex: 0 0 auto;
  display: block;
  width: 1rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.ix-check__choice.is-correct {
  border-color: var(--green-300);
  background: var(--ok-bg);
}
.ix-check__choice.is-correct .ix-check__mark { color: var(--ok); }

.ix-check__choice.is-wrong {
  border-color: #DDBBAF;
  background: var(--danger-bg);
}
.ix-check__choice.is-wrong .ix-check__mark { color: var(--danger); }

.prose .ix-check__why {
  margin: .85rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--border);
  font-size: .89rem;
  color: var(--text-soft);
}

.prose .ix-check__why[hidden] { display: none; }
.prose .ix-check.is-answered .ix-check__why { animation: ix-open .16s ease-out; }

/* --- Steps ---------------------------------------------------------------- */
/* Numbered rail + one step card at a time. No JS: every section stacks. */

.ix-steps__rail {
  display: flex;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0 0 .2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ix-steps__railitem {
  position: relative;
  flex: 1 0 5.5rem;
  margin: 0;
  min-width: 0;
}

/* The connecting line, drawn in two halves so the first and last stubs can be
   dropped without the rail losing its centre alignment. */
.ix-steps__railitem::before,
.ix-steps__railitem::after {
  content: "";
  position: absolute;
  top: 13px;
  height: 2px;
  background: var(--border);
}
.ix-steps__railitem::before { left: 0; right: 50%; }
.ix-steps__railitem::after { left: 50%; right: 0; }
.ix-steps__railitem:first-child::before,
.ix-steps__railitem:last-child::after { display: none; }

.ix-steps__dot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  width: 100%;
  padding: 0 .2rem;
  font: inherit;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
}

.ix-steps__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.ix-steps__label {
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.ix-steps__dot:hover .ix-steps__num { border-color: var(--green-500); }
.ix-steps__dot:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; border-radius: var(--radius-sm); }

.ix-steps__dot.is-done .ix-steps__num {
  border-color: var(--green-300);
  background: var(--green-100);
  color: var(--green-800);
}

.ix-steps__dot.is-active { color: var(--text); }
.ix-steps__dot.is-active .ix-steps__num {
  border-color: var(--green-600);
  background: var(--green-600);
  color: #fff;
}

.prose .ix-steps__step {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.prose .ix-steps.is-ready .ix-steps__step { margin: 0; }
.prose .ix-steps__step > *:first-child { margin-top: 0; }
.prose .ix-steps__step > *:last-child { margin-bottom: 0; }
.prose .ix-steps__step[hidden] { display: none; }

.ix-steps__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .9rem;
}

.prose .ix-steps__count {
  margin: 0;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

/* Ends of the rail: aria-disabled, not disabled, so focus is never dropped. */
.ix-steps__btn[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* --- Tabs ----------------------------------------------------------------- */
/* Underline bar that wraps on a phone. No JS: panels stack in source order,
   each under the heading the author wrote inside it. */

.ix-tabs__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
  margin: 0 0 1.1rem;
  border-bottom: 1px solid var(--border);
}

.ix-tabs__tab {
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
  padding: .5rem .8rem;
  margin-bottom: -1px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}

.ix-tabs__tab:hover { color: var(--text); background: var(--surface-2); }

.ix-tabs__tab[aria-selected="true"] {
  color: var(--green-600);
  border-bottom-color: var(--green-600);
}

.ix-tabs__tab:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: -2px;
}

.prose .ix-tabs__panel { margin: 0 0 1.6rem; }
.prose .ix-tabs.is-ready .ix-tabs__panel { margin: 0; }

/* No JS: the panels stack, so give them the divider the tab bar would have
   provided. The first one needs none — the bar's own border sits above it. */
.prose .ix-tabs:not(.is-ready) .ix-tabs__panel + .ix-tabs__panel {
  border-top: 1px solid var(--border);
  padding-top: 1.4rem;
}
.prose .ix-tabs__panel > *:first-child { margin-top: 0; }
.prose .ix-tabs__panel > *:last-child { margin-bottom: 0; }
.prose .ix-tabs__panel[hidden] { display: none; }

.prose .ix-tabs__panel:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* --- Interactives on a phone ---------------------------------------------- */

@media (max-width: 640px) {
  .ix-tabs__tab { padding: .45rem .6rem; font-size: .84rem; }
  .ix-steps__nav { justify-content: space-between; }
  .prose .ix-steps__count { order: 3; width: 100%; text-align: center; }
}

/* --- Interactives in dark mode -------------------------------------------- */
/* --green-600 is brightened for dark surfaces, so solid-green fills need dark
   text — the same treatment .btn--primary already gets. */

@media (prefers-color-scheme: dark) {
  .ix-steps__dot.is-active .ix-steps__num { color: var(--green-900); }
  .ix-steps__dot.is-done .ix-steps__num { color: var(--green-300); }
  .ix-check__choice.is-wrong { border-color: #6A4234; }
  .prose .ix-reveal { border-left-color: var(--green-600); }
}

/* --- Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .prose .ix-reveal.is-open .ix-reveal__body,
  .prose .ix-check.is-answered .ix-check__why { animation: none; }

  .prose .ix-reveal__btn::after,
  .ix-check__choice,
  .ix-steps__num,
  .ix-tabs__tab { transition: none; }
}

/* ===========================================================================
   Library card refresh (owner request 8/5/26)
   Cards read as plain white boxes — title, uppercase category, summary,
   occasional badge. This adds a soft tinted header band behind the title
   (fading into the card body, radius-matched to the card's top corners) and
   a thin per-department accent rail, without new colors, fonts, or layout
   reflow. Markup: library/_card.php now wraps the title/badge/category in
   .doccard__band and the superseded-note/summary in .doccard__body. Only
   changed/added properties are listed here — everything else on .doccard,
   .doccard__head, .doccard__title, .doccard__category and .badge--tag comes
   from the base rules above. Light theme only, per design brief.
   =========================================================================== */

.doccard {
  padding: 0;
  gap: 0;
  overflow: hidden; /* clips .doccard__band's square top corners to var(--radius) */
}

.doccard:hover { border-color: var(--green-300); }

.doccard__band {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1rem 1.2rem .75rem;
  /* Fades past 100% of the band's own height so it hands off to the card's
     plain white body without a hard seam. */
  background: linear-gradient(180deg, var(--green-050) 0%, var(--surface) 145%);
}

.doccard__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .85rem 1.2rem 1.1rem;
}

.doccard__title { color: var(--green-800); }

.doccard__category { margin: 0; }

/* Badge now sits on the tinted band instead of plain white — both were
   --green-050 before, so left alone it would nearly vanish into the band.
   Give it a white chip treatment so it still reads as a distinct control. */
.doccard__band .badge--tag {
  background: var(--surface);
  color: var(--green-700);
  border: 1px solid var(--green-300);
}

/* Search-match highlighting on the title (library_highlight_terms() in
   index.php) needs more contrast against the band's green tint than the
   body copy's --green-100 mark gives — that's nearly the same lightness as
   --green-050 and would nearly disappear here. Scoped to the band only;
   .doccard__summary's <mark> is untouched (still sits on plain white).
   --green-300 bg + --green-900 text is ~5.4:1, comfortably AA. */
.doccard__band .doccard__title mark {
  background: var(--green-300);
  color: var(--green-900);
}

/* --- Department accent -----------------------------------------------------
   3px left rail, one per department, all pulled from the existing palette
   (no new colors). Decorative only — no text sits on the fill, so WCAG text
   contrast doesn't apply — but each is a muted, dark-enough tint to read as
   "accent" rather than a bright rainbow strip next to its neighbors:
     customer-care -> --green-500  (in-family; the unmarked default)
     operations    -> --warn       (#8A6212, muted gold/olive, marigold family)
     sales         -> --danger     (#A5543C, Harvest terracotta)
     other/unknown -> --border-strong (neutral fallback; see _card.php)
   ----------------------------------------------------------------------- */
.doccard--dept-customer-care { border-left: 3px solid var(--green-500); }
.doccard--dept-operations    { border-left: 3px solid var(--warn); }
.doccard--dept-sales         { border-left: 3px solid var(--danger); }
.doccard--dept-other         { border-left: 3px solid var(--border-strong); }