:root {
  color-scheme: light;
  --ink: #232830;
  --navy: #1a425e;
  --muted: #59616b;
  --bg: #f7f4ee;
  --paper: #fff;
  --rail: #faf8f3;
  --well: #f0ebe0;
  --line: #e3ded2;
  --blue: #006f94;
  --blue-dark: #005572;
  --blue-soft: #ddf0f7;
  --green: #25643f;
  --green-soft: #e8f3ec;
  --brass: #6e5423;
  --brass-soft: #f4eddf;
  --radius: 10px;
  --panel-space: 16px;
  --row-space: 9px;
  --font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}
button,
input,
select {
  font: inherit;
}
a {
  color: var(--blue-dark);
  text-decoration: none;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 4px;
}
main:focus,
h2[tabindex]:focus {
  outline: none;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: clamp(27px, 2.5vw, 36px);
  font-weight: 650;
  letter-spacing: -1.15px;
  line-height: 1.18;
  margin-bottom: 12px;
}
h2 {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -0.4px;
  margin-bottom: 12px;
}
h3 {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 9px;
}
p {
  margin-bottom: 16px;
}
p:last-child {
  margin-bottom: 0;
}
.icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 50;
  background: white;
  padding: 12px 18px;
}
.skip:focus {
  top: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.preview-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 36px;
  padding: 7px 22px;
  background: var(--navy);
  color: white;
  font-size: 12px;
  letter-spacing: 0.1px;
}
.preview-band strong {
  font-weight: 650;
}
.preview-band span {
  opacity: 0.92;
}
.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: calc(100vh - 36px);
}
.sidebar {
  background: var(--rail);
  border-right: 1px solid var(--line);
  padding: 34px 20px 22px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 1100px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  padding: 0 3px;
  margin-bottom: 42px;
}
.brand img {
  mix-blend-mode: multiply;
  width: 46px;
  height: 46px;
}
.brand-parent {
  display: block;
  font-size: 9px;
  letter-spacing: 1.65px;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 4px;
}
.brand strong {
  display: block;
  font-size: 21px;
  letter-spacing: -0.7px;
  line-height: 1.2;
}
.rail-heading {
  font-size: 10px;
  letter-spacing: 1.7px;
  color: var(--muted);
  font-weight: 650;
  margin: 0 14px 13px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 5px;
  min-height: 46px;
}
.nav-link:hover {
  background: var(--well);
  color: var(--ink);
}
.nav-link.active {
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-weight: 650;
}
.rail-note {
  margin: 40px 10px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.rail-note .eyebrow {
  font-size: 10px;
  letter-spacing: 1px;
}
.rail-note p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.75;
  margin-top: 9px;
}
.rail-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 15px 9px 0;
  font-size: 10px;
  color: var(--muted);
  flex-wrap: wrap;
}
.status-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 100%;
}
.version {
  width: 100%;
  padding-left: 13px;
  color: var(--muted);
  margin-top: 3px;
}
.workspace {
  min-width: 0;
}
.topbar {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 42px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.preview-controls {
  display: flex;
  align-items: center;
  gap: 9px;
}
.preview-controls label {
  font-weight: 550;
  white-space: nowrap;
}
.preview-controls select {
  padding: 9px 30px 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  font-size: 12px;
  color: var(--ink);
  max-width: 180px;
  min-height: 40px;
}
.preview-controls .button {
  font-size: 12px;
  padding: 8px 11px;
  min-height: 40px;
}
main {
  max-width: 1370px;
  margin: auto;
  padding: 39px 42px 45px;
  min-height: calc(100vh - 186px);
}
.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 27px;
}
.page-heading > .badge {
  margin-top: 31px;
  white-space: nowrap;
}
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.7px;
  line-height: 1.5;
  color: var(--blue-dark);
  margin-bottom: 10px;
}
.lede {
  color: var(--muted);
  max-width: 680px;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 0;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 11px 17px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  background: transparent;
  color: var(--ink);
  transition: background 0.15s;
}
.button .icon {
  width: 18px;
  height: 18px;
}
.button.primary {
  background: var(--blue);
  color: white;
}
.button.primary:hover:not(:disabled) {
  background: var(--blue-dark);
}
.button.secondary {
  background: var(--paper);
  border-color: #c3d0d4;
  color: var(--blue-dark);
}
.button.secondary:hover {
  background: var(--blue-soft);
}
.button.light {
  background: white;
  color: var(--navy);
}
.button.light:hover {
  background: var(--blue-soft);
}
.button.quiet {
  border-color: var(--line);
  background: var(--rail);
}
.button.quiet:hover {
  background: var(--well);
}
.button.text {
  color: var(--blue-dark);
  padding-left: 0;
  padding-right: 0;
  justify-content: flex-start;
}
.button.text:hover {
  text-decoration: underline;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--blue-dark);
  background: var(--blue-soft);
  white-space: nowrap;
}
.badge.success {
  color: var(--green);
  background: var(--green-soft);
}
.badge.pending {
  color: var(--brass);
  background: var(--brass-soft);
}
.badge.neutral {
  background: var(--well);
  color: var(--muted);
}
.muted {
  color: var(--muted);
  font-size: 12px;
}
.hero {
  background: var(--navy);
  color: white;
  border-radius: var(--radius);
  padding: 31px 35px;
  position: relative;
  overflow: hidden;
  min-height: 250px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 590px;
}
.hero .eyebrow {
  color: #bddfea;
  margin-bottom: 12px;
}
.hero h2 {
  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.7px;
  margin-bottom: 13px;
}
.hero p {
  color: #e0eaf0;
  font-size: 14px;
  line-height: 1.7;
  max-width: 510px;
  margin-bottom: 22px;
}
.hero-art {
  width: 180px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 180px;
  position: relative;
}
.orbit {
  border: 1px solid #87b3ca;
  border-radius: 50%;
  position: absolute;
  opacity: 0.25;
}
.orbit-one {
  height: 170px;
  width: 170px;
}
.orbit-two {
  height: 230px;
  width: 230px;
}
.hero-emblem {
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  border: 1px solid #66889e;
  border-radius: 24px;
  transform: rotate(-8deg);
  background: #244e68;
}
.hero-emblem .icon {
  width: 57px;
  height: 57px;
  stroke-width: 1.15;
  transform: rotate(8deg);
  color: #d2e7ee;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 27px;
}
.metric {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.metric-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.metric-label .icon {
  width: 18px;
  height: 18px;
  color: var(--blue-dark);
}
.metric-value {
  font-size: 25px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.6px;
  margin: 9px 0 4px;
}
.metric .muted {
  font-size: 11px;
}
.two-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.panel {
  padding: 25px 27px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: 22px;
}
.two-columns > .panel {
  margin-bottom: 0;
}
.panel.warm {
  background: #f2ede1;
}
.panel.warm h2 {
  font-size: 23px;
  margin: 12px 0;
}
.panel.warm p {
  font-size: 13px;
  color: #4a5058;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 19px;
}
.section-heading h2 {
  font-size: 16px;
  margin: 0;
}
.section-heading .muted {
  font-size: 10px;
}
.checklist-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.checklist-row:last-child {
  border-bottom: 0;
}
.checklist-row > .icon:last-child {
  margin-left: auto;
  width: 17px;
  height: 17px;
  color: var(--muted);
}
.row-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.row-copy strong {
  font-size: 13px;
  font-weight: 600;
}
.row-copy > span {
  font-size: 11px;
  color: var(--muted);
}
.step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  flex: 0 0 32px;
}
.step-number.complete {
  background: var(--green-soft);
  border-color: transparent;
  color: var(--green);
}
.step-number .icon {
  width: 18px;
  height: 18px;
}
.tick-list {
  padding: 0;
  list-style: none;
  font-size: 12px;
  margin: 22px 0;
}
.tick-list li {
  margin-bottom: 11px;
  padding-left: 23px;
  position: relative;
}
.tick-list li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: bold;
}
.small-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 17px;
}
.page-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--muted);
  padding: 20px 42px;
  border-top: 1px solid var(--line);
}
.notice {
  padding: 16px 19px;
  border: 1px solid #d9dfdf;
  background: #eff5f5;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.75;
  color: #3c535c;
  margin: 0 0 22px;
}
.progress-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 22px;
  font-size: 13px;
}
progress {
  width: 45%;
  height: 8px;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  accent-color: var(--blue);
  background: var(--line);
}
progress::-webkit-progress-bar {
  background: var(--line);
  border-radius: 5px;
}
progress::-webkit-progress-value {
  background: var(--blue);
  border-radius: 5px;
}
.details-grid {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px 24px;
  font-size: 13px;
  margin: 18px 0 23px;
}
.details-grid dt {
  color: var(--muted);
}
.details-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 500;
}
.reading-excerpt {
  padding: 23px;
  background: var(--rail);
  border-left: 3px solid var(--blue);
  margin-bottom: 22px;
  font-size: 14px;
  line-height: 1.9;
}
.checkbox-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13px;
  margin-bottom: 21px;
  max-width: 730px;
}
.checkbox-row input,
.answer input {
  accent-color: var(--blue);
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 18px;
}
.result-note {
  display: flex;
  align-items: center;
  gap: 17px;
  font-size: 12px;
}
.sample-stamp {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 9px;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: var(--brass);
  padding: 10px 13px;
  background: var(--brass-soft);
  border-radius: 7px;
  margin-bottom: 27px;
}
.sample-stamp span {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}
.training-reading h2 {
  font-size: 27px;
}
.reading-lead {
  font-size: 17px;
  line-height: 1.8;
  max-width: 740px;
}
.lesson-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  margin-top: 28px;
}
.lesson-grid p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}
.lesson-number {
  font-size: 12px;
  color: var(--blue);
  font-weight: 700;
  display: block;
  margin-bottom: 13px;
}
.question {
  border: 0;
  padding: 0;
  margin: 0 0 29px;
  min-width: 0;
}
.question legend {
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 13px;
}
.answer {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  background: var(--rail);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 13px;
  min-height: 46px;
}
.answer:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.completion-block,
.empty-state {
  text-align: center;
  padding: 36px 18px;
}
.completion-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: var(--green-soft);
  border-radius: 50%;
  color: var(--green);
  margin: 0 auto 16px;
}
.empty-state > .icon {
  width: 36px;
  height: 36px;
  color: var(--blue);
  margin-bottom: 16px;
}
.completion-block p,
.empty-state p {
  font-size: 13px;
  color: var(--muted);
  max-width: 540px;
  margin: 0 auto 22px;
}
.person-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.person-summary h2 {
  font-size: 18px;
  margin: 0 0 4px;
}
.person-summary p {
  margin: 0;
}
.person-summary > .badge {
  margin-left: auto;
}
.avatar {
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 650;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
}
.table-scroll {
  overflow: auto;
  max-width: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}
th,
td {
  padding: 16px 13px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
th:first-child,
td:first-child {
  padding-left: 0;
}
thead th {
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
tbody th {
  font-size: 12px;
  font-weight: 600;
  min-width: 150px;
}
td .button {
  font-size: 11px;
  min-width: 97px;
}
.review-panel {
  border-left: 3px solid var(--blue);
}
.action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 23px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.form-card {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}
.card-topline .eyebrow {
  margin-bottom: 0;
}
.form-card h2 {
  font-size: 19px;
}
.form-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
  flex: 1;
}
.form-card .button {
  align-self: flex-start;
}
.form-preview {
  padding: 28px;
  background: var(--well);
  border-radius: 14px;
}
.print-sheet {
  max-width: 710px;
  margin: auto;
  background: white;
  padding: 43px 49px;
  box-shadow: 0 3px 18px #3c372d14;
  color: var(--ink);
}
.print-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 21px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 27px;
  font-size: 11px;
}
.print-brand span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.print-sheet h2 {
  font-size: 25px;
}
.paper-watermark {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  border: 1px solid var(--line);
  padding: 10px;
  margin: 19px 0;
  color: var(--brass);
  text-align: center;
}
.paper-metadata {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 9px;
  font-size: 11px;
}
.paper-metadata dt {
  color: var(--muted);
}
.paper-metadata dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.paper-section {
  margin-top: 29px;
}
.paper-section h3 {
  font-size: 13px;
}
.paper-section p {
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
}
.paper-line {
  height: 24px;
  border-bottom: 1px solid var(--line);
}
.paper-footer {
  font-size: 9px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 36px;
  padding-top: 13px;
}
.library-tools {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 32px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.field input,
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #bfc6c8;
  background: var(--paper);
  border-radius: 8px;
  min-height: 46px;
  font-size: 13px;
  color: var(--ink);
}
.library-tools > .field:last-child {
  max-width: 220px;
}
.policy-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: white;
  color: var(--ink);
  padding: 22px 0;
}
.policy-row:hover {
  background: var(--rail);
}
.document-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--rail);
  color: var(--blue-dark);
  flex: 0 0 44px;
}
.policy-row-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.policy-row-copy .eyebrow {
  font-size: 9px;
  margin: 0;
}
.policy-row-copy strong {
  font-size: 16px;
  font-weight: 600;
}
.policy-row-copy > span:last-child {
  font-size: 11px;
  color: var(--muted);
}
.policy-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  font-size: 10px;
  color: var(--muted);
  padding-left: 8px;
}
.policy-row > .icon {
  width: 18px;
  color: var(--blue-dark);
}
.policy-reader {
  max-width: 890px;
  margin: 24px auto;
  padding: 38px 47px;
}
.policy-reader h1 {
  font-size: 35px;
}
.reader-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding: 7px 0 28px;
  margin-bottom: 35px;
  font-size: 11px;
  color: var(--muted);
}
.policy-reader section {
  margin-bottom: 35px;
}
.policy-reader section h2 {
  font-size: 19px;
}
.policy-reader section p {
  font-size: 15px;
  line-height: 1.95;
  max-width: 700px;
}
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  background: var(--navy);
  color: white;
  max-width: 430px;
  padding: 16px 20px;
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 6px 30px #23283026;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.toast.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 1600px) {
  main {
    padding-top: 46px;
  }
  .hero {
    min-height: 280px;
  }
  .hero h2 {
    font-size: 33px;
  }
}
@media (max-width: 1150px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .sidebar {
    padding-left: 14px;
    padding-right: 14px;
  }
  .brand strong {
    font-size: 19px;
  }
  .brand img {
    width: 39px;
    height: 39px;
  }
  .topbar {
    padding-left: 27px;
    padding-right: 27px;
  }
  main {
    padding: 30px 27px;
  }
  .hero {
    padding: 28px;
  }
  .hero-art {
    flex-basis: 100px;
    width: 100px;
  }
  .hero-emblem {
    width: 79px;
    height: 79px;
  }
  .hero-emblem .icon {
    width: 45px;
    height: 45px;
  }
  .orbit-one {
    width: 135px;
    height: 135px;
  }
  .orbit-two {
    width: 180px;
    height: 180px;
  }
  .metric {
    padding: 19px 17px;
  }
  .metric-value {
    font-size: 22px;
  }
  .two-columns {
    grid-template-columns: 1.2fr 1fr;
    gap: 17px;
  }
  .panel {
    padding: 22px;
  }
  .page-heading > .badge {
    display: none;
  }
  .page-footer {
    padding: 20px 27px;
  }
}
@media (max-width: 850px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    min-width: 0;
    position: static;
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 17px 22px 11px;
  }
  .brand {
    margin-bottom: 17px;
    max-width: 240px;
  }
  .rail-heading,
  .rail-note,
  .rail-footer {
    display: none;
  }
  #navigation {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 4px 0 5px;
    scrollbar-width: thin;
  }
  .nav-link {
    white-space: nowrap;
    font-size: 12px;
    padding: 9px 12px;
    min-height: 42px;
    margin: 0;
  }
  .nav-link .icon {
    width: 18px;
    height: 18px;
  }
  .topbar {
    height: auto;
    min-height: 66px;
    padding: 12px 24px;
  }
  .topbar #breadcrumb {
    font-size: 11px;
  }
  main {
    padding: 28px 24px;
  }
  .hero-art {
    flex-basis: 150px;
  }
  .two-columns {
    grid-template-columns: 1.3fr 1fr;
  }
  .preview-band {
    font-size: 10px;
  }
  .page-footer {
    padding: 20px 24px;
  }
}
@media (max-width: 600px) {
  .preview-band {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 7px 18px;
    font-size: 10px;
  }
  .sidebar {
    padding: 16px 18px 8px;
  }
  .brand {
    margin-bottom: 12px;
  }
  .brand strong {
    font-size: 22px;
  }
  .brand-parent {
    font-size: 9px;
  }
  .brand img {
    width: 43px;
    height: 43px;
  }
  .topbar {
    padding: 11px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .topbar #breadcrumb {
    font-size: 10px;
  }
  .preview-controls {
    width: 100%;
    gap: 8px;
  }
  .preview-controls label {
    font-size: 11px;
  }
  .preview-controls select {
    flex: 1;
    max-width: none;
    min-width: 0;
  }
  .preview-controls .button {
    font-size: 11px;
    padding: 9px 10px;
  }
  main {
    padding: 27px 18px 30px;
  }
  h1 {
    font-size: 29px;
    letter-spacing: -0.9px;
  }
  .page-heading {
    margin-bottom: 23px;
  }
  .lede {
    font-size: 13px;
  }
  .hero {
    padding: 25px 24px;
    min-height: 250px;
    margin-bottom: 18px;
  }
  .hero h2 {
    font-size: 25px;
    max-width: 280px;
  }
  .hero p {
    font-size: 13px;
  }
  .hero-art {
    display: none;
  }
  .metrics {
    gap: 9px;
    margin-bottom: 19px;
  }
  .metric {
    padding: 14px 10px;
    border-radius: 10px;
  }
  .metric-label {
    font-size: 10px;
    line-height: 1.5;
    align-items: flex-start;
  }
  .metric-label .icon {
    display: none;
  }
  .metric-value {
    font-size: 17px;
    line-height: 1.45;
    margin: 9px 0 6px;
    letter-spacing: -0.3px;
  }
  .metric .muted {
    font-size: 9px;
    line-height: 1.6;
  }
  .two-columns {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .panel {
    padding: 22px 19px;
    margin-bottom: 18px;
  }
  .two-columns > .panel {
    margin: 0;
  }
  .section-heading {
    gap: 10px;
    align-items: flex-start;
  }
  .section-heading h2 {
    font-size: 15px;
  }
  .section-heading .muted {
    font-size: 9px;
    text-align: right;
    max-width: 85px;
  }
  .row-copy strong {
    font-size: 12px;
  }
  .row-copy > span {
    font-size: 10px;
  }
  .checklist-row {
    gap: 10px;
    padding: 16px 0;
  }
  .panel.warm h2 {
    font-size: 24px;
  }
  .notice {
    padding: 14px 16px;
    font-size: 11px;
  }
  .progress-strip {
    font-size: 12px;
    gap: 15px;
  }
  .details-grid {
    grid-template-columns: 75px 1fr;
    gap: 10px 15px;
    font-size: 12px;
  }
  .reading-excerpt {
    padding: 17px;
    font-size: 13px;
  }
  .result-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .lesson-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .lesson-grid > div {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .lesson-grid > div:last-child {
    border: 0;
  }
  .lesson-number {
    margin-bottom: 7px;
  }
  .training-reading h2 {
    font-size: 24px;
  }
  .reading-lead {
    font-size: 15px;
  }
  .sample-stamp {
    gap: 5px;
  }
  .person-summary {
    gap: 10px;
    flex-wrap: wrap;
  }
  .person-summary > .badge {
    margin-left: 56px;
  }
  .person-summary h2 {
    font-size: 17px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .form-card {
    margin: 0;
  }
  .form-preview {
    padding: 12px;
  }
  .print-sheet {
    padding: 24px 21px;
  }
  .print-sheet h2 {
    font-size: 23px;
  }
  .paper-metadata {
    grid-template-columns: 83px 1fr;
    font-size: 10px;
    gap: 8px;
  }
  .paper-watermark {
    font-size: 9px;
  }
  .library-tools {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  .library-tools > .field:last-child {
    max-width: none;
  }
  .policy-row {
    gap: 10px;
    flex-wrap: wrap;
    padding: 20px 0;
  }
  .document-icon {
    width: 34px;
    height: 44px;
    flex-basis: 34px;
  }
  .document-icon .icon {
    width: 20px;
  }
  .policy-row-copy strong {
    font-size: 15px;
  }
  .policy-row-copy > span:last-child {
    font-size: 10px;
    line-height: 1.6;
  }
  .policy-meta {
    width: 100%;
    flex-direction: row;
    align-items: center;
    margin-left: 44px;
    padding: 0;
    gap: 13px;
  }
  .policy-row > .icon {
    display: none;
  }
  .policy-reader {
    padding: 24px 21px;
  }
  .policy-reader h1 {
    font-size: 28px;
  }
  .reader-meta {
    gap: 10px;
    padding-bottom: 23px;
  }
  .policy-reader section p {
    font-size: 14px;
    line-height: 1.85;
  }
  .page-footer {
    flex-direction: column;
    gap: 5px;
    padding: 18px;
  }
  .toast {
    left: 15px;
    right: 15px;
    bottom: 15px;
    font-size: 12px;
    padding: 15px 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  @page {
    size: A4 portrait;
    margin: 17mm;
  }
  body {
    background: white;
    font-size: 11pt;
  }
  body * {
    visibility: hidden;
  }
  .print-sheet,
  .print-sheet * {
    visibility: visible;
  }
  .print-sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    box-shadow: none;
    margin: 0;
    break-inside: avoid;
  }
  .print-brand {
    margin-bottom: 20px;
  }
  .paper-watermark {
    color: #232830;
  }
  .paper-footer {
    margin-top: 28px;
  }
  .paper-line {
    height: 24px;
  }
  .preview-band,
  .sidebar,
  .topbar,
  .page-footer,
  .toast,
  .print-controls {
    display: none;
  }
  .form-preview {
    background: none;
    padding: 0;
  }
  main {
    padding: 0;
    min-height: 0;
  }
}
/* V2: preserve the first demo's Bethany styling; add flexible navigation and original-content views. */
.preview-band a {
  color: #fff;
  text-decoration: underline;
  margin-left: 16px;
  white-space: nowrap;
}
.location {
  display: flex;
  align-items: center;
  gap: 14px;
}
.menu-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--navy);
  min-width: 44px;
  min-height: 44px;
  font-size: 21px;
}
.sidebar {
  max-height: none;
  height: 100dvh;
  z-index: 30;
  overflow-y: auto;
  padding-top: 34px;
}
.sidebar-controls {
  display: flex;
  gap: 8px;
  margin: 4px 10px 10px;
}
.sidebar-controls button {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  min-height: 40px;
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
}
.sidebar-backdrop[hidden] {
  display: none;
}
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: #182a3c66;
  border: 0;
  z-index: 29;
}
.workspace {
  width: 100%;
}
.topbar {
  height: auto;
  min-height: 80px;
}
.app-shell {
  transition: grid-template-columns 0.15s ease;
}
.document-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.document-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--ink);
  min-height: 210px;
}
.document-card:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 20px #1a425e0b;
}
.document-card h2 {
  font-size: 20px;
  margin: 0;
  line-height: 1.45;
}
.document-card-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.document-open {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--blue-dark);
  font-size: 14px;
  margin-top: auto;
  font-weight: 600;
}
.search-bar {
  max-width: none;
  margin: 25px 0 12px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.search-bar label {
  font-weight: 600;
  white-space: nowrap;
}
.search-bar input {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
  width: 100%;
  min-width: 0;
  font-size: 16px;
}
.result-count {
  font-size: 13px;
  color: var(--muted);
}
.inline-note {
  padding: 17px 20px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  color: var(--muted);
}
.setup-list {
  display: grid;
  gap: 20px;
}
.setup-step {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.setup-step > .step-number {
  flex: 0 0 40px;
}
.setup-copy {
  min-width: 0;
  flex: 1;
}
.setup-copy h2 {
  margin: 2px 0 8px;
}
.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.practice-check {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
}
.practice-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  flex-shrink: 0;
}
.setup-copy > .small-note {
  margin-top: 18px;
}
.reader-main {
  max-width: none;
  padding: 26px !important;
}
.reader-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
}
.reader-heading h1 {
  font-size: 25px;
  line-height: 1.35;
  margin: 5px 0 0;
  letter-spacing: -0.6px;
}
.reader-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}
.status-rows {
  margin: 20px 0;
}
.status-rows .checklist-row {
  justify-content: space-between;
}
.sidebar .rail-note {
  margin-top: 30px;
  margin-bottom: 25px;
}
.nav-label {
  white-space: normal;
}
.nav-link {
  min-height: 48px;
}
.page-footer {
  gap: 12px;
}
.sidebar [hidden] {
  display: none !important;
}
body[data-sidebar='compact'] .app-shell {
  grid-template-columns: 80px minmax(0, 1fr);
}
body[data-sidebar='compact'] .sidebar {
  padding: 28px 12px 20px;
}
body[data-sidebar='compact'] .brand-copy,
body[data-sidebar='compact'] .nav-label,
body[data-sidebar='compact'] .rail-heading,
body[data-sidebar='compact'] .rail-note,
body[data-sidebar='compact'] .rail-footer,
body[data-sidebar='compact'] .sidebar-controls span {
  display: none;
}
body[data-sidebar='compact'] .brand {
  padding: 0;
  justify-content: center;
}
body[data-sidebar='compact'] .brand img {
  width: 42px;
  height: 42px;
}
body[data-sidebar='compact'] .nav-link {
  padding: 13px;
  justify-content: center;
}
body[data-sidebar='compact'] .sidebar-controls {
  flex-direction: column;
  margin: auto 0 0;
}
body[data-sidebar='hidden'] .app-shell {
  grid-template-columns: minmax(0, 1fr);
}
body[data-sidebar='hidden'] .sidebar {
  display: none;
}
body[data-sidebar='hidden'] main {
  max-width: 1370px;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .topbar {
    padding: 16px 24px;
    flex-wrap: wrap;
  }
  main {
    padding: 30px 24px;
  }
  .reader-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .preview-band {
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  .preview-band a {
    margin: 0;
  }
  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .metric {
    padding: 20px;
  }
  .metric-value {
    font-size: 28px;
  }
}
@media (max-width: 760px) {
  .app-shell {
    display: block !important;
    min-height: 100dvh;
  }
  .preview-band {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 9px 14px;
    font-size: 11px;
    text-align: center;
  }
  .preview-band span {
    width: 100%;
  }
  .preview-band a {
    margin: 0;
  }
  .sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(290px, 88vw);
    height: 100dvh;
    transform: translateX(-105%);
    padding: 30px 18px 20px;
    border-right: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
  }
  .menu-open .sidebar {
    transform: translateX(0);
  }
  body.menu-open {
    overflow: hidden;
  }
  .sidebar .brand {
    margin-bottom: 36px;
  }
  .sidebar .rail-heading {
    display: block;
  }
  .sidebar #navigation {
    display: block;
    overflow: visible;
  }
  .sidebar .nav-link {
    display: flex;
    white-space: normal;
  }
  .sidebar .rail-note,
  .sidebar .rail-footer {
    display: block;
  }
  .sidebar .rail-footer {
    margin-top: auto;
  }
  .sidebar #compact {
    display: none;
  }
  .sidebar-controls {
    display: flex;
  }
  .sidebar .sidebar-controls span {
    display: inline;
  }
  .topbar {
    padding: 12px 16px;
    gap: 12px;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .location {
    flex: 1;
  }
  .preview-controls {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }
  .preview-controls label {
    font-size: 12px;
  }
  .preview-controls select {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: 8px;
    font-size: 14px;
  }
  .preview-controls .button {
    font-size: 11px;
    padding: 7px;
    min-height: 40px;
  }
  .topbar #breadcrumb {
    font-size: 12px;
  }
  main {
    padding: 26px 18px 35px;
  }
  .hero-copy {
    padding: 27px !important;
  }
  .hero h2 {
    font-size: 29px;
  }
  .hero-art {
    display: none;
  }
  .metrics {
    grid-template-columns: 1fr !important;
  }
  .metric {
    min-height: 0;
    padding: 19px 21px;
  }
  .metric-value {
    font-size: 28px;
  }
  .two-columns {
    grid-template-columns: 1fr;
  }
  .document-grid {
    grid-template-columns: 1fr;
  }
  .document-card {
    padding: 20px;
    min-height: 190px;
  }
  .search-bar {
    display: block;
  }
  .search-bar label {
    display: block;
    margin-bottom: 8px;
  }
  .setup-step {
    gap: 13px;
    padding: 20px 16px;
  }
  .setup-step > .step-number {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .form-actions .button {
    font-size: 13px;
    padding: 10px 12px;
  }
  .practice-check {
    align-items: flex-start;
  }
  .reader-main {
    padding: 20px 8px !important;
  }
  .reader-heading {
    flex-direction: column;
    align-items: stretch;
    margin: 0 8px 16px;
  }
  .reader-heading h1 {
    font-size: 23px;
  }
  .reader-links {
    flex-wrap: wrap;
  }
  .reader-links .button {
    font-size: 12px;
    padding: 8px 12px;
  }
  .page-footer {
    padding: 20px 18px;
    font-size: 11px;
    display: flex;
    flex-wrap: wrap;
  }
  .page-footer span {
    width: 100%;
  }
  .status-rows .checklist-row {
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
/* Compact document index: a single vertical collection menu. */
.resource-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  min-height: 44px;
}
.resource-toolbar h1 {
  font-size: 27px;
  letter-spacing: -0.6px;
  margin: 0 auto 0 0;
}
.resource-search {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--well);
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 0 17px;
  flex: 0 1 490px;
  min-width: 0;
}
.resource-search:focus-within {
  border-color: var(--blue);
}
.resource-search > .icon {
  width: 19px;
  height: 19px;
  color: var(--muted);
}
.resource-search input {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  min-height: 44px;
  font-size: 14px;
  outline: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
}
.resource-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.resource-toolbar .button {
  font-size: 12px;
  padding: 8px 10px;
}
.resource-toolbar [hidden] {
  display: none;
}
.resource-board {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px #23283005;
  min-height: 410px;
}
.resource-index {
  background: var(--rail);
  border-right: 1px solid var(--line);
  padding: 22px 0;
}
.resource-index > summary {
  display: none;
}
.resource-menu {
  display: flex;
  flex-direction: column;
}
.resource-menu > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-left: 3px solid transparent;
  min-height: 46px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.resource-menu > a > .icon {
  width: 18px;
  height: 18px;
}
.resource-menu small {
  margin-left: auto;
  font-size: 11px;
}
.resource-menu > a:hover {
  background: var(--well);
}
.resource-menu > a[aria-current='page'] {
  border-left-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-weight: 650;
}
.resource-menu > a:focus-visible {
  outline-offset: -4px;
}
.resource-panel {
  padding: 27px 30px 20px;
  min-width: 0;
}
.resource-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}
.resource-panel-heading h2 {
  font-size: 22px;
  letter-spacing: -0.3px;
  margin: 0 0 6px;
}
.resource-panel-heading p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.resource-tally {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1.4;
  padding: 3px 9px;
  border-radius: 14px;
  background: var(--well);
  color: var(--muted);
  margin-top: 5px;
}
.resource-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.resource-list > li {
  padding: 0;
  margin: 0;
}
.resource-row {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: var(--row-space) 0;
  min-height: 52px;
  border-bottom: 1px solid #ece6da;
  color: var(--ink);
}
.resource-list > li:last-child .resource-row {
  border-bottom: 0;
}
.resource-row:hover .resource-row-copy > strong {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.resource-row:focus-visible {
  outline-offset: 1px;
  outline-width: 2px;
}
.resource-sequence {
  font-size: 15px;
  color: #857c6c;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}
.resource-sequence .icon {
  color: var(--green);
  width: 18px;
  height: 18px;
}
.resource-row-copy {
  min-width: 0;
}
.resource-row-copy > strong {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.resource-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.resource-row-action {
  font-size: 12px;
  white-space: nowrap;
  color: var(--blue-dark);
  font-weight: 600;
}
.resource-footnote {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 14px 0 0;
}
.resource-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.resource-empty h3 {
  color: var(--ink);
}
/* One active onboarding step, with dated progress in the vertical index. */
.journey-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.journey-heading h1 {
  font-size: 29px;
  margin-bottom: 7px;
}
.journey-heading p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  max-width: 490px;
}
.journey-progress {
  min-width: 150px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journey-progress progress {
  width: 100%;
  height: 6px;
}
.journey-board {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.journey-steps {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  background: var(--rail);
  border-right: 1px solid var(--line);
}
.journey-steps > a {
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 3px solid transparent;
  padding: 14px 18px;
  color: var(--ink);
  min-height: 74px;
}
.journey-steps > a[aria-current='step'] {
  background: var(--blue-soft);
  border-left-color: var(--blue);
}
.journey-steps > a:hover {
  background: var(--well);
}
.journey-steps > a > span:last-child {
  min-width: 0;
}
.journey-steps strong {
  font-size: 13px;
  display: block;
  font-weight: 600;
}
.journey-steps small {
  font-size: 10px;
  color: var(--muted);
  display: block;
  line-height: 1.6;
  margin-top: 3px;
}
.journey-steps .step-number {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  font-size: 11px;
}
.journey-panel {
  padding: 32px;
  min-width: 0;
}
.journey-panel > h2 {
  font-size: 25px;
  margin-bottom: 12px;
}
.journey-panel > p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 600px;
}
.journey-panel .form-actions {
  margin: 22px 0 26px;
}
.journey-panel .practice-check {
  border-top: 1px solid var(--line);
  padding-top: 23px;
  margin-top: 25px;
  line-height: 1.65;
  align-items: flex-start;
  color: var(--ink);
}
.practice-check input {
  margin-top: 2px;
}
.journey-panel .journey-date {
  font-size: 11px;
  color: var(--green);
  margin: 12px 0;
}
.journey-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-top: 28px;
}
.journey-actions > .button:only-child {
  margin-left: auto;
}
.button[aria-disabled='true'] {
  opacity: 0.5;
  cursor: default;
}
.journey-lessons {
  margin: 2px 0 6px;
}
.journey-lessons .resource-row {
  padding: var(--row-space) 0;
  min-height: 52px;
}
.handoff-list {
  padding-left: 20px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}
.handoff-list li {
  margin: 12px 0;
}
.journey-panel .notice {
  font-size: 12px;
  line-height: 1.7;
}
.notice > a {
  text-decoration: underline;
}
.next-step-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 13px;
  padding: 23px 27px;
  margin-bottom: 22px;
}
.next-step-panel h2 {
  margin: 0;
}
.next-step-panel .eyebrow {
  font-size: 9px;
}
.progress-record-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.progress-record-row:last-child {
  border-bottom: 0;
}
.progress-record-row > span {
  text-align: right;
  color: var(--muted);
  font-size: 11px;
}
.reminder-panel p {
  font-size: 13px;
  color: var(--muted);
}
.reminder-panel > .badge {
  margin-bottom: 15px;
}
.reader-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 0 0 15px;
  padding: 13px 17px;
  border: 1px solid var(--line);
  background: var(--green-soft);
  border-radius: 9px;
}
.reader-next p {
  font-size: 12px;
  margin: 0;
}
.reader-next .button {
  font-size: 12px;
  flex-shrink: 0;
}
.back-link .icon {
  order: 0;
}
/* "Not available": Back stands clear of the line above it (final pass, 8 Oct 2026). */
.lede + .back-link {
  margin-top: 16px;
}
/* Tighter common spacing, preserving the optional sidebar modes. */
.topbar {
  min-height: 65px;
  padding-top: 10px;
  padding-bottom: 10px;
}
main {
  padding-top: 25px;
}
.reader-main {
  padding-top: 20px !important;
}
.reader-heading {
  margin-bottom: 16px;
}
.reader-heading h1 {
  font-size: 23px;
}
.reader-heading .eyebrow {
  font-size: 9px;
  margin-bottom: 4px;
}
.brand {
  margin-bottom: 30px;
}
.sidebar .rail-note {
  margin-top: 24px;
}
.nav-link {
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}
@media (min-width: 761px) {
  .resource-index:not([open]) > .resource-menu {
    display: flex !important;
  }
  .resource-index {
    content-visibility: visible;
  }
  .resource-index::details-content {
    content-visibility: visible;
  }
  .resource-menu {
    display: flex !important;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .resource-board {
    grid-template-columns: 155px minmax(0, 1fr);
  }
  .resource-menu > a {
    padding: 12px 10px;
    gap: 8px;
    font-size: 12px;
  }
  .resource-panel {
    padding: 23px 20px 16px;
  }
  .resource-row {
    gap: 10px;
  }
  .journey-board {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .journey-steps > a {
    padding: 14px 12px;
    gap: 9px;
  }
  .journey-panel {
    padding: 25px 22px;
  }
  .journey-actions .button {
    font-size: 12px;
  }
  .journey-heading {
    align-items: flex-start;
  }
  .journey-progress {
    min-width: 120px;
  }
}
@media (min-width: 761px) and (max-width: 850px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .sidebar {
    position: sticky;
    height: 100dvh;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    align-items: stretch;
  }
  .sidebar #navigation {
    display: block;
    overflow: visible;
  }
  .sidebar .nav-link {
    white-space: normal;
  }
  .sidebar .rail-heading,
  .sidebar .rail-note,
  .sidebar .rail-footer {
    display: block;
  }
  .topbar {
    align-items: flex-start;
  }
  .location {
    flex: 1;
  }
  .preview-controls {
    flex-wrap: wrap;
  }
  .resource-board {
    grid-template-columns: 145px minmax(0, 1fr);
  }
  .resource-menu > a > .icon {
    display: none;
  }
  .resource-panel {
    padding: 20px 16px;
  }
  .resource-row {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .journey-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .journey-steps {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 760px) {
  main {
    padding-top: 19px;
  }
  .topbar {
    min-height: 0;
    gap: 9px;
  }
  .preview-band span {
    font-size: 10px;
  }
  .resource-toolbar {
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .resource-toolbar h1 {
    font-size: 24px;
    flex-basis: 100%;
    margin-bottom: 5px;
  }
  .resource-search {
    flex: 1 1 180px;
    padding: 0 13px;
  }
  .resource-search input {
    font-size: 16px;
  }
  .resource-toolbar .button {
    font-size: 11px;
    min-height: 36px;
  }
  .resource-board {
    display: block;
    min-height: 0;
    border-radius: 12px;
  }
  .resource-index {
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .resource-index > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 18px;
    font-size: 13px;
    font-weight: 650;
    color: var(--blue-dark);
    cursor: pointer;
    min-height: 46px;
    list-style: none;
  }
  .resource-index > summary::-webkit-details-marker {
    display: none;
  }
  .resource-index[open] > summary {
    border-bottom: 1px solid var(--line);
  }
  .resource-index[open] > summary > span {
    transform: rotate(180deg);
  }
  .resource-menu > a {
    padding: 12px 18px;
    font-size: 13px;
    min-height: 44px;
  }
  .resource-panel {
    padding: 20px 17px 10px;
  }
  .resource-panel-heading h2 {
    font-size: 21px;
  }
  .resource-panel-heading p {
    font-size: 12px;
  }
  .resource-panel-heading {
    gap: 10px;
    margin-bottom: 10px;
  }
  .resource-tally {
    font-size: 10px;
    padding: 3px 7px;
  }
  .resource-row {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 52px;
    padding: var(--row-space) 0;
  }
  .resource-row-copy > strong {
    font-size: 13px;
  }
  .resource-row-meta {
    font-size: 10px;
    gap: 2px 8px;
  }
  .resource-row-action {
    font-size: 11px;
  }
  .resource-sequence {
    font-size: 13px;
  }
  .resource-footnote {
    font-size: 10px;
  }
  .journey-heading {
    display: block;
    margin-bottom: 18px;
  }
  .journey-heading h1 {
    font-size: 26px;
  }
  .journey-heading p {
    font-size: 12px;
  }
  .journey-progress {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-top: 15px;
  }
  .journey-progress progress {
    width: 100px;
  }
  .journey-board {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
  }
  .journey-steps {
    padding: 6px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .journey-steps > a {
    min-height: 44px;
    padding: 8px 14px;
    gap: 11px;
  }
  .journey-steps strong {
    font-size: 12px;
  }
  .journey-steps > a > span:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 1;
  }
  .journey-steps small {
    font-size: 9px;
    max-width: 125px;
    text-align: right;
    margin: 0;
  }
  .journey-steps .step-number {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    font-size: 10px;
  }
  .journey-panel {
    padding: 22px 18px;
  }
  .journey-panel > h2 {
    font-size: 23px;
  }
  .journey-panel > p {
    font-size: 13px;
  }
  .journey-panel .form-actions {
    margin: 18px 0;
  }
  .journey-panel .practice-check {
    font-size: 12px;
    padding-top: 20px;
    margin-top: 20px;
  }
  .journey-actions {
    margin-top: 22px;
    padding-top: 18px;
    gap: 9px;
  }
  .journey-actions .button {
    font-size: 12px;
    max-width: 100%;
    padding: 10px 12px;
  }
  .journey-actions .button .icon {
    width: 15px;
  }
  .journey-lessons .resource-row {
    gap: 8px;
  }
  .next-step-panel {
    padding: 20px;
    flex-wrap: wrap;
  }
  .progress-record-row {
    gap: 12px;
  }
  .progress-record-row strong {
    font-size: 12px;
  }
  .reader-heading h1 {
    font-size: 21px;
  }
  .reader-next {
    align-items: flex-start;
    flex-direction: column;
    padding: 13px;
  }
  .reader-next .button {
    max-width: 100%;
  }
  .reader-main {
    padding-top: 17px !important;
  }
}

.journey-index {
  background: var(--rail);
  border-right: 1px solid var(--line);
}
.journey-index > summary {
  display: none;
}
.journey-index .journey-steps {
  border-right: 0;
}
@media (max-width: 850px) {
  .journey-index {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .journey-index .journey-steps {
    border-bottom: 0;
  }
}
@media (max-width: 760px) {
  .journey-index > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 13px 17px;
    font-size: 12px;
    min-height: 46px;
    font-weight: 600;
    color: var(--blue-dark);
    list-style: none;
  }
  .journey-index > summary::-webkit-details-marker {
    display: none;
  }
  .journey-index[open] > summary {
    border-bottom: 1px solid var(--line);
  }
  .journey-index[open] > summary > span {
    transform: rotate(180deg);
  }
}

@media (max-width: 760px) {
  .preview-band {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 8px;
    padding: 7px 14px;
    text-align: left;
    align-items: center;
  }
  .preview-band strong {
    font-size: 10px;
  }
  .preview-band a {
    grid-column: 2;
    grid-row: 1;
    font-size: 10px;
    margin: 0;
  }
  .preview-band span {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 10px;
  }
  .location {
    align-self: stretch;
    width: 100%;
    flex: initial;
  }
}

/* Keep the task and its next action ahead of supporting chrome. */
.sidebar-controls {
  margin-top: auto;
  padding-top: 24px;
}
.journey-heading {
  margin-bottom: 18px;
}
.journey-heading h1 {
  font-size: 26px;
  margin: 0;
}
.journey-steps {
  padding: 12px 0;
}
.journey-steps > a {
  min-height: 58px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.journey-panel {
  padding: 26px;
}
.journey-panel > h2 {
  font-size: 24px;
  margin-bottom: 14px;
}
.journey-panel > p {
  line-height: 1.6;
  font-size: 14px;
}
.journey-panel .form-actions {
  margin: 20px 0;
}
.journey-panel .practice-check {
  padding-top: 18px;
  margin-top: 22px;
}
.journey-actions {
  padding-top: 18px;
  margin-top: 22px;
}
.journey-actions [aria-disabled='true'] {
  background: var(--well);
  color: var(--muted);
}
.reader-heading {
  align-items: center;
}
.reader-heading h1 {
  margin: 0;
}
.reader-heading .button {
  min-height: 40px;
  padding: 9px 13px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .journey-heading {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .journey-heading h1 {
    font-size: 23px;
  }
  .journey-progress {
    min-width: 90px;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-size: 10px;
  }
  .journey-progress progress {
    width: 90px;
  }
  .journey-panel {
    padding: 20px 18px;
  }
  .journey-steps > a {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .reader-heading {
    align-items: flex-start;
    gap: 10px;
  }
  .reader-heading h1 {
    font-size: 22px;
  }
  .sidebar-controls {
    padding-top: 16px;
  }
}

/* One workspace menu; each collection uses the full reading area. */
.resource-collection > .resource-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px var(--panel-space);
}
.resource-toolbar h1 {
  font-size: 26px;
  margin: 0;
}
.resource-toolbar .resource-tally {
  white-space: nowrap;
}
.resource-toolbar .resource-search {
  margin-left: auto;
  max-width: 380px;
}
.resource-row-copy > strong {
  font-size: 14px;
}
.resource-row-action {
  font-size: 12px;
}
.resource-row-meta {
  line-height: 1.6;
}
.resource-panel > .training-group {
  margin: 0;
  padding: 6px 0;
}
.resource-panel > .training-group + .training-group {
  border-top: 1px solid var(--line);
}
.training-group {
  margin: 12px 0;
  min-width: 0;
}
.training-group > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--blue);
  background: var(--blue-soft);
  margin: 0 0 4px;
}
.training-group.leadership > header {
  border-color: #816323;
  background: #f4ecd9;
}
.training-group h2 {
  font-size: 16px;
  margin: 0;
  color: var(--navy);
}
.training-group.leadership h2 {
  color: #654b1e;
}
.training-group > header span:not(.badge) {
  font-size: 11px;
  color: var(--muted);
}
.training-group .badge {
  white-space: nowrap;
  font-size: 10px;
}
.complete-text {
  color: #286346;
}
.training-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
}
.training-next .button {
  min-height: 40px;
}
.training-rule {
  font-size: 12px !important;
  color: var(--muted);
  margin-bottom: 18px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}
.section-heading h2 {
  margin: 0;
  font-size: 20px;
}
.section-heading > .muted {
  font-size: 11px;
}
.progress-record-row {
  color: var(--ink);
  text-decoration: none;
  padding: 12px 0;
}
.progress-record-row:hover strong {
  color: var(--blue);
}
.progress-record-row span {
  text-align: right;
  color: var(--muted);
}
.progress-record-row strong {
  font-size: 13px;
}
.progress-record h2 {
  font-size: 20px;
}
.dashboard-training .training-group {
  margin: 15px 0;
}
.dashboard-training .resource-row {
  min-height: 52px;
}
.dashboard-training > .button {
  margin-top: 8px;
}
.renewal-line {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  padding: 0 3px 22px;
}
.renewal-line a {
  margin-left: auto;
}
.paper-status {
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 24px;
}
.paper-status label {
  font-size: 13px;
  font-weight: 600;
}
.paper-status select,
.team-filter select,
.refresher-row select {
  background: white;
  border: 1px solid #b7c4ca;
  border-radius: 7px;
  min-height: 44px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  max-width: 100%;
}
.submission-check {
  display: flex;
  gap: 13px;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  margin: 22px 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.submission-check input {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  accent-color: var(--blue);
}
.submission-check small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}
.handoff-list {
  margin: 0;
}
.handoff-list .submission-check {
  margin: 0;
  padding: 15px 0;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.handoff-list + .button {
  margin-top: 18px;
}
.completed-items {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.completed-items summary {
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 30px;
}
.completed-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.completed-row > span:last-child {
  text-align: right;
  color: var(--muted);
}
.button:disabled {
  background: var(--well);
  color: var(--muted);
  cursor: not-allowed;
  border-color: var(--line);
}
.team-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  margin: 12px 0 8px;
}
.team-member {
  border-top: 1px solid var(--line);
}
.team-member > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  min-height: 52px;
  padding: 9px 0;
  list-style: none;
}
.team-member > summary::-webkit-details-marker {
  display: none;
}
.team-member > summary::after {
  content: '⌄';
  color: var(--muted);
}
.team-member[open] > summary::after {
  content: '⌃';
}
.team-member > summary > span:first-child {
  margin-right: auto;
}
.team-member small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}
.team-member strong {
  font-size: 13px;
}
.team-completion {
  font-size: 12px;
}
.team-module {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 15px;
  font-size: 12px;
  background: var(--rail);
  border-bottom: 1px solid var(--line);
}
.team-module > span:last-child {
  text-align: right;
  min-width: 130px;
  color: var(--muted);
}
/* Owner decision #13: the five policies sit under the Worker's covenant row. */
.team-module.policy-read-row {
  padding-left: 30px;
}
.team-member .badge {
  font-size: 10px;
}
.email-dialog {
  width: min(580px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  max-height: calc(100dvh - 40px);
  overflow: auto;
}
.email-dialog::backdrop {
  background: #18344766;
}
.email-dialog h2 {
  font-size: 22px;
}
.email-dialog dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px 18px;
  font-size: 12px;
}
.email-dialog dt {
  font-weight: 650;
}
.email-dialog dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.email-dialog pre {
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  /* A long email address (Step 6's draft ends with the sign-in email) has nowhere to break. */
  overflow-wrap: anywhere;
  padding: 16px;
  background: var(--rail);
  border-radius: 8px;
}
.email-dialog p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.email-dialog .button {
  font-size: 12px;
}
@media (max-width: 760px) {
  .resource-toolbar h1 {
    flex: initial;
    font-size: 24px;
    margin: 0;
  }
  .resource-toolbar .resource-tally {
    margin-left: auto;
  }
  .resource-toolbar .resource-search {
    margin: 4px 0 0;
    flex-basis: 100%;
    max-width: none;
  }
  .resource-collection > .resource-panel {
    padding: 4px 12px;
  }
  .resource-panel > .training-group {
    margin: 0;
    padding: 6px 0;
  }
  .training-group > header {
    gap: 9px;
    padding: 8px 10px;
  }
  .training-group h2 {
    font-size: 16px;
  }
  .training-group > header span:not(.badge) {
    font-size: 10px;
    display: block;
    max-width: 170px;
  }
  .training-group .badge {
    font-size: 9px;
    white-space: normal;
    max-width: 80px;
    text-align: center;
  }
  .training-next {
    flex-wrap: wrap;
  }
  .training-next .button {
    font-size: 12px;
  }
  .resource-row-copy > strong {
    font-size: 13px;
  }
  .paper-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .paper-status select {
    width: 100%;
    font-size: 16px;
  }
  .submission-check {
    font-size: 13px;
  }
  .completed-row {
    flex-direction: column;
    gap: 3px;
  }
  .completed-row > span:last-child {
    text-align: left;
  }
  .progress-record-row {
    gap: 14px;
  }
  .progress-record-row span {
    max-width: 58%;
    font-size: 11px;
  }
  .section-heading h2 {
    font-size: 19px;
  }
  .team-member > summary {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .team-member > summary > span:first-child {
    flex: 1 1 calc(100% - 20px);
  }
  .team-member > summary::after {
    position: absolute;
    right: 40px;
  }
  .team-module {
    display: block;
    padding: 10px;
    font-size: 11px;
  }
  .team-module.policy-read-row {
    padding-left: 20px;
  }
  .team-module > span {
    display: block;
  }
  .team-module > span:last-child {
    text-align: left;
    font-size: 10px;
    margin-top: 4px;
  }
  .team-filter select {
    font-size: 16px;
  }
  .email-dialog {
    padding: 18px;
  }
  .email-dialog h2 {
    font-size: 20px;
  }
  .renewal-line {
    gap: 8px;
  }
  .renewal-line a {
    margin: 0;
    width: 100%;
  }
}
.personal-details > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  min-height: 24px;
}
.personal-details[open] > summary {
  margin-bottom: 20px;
}
.personal-details > .panel {
  border: 0;
  padding-left: 0;
  padding-right: 0;
}
.personal-details > .notice {
  margin-top: 10px;
}

/* Personal workspace: stable across roles, with details on demand. */
.topbar {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 10px 20px;
  padding: 15px 32px;
}
.preview-controls {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: flex-end;
  opacity: 0.9;
}
.preview-controls select,
.preview-controls .button {
  min-height: 44px;
}
.location {
  min-width: 0;
}
.account-dropdown {
  position: relative;
}
.account-dropdown > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  min-height: 48px;
  border: 1px solid var(--line);
  padding: 6px 12px 6px 6px;
  border-radius: 28px;
  background: var(--paper);
}
.account-dropdown > summary::-webkit-details-marker {
  display: none;
}
.avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 650;
}
.account-copy strong,
.account-copy small {
  display: block;
}
.account-copy strong {
  font-size: 13px;
  color: var(--ink);
}
.account-copy small {
  font-size: 10px;
  line-height: 1.3;
  color: var(--blue-dark);
}
.account-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 28;
  width: 260px;
  background: white;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 40px #1a425e18;
  display: grid;
  gap: 4px;
}
.account-popover > strong {
  color: var(--ink);
}
.account-popover > .muted {
  overflow-wrap: anywhere;
  margin-bottom: 14px;
}
.account-popover > a {
  min-height: 44px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-radius: 6px;
  padding: 9px;
}
.account-popover > a:hover {
  background: var(--rail);
}
.dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 18px;
}
.dashboard-welcome h1 {
  font-size: clamp(28px, 2.8vw, 36px);
  letter-spacing: -1px;
  margin: 5px 0 8px;
}
.dashboard-welcome p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 500px;
}
.welcome-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  background: var(--well);
  color: var(--blue-dark);
  display: grid;
  place-items: center;
}
.welcome-mark .icon {
  width: 27px;
  height: 27px;
}
.dashboard-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: #e7f0ef;
  border: 1px solid #d5e4e1;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.dashboard-next.due {
  background: var(--brass-soft);
  border-color: #e5d9c1;
}
.dashboard-next .eyebrow {
  display: block;
  font-size: 9px;
  margin-bottom: 3px;
}
.dashboard-next h2 {
  font-size: 19px;
  margin: 0 0 3px;
  color: var(--navy);
}
.dashboard-next p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.dashboard-next > .button {
  flex-shrink: 0;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.dashboard-panel {
  padding: 12px var(--panel-space);
  margin: 0;
  background: white;
  min-width: 0;
}
.progress-details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 7px 10px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  color: var(--blue-dark);
}
.progress-details > summary::-webkit-details-marker {
  display: none;
}
.dashboard-panel-title {
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
}
.progress-details > summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  grid-column: 3;
  grid-row: 1;
  text-align: center;
}
.progress-details[open] > summary::after {
  content: '−';
}
.dashboard-panel progress {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: 4px;
  display: block;
  accent-color: var(--blue);
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
}
progress::-webkit-progress-bar {
  background: var(--well);
}
progress::-webkit-progress-value {
  background: var(--blue);
  border-radius: 8px;
}
.progress-details[open] > summary {
  margin-bottom: 8px;
}
.dashboard-panel .progress-record-row {
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  min-height: 44px;
}
.dashboard-panel .progress-record-row span {
  max-width: 62%;
  text-align: right;
  font-size: 11px;
}
.dashboard-training .training-group h2 {
  font-size: 15px;
}
.dashboard-training .resource-row {
  grid-template-columns: 23px minmax(0, 1fr) auto;
  gap: 8px;
}
.dashboard-training .resource-row-copy > strong {
  font-size: 13px;
}
.dashboard-training .resource-row-meta {
  font-size: 11px;
}
.dashboard-training .resource-row-action {
  font-size: 12px;
}
.dashboard-reminders {
  padding: 16px 0 12px;
}
.dashboard-reminders h2 {
  font-size: 14px;
  margin-bottom: 6px;
}
.reminder-row {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
}
.reminder-row > div {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.reminder-row span {
  color: var(--muted);
  font-size: 12px;
}
.reminder-row > .icon {
  color: var(--muted);
}
/* Owner decision #17: the renewal rule sits on its own line under the due date. */
.reminder-row .reminder-note {
  flex-basis: 100%;
}
.dashboard-quick {
  border-top: 1px solid var(--line);
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.profile-panel {
  max-width: 800px;
}
.profile-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.profile-field {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
}
.profile-field input,
.profile-field select,
.people-filters input,
.people-filters select,
.assign-fields input,
.assign-fields select,
#admin-note {
  width: 100%;
  min-width: 0;
  background: white;
  border: 1px solid #bdc6c7;
  border-radius: 7px;
  padding: 11px 12px;
  min-height: 44px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.profile-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.form-status {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #9a392b;
  white-space: pre-wrap;
  margin: 0;
}
.form-status:empty {
  /* Out of the layout but still a live region, so later messages are announced. */
  position: absolute;
}
.form-status .form-success {
  color: var(--green);
  margin: 0 0 8px;
}
/* D-059: what happened to an email, kept under the panel after a change. */
.form-status .kept-note {
  color: var(--ink);
  font-size: 13px;
}
.people-filters {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) repeat(3, minmax(130px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.people-filters select {
  font-size: 12px;
  padding-left: 10px;
}
.people-table-scroll {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--line);
  scrollbar-color: #b9c9cd transparent;
}
.people-table-scroll:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.people-table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  white-space: nowrap;
}
.people-table th {
  padding: 0;
  letter-spacing: 0;
  font-weight: 600;
  background: var(--rail);
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.column-sort {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 10px;
  min-height: 44px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
}
.column-sort:hover {
  color: var(--blue-dark);
  background: var(--blue-soft);
}
.sort-indicator {
  font-size: 14px;
  color: #6e7b80;
  font-weight: 400;
}
.people-table th[aria-sort='ascending'] .column-sort,
.people-table th[aria-sort='descending'] .column-sort {
  color: white;
  background: var(--blue-dark);
  font-weight: 700;
}
.people-table th[aria-sort='ascending'] .sort-indicator,
.people-table th[aria-sort='descending'] .sort-indicator {
  color: white;
  font-weight: 700;
}
.people-table td {
  height: 46px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
}
.people-table tbody tr:last-child td {
  border-bottom: 0;
}
.person-row {
  cursor: pointer;
  background: var(--paper);
}
.person-row:hover,
.person-row:focus-within {
  background: #f0f7f8;
}
.person-name {
  display: flex;
  align-items: center;
  min-height: 46px;
  font-weight: 650;
  color: var(--blue-dark);
}
.person-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.person-row .badge {
  font-size: 10px;
  padding: 3px 7px;
}
.person-completion {
  font-variant-numeric: tabular-nums;
}
.person-training {
  color: var(--brass);
}
.access-active {
  color: var(--muted);
}
.access-paused {
  color: #8c542a;
  font-weight: 600;
}
.empty-state {
  padding: 25px 0;
  color: var(--muted);
}
.admin-disclosure {
  margin-top: 18px;
}
.admin-disclosure > summary {
  min-height: 44px;
  cursor: pointer;
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 600;
}
.assign-fields {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 15px;
  margin: 10px 0 16px;
}
.assign-fields label {
  display: grid;
  gap: 7px;
  font-size: 12px;
}
.assign-fields select {
  font-size: 12px;
}
.assign-fields .field-hint {
  margin: 6px 0 0;
}
.admin-note {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}
.admin-note p {
  white-space: pre-wrap;
  font-size: 13px;
}
.admin-note small {
  font-size: 11px;
  color: var(--muted);
}
#admin-note {
  resize: vertical;
  font-family: var(--font);
  margin-bottom: 12px;
}
.account-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.button.danger {
  color: #a0382b;
  background: #fff;
  border-color: #d9bcb6;
}
.button.danger:hover {
  background: #faf0ed;
}
.kit-section {
  margin: 16px 0;
}
.kit-grid {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  overflow: hidden;
  padding: 0 var(--panel-space);
}
.kit-resource {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
  min-height: 60px;
}
.kit-resource:last-child {
  border-bottom: 0;
}
.kit-symbol {
  color: var(--brass);
  display: grid;
  place-items: center;
}
.kit-symbol .icon {
  width: 22px;
  height: 22px;
}
.kit-copy {
  min-width: 0;
}
.kit-resource h3 {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 2px;
}
.kit-resource p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}
.kit-resource:hover h3 {
  color: var(--blue-dark);
  text-decoration: underline;
}
/* A SafeGuard Leader's list below stands clear of these buttons, as the Classroom kit section's own 16px
   (final pass, 8 Oct 2026). */
.leader-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 760px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 16px;
    gap: 10px;
  }
  .location {
    width: auto;
    flex: initial;
    align-self: center;
    gap: 8px;
  }
  .location #breadcrumb {
    font-size: 11px;
    max-width: 140px;
    line-height: 1.4;
  }
  .account-copy {
    display: none;
  }
  .account-dropdown > summary {
    gap: 6px;
    padding: 4px 8px 4px 4px;
  }
  .account-popover {
    width: min(280px, calc(100vw - 32px));
  }
  .preview-controls {
    width: 100%;
    flex-wrap: nowrap;
    gap: 7px;
  }
  .preview-controls label {
    font-size: 10px;
  }
  .preview-controls select {
    font-size: 16px;
    padding: 7px;
    max-width: none;
  }
  .preview-controls .button {
    font-size: 10px;
    padding: 7px;
  }
  .dashboard-welcome {
    margin: 0 0 16px;
    gap: 12px;
  }
  .dashboard-welcome h1 {
    font-size: 28px;
  }
  .dashboard-welcome p {
    font-size: 13px;
  }
  .welcome-mark {
    display: none;
  }
  .dashboard-next {
    padding: 13px 14px;
    display: block;
  }
  .dashboard-next h2 {
    font-size: 19px;
  }
  .dashboard-next > .button {
    margin-top: 12px;
    width: 100%;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .dashboard-panel {
    padding: 12px 14px;
  }
  .dashboard-panel-title {
    font-size: 15px;
  }
  .dashboard-panel .badge {
    font-size: 10px;
  }
  .dashboard-quick {
    flex-wrap: wrap;
  }
  .profile-form {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .profile-field input,
  .profile-field select,
  .people-filters input,
  .people-filters select,
  .assign-fields input,
  .assign-fields select,
  #admin-note {
    font-size: 16px;
  }
  .people-filters {
    grid-template-columns: 1fr;
  }
  .people-table {
    min-width: 740px;
  }
  .people-table th:first-child,
  .people-table td:first-child {
    white-space: normal;
    min-width: 7rem;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
    box-shadow: 1px 0 0 var(--line);
  }
  .people-table th:first-child {
    background: var(--rail);
  }
  .person-row:hover td:first-child {
    background: #f0f7f8;
  }
  .assign-fields {
    grid-template-columns: 1fr;
  }
  .kit-grid {
    padding: 0 12px;
  }
  .kit-resource {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 2px 10px;
    padding: 10px 0;
  }
  .kit-symbol {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    padding-top: 2px;
  }
  .kit-copy {
    grid-column: 2;
    grid-row: 1;
  }
  .kit-resource h3 {
    font-size: 13px;
  }
  .kit-resource p {
    font-size: 11px;
  }
  .kit-resource > .resource-row-action {
    grid-column: 3;
    grid-row: 1;
  }
  .leader-quick .button {
    width: 100%;
  }
  .account-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .reader-heading .button,
  .sidebar-controls button,
  .completed-items summary,
  .v2-instructions summary {
    min-height: 44px;
  }
  textarea:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
  }
}
@media (min-width: 1200px) {
  .topbar {
    grid-template-columns: minmax(170px, 1fr) auto auto;
  }
  .preview-controls {
    grid-column: 2;
    grid-row: 1;
  }
  .account-dropdown {
    grid-column: 3;
  }
}
.assign-fields > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

/* Shared density: consistent containers and rows, without reducing tap targets. */
main {
  padding-top: 25px;
  padding-bottom: 30px;
}
.page-heading {
  margin-bottom: 18px;
}
.page-heading h1 {
  margin-bottom: 8px;
}
.panel:not(.dashboard-panel) {
  padding: var(--panel-space);
  margin-bottom: 16px;
}
.section-heading h2 {
  font-size: 18px;
}
.section-heading {
  margin-bottom: 8px;
}
.resource-row-meta {
  margin-top: 2px;
  line-height: 1.4;
  gap: 2px 5px;
}
.resource-sequence {
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--blue-dark);
}
.training-group > header > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.training-group > header span:not(.badge) {
  font-size: 11px;
}
.training-group .badge {
  max-width: none;
  white-space: nowrap;
}
.resource-list:not(.journey-lessons) .resource-row-copy {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px 14px;
  flex-wrap: wrap;
}
.resource-list:not(.journey-lessons) .resource-row-meta {
  margin: 0;
}
.resource-search {
  border-radius: 10px;
}
.profile-form {
  gap: 14px 18px;
}
.profile-actions {
  margin-top: 0;
}
@media (max-width: 760px) {
  main {
    padding-top: 18px;
  }
  .panel:not(.dashboard-panel) {
    padding: 14px;
  }
  .training-group > header > div {
    gap: 0 8px;
  }
  .training-group > header span:not(.badge) {
    max-width: none;
  }
  .training-group .badge {
    font-size: 10px;
  }
  .resource-list:not(.journey-lessons) .resource-row-copy {
    gap: 1px 10px;
  }
}

@media (min-width: 761px) {
  .team-member > summary > span:first-child {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }
  .team-member small {
    margin: 0;
  }
}

/* Completion is visible at a glance; dates and scores stay in the opened record. */
.training-row,
.dashboard-training .training-row {
  grid-template-columns: 25px minmax(0, 1fr) auto auto;
  gap: 12px;
  min-height: 48px;
}
.training-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 750;
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.training-status.is-complete {
  background: #dff4e5;
  border-color: #96cba5;
  color: #145c2e;
}
.training-status.is-incomplete {
  background: #fde9e7;
  border-color: #e3a39c;
  color: #9b2620;
}
.training-history {
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.training-history > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}
.training-history > summary::-webkit-details-marker {
  display: none;
}
.training-history > summary::before {
  content: '+';
}
.training-history[open] > summary::before {
  content: '−';
}
.training-history p {
  font-size: 13px;
  margin: 0 0 12px;
  color: var(--muted);
}
.people-table th:nth-child(-n + 2),
.people-table td:nth-child(-n + 2) {
  width: 1%;
}
.people-table th:first-child .column-sort,
.people-table td:first-child {
  padding-right: 4px;
}
.people-table th:nth-child(2) .column-sort,
.people-table td:nth-child(2) {
  padding-left: 6px;
}
.contact-purpose {
  margin: 4px 0 12px;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 1100px) and (min-width: 761px) {
  .people-filters {
    grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(100px, 1fr));
  }
  .people-filters select {
    font-size: 11px;
  }
}
@media (max-width: 760px) {
  .training-row,
  .dashboard-training .training-row {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 3px 8px;
    align-items: start;
  }
  .training-row .resource-sequence {
    grid-column: 1;
    grid-row: 1 / 3;
    padding-top: 3px;
  }
  .training-row .resource-row-copy {
    grid-column: 2;
    grid-row: 1 / 3;
    padding-top: 2px;
  }
  .training-row .training-status {
    grid-column: 3;
    grid-row: 1;
    font-size: 10px;
    padding: 4px 6px;
  }
  .training-row .resource-row-action {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
    padding-top: 2px;
  }
  .training-group > header {
    align-items: center;
  }
  .training-group h2 {
    font-size: 15px;
  }
  .people-table {
    min-width: 850px;
  }
}

/* A consistent choice on each step; the date belongs to its confirmation. */
.journey-board {
  align-items: start;
}
/* On a phone the board is a flex column, where start would shrink a done step's panel to its
   content; there it fills the card (final pass, 8 Oct 2026). */
@media (max-width: 760px) {
  .journey-board {
    align-items: stretch;
  }
}
.journey-index {
  align-self: stretch;
}
.journey-panel {
  min-width: 0;
  padding: 22px 26px;
}
.journey-panel > .journey-intro {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
  max-width: 620px;
}
.journey-panel .submission-check {
  min-height: 48px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  font-size: 14px;
  gap: 10px;
}
.journey-panel .submission-check input {
  margin: 0;
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}
.journey-panel .submission-check > span {
  font-weight: 600;
}
.journey-panel .submission-check small {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
}
.prepare-paper {
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.prepare-paper > .button {
  margin-bottom: 5px;
}
.journey-panel .prepared-check {
  font-size: 13px;
}
.submission-choice {
  max-width: 640px;
}
.choice-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  margin: 8px 0 12px;
}
.choice-divider::before,
.choice-divider::after {
  content: '';
  height: 1px;
  background: var(--line);
  flex: 1;
}
.journey-actions {
  margin-top: 20px;
  padding-top: 16px;
}
.onboarding-confirmed {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--green);
  padding: 12px 0;
}
.onboarding-confirmed > .icon {
  background: var(--green-soft);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 6px;
}
.onboarding-confirmed strong {
  font-size: 15px;
}
.onboarding-confirmed span {
  font-size: 12px;
  margin-left: 12px;
}
.onboarding-confirmed p {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
}
.unfinished-steps {
  margin: 0 0 20px;
  border-top: 1px solid var(--line);
}
.unfinished-steps a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.unfinished-steps a > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.unfinished-steps .icon {
  width: 16px;
  height: 16px;
}
.journey-panel .handoff-list .submission-check {
  border-bottom: 1px solid var(--line);
}
.completed-items {
  margin-top: 18px;
  padding-top: 12px;
}
.completed-items summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.completed-items summary::before {
  content: '+';
  font-size: 18px;
}
.completed-items[open] summary::before {
  content: '−';
}
.completed-items summary::-webkit-details-marker {
  display: none;
}
.journey-panel > .finish-note {
  font-size: 12px;
  color: var(--muted);
  margin: 14px 0 0;
}
.help-button {
  position: fixed;
  right: 24px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 17px;
  background: white;
  border: 1px solid #c3d0d4;
  box-shadow: 0 3px 12px #1a425e14;
  border-radius: 24px;
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 650;
}
.help-button:hover {
  background: var(--blue-soft);
}
.help-button .icon {
  width: 19px;
  height: 19px;
}
main {
  padding-bottom: 80px;
}
.toast {
  bottom: 80px;
}
.menu-open .help-button {
  visibility: hidden;
}
.help-dialog {
  width: min(480px, calc(100% - 28px));
}
.help-dialog .section-heading {
  margin-bottom: 8px;
}
.help-dialog .help-intro {
  font-size: 13px;
  margin: 0 0 3px;
}
.help-dialog .help-recipient {
  font-size: 12px;
  margin: 0 0 18px;
  overflow-wrap: anywhere;
}
.help-form {
  display: grid;
  /* Email addresses run longer than names, so the email field gets the wider column. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 14px 12px;
}
.help-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
  color: var(--navy);
}
.help-form input,
.help-form textarea,
.help-form select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d7d0c1;
  border-radius: 8px;
  background: var(--rail);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}
.help-form textarea {
  resize: vertical;
  min-height: 110px;
  max-height: 240px;
}
.help-form textarea:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.help-wide {
  grid-column: 1 / -1;
}
.help-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.help-form .draft-explanation {
  margin: 0;
  font-size: 12px;
}
.help-form .form-status {
  color: #9b2620;
}
@media (max-width: 760px) {
  .journey-panel {
    padding: 18px 16px;
  }
  .help-button {
    right: 14px;
    bottom: max(12px, env(safe-area-inset-bottom));
    font-size: 12px;
    padding: 10px 14px;
  }
  .help-dialog {
    padding: 18px;
    max-height: calc(100dvh - 24px);
  }
  .help-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .help-form input,
  .help-form textarea,
  .help-form select {
    font-size: 16px;
  }
  .help-dialog .help-recipient {
    margin-bottom: 14px;
  }
  .onboarding-confirmed span {
    display: block;
    margin: 3px 0 0;
  }
}
@media print {
  .help-button {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------------------
   Onboarding clarity proposal (w3 onboarding spec). Shell only; the original documents are untouched.
   --------------------------------------------------------------------------------------------------- */

/* Preview-only controls live in the preview band, not the page header. */
.preview-band {
  flex-wrap: wrap;
  row-gap: 6px;
}
.preview-band .preview-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}
.preview-band .preview-controls label {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.92;
}
.preview-band .preview-controls select {
  min-height: 30px;
  min-width: 0;
  max-width: 190px;
  padding: 3px 8px;
  border: 1px solid #ffffff66;
  border-radius: 6px;
  background: #ffffff1a;
  color: #fff;
  font-size: 12px;
}
.preview-band .preview-controls select option {
  color: var(--ink);
}
.preview-band .preview-controls .button {
  min-height: 30px;
  padding: 3px 10px;
  border: 1px solid #ffffff66;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: 12px;
}

/* Header: menu button, clickable location trail and account menu only. */
.topbar {
  min-height: 72px;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--muted);
}
.crumbs li + li::before {
  content: '›';
  margin-right: 6px;
  color: #9aa1a8;
}
.crumbs a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.crumbs [aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
}

/* Got questions? never covers content: on desktop pages reserve room for the floating pill;
   on phones it is docked in the header (see the phone rules below). */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.help-short {
  display: none;
}
main {
  padding-bottom: 104px;
}

/* Batch 5b: room at the bottom for the floating help pill on desktop. Scrolling to an item (keyboard
   focus, a link to it) stops short of the pill, and a document reader can scroll fully clear of it, as
   every other page already can. Phones put Help in the header instead (below). */
@media (min-width: 761px) {
  html {
    scroll-padding-bottom: 96px;
  }
  main.reader-main {
    padding-bottom: 104px !important;
  }
}

/* Toasts sit above the help pill on desktop, and at the top of the screen on phones. */
.toast {
  bottom: 84px;
}

/* Do, then confirm: the step's actions in the order they really happen. */
.do-steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.do-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.do-step:first-child {
  border-top: 0;
  padding-top: 6px;
}
.do-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #b9c7cc;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  background: var(--paper);
}
.do-body {
  display: grid;
  gap: 10px;
  justify-items: start;
  min-width: 0;
}
.do-body > strong {
  font-size: 15px;
  color: var(--ink);
  padding-top: 3px;
}
.do-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 560px;
}
.do-body .submission-check {
  margin: 0;
  padding: 0;
  border-top: 0;
}
.check-route {
  font-weight: 400;
  color: var(--muted);
}
/* Decision #11: email and paper are two equal ways to send, side by side; stacked on phones. */
.send-choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 560px;
}
.send-choice {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.send-choice > strong {
  font-size: 13px;
  color: var(--navy);
}
.send-choice p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 760px) {
  .send-choices {
    grid-template-columns: minmax(0, 1fr);
  }
  .send-choice > .button {
    min-height: 44px;
  }
}

/* Step 3 (decision #22): the Junior Volunteer choice, set apart below the police-check actions. */
.police-not-needed {
  display: grid;
  gap: 6px;
  margin: 6px 0 14px;
  padding: 12px 14px;
  max-width: 620px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.journey-panel .police-not-needed .submission-check {
  margin: 0;
  padding: 0;
  border-top: 0;
}

/* Completed step: one row, with Change to reopen it. */
.step-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 14px 0 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 14px;
}
.step-done > .icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.step-done .button.text {
  min-height: 32px;
  padding: 2px 4px;
  font-size: 13px;
}
/* The "·" before Change wraps with it (final pass, 8 Oct 2026). */
.step-done-change {
  white-space: nowrap;
}
.onboarding-confirmed.step-done {
  align-items: flex-start;
}
/* Inside the green step-done box the tick matches the other step notices (no inner circle). */
.onboarding-confirmed.step-done > .icon {
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
}
.onboarding-confirmed.step-done p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.renewal-due {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin: 8px 0 6px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--brass-soft);
  border: 1px solid #e2d3b3;
}
.renewal-due p {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
}
.step-notice {
  margin: 4px 0 12px;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--navy);
  font-size: 13px;
}

/* Step list: a saved-or-printed form shows a neutral "Ready to send" marker, not a green tick. */
.step-number.ready {
  background: var(--brass-soft);
  border-color: #cdb788;
  color: var(--brass);
}

/* Locked Continue or Finish: still focusable, with the reason beside it. */
.journey-actions {
  align-items: center;
}
.journey-actions .locked-reason {
  margin: 0 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  max-width: 320px;
}
.journey-actions .button.locked {
  background: var(--well);
  color: var(--muted);
  border-color: var(--line);
  opacity: 1;
  cursor: not-allowed;
}
.journey-actions .locked-reason + .button,
.journey-actions > .button:last-child {
  margin-left: 0;
}
.journey-actions > .back-link + .button:last-child {
  margin-left: auto;
}

/* Review & finish: one list of what is left. */
.left-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.left-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.left-row strong {
  font-size: 14px;
}
.left-row .muted {
  font-size: 12px;
}
.left-row .button {
  margin-left: auto;
}
.left-ready {
  padding: 14px 0 4px;
  border-bottom: 1px solid var(--line);
}
.left-ready .handoff-list {
  margin-top: 6px;
}
/* Fix list item 3: the one labelled place to send forms. */
.left-ready > strong {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}
#whats-left {
  margin-top: 4px;
}
.finish-summary {
  margin: 6px 0 4px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--navy);
  font-size: 13px;
}

/* Covenant: the policies to read first, and the paper alternative tucked away. */
.covenant-policies a,
.training-elsewhere a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.paper-covenant {
  margin: 18px 0 0;
  font-size: 13px;
}
.paper-covenant .submission-check {
  margin: 4px 0 0;
  padding: 8px 0 0;
  border-top: 0;
}

/* Decision #13: the five policies on Step 5, each a link to read or "Read on {date}", and Read and
   sign locked (still focusable) until all five are confirmed. */
.journey-panel > .covenant-policies {
  margin-bottom: 8px;
}
.policy-reads {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  max-width: 620px;
  border-top: 1px solid var(--line);
}
.policy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 44px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.policy-row a:not(.button) {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.policy-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--green);
  font-size: 13px;
}
.policy-state .icon {
  width: 16px;
  height: 16px;
}
.journey-panel > .locked-reason {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
}
.journey-panel > .button.locked {
  background: var(--well);
  color: var(--muted);
  border-color: var(--line);
  opacity: 1;
  cursor: not-allowed;
}

/* Decision #13: "I’ve read this policy" (S11.N1) at the end of a policy, in the shell straight after
   its reader, then its date. */
.policy-read {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
}
.policy-read-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 14px;
}
.policy-read-done .icon {
  width: 18px;
  height: 18px;
}
.policies-first a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Dashboard: visible Show / Hide text replaces the bare "+", and finished states have no filled button. */
.progress-details > summary {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.progress-details > summary::after {
  content: none;
}
.panel-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-dark);
  white-space: nowrap;
}
.panel-toggle .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.15s;
}
.progress-details .when-open,
.progress-details[open] .when-closed {
  display: none;
}
.progress-details[open] .when-open {
  display: inline;
}
.progress-details[open] .panel-toggle .icon {
  transform: rotate(180deg);
}
.dashboard-next.finished {
  background: var(--paper);
  border-color: var(--line);
}

/* Reader: where am I, above the document frame. */
.reader-eyebrow {
  margin-bottom: 4px;
  text-transform: uppercase;
}
.reader-guide {
  margin: -4px 0 12px;
  font-size: 13px;
  color: var(--navy);
}

/* Volunteer Resources. */
.resource-group {
  margin-bottom: 16px;
}
.resource-group .section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 6px;
}
.resource-group h2 {
  font-size: 17px;
  margin: 0;
}
.resource-use {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .preview-band .preview-controls {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 2px 0 0;
  }
  .preview-band .preview-controls select {
    flex: 1;
    max-width: none;
    min-height: 34px;
  }
  .preview-band .preview-controls .button {
    min-height: 34px;
  }
  .topbar {
    min-height: 0;
  }
  .crumbs ol {
    font-size: 12px;
    row-gap: 10px;
  }
  /* On phones a trail of three or more levels starts at its second level. */
  .crumbs li:first-child:nth-last-child(n + 3) {
    display: none;
  }
  .crumbs li:first-child:nth-last-child(n + 3) + li::before {
    content: none;
  }
  /* On phones Help sits in the header beside the account menu, so nothing floats over the page. */
  .header-actions {
    gap: 6px;
  }
  .help-long {
    display: none;
  }
  .help-short {
    display: inline;
  }
  .help-button {
    position: static;
    min-height: 44px;
    padding: 8px 11px;
    box-shadow: none;
  }
  main {
    padding-bottom: 40px;
  }
  .toast {
    top: 10px;
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(360px, calc(100% - 24px));
    transform: translate(-50%, -8px);
  }
  .toast.visible {
    transform: translate(-50%, 0);
  }
  .journey-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .journey-actions .locked-reason {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: left;
    max-width: none;
    margin: 0;
  }
  .journey-actions > .button:last-child {
    justify-self: end;
    grid-column: 2;
  }
  .journey-actions > .button:only-child {
    grid-column: 1 / -1;
  }
  .left-row .button {
    margin-left: 0;
  }
  .progress-details > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .panel-toggle {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}
@media print {
  .crumbs {
    display: none;
  }
}
/* D-050 K: "Leave this form?" asks before typed answers are cleared. */
.leave-dialog {
  width: min(420px, calc(100% - 32px));
}
.leave-dialog p {
  font-size: 14px;
  color: var(--ink);
}
.leave-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.training-elsewhere {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------------------------------
   Hosted build (batch 5b): sign-in, the authenticator, the administrator's demo band and the
   server-backed Admin-Hub. Scoped to the hosted page; the local preview never shows these.
   --------------------------------------------------------------------------------------------------- */
body[data-mode='hosted']:not([data-account='live']) .sidebar,
body[data-mode='hosted']:not([data-account='live']) .topbar,
body[data-mode='hosted']:not([data-account='live']) .help-button,
body[data-mode='hosted']:not([data-account='live']) .sidebar-backdrop {
  display: none;
}
body[data-mode='hosted']:not([data-account='live']) .app-shell {
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}
.auth-card {
  max-width: 460px;
  margin: 32px auto;
  padding: 28px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 24px #1a425e12;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 1.2px;
}
.auth-brand img {
  mix-blend-mode: multiply;
}
.auth-card h1 {
  margin: 0 0 12px;
  font-size: 26px;
}
.auth-card h2 {
  margin: 20px 0 8px;
  font-size: 17px;
}
.auth-card p {
  font-size: 14px;
}
.auth-form {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}
.auth-label {
  margin-top: 8px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
}
.auth-form input:not([type='checkbox']) {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #d7d0c1;
  border-radius: 8px;
  background: var(--rail);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.auth-form input:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.auth-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.auth-check input {
  width: 20px;
  height: 20px;
}
.auth-hint {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
}
.auth-hint a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-form .button {
  justify-content: center;
  margin-top: 8px;
}
.auth-status {
  min-height: 1em;
  margin: 6px 0 0;
  color: #9b2620;
  font-size: 13px;
}
p.auth-status[role='status'] {
  color: var(--ink);
}
.auth-notice {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 13px;
}
.totp-qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: 8px 0 12px;
}
.totp-key-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.totp-key {
  flex: 1 1 100%;
  min-width: 0;
  min-height: 46px;
  resize: none;
  overflow: hidden;
  word-break: break-all;
  line-height: 1.4;
  padding: 10px 12px;
  border: 1px solid #d7d0c1;
  border-radius: 8px;
  background: var(--rail);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  letter-spacing: 1px;
  -webkit-user-select: all;
  user-select: all;
}
.totp-copied {
  display: block;
  min-height: 1em;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
/* The administrator's fictional-data demo: clearly different from the real workspace. */
.demo-band {
  position: sticky;
  top: 0;
  z-index: 9;
  flex-wrap: wrap;
  background: #7a4b00;
}
.demo-band .preview-controls .button.quiet {
  color: white;
  border-color: #ffffff80;
}
.admin-overview .overview-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 16px;
  padding: 0;
  list-style: none;
}
.admin-overview .overview-counts li {
  min-width: 140px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--rail);
  font-size: 12px;
  color: var(--muted);
}
.admin-overview .overview-counts strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
}
.admin-overview h3 {
  margin: 14px 0 6px;
  font-size: 14px;
}
.overview-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.overview-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.overview-list a {
  color: var(--blue-dark);
  font-weight: 650;
}
.account-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 8px 0 14px;
  font-size: 14px;
}
.account-facts dt {
  color: var(--muted);
}
.account-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.refresher-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
}
.refresher-reason {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.add-person .profile-form {
  margin-top: 10px;
}
/* The administrator's demo band on a phone: Preview as gets a full-width row so role names are not
   cut off, and announcements move to the bottom so they never cover the band. */
@media (max-width: 760px) {
  .demo-band .preview-controls {
    flex-wrap: wrap;
    width: 100%;
  }
  .demo-band .preview-controls select {
    flex: 1 1 60%;
    max-width: none;
  }
  .demo-band .preview-controls .button {
    flex: 1 1 40%;
  }
  body[data-demo='on'] .toast {
    top: auto;
    bottom: 15px;
    transform: translate(-50%, 8px);
  }
  body[data-demo='on'] .toast.visible {
    transform: translate(-50%, 0);
  }
}
/* A phone's people table scrolls sideways; this line says so. Hidden where the table fits. */
.table-scroll-hint {
  display: none;
}
@media (max-width: 760px) {
  .table-scroll-hint {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--muted);
  }
}
/* P5-09: on a narrow phone a long name wraps, and the page's Back button moves below it. */
@media (max-width: 600px) {
  .page-heading {
    flex-wrap: wrap;
  }
  .page-heading > div {
    min-width: 0;
  }
  .page-heading h1 {
    overflow-wrap: anywhere;
  }
}
/* Headings that receive focus only from the page (tabindex -1) need no focus ring. */
.auth-card [tabindex='-1']:focus {
  outline: none;
}
/* A person's page and Add person (owner request, 2 Oct): role and program choices as
   described options, one details form, and the sign-in and access actions. */
.profile-form .role-choices,
.profile-form .program-choices,
.profile-form .field-note {
  grid-column: 1 / -1;
}
.role-choices,
.program-choices {
  margin: 4px 0 14px;
}
.profile-form .role-choices,
.profile-form .program-choices {
  margin: 0;
}
.program-choices legend,
.add-person .role-choices legend {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  padding: 0;
}
.field-hint {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 10px;
}
.field-note {
  margin: 0;
}
.role-choice span {
  display: grid;
  gap: 3px;
}
.role-choice strong {
  font-size: 14px;
}
.role-choice small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.program-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
}
.role-current {
  font-size: 14px;
  margin: 8px 0;
}
.access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.access-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}
/* Fix list item 1: the person's own choice of where to serve (Step 1), and how a person's
   page shows it to an administrator. */
.journey-panel .serving-interests {
  margin: 20px 0 4px;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.journey-panel .serving-interests legend {
  font-size: 15px;
  font-weight: 600;
  padding: 0;
  margin-bottom: 4px;
}
.serving-interests .form-status {
  margin: 4px 0 0;
  font-size: 13px;
}
.profile-form .serving-interests {
  grid-column: 1 / -1;
  margin: 0;
}
.profile-form .serving-interests strong {
  font-size: 12px;
  font-weight: 600;
}
.profile-form .serving-interests ul {
  margin: 4px 0 6px;
  padding-left: 18px;
  font-size: 14px;
}
.profile-form .serving-interests p {
  margin: 4px 0 0;
}
@media (max-width: 760px) {
  .program-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .access-controls {
    margin-left: 0;
  }
}
/* D-056 part 2: "Continue with Google" and "Continue with Microsoft" on the sign-in page, and
   My account's Ways to sign in. White buttons with each company's mark, as their guidelines ask. */
.provider-buttons {
  display: grid;
  gap: 10px;
  margin: 14px 0 6px;
}
.provider-button {
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  background: white;
  color: var(--ink);
  font-size: 15px;
}
.provider-mark {
  flex: 0 0 18px;
}
/* My account: one row per way to sign in, its status or Connect button on the right. */
.sign-in-list {
  list-style: none;
  margin: 12px 0 4px;
  padding: 0;
  max-width: 520px;
}
.sign-in-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 52px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.sign-in-list li:last-child {
  border-bottom: 1px solid var(--line);
}
.sign-in-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.sign-in-name .icon {
  width: 18px;
  height: 18px;
}
.account-help {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.account-help p {
  margin: 0;
  flex: 1 1 260px;
}
/* D-062: Invitations and Add several people on Admin-Hub. */
.invite-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.invite-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.invite-list li > div {
  display: grid;
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.invite-list small,
.invite-state {
  color: var(--muted);
  font-size: 12px;
}
/* D-059: what happened to the invitation just sent, under that person. */
.invite-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}
/* Email copy v2 (D4): when the browser won't copy, the invite message (a few lines with the link)
   shows, selected, in a read-only box to copy by hand. Release review SW-1: the holder then takes
   its own row (it sits in rows of buttons that shrink-wrap it, which left the box its 20 columns
   wide), and the box grows to the whole message where the browser can (field-sizing). */
.invite-link:not(:empty) {
  display: block;
  flex: 1 1 100%;
  min-width: 0;
}
.invite-link textarea,
.admin-hub .hub-result.is-blocked textarea {
  field-sizing: content;
}
.invite-link textarea {
  display: block;
  width: min(100%, 420px);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px;
  border: 1px solid #bdc6c7;
  border-radius: 7px;
  resize: vertical;
}
.invite-link textarea:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
#bulk-people {
  width: 100%;
  min-height: 160px;
  padding: 11px 12px;
  border: 1px solid #bdc6c7;
  border-radius: 7px;
  background: white;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.add-people .profile-field {
  display: grid;
  margin: 10px 0;
}
.bulk-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}
.bulk-table th,
.bulk-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  overflow-wrap: anywhere;
}
.bulk-table tr:not([data-status='ready']) td {
  color: var(--muted);
}
.bulk-table tr:not([data-status='ready']) td:last-child {
  color: #9a392b;
}
.bulk-summary {
  font-size: 13px;
}
.bulk-howto {
  margin: 4px 0 12px;
}
.bulk-howto > summary {
  display: inline-flex;
  list-style: none;
  font-weight: 700;
  cursor: pointer;
}
.bulk-howto > summary::-webkit-details-marker {
  display: none;
}
.bulk-howto ol {
  margin: 12px 0 8px;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
}
.bulk-howto p {
  font-size: 13px;
  margin: 6px 0;
}
.bulk-howto pre {
  margin: 0;
  padding: 10px 12px;
  background: var(--rail);
  border-radius: 7px;
  font-size: 13px;
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------------------------------
   Copy edits, 3 Oct 2026: the privacy box, Help in the top bar, and the small layout fixes that go
   with the approved copy (UX-01, UX-03, UX-04, UX-05, UX-07, UX-11, UX-29).
   --------------------------------------------------------------------------------------------------- */
/* Rule 4: capitals come from the design, not the words. */
.eyebrow {
  text-transform: uppercase;
}
/* Decision 9 / Chris ("I don't want somebody to MISS THIS"): one box for the privacy message,
   directly above the button that opens the form. The reader draws the same box (reader.css). */
.privacy-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  max-width: 620px;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #fdf3dc;
  border: 1px solid #ecd9a8;
  border-left: 4px solid #b7862b;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.privacy-box p {
  margin: 0;
}
.privacy-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brass);
  color: #fff;
  font:
    italic 700 13px/1 Georgia,
    serif;
}
@media (max-width: 760px) {
  .privacy-box {
    max-width: none;
  }
}
/* UX-05: tasks inside a step are marked with a dot, not a second set of numbers. */
.do-number {
  width: 12px;
  height: 12px;
  margin: 6px 0 0 8px;
  background: var(--blue-soft);
  border-color: var(--blue);
}
/* UX-03: Help sits in the top bar on every screen size, so it never covers Continue. Phones
   already place it in the header with its short label (the max-width: 760px rules above). */
@media (min-width: 761px) {
  .help-button {
    position: static;
    min-height: 40px;
    padding: 8px 14px;
    box-shadow: none;
  }
  .help-long {
    display: inline;
  }
  .help-short {
    display: none;
  }
}
/* UX-07: the paper-covenant tick is in view, not behind a link. */
.paper-covenant-heading {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}
/* Decision 15: who to call, before the report forms. */
.urgent-lines {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 4px solid #a0382b;
  background: #faf0ed;
  border-radius: 8px;
}
.urgent-lines p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.urgent-lines p + p {
  margin-top: 4px;
}
/* Underlined, as Home's numbers are, so a number reads as a link without relying on colour, and
   never broken at its hyphens (final pass, 8 Oct 2026). */
.urgent-lines a {
  color: #8a2f24;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.resource-pointer {
  margin: 4px 0 12px;
  font-size: 13px;
}
/* UX-29 / S16.N1: a one-time thank-you after Finish onboarding. */
.finished-thanks {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--green-soft);
  border: 1px solid #bcd8c5;
  border-radius: var(--radius);
  color: var(--green);
  font-weight: 600;
}
/* UX-11 / UX-01: the phone drawer closes from its top corner and ends with Sign out. */
.drawer-close,
#drawer-account {
  display: none;
}
@media (max-width: 760px) {
  .drawer-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--navy);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
  }
  #drawer-account {
    display: block;
    padding: 6px 12px;
    border-top: 1px solid var(--line);
  }
  /* The local preview has no Sign out, so the empty strip is not drawn. */
  #drawer-account:empty {
    display: none;
  }
  #drawer-account .button {
    width: 100%;
    justify-content: flex-start;
    min-height: 44px;
  }
}
/* The administrator's person page (#admin/person/<uid>), redesigned to the owner's handoff of
   7 Oct 2026. Everything is scoped to .person-page, and to .person-confirm for its confirmations
   (modal() appends them to main, outside the page), so no other view changes. The handoff's
   extra colours are custom properties here; the rest are the shared tokens. Light mode only. */
.person-page,
.person-confirm {
  --pp-review-line: #a8d2e3;
  --pp-ok-line: #bcdac6;
  --pp-due-line: #ddcca8;
  --pp-neutral-line: #d6d0c3;
  --pp-box-line: #ddd5c4;
  --pp-input-line: #918a7c;
  --pp-row-line: #ece7dc;
  --pp-todo: #7b838c;
  --pp-police-text: #4a5a50;
  --pp-delete: #9a392b;
  --pp-delete-dark: #7f2f23;
  --pp-delete-line: #dcbfb8;
}
.person-page {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 15px;
  line-height: 1.45;
}
.person-page [hidden],
.person-confirm [hidden] {
  display: none !important;
}
.person-page :is(h1, h2, h3, p, ul) {
  margin: 0;
}
.person-page :is(button, a, input, select, textarea):focus-visible,
.person-confirm :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.person-page :is(h1, h2)[tabindex='-1']:focus {
  outline: none;
}
.person-page .button {
  gap: 8px;
}
.person-page .button.text {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-dark);
}
.person-page .button.text:hover {
  color: var(--navy);
}
.person-page .button.link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.person-page .button.danger {
  background: var(--paper);
  border-color: var(--pp-delete-line);
  color: var(--pp-delete);
}
.person-page .button.danger:hover {
  background: #faf0ed;
}
/* Back to people, the name block and the Role box. */
.person-page .person-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-bottom: -14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-dark);
}
.person-page .person-back:hover {
  color: var(--navy);
  text-decoration: underline;
}
.person-page .person-back .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.person-page h1 {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.person-page .person-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
}
.person-page .person-id {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 420px;
  min-width: 0;
}
.person-page .person-initials {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--navy);
  font-size: 18px;
  font-weight: 650;
}
.person-page .person-id-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.person-page .person-serves {
  color: var(--muted);
}
.person-page .person-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  font-size: 14px;
  color: var(--muted);
}
.person-page .person-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.person-page .person-email {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Owner, 8 Oct 2026 (mobile numbers): a person's number with Text and Call (view-admin-live.mjs
   mobileContact), on the person page and in Leaders-Hub, or "No mobile phone". */
.mobile-contact {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
/* A phone number never breaks at its hyphens. */
.mobile-number {
  white-space: nowrap;
}
.button.mobile-action {
  min-height: 44px;
  padding: 0 14px;
}
.mobile-none {
  color: var(--muted);
}
.invite-list .mobile-contact,
.invite-list .mobile-none {
  font-size: 14px;
}
.person-page .role-box {
  flex: 0 1 380px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1.5px solid var(--navy);
  border-radius: 12px;
  background: var(--paper);
}
.person-page .role-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.person-page .role-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.person-page .role-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
}
.person-page .role-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--navy);
}
.person-page .role-name .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.person-page .button.role-change {
  flex: none;
  padding: 0 16px;
  border-color: var(--navy);
  background: var(--paper);
  color: var(--navy);
}
.person-page .button.role-change:hover {
  background: var(--blue-soft);
}
.person-page :is(.role-sees, .role-own) {
  font-size: 13px;
  color: var(--muted);
}
/* The Change role panel: the same navy border as the Role box, on purpose. */
.person-page .role-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1.5px solid var(--navy);
  border-radius: 12px;
  background: var(--paper);
}
.person-page :is(.role-panel, .person-panel) h2 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.person-page .person-sub {
  margin-top: 2px;
  font-size: 14px;
  color: var(--muted);
}
.person-page .role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.person-page .role-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  cursor: pointer;
}
.person-page .role-card.is-picked {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.person-page .role-card.is-disabled {
  background: var(--rail);
  cursor: not-allowed;
}
.person-page .role-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.person-page .role-card input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}
.person-page .role-card-name {
  font-size: 16px;
  font-weight: 650;
}
.person-page .role-card-top .badge {
  margin-left: auto;
}
.person-page .role-card-text {
  font-size: 14px;
  color: var(--muted);
}
.person-page .role-card.is-disabled .role-card-name {
  color: var(--muted);
}
.person-page .places-line {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.person-page .places-line.is-full {
  color: var(--brass);
}
.person-page :is(.role-actions, .form-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.person-page .role-hint {
  font-size: 14px;
  color: var(--muted);
}
/* Panels, fields and Edit details. */
.person-page .person-panel {
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.person-page :is(.profile-field, .person-field) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
}
.person-page :is(input:not([type='radio']), select, textarea),
.person-confirm input {
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--pp-input-line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
}
.person-page .profile-field input,
.person-confirm .profile-field input {
  width: 100%;
}
.person-page input[readonly] {
  background: var(--rail);
  color: var(--muted);
}
.person-page .invite-link textarea {
  width: min(100%, 420px);
  padding: 10px 12px;
  background: var(--rail);
  color: var(--muted);
  line-height: 1.5;
  resize: vertical;
}
.person-page .details-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.person-page .edit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}
.person-page .edit-warning {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--brass-soft);
  color: var(--brass);
  font-size: 14px;
}
.person-page .edit-note {
  font-size: 13px;
  color: var(--muted);
}
/* Owner, 8 Oct 2026 (evening): what needs attention, first under the name, with the list's red
   dot. */
.person-page .person-attention {
  padding: 14px 20px 16px;
  border: 1px solid var(--pp-delete-line);
  border-radius: 10px;
  background: var(--paper);
}
.person-page .person-attention h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--ink);
}
.person-page .person-attention .hub-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pp-delete);
}
.person-page .person-attention ul {
  margin: 0;
  padding-left: 36px;
}
/* The status box: one state, its icon, heading, body and at most one main action. */
.person-page .status-box {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--pp-neutral-line);
  border-radius: 10px;
  background: var(--paper);
}
.person-page .status-box > .form-status {
  grid-column: 2;
  margin-top: 8px;
  font-size: 13px;
}
.person-page .status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
}
.person-page .status-icon .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.person-page .status-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.person-page .status-box h2 {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.person-page .status-body {
  margin-top: 4px;
}
.person-page
  .status-box:is([data-state='invited'], [data-state='onboarding'])
  .status-icon {
  background: var(--well);
  color: var(--muted);
}
.person-page .status-box[data-state='review'] {
  border-color: var(--pp-review-line);
  background: var(--blue-soft);
}
.person-page .status-box[data-state='review'] :is(h2, .status-icon, label) {
  color: var(--navy);
}
.person-page .status-box[data-state='approved'] {
  border-color: var(--pp-ok-line);
  background: var(--green-soft);
}
.person-page .status-box[data-state='approved'] :is(h2, .status-icon) {
  color: var(--green);
}
.person-page .status-box[data-state='renewal'] {
  border-color: var(--pp-due-line);
  background: var(--brass-soft);
}
.person-page .status-box[data-state='renewal'] :is(h2, .status-icon, label) {
  color: var(--brass);
}
.person-page .status-box[data-state='paused'] {
  background: var(--well);
}
.person-page .status-box[data-state='paused'] .status-main {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.person-page .status-box[data-state='paused'] .status-text {
  flex: 1 1 360px;
  min-width: 0;
}
.person-page :is(.status-actions, .status-fields) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}
.person-page .status-actions {
  align-items: center;
}
.person-page .status-hint {
  font-size: 13px;
  color: var(--muted);
}
.person-page .status-review {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.person-page .status-note {
  font-size: 13px;
  color: var(--muted);
}
.person-page .police-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--pp-ok-line);
}
.person-page .police-row-text {
  flex: 1 1 380px;
  min-width: 0;
}
.person-page .police-question {
  font-weight: 600;
}
.person-page .police-row-text p + p {
  margin-top: 2px;
  font-size: 14px;
  color: var(--pp-police-text);
}
.person-page .police-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  background: var(--paper);
}
.person-page .police-form-note {
  font-size: 13px;
  color: var(--muted);
}
.person-page .status-refresher {
  padding-top: 10px;
  border-top: 1px solid var(--pp-ok-line);
  font-size: 14px;
  color: var(--brass);
}
.person-page .status-box[data-state='renewal'] .status-refresher {
  border-top-color: var(--pp-due-line);
}
.person-page .status-own {
  font-size: 14px;
  color: var(--muted);
}
/* Onboarding and Training side by side, one column below about 840px of content. */
.person-page .person-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}
.person-page .person-columns > .person-panel {
  flex: 1 1 400px;
}
.person-page .panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 44px;
  margin-bottom: 8px;
}
.person-page .panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.person-page .badge {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
.person-page .step-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--rail);
}
.person-page :is(.step-row, .module-row) {
  padding: 10px 12px;
  border-bottom: 1px solid var(--pp-row-line);
}
.person-page :is(.step-row, .module-row):last-child {
  border-bottom: 0;
}
.person-page .step-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}
.person-page .step-name {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
  font-weight: 600;
}
.person-page .step-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}
.person-page .step-mark .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}
.person-page .step-mark.done {
  color: var(--green);
}
.person-page .step-mark.due {
  color: var(--brass);
}
.person-page .step-mark.due .icon {
  stroke-width: 2.2;
}
.person-page .step-mark.todo::before {
  content: '';
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--pp-todo);
  border-radius: 50%;
}
.person-page .step-mark.you::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
}
.person-page .step-status {
  font-size: 14px;
  color: var(--muted);
}
.person-page .step-status.is-due {
  font-weight: 600;
  color: var(--brass);
}
.person-page .step-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--blue-soft);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
}
.person-page .step-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  padding-left: 24px;
  font-size: 13px;
  color: var(--muted);
}
.person-page .step-sub .button.text {
  /* A 44px target that overlaps the row's padding instead of spacing the row out. */
  margin: -8px 0;
  font-size: 13px;
}
.person-page .policy-list {
  margin: 2px 0 2px 24px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.person-page .policy-read-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 5px 0;
  border-top: 1px dashed var(--line);
}
.person-page .policy-read {
  color: var(--muted);
}
.person-page .refresher-close {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 4px 0 2px 24px;
}
/* The refresher box at the foot of Training: hard to miss, for someone approved to serve. */
.person-page .refresher-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--pp-box-line);
  border-radius: 10px;
  background: var(--well);
}
.person-page .refresher-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.person-page .refresher-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--navy);
}
.person-page .refresher-icon .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.person-page .refresher-box h3 {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
}
.person-page .refresher-head p {
  margin-top: 3px;
  font-size: 14px;
  color: var(--muted);
}
.person-page .refresher-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-left: 48px;
}
.person-page .refresher-start .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}
.person-page .refresher-how-toggle {
  gap: 6px;
}
.person-page .refresher-how-toggle .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.person-page .refresher-how {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 0 48px;
  padding: 12px 14px 12px 30px;
  border-radius: 8px;
  background: var(--paper);
  font-size: 14px;
}
.person-page .refresher-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-left: 48px;
  padding: 14px;
  border-radius: 8px;
  background: var(--paper);
}
.person-page .refresher-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.person-page .refresher-fields .person-field:first-child {
  flex: 1 1 220px;
}
.person-page .refresher-fields select {
  width: 100%;
}
.person-page .refresher-note {
  font-size: 13px;
  color: var(--muted);
}
/* Private notes. */
.person-page [data-panel='notes'] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.person-page #admin-note {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  border: 1px solid var(--pp-input-line);
  font-size: 15px;
  resize: vertical;
}
.person-page .note-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.person-page .note-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--rail);
}
.person-page .note-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.person-page .note-meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
/* Sign-in and access, collapsed until Show. */
.person-page .access-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.person-page .access-title {
  flex: 1 1 auto;
  min-width: 0;
}
.person-page .access-head > .button {
  flex: none;
}
.person-page .access-summary {
  margin-top: 2px;
  font-size: 14px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.person-page .access-rows {
  margin-top: 12px;
}
.person-page .access-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.person-page .access-row:last-child {
  padding-bottom: 0;
}
.person-page .access-row-text {
  flex: 1 1 320px;
  min-width: 0;
}
.person-page .access-row-title {
  font-weight: 600;
}
.person-page .access-row-text p + p {
  margin-top: 2px;
  font-size: 14px;
  color: var(--muted);
}
/* The page's confirmations: the question, what happens, Cancel and the verb. */
.person-confirm.email-dialog {
  width: min(470px, calc(100% - 32px));
  padding: 22px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgb(35 40 48 / 25%);
}
.person-confirm h2 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.person-confirm p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.person-confirm p.muted {
  font-size: 14px;
  color: var(--muted);
}
.person-confirm .profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 12px;
  font-size: 12px;
  font-weight: 600;
}
.person-confirm .confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.person-confirm .button {
  padding: 0 16px;
  font-size: 13px;
}
.person-confirm .button.primary:disabled {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  opacity: 0.5;
}
.person-confirm .button.destructive {
  border-color: var(--pp-delete);
  background: var(--pp-delete);
  color: #fff;
}
.person-confirm .button.destructive:hover:not(:disabled) {
  background: var(--pp-delete-dark);
}
.person-confirm .button.destructive:disabled {
  border-color: var(--pp-delete);
  background: var(--pp-delete);
  color: #fff;
  opacity: 0.5;
}
.person-confirm .button.inline-link {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-dark);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* On a phone the fields keep 16px text, so focusing one doesn't zoom the page. */
@media (max-width: 760px) {
  .person-page :is(input:not([type='radio']), select, textarea),
  .person-confirm input,
  .person-page #admin-note {
    font-size: 16px;
  }
}
/* Under about 600px, the handoff's phone screens: the Role box full width under the name, no
   initials or status icon, full-width buttons in the status and refresher boxes, each step's
   status on its own line, and no indent in the refresher box. Nothing is wider than 320px less
   the gutters. */
@media (max-width: 600px) {
  .person-page {
    gap: 16px;
  }
  .person-page h1 {
    font-size: 28px;
  }
  .person-page :is(.person-initials, .status-icon) {
    display: none;
  }
  .person-page .role-box {
    flex-basis: 100%;
    min-width: 0;
  }
  .person-page .status-box {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .person-page .status-box > .form-status {
    grid-column: 1;
  }
  .person-page .status-box[data-state='paused'] .status-text {
    flex-basis: 100%;
  }
  .person-page
    :is(
      .status-actions,
      .status-fields,
      .police-row,
      .refresher-actions,
      .refresher-close,
      .access-row
    )
    > .button:not(.text) {
    flex: 1 1 100%;
    width: 100%;
  }
  .person-page
    :is(.status-fields, .refresher-fields, .refresher-close)
    .person-field,
  .person-page .person-field :is(input, select) {
    flex: 1 1 100%;
    width: 100%;
  }
  .person-page .step-line {
    display: block;
  }
  .person-page .step-line > .step-status {
    display: block;
    margin-top: 2px;
    padding-left: 24px;
  }
  .person-page .panel-title {
    flex: 1;
    justify-content: space-between;
  }
  .person-page .refresher-actions {
    flex-direction: column;
    align-items: stretch;
    padding-left: 0;
  }
  .person-page .refresher-how-toggle {
    align-self: center;
    justify-content: center;
  }
  .person-page :is(.refresher-how, .refresher-form) {
    margin-left: 0;
  }
  .person-page .refresher-close {
    margin-left: 24px;
  }
  .person-page [data-panel='notes'] .button {
    width: 100%;
  }
}
/* Owner addition (7 Oct 2026, SG-T-102 Step 3): the review box's required "References
   contacted" tick above the date and Approve to serve, its whole label a 44px target, with the
   small muted hint and its link to the Reference Check Form under the words. The page's field
   rule would size the checkbox like a text input, so it is set back here. */
.person-page .references-check {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.person-page .references-tick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.person-page .references-tick input[type='checkbox'] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.person-page .references-hint {
  margin-top: -6px;
  padding-left: 30px;
  font-size: 13px;
  color: var(--muted);
}
.person-page .references-hint a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------------------
   Home, the site frame and My account (owner handoff and decisions, 7 October 2026). One block,
   appended: it only adds selectors (the frame's existing ones are restyled here by source order).
   Existing colour tokens, plus the handoff's few extra hairlines. No shadows on cards (the name
   menu's is the one shadow); focus stays the app's 3px navy outline; touch targets 44px or more.
   --------------------------------------------------------------------------------------------------- */
:root {
  --hairline-soft: #ece7dc;
  --blue-line: #a8d2e3;
  --green-line: #bcdac6;
  --brass-line: #ddcca8;
  --control-line: #c3d0d4;
  --marker-line: #b5ad9d;
  --nav-ink: #3a434d;
  /* Georgia ships with every computer and phone: nothing is downloaded (no web fonts). */
  --serif: Georgia, 'Times New Roman', serif;
}

/* The frame: top bar (menu button, trail, Help, name chip), the phone's brand and back link, and the
   side menu's colours. */
.topbar {
  position: relative;
  min-height: 66px;
  padding: 10px clamp(16px, 3vw, 32px);
}
.menu-button {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex: none;
}
.topbar-brand {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.topbar-brand img {
  width: 28px;
  height: 28px;
  mix-blend-mode: multiply;
}
.crumbs ol {
  font-size: 14px;
}
.crumb-back {
  display: none;
}
.help-button {
  color: var(--navy);
  font-weight: 600;
}
@media (min-width: 761px) {
  .help-button {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 22px;
  }
}
#account-menu {
  position: relative;
}
.name-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}
.name-chip[aria-expanded='true'] {
  border-color: var(--navy);
}
.name-chip .avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: var(--navy);
  font-size: 12px;
}
.name-chip-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.name-chip-copy strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.name-chip-copy small {
  font-size: 11px;
  color: var(--muted);
}
.name-chip > .icon {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.name-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 280px;
  padding: 8px;
  /* Not the top bar's small muted type. */
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(35, 40, 48, 0.16);
}
.name-menu[hidden] {
  display: none;
}
.name-menu-head {
  padding: 10px 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline-soft);
}
.name-menu-name {
  margin: 0;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.name-menu-email {
  margin: 1px 0 8px;
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--blue-soft);
  color: var(--navy);
  font-size: 12px;
  font-weight: 650;
}
.role-pill .icon {
  width: 14px;
  height: 14px;
}
.name-menu-items {
  display: flex;
  flex-direction: column;
}
.name-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}
.name-menu-item:hover,
.name-menu-item:focus-visible {
  background: var(--rail);
}
.name-menu-item:focus-visible {
  outline-offset: -3px;
}
.name-menu-item .icon {
  width: 18px;
  height: 18px;
}
.name-menu-rule {
  height: 1px;
  margin: 6px 4px;
  background: var(--hairline-soft);
}
.nav-link {
  color: var(--nav-ink);
}
.nav-link.active {
  color: var(--navy);
}

/* Home. */
main.home-main {
  max-width: 1120px;
}
.home {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.home h1,
.home h2,
.home p,
.home figure,
.home blockquote {
  margin: 0;
}
.home-welcome {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
/* One crop at every stage (owner, 7 Oct 2026 after Deploy 2: the shorter return-visit crop cut off
   a child's face). */
.home-photo {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center 30%;
}
/* The welcome body is a query container, so the letter can fold exactly where its two columns
   stack (see the @container rule after .home-side). */
.home-welcome-body {
  container: home-welcome / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 36px;
  padding: clamp(20px, 3vw, 32px);
}
.home-greeting {
  flex: 999 1 420px;
  max-width: 660px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-eyebrow {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}
/* Owner, 8 Oct 2026 evening: the welcome section in the site's own sizes. The title matches My
   onboarding's (34px, 28px on phones), the line under it the onboarding now-line (17px), and the
   letter or note the body copy (15px). */
.home-greeting h1 {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--navy);
}
.home-line {
  font-size: 17px;
  line-height: 1.6;
}
.home-verse {
  margin-top: 2px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--navy);
}
.home-verse span {
  font-family: var(--font);
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
/* The letter, or from approval the SafeGuard team's note, is in full at every stage while it sits
   beside the next step (owner, 7 Oct 2026 after Deploy 2): no toggle, and no verse line above it,
   since the verse is in both. Wherever the two columns stack, after a first visit (.home-fold) the
   @container rule after .home-side and the phone block show the toggle; the letter or note starts
   open (.is-open; owner, 8 Oct 2026 after Deploy 3), and once the toggle hides it they fold it and
   show the verse line in its place. */
.home-fold > .home-verse {
  display: none;
}
.home-letter-toggle {
  align-self: flex-start;
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-dark);
  font-size: 15px;
  font-weight: 600;
}
.home-letter-toggle .icon {
  width: 18px;
  height: 18px;
}
.home-letter-toggle span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-letter {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  line-height: 1.6;
}
.home-letter-lead {
  font-size: 18px;
  font-weight: 650;
  color: var(--navy);
}
.home-quote {
  margin: 4px 0;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--blue-soft);
}
.home-quote p {
  font-size: 15px;
}
.home .home-quote blockquote {
  margin: 8px 0 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.38;
  color: var(--navy);
}
.home-quote cite {
  font-style: normal;
  font-weight: 650;
}
.home-letter-help {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-dark);
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-letter-close {
  font-weight: 650;
}
.home-letter-sign {
  font-size: 14px;
  color: var(--muted);
}
.home-side {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-side .finished-thanks {
  margin: 0;
}
/* Wherever the two columns stack, a returning visit's letter or note can fold as on a phone
   (owner, 8 Oct 2026: "keep the Next step card near the top"), on a tablet or a narrow window
   too: it starts open, with the toggle to hide it (owner, 8 Oct 2026 after Deploy 3). They stack
   exactly when the welcome body's content box (the query's width, inside its padding) is
   narrower than .home-greeting's 420px basis, the 36px column gap and .home-side's 300px basis:
   756px, whatever the viewport or the side menu. Keep the three in step with this number. Side
   by side, it is in full. The phone block's own folding stays for browsers without container
   queries (on a phone the columns always stack). */
@container home-welcome (width < 756px) {
  .home-letter-toggle {
    display: inline-flex;
  }
  .home-fold:not(.is-open) > .home-letter {
    display: none;
  }
  .home-fold:not(.is-open) > .home-verse {
    display: block;
  }
}
.home-card-eyebrow {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.home-next {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--blue-line);
  border-radius: 12px;
  background: var(--blue-soft);
}
.home-next h2 {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.home-next > .button,
.home-todo > .button {
  margin-top: 4px;
  width: 100%;
  min-height: 48px;
  font-size: 14px;
  gap: 8px;
}
.home-next > .button .icon,
.home-todo > .button .icon,
.home-team-open .icon {
  width: 16px;
  height: 16px;
}
.home-steps {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.home-steps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.home-steps-head h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}
.home-steps-head .badge {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.home-step-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-step {
  display: flex;
  gap: 12px;
  padding: 11px 0;
}
.home-step + .home-step {
  border-top: 1px solid var(--hairline-soft);
}
.home-step-marker {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 650;
}
.home-step-marker .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}
.home-step.is-done .home-step-marker,
.home-step.is-team .home-step-marker {
  background: var(--green-soft);
  color: var(--green);
}
.home-step.is-current .home-step-marker {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.home-step.is-todo .home-step-marker {
  border: 1.5px solid var(--marker-line);
  color: var(--muted);
}
.home-step-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 3px;
}
.home-step-name {
  align-self: flex-start;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.home-step-name:hover {
  text-decoration: underline;
}
.home-step.is-done .home-step-name {
  color: var(--nav-ink);
}
.home-step.is-current .home-step-name {
  font-weight: 700;
  color: var(--navy);
}
.home-step-line {
  font-size: 13px;
  color: var(--muted);
}
.home-steps-foot {
  margin-top: 8px !important;
  padding-top: 10px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 13px;
  color: var(--muted);
}
.home-waiting {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--green-line);
  border-radius: 12px;
  background: var(--green-soft);
}
.home-waiting .home-card-eyebrow,
.home-waiting h2 {
  color: var(--green);
}
.home-waiting h2 {
  font-size: 22px;
  font-weight: 650;
}
.home-waiting-more a,
.home-record-link,
.home-links a {
  color: var(--blue-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-ready {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.home-ready h2 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: 0;
}
.home-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rail);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.home-rows li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
}
.home-rows li + li {
  border-top: 1px solid var(--hairline-soft);
}
.home-rows .icon,
.account-record .record-row > .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  stroke-width: 2.4;
}
.home-rows .is-ok .icon,
.account-record .is-ok .record-row > .icon {
  color: var(--green);
}
.home-rows .is-due .icon,
.account-record .is-due .record-row > .icon {
  color: var(--brass);
}
.home-row-copy,
.record-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.home-row-copy strong,
.record-copy strong {
  font-weight: 600;
}
.home-row-detail {
  font-size: 14px;
  color: var(--muted);
}
.home-rows .is-due .home-row-detail {
  color: var(--brass);
}
.home-record-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 14px;
}
.home-todo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--brass-line);
  border-radius: 10px;
  background: var(--brass-soft);
}
.home-todo .home-card-eyebrow {
  color: var(--brass);
}
.home-todo-title {
  font-size: 17px;
  font-weight: 650;
}
.home-todo p:not(.home-card-eyebrow, .home-todo-title) {
  font-size: 14px;
}
.home-todo > .button {
  min-height: 46px;
}
.home-team {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--navy);
  border-radius: 12px;
  background: var(--paper);
}
.home-team-copy {
  min-width: 0;
}
.home-team h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}
.home-team-line {
  margin-top: 2px !important;
  color: var(--muted);
}
.home-team-line strong {
  color: var(--ink);
}
.button.home-team-open {
  min-height: 44px;
  padding: 0 16px;
  gap: 8px;
  border-color: var(--navy);
  color: var(--navy);
}
.home-card-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--navy);
}
.home-card-icon .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}
.home-concern .home-card-icon {
  background: var(--brass-soft);
  color: var(--brass);
}
.home-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.home-card {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.home-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-card h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}
.home-card-body > p {
  font-size: 15px;
}
.home-card-body > p a {
  color: var(--blue-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* A phone number never breaks at its hyphens. */
.home-card-body > p a[href^='tel:'] {
  white-space: nowrap;
}
/* "Put SafeGuard Hub on your home screen" (owner, 8 Oct 2026): on Home, phones only. A Home card
   like "Got a question?"; the phone block below shows it, and everywhere else it is display: none,
   so a computer or a tablet neither shows it nor reads it out. It sits in Home's column, so it
   keeps its own height (the cards' flex basis is for the side-by-side pair). */
.home-card.home-install {
  display: none;
  flex: none;
}
/* "Add your mobile number" (owner, 8 Oct 2026): every role, phones and computers, in Home's
   column under the welcome card, so it keeps its own height as the home-screen card does. */
.home-card.home-mobile {
  flex: none;
}
.home-mobile-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-top: 4px;
}
.home-mobile-form .profile-field {
  flex: 1 1 220px;
  max-width: 320px;
}
.home-mobile-actions,
.account-mobile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.home-mobile .form-status .form-success {
  margin: 0;
  font-size: 15px;
}
.home-install-done {
  margin-top: 4px;
}
.home-install-done .button {
  min-height: 44px;
}
.home-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.home-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}
.home-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 4px;
}
.home-ask-email {
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.home-kit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-kit-head h2 {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0;
}
.home-kit-head p {
  margin-top: 2px !important;
  font-size: 14px;
  color: var(--muted);
}
.home-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.home-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
}
.home-tile:hover {
  border-color: var(--blue);
}
.home-tile-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--well);
  color: var(--navy);
}
.home-tile-icon .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}
.home-tile-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 17px;
  font-weight: 650;
  color: var(--navy);
}
.home-tile-title .icon {
  width: 16px;
  height: 16px;
}
.home-tile-line {
  font-size: 14px;
  color: var(--muted);
}

/* My account. */
.account-page {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.account-page h1,
.account-page h2,
.account-page p {
  margin: 0;
}
.account-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.account-avatar {
  flex: none;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--navy);
  font-size: 20px;
  font-weight: 650;
}
.account-header h1 {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.account-header p {
  margin-top: 4px !important;
  color: var(--muted);
}
.account-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.account-card h2 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: 0;
}
.account-rows {
  margin: 6px 0 0;
}
.account-rows > div {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  padding: 10px 0;
}
.account-rows > div + div {
  border-top: 1px solid var(--hairline-soft);
}
.account-rows dt {
  flex: 0 0 110px;
  color: var(--muted);
}
.account-rows dd {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}
.account-role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  color: var(--navy);
}
.account-role .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
.account-sees,
.account-intro,
.account-note,
.account-foot p,
.account-signout p {
  font-size: 14px;
  color: var(--muted);
}
.account-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.account-foot p {
  flex: 1 1 340px;
  min-width: 0;
}
.account-card .profile-form {
  margin-top: 14px;
}
/* Mobile number (owner, 8 Oct 2026): the field, "I don’t have a mobile" and Save. */
.account-mobile-form {
  display: grid;
  gap: 12px;
  max-width: 360px;
}
.account-no-mobile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
}
.account-no-mobile input {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  accent-color: var(--blue);
}
.account-intro {
  margin: 2px 0 8px !important;
}
.account-methods {
  margin: 0;
  padding: 0;
  list-style: none;
}
.account-methods li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline-soft);
}
.account-method-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--well);
  color: var(--navy);
}
.account-method-icon .icon {
  width: 20px;
  height: 20px;
}
.account-letter {
  font-size: 18px;
  font-weight: 700;
}
.account-method-copy {
  flex: 1 1 280px;
  min-width: 0;
}
.account-method-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.account-method-name strong {
  font-weight: 650;
}
.account-method-copy p + p {
  margin-top: 2px !important;
  font-size: 14px;
  color: var(--muted);
}
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 650;
}
.pill.is-on {
  background: var(--green-soft);
  color: var(--green);
}
.pill.is-off {
  background: var(--well);
  color: var(--muted);
}
.pill.is-info {
  background: var(--blue-soft);
  color: var(--navy);
}
.account-methods .button.text {
  min-height: 44px;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.account-record {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  background: var(--rail);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.account-record > li {
  padding: 11px 14px;
}
.account-record > li + li {
  border-top: 1px solid var(--hairline-soft);
}
.record-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
.record-copy {
  flex: 1 1 220px;
}
.record-row > .icon {
  align-self: flex-start;
}
.record-detail {
  font-size: 14px;
  color: var(--muted);
}
.record-toggle {
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.record-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.record-items {
  margin: 8px 0 2px 28px;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.record-items[hidden] {
  display: none;
}
.record-items li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
}
.record-items li > :last-child {
  color: var(--muted);
}
.record-items a {
  color: var(--ink);
}
.account-note {
  margin-top: 12px !important;
  font-size: 13px;
}
.account-signout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.account-signout > div {
  flex: 1 1 380px;
  min-width: 0;
}
.account-signout p {
  margin-top: 2px !important;
}

/* Phones (the app's one phone width, decision F13): the top bar is the menu button, the brand,
   Help and the initials; the trail gives way to a back link; Home's photo runs edge to edge. */
@media (max-width: 760px) {
  .topbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 0;
    padding: 6px 12px;
    background: var(--rail);
  }
  .location {
    flex: 1 1 auto;
    align-self: center;
    width: auto;
    min-width: 0;
    gap: 8px;
  }
  .topbar-brand {
    display: inline-flex;
    min-width: 0;
  }
  .topbar #breadcrumb {
    display: none;
  }
  .crumb-back:not([hidden]) {
    display: block;
    padding: 4px 16px 0;
  }
  .crumb-back a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    color: var(--blue-dark);
    font-size: 15px;
    font-weight: 600;
  }
  .crumb-back .icon {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
  }
  .header-actions {
    flex: none;
  }
  .help-button {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 20px;
  }
  .help-button .icon {
    display: none;
  }
  .name-chip {
    height: 44px;
    padding: 4px;
    border-color: transparent;
    background: transparent;
  }
  .name-chip-copy,
  .name-chip > .icon {
    display: none;
  }
  #account-menu {
    position: static;
  }
  .name-menu {
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    border-radius: 0 0 14px 14px;
  }
  main.home-main {
    padding: 0 16px 40px;
  }
  .home {
    gap: 20px;
  }
  .home-welcome {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .home-photo {
    width: calc(100% + 32px);
    max-width: none;
    margin: 0 -16px;
    height: 250px;
  }
  .home-welcome-body {
    padding: 20px 0 0;
    gap: 20px;
  }
  .home-greeting {
    gap: 12px;
  }
  .home-eyebrow {
    font-size: 12px;
  }
  .home-greeting h1 {
    font-size: 28px;
    line-height: 1.12;
  }
  .home-letter {
    gap: 13px;
    font-size: 15px;
  }
  .home-line {
    font-size: 16px;
  }
  .home-letter-lead {
    font-size: 17px;
  }
  /* After a first visit the letter or note starts open, with a toggle that folds it so the next
     step comes up near the top; while it is folded the verse line stands in for it (approved
     stages only). The @container rule after .home-side does the same wherever the columns stack;
     this is its fallback on phones for browsers without container queries. */
  .home-letter-toggle {
    display: inline-flex;
  }
  .home-fold:not(.is-open) > .home-letter {
    display: none;
  }
  .home-fold:not(.is-open) > .home-verse {
    display: block;
  }
  .home-quote {
    padding: 18px;
  }
  .home-quote p {
    font-size: 15px;
  }
  .home .home-quote blockquote {
    font-size: 19px;
  }
  .home-next {
    padding: 16px;
  }
  .home-next h2 {
    font-size: 23px;
  }
  .home-next > .button {
    min-height: 50px;
    font-size: 15px;
  }
  .home-steps,
  .home-ready,
  .home-card {
    padding: 16px;
  }
  .home-team {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .home-team-open {
    grid-column: 1 / -1;
    width: 100%;
  }
  /* The icon sits beside the heading; the card's text uses the full width under them. */
  .home-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
  }
  .home-card-icon {
    width: 40px;
    height: 40px;
  }
  .home-card-body {
    display: contents;
  }
  .home-card-body > * {
    grid-column: 1 / -1;
  }
  .home-card-body > h2 {
    grid-column: 2;
  }
  .home-links {
    flex-direction: column;
    align-items: flex-start;
  }
  .record-copy {
    flex-basis: 140px;
  }
  .home-ask .button {
    width: 100%;
  }
  .home-card.home-install {
    display: grid;
  }
  .home-install-done .button,
  .home-mobile-actions .button,
  .account-mobile-actions .button {
    width: 100%;
  }
  .home-mobile-form .profile-field {
    max-width: none;
  }
  /* Its own row, so Save and "I don’t have a mobile" are as wide as the field above them. */
  .home-mobile-actions {
    flex: 1 1 100%;
  }
  .home-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .home-tile {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 2px 14px;
    align-items: center;
    padding: 16px;
  }
  .home-tile-icon {
    grid-row: 1 / 3;
  }
  .home-tile-title .icon {
    display: none;
  }
  .account-page {
    gap: 16px;
  }
  .account-header h1 {
    font-size: 28px;
  }
  .account-header {
    align-items: flex-start;
  }
  .account-card {
    padding: 16px;
  }
  .account-rows dt {
    flex-basis: 100%;
    font-size: 14px;
  }
  .account-foot .button,
  .account-methods .button.secondary,
  .account-signout .button {
    width: 100%;
  }
  .account-methods li {
    align-items: flex-start;
  }
  .account-method-icon {
    display: none;
  }
  .account-method-copy {
    flex-basis: 100%;
  }
}
@media (max-width: 359px) {
  /* At 320px the bar keeps the logo, Help and the initials; the name is read from the logo. */
  .topbar-brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media print {
  .home-photo,
  .home-install,
  .name-menu,
  .crumb-back {
    display: none !important;
  }
}

/* Admin-Hub, the administrators' front page (#admin), redesigned to the owner's Admin-Hub handoff
   of 7 Oct 2026 with the owner's settled decisions of the same day. Everything is scoped to
   .admin-hub (and .person-confirm .hub-confirm-places, a line in the person page's confirmation,
   which modal() appends outside the page), so the demo's Admin-Hub, the person page and the
   older rules they use are untouched. Values are the handoff's; the shared tokens are used where
   they match, and the handoff's other colours are custom properties here. Light mode only. The
   phone layout starts at 720px (owner decisions); states are modifier classes, never inline
   styles. */
.admin-hub {
  --hub-field-line: #918a7c;
  --hub-error: #9a392b;
  --hub-error-soft: #f6e6e2;
  --hub-grey-ink: #3a434d;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 15px;
  line-height: 1.45;
}
.admin-hub [hidden] {
  display: none !important;
}
.admin-hub :is(h1, h2, h3, p, ul, ol, pre) {
  margin: 0;
}
.admin-hub :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.admin-hub .hub-body,
.admin-hub .hub-panels,
.admin-hub .hub-people {
  display: flex;
  flex-direction: column;
}
.admin-hub .hub-body {
  gap: 20px;
}
.admin-hub .hub-panels:not(:has(> :not([hidden]))) {
  display: none;
}

/* Buttons: 44px, 9px radius, 13px/600; disabled ones keep their look at 55%. */
.admin-hub .button {
  min-height: 44px;
  padding: 0 16px;
  gap: 8px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.admin-hub .button .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.admin-hub .button.secondary {
  border-color: var(--control-line);
}
.admin-hub .button.text {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--blue-dark);
}
.admin-hub .button.text:hover {
  color: var(--navy);
}
.admin-hub .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.admin-hub .button.primary:disabled {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.admin-hub .button.secondary:disabled {
  border-color: var(--control-line);
  background: var(--paper);
  color: var(--blue-dark);
}

/* Fields: a visible 12px label over a 44px field with a 3:1 border. */
.admin-hub :is(.profile-field, .hub-field, .hub-search) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.admin-hub :is(.hub-field, .hub-search) > label {
  font-size: 12px;
  font-weight: 600;
}
.admin-hub :is(input:not([type='radio']), select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--hub-field-line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
}
.admin-hub .hub-field select {
  padding: 0 10px;
}
.admin-hub textarea {
  display: block;
  padding: 10px 12px;
  resize: vertical;
}
/* The pasted list keeps its id (the older #bulk-people rule names it), so it is restated here. */
.admin-hub #bulk-people {
  min-height: 160px;
  border-color: var(--hub-field-line);
  font-size: 15px;
  font-weight: 400;
}

/* §1 The page header: the title, the count line and the two add buttons. */
.admin-hub .hub-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
}
.admin-hub .hub-title {
  min-width: 0;
}
.admin-hub h1 {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.admin-hub .hub-count {
  margin-top: 6px;
  color: var(--muted);
}
.admin-hub .hub-add-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-hub .hub-add-toggle {
  padding: 0 18px;
}
.admin-hub .hub-add-toggle.secondary {
  padding: 0 16px;
}
.admin-hub .hub-add-toggle .icon {
  stroke-width: 2.4;
}

/* §7 The add panels, under the header: white, a 1.5px navy border, 12px radius. */
.admin-hub .hub-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
  border: 1.5px solid var(--navy);
  border-radius: 12px;
  background: var(--paper);
}
.admin-hub #hub-bulk-panel {
  gap: 14px;
}
.admin-hub .hub-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.admin-hub .hub-panel-head h2 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.admin-hub .hub-panel-head p {
  margin-top: 2px;
  font-size: 14px;
  color: var(--muted);
}
.admin-hub .hub-close {
  flex: none;
  padding: 0 4px;
}
.admin-hub .hub-add-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-hub .hub-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.admin-hub .hub-roles {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.admin-hub .hub-roles legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
}
.admin-hub .hub-role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.admin-hub .hub-role-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  cursor: pointer;
}
.admin-hub .hub-role-card.is-picked {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.admin-hub .hub-role-card.is-disabled {
  background: var(--rail);
  opacity: 0.75;
  cursor: not-allowed;
}
.admin-hub .hub-role-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-hub .hub-role-top input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}
.admin-hub .hub-role-name {
  font-size: 16px;
  font-weight: 650;
}
.admin-hub .hub-role-text {
  font-size: 14px;
  color: var(--muted);
}
.admin-hub .hub-role-places {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.admin-hub .hub-role-places.is-full {
  color: var(--brass);
}
.admin-hub .hub-form-error {
  font-size: 14px;
  font-weight: 600;
  color: var(--hub-error);
}
.admin-hub .hub-form-error:empty {
  display: none;
}
.admin-hub .hub-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.admin-hub .hub-actions .button.primary {
  padding: 0 20px;
}
/* A result at the top of a panel: a green box, its title in 650, the email line in its colour. */
.admin-hub .hub-result-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--green-line);
  border-radius: 10px;
  background: var(--green-soft);
}
.admin-hub .hub-result-box:focus {
  outline: none;
}
.admin-hub .hub-result-title {
  font-weight: 650;
  color: var(--green);
}
.admin-hub .hub-result-mail {
  font-size: 14px;
}
.admin-hub .hub-result-mail.is-sent {
  color: var(--green);
}
.admin-hub .hub-result-mail.is-off {
  color: var(--brass);
}
.admin-hub .hub-result-mail.is-failed {
  color: var(--hub-error);
}
.admin-hub .hub-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
.admin-hub .hub-result-actions .button {
  padding: 0 14px;
}
.admin-hub .hub-result-actions .invite-link:empty {
  display: none;
}
/* Release review SW-1: the invite message's box keeps its 420px cap here too (Admin-Hub's fields
   are otherwise the row's full width). */
.admin-hub .hub-result-actions .invite-link textarea {
  width: min(100%, 420px);
}
.admin-hub .hub-open {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.admin-hub .hub-open:hover {
  color: var(--navy);
}
/* Add several people: the how-to toggle and steps, the checked list and the progress bar. */
.admin-hub .hub-howto-toggle {
  align-self: flex-start;
  gap: 6px;
}
.admin-hub .hub-howto-toggle .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.admin-hub .hub-howto-toggle span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.admin-hub .hub-howto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--rail);
  font-size: 14px;
}
.admin-hub .hub-howto ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
}
.admin-hub .hub-howto pre {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--well);
  font-size: 13px;
  white-space: pre-wrap;
}
.admin-hub .hub-bulk-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-hub .hub-bulk-preview:empty {
  display: none;
}
.admin-hub .hub-bulk-table-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.admin-hub .hub-bulk-table {
  table-layout: fixed;
  font-size: 14px;
}
/* The prototype's tracks, 1.2fr / 1.6fr / 1fr: Email widest, Status the rest. Owner, 17 Oct
   2026: a Mobile column after Email, as wide as Status (1.2 / 1.6 / 1 / 1). */
.admin-hub .hub-bulk-table th:nth-child(1) {
  width: 25%;
}
.admin-hub .hub-bulk-table th:nth-child(2) {
  width: 33.3%;
}
.admin-hub .hub-bulk-table th:nth-child(3) {
  width: 20.8%;
}
.admin-hub .hub-bulk-table :is(th, td) {
  padding: 10px 14px;
  border-bottom: 0;
  overflow-wrap: anywhere;
}
.admin-hub .hub-bulk-table th {
  padding-top: 9px;
  padding-bottom: 9px;
  background: var(--rail);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--muted);
}
.admin-hub .hub-bulk-table td {
  border-top: 1px solid var(--hairline-soft);
  color: var(--ink);
}
.admin-hub .hub-bulk-table tr:not([data-status='ready']) td {
  color: var(--muted);
}
.admin-hub .hub-bulk-table .hub-bulk-word {
  font-weight: 600;
}
.admin-hub .hub-bulk-table tr:not([data-status='ready']) .hub-bulk-word {
  color: var(--hub-error);
}
.admin-hub .hub-bulk-table tr[data-status='ready'] .hub-bulk-word {
  color: var(--green);
}
/* A number on the line that isn't kept: said under the cell, in brass, not as an error (the row
   is still added). No number: a muted dash. */
.admin-hub .hub-bulk-table .hub-bulk-none {
  color: var(--muted);
}
.admin-hub .hub-bulk-table .hub-bulk-note {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--brass);
}
.admin-hub .bulk-summary {
  font-size: 14px;
}
.admin-hub .hub-bulk-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-hub .hub-bulk-status:empty {
  display: none;
}
.admin-hub .hub-bulk-status.is-error {
  font-size: 14px;
  font-weight: 600;
  color: var(--hub-error);
}
.admin-hub .hub-adding {
  font-weight: 600;
  color: var(--navy);
}
.admin-hub .hub-progress {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--well);
}
.admin-hub .hub-progress::-webkit-progress-bar {
  border-radius: 4px;
  background: var(--well);
}
.admin-hub .hub-progress::-webkit-progress-value {
  border-radius: 0;
  background: var(--blue);
}
.admin-hub .hub-progress::-moz-progress-bar {
  background: var(--blue);
}
/* The Administrator's places in the person page's confirmation (Add a person). */
.person-confirm .hub-confirm-places {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

/* §2 People: the heading, the four tiles (buttons) and the line under them. */
.admin-hub .hub-people {
  gap: 14px;
}
.admin-hub .hub-people > h2 {
  margin-top: 4px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.admin-hub .hub-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.admin-hub .hub-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 72px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.admin-hub .hub-tile:hover {
  border-color: var(--blue);
}
.admin-hub .hub-tile.is-on {
  padding: 9px 13px;
  border: 2px solid var(--blue);
  background: var(--blue-soft);
  box-shadow: inset 0 -4px 0 var(--blue);
}
.admin-hub .hub-tile.is-on .hub-tile-name {
  color: var(--navy);
  font-weight: 700;
}
.admin-hub .hub-tile-number {
  font-size: 26px;
  font-weight: 650;
  line-height: 1.15;
}
.admin-hub .hub-tile.is-on .hub-tile-number {
  color: var(--navy);
}
.admin-hub .hub-tile.is-urgent .hub-tile-number {
  color: var(--brass);
}
.admin-hub .hub-tile-name {
  font-size: 14px;
  font-weight: 600;
}
.admin-hub .hub-tile-line {
  font-size: 12px;
  color: var(--muted);
}
.admin-hub .hub-view-line {
  margin-top: -2px;
  font-size: 14px;
  color: var(--muted);
}

/* §3 Search (with its magnifier) and the four filters; Filter and sort and Sort by are phone
   only. */
.admin-hub .hub-search-box {
  position: relative;
}
.admin-hub .hub-search-box .icon {
  position: absolute;
  top: 13px;
  left: 12px;
  width: 18px;
  height: 18px;
  stroke: var(--muted);
  stroke-width: 2;
  pointer-events: none;
}
.admin-hub .hub-search-box input {
  padding-left: 38px;
}
.admin-hub .hub-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.admin-hub .hub-filter-toggle,
.admin-hub .hub-sort-field {
  display: none;
}
.admin-hub .hub-showing-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  min-height: 24px;
  font-size: 14px;
  color: var(--muted);
}
/* Owner, 9 Oct 2026: while a view, a search or a filter narrows the list, the line above it is
   a brass notice with the filter mark, what narrows it and Show everyone. */
.admin-hub .hub-showing-row.is-narrowed {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px 12px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--brass-line);
  border-left: 5px solid var(--brass);
  border-radius: 10px;
  background: var(--brass-soft);
  color: var(--ink);
  font-size: 15px;
}
.admin-hub .hub-showing-row.is-narrowed .hub-showing {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.admin-hub .hub-showing-row > .icon {
  flex: none;
  width: 22px;
  height: 22px;
  stroke: var(--ink);
  stroke-width: 2.2;
}
.admin-hub .hub-showing:focus {
  outline: none;
}
.admin-hub .hub-showing:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.admin-hub .hub-everyone {
  flex: none;
  background: var(--paper);
}

/* §5 The invitation result line, once, just above the list. */
.admin-hub .hub-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 14px;
}
.admin-hub .hub-result strong {
  font-weight: 650;
}
.admin-hub .hub-result.is-sent {
  background: var(--green-soft);
  color: var(--green);
}
.admin-hub .hub-result.is-off {
  background: var(--brass-soft);
  color: var(--brass);
}
.admin-hub .hub-result.is-failed {
  background: var(--hub-error-soft);
  color: var(--hub-error);
}
.admin-hub .hub-result:is(.is-copied, .is-blocked) {
  background: var(--blue-soft);
  color: var(--navy);
}
.admin-hub .hub-result.is-blocked {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.admin-hub .hub-result.is-blocked label {
  font-size: 12px;
  font-weight: 600;
}
.admin-hub .hub-result.is-blocked textarea {
  border: 2px solid var(--blue);
  font-size: 14px;
  line-height: 1.5;
}

/* §4 The list: a white card. On desktop a real table, one row per person. */
.admin-hub .hub-list,
.admin-hub .hub-cards {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.admin-hub .hub-table-scroll {
  overflow-x: auto;
  border-radius: 10px;
}
/* Narrower than its columns (a small laptop with the side menu open), the card scrolls sideways
   rather than squeezing a row onto two lines, as in the handoff's prototype. Owner, 8 Oct 2026
   (evening): four columns (the red dot's, Name, Role, Onboarding), and for an administrator the
   invitation buttons' column. Owner, 16 Oct 2026: "Where they’d like to serve" after Onboarding,
   wider without the invitation column; Name takes what the fixed ones leave (about 220px at
   1440 for an administrator, room for a long name on one line). */
.admin-hub .hub-table {
  min-width: 820px;
  table-layout: fixed;
  font-size: 14px;
}
.admin-hub .hub-table.has-invite {
  min-width: 1040px;
}
.admin-hub .hub-table :is(th, td) {
  padding: 6px;
  border-bottom: 0;
  vertical-align: middle;
}
.admin-hub .hub-table :is(th, td):first-child {
  padding-left: 14px;
}
.admin-hub .hub-table :is(th, td):last-child {
  padding-right: 14px;
}
.admin-hub .hub-table th {
  /* 5px over the 36px heading button: room for its 3px focus outline at a 2px offset, which the
     card's sideways scroll would otherwise clip; the row stays 44px. */
  padding-top: 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
  background: var(--rail);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.admin-hub .hub-col-attention {
  width: 44px;
  text-align: center;
}
.admin-hub .hub-col-role {
  width: 150px;
}
/* Owner, 19 Oct 2026: 184px holds "Invitation emailed May 30" on one line; Where they'd like to
   serve gives up the 20px, so Name keeps its room. */
.admin-hub .hub-col-onboarding {
  width: 184px;
}
.admin-hub .hub-col-serve {
  width: 280px;
}
.admin-hub .hub-table.has-invite .hub-col-serve {
  width: 180px;
}
.admin-hub .hub-col-invite {
  width: 306px;
}
.admin-hub .hub-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.admin-hub .hub-sort.is-on {
  color: var(--navy);
}
.admin-hub .hub-sort-mark {
  font-size: 10px;
}
/* The red dot's heading: the dot itself, in the headings' grey (#59616b, about 6:1 on the
   heading row, so it reads as a control) until the list is sorted by it. It sits exactly over the
   rows' dots, centred like them, with its ▲ or ▼ beside it out of the flow (release review, 9 Oct
   2026). */
.admin-hub .hub-sort-dot {
  position: relative;
  justify-content: center;
  min-width: 24px;
}
.admin-hub .hub-sort-dot .hub-dot {
  background: var(--muted);
}
.admin-hub .hub-sort-dot.is-on .hub-dot {
  background: var(--hub-error);
}
.admin-hub .hub-sort-dot .hub-sort-mark {
  position: absolute;
  top: 50%;
  left: calc(50% + 8px);
  line-height: 1;
  transform: translateY(-50%);
}
/* Name's heading: the sort button, then First and Last, the name order in use in navy. */
.admin-hub .hub-name-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.admin-hub .hub-name-orders {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}
.admin-hub .hub-name-order {
  height: 20px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}
/* The name order in use: navy on pale blue while the list is sorted by name, and a quiet neutral
   chip while another column's sort is on (release review, 9 Oct 2026). */
.admin-hub .hub-name-order[aria-pressed='true'] {
  background: var(--well);
  color: var(--ink);
}
.admin-hub .hub-name-orders.is-on .hub-name-order[aria-pressed='true'] {
  background: var(--blue-soft);
  color: var(--navy);
}
/* The red dot: whoever needs attention, with the words read with it (never colour alone). */
.admin-hub .hub-attention {
  display: inline-flex;
  align-items: center;
}
.admin-hub .hub-dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hub-error);
}
.admin-hub .hub-cell-attention {
  text-align: center;
}
.admin-hub .hub-row {
  cursor: pointer;
}
.admin-hub .hub-row:hover {
  background: var(--rail);
}
.admin-hub .hub-table td {
  height: 52px;
  color: var(--hub-grey-ink);
}
.admin-hub .hub-table tbody tr + tr td {
  border-top: 1px solid var(--hairline-soft);
}
.admin-hub .hub-name-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
}
.admin-hub .hub-name {
  font-size: 15px;
  font-weight: 650;
  color: var(--blue-dark);
  overflow-wrap: anywhere;
}
.admin-hub a.hub-name:hover {
  color: var(--navy);
  text-decoration: underline;
}
.admin-hub .hub-you {
  font-size: 13px;
  color: var(--muted);
}
/* The person page's role badge: VOLUNTEER neutral, SAFEGUARD LEADER pale blue, ADMINISTRATOR
   navy, CHURCH LEADERSHIP brass (owner decision, 8 October 2026). */
.admin-hub .badge.hub-role {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
.admin-hub .badge.hub-role.is-volunteer {
  background: var(--well);
  color: var(--muted);
}
.admin-hub .badge.hub-role.is-leader {
  background: var(--blue-soft);
  color: var(--navy);
}
.admin-hub .badge.hub-role.is-admin {
  background: var(--navy);
  color: #fff;
}
.admin-hub .badge.hub-role.is-viewer {
  background: var(--brass-soft);
  color: var(--brass);
}
.admin-hub .hub-approved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--green);
}
.admin-hub .hub-approved .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.8;
}
.admin-hub .hub-table :is(.hub-approved, .hub-steps, .hub-review) {
  white-space: nowrap;
}
/* Owner, 19 Oct 2026: an invitation's words too, so the row stays one line. */
.admin-hub .hub-table :is(.hub-invite-state, .hub-not-invited) {
  white-space: nowrap;
}
.admin-hub .hub-invite-state {
  font-weight: 600;
  color: var(--brass);
}
/* Owner, 19 Oct 2026: "Not invited yet" plainly, in the error red's ink with no fill or icon. */
.admin-hub .hub-not-invited {
  font-weight: 600;
  color: var(--hub-error);
}
.admin-hub .hub-paused {
  color: var(--muted);
}
/* Where they'd like to serve (owner, 16 Oct 2026): in the table one program to a line, the
   dots between them left for screen readers, so a row with two programs stays its usual height;
   "Not chosen yet" in the muted grey. */
.admin-hub .hub-cell-serve {
  font-size: 13px;
  line-height: 1.35;
}
.admin-hub .hub-table .hub-serve-program {
  display: block;
}
.admin-hub .hub-table .hub-serve-dot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.admin-hub .hub-serve-none {
  color: var(--muted);
}
.admin-hub .hub-invite-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
/* In a desktop row the invitation buttons are 38px, so the row stays one line. */
.admin-hub .hub-table .hub-invite-button {
  min-width: 0;
  min-height: 38px;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}
.admin-hub .hub-empty-row td {
  height: auto;
  padding: 28px 14px;
}
.admin-hub .hub-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.admin-hub .hub-empty-good {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  color: var(--green);
}
.admin-hub .hub-empty-good .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.6;
}
.admin-hub .hub-empty-none {
  font-weight: 600;
  color: var(--ink);
}
.admin-hub .hub-empty .button {
  padding: 0 14px;
}
.admin-hub .hub-more {
  display: flex;
  justify-content: center;
}
.admin-hub .hub-more:empty {
  display: none;
}
.admin-hub .hub-more .button {
  padding: 0 18px;
}
/* §6 The phone list: one item per person, the top part one link. */
.admin-hub .hub-cards {
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-hub .hub-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}
.admin-hub .hub-card + .hub-card {
  border-top: 1px solid var(--hairline-soft);
}
.admin-hub .hub-card-empty {
  padding: 24px 12px;
}
.admin-hub .hub-card-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
}
.admin-hub .hub-card-link > .icon {
  width: 16px;
  height: 16px;
  stroke: var(--muted);
  stroke-width: 2.2;
}
.admin-hub .hub-card-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.admin-hub .hub-card .badge.hub-role {
  height: 20px;
  padding: 0 7px;
}
.admin-hub .hub-card-status {
  font-size: 13px;
  color: var(--muted);
}
.admin-hub .hub-card-status .hub-approved .icon {
  width: 13px;
  height: 13px;
}
.admin-hub .hub-card-serve {
  font-size: 13px;
  color: var(--hub-grey-ink);
}
.admin-hub .hub-card-invite {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.admin-hub .hub-card-invite .button {
  padding: 0 8px;
}

/* §8 Loading (three grey bars in a busy card) and the page that couldn't load. */
.admin-hub :is(.hub-loading, .hub-failed) {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.admin-hub .hub-loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-hub .hub-loading p {
  font-weight: 600;
  color: var(--muted);
}
.admin-hub .hub-bar {
  height: 12px;
  width: 60%;
  border-radius: 6px;
  background: var(--well);
}
.admin-hub .hub-bar + .hub-bar {
  width: 85%;
}
.admin-hub .hub-bar + .hub-bar + .hub-bar {
  width: 45%;
}
.admin-hub .hub-failed {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.admin-hub .hub-failed-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hub-error-soft);
  color: var(--hub-error);
}
.admin-hub .hub-failed-icon .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.admin-hub .hub-failed-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.admin-hub .hub-failed-text p {
  font-weight: 650;
}

/* §6 Phone, 720px and narrower: the add buttons side by side without icons, tiles 2 × 2,
   Filter and sort, the list of items, 16px text in fields and every button at least 44px. */
@media (max-width: 720px) {
  .admin-hub h1 {
    font-size: 28px;
  }
  .admin-hub .hub-add-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .admin-hub .hub-add-buttons .hub-add-toggle {
    justify-content: flex-start;
    padding: 0 14px;
  }
  .admin-hub .hub-add-toggle .icon {
    display: none;
  }
  .admin-hub .hub-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-hub .hub-showing-row.is-narrowed {
    flex-wrap: wrap;
  }
  .admin-hub .hub-showing-row.is-narrowed .hub-showing {
    flex-basis: calc(100% - 34px);
  }
  .admin-hub .hub-everyone {
    width: 100%;
  }
  .admin-hub .hub-filter-toggle {
    display: inline-flex;
    width: 100%;
  }
  .admin-hub .hub-filters:not(.is-open) {
    display: none;
  }
  /* Its own row, so "Where they’d like to serve" shows in full when chosen (owner, 16 Oct
     2026). */
  .admin-hub .hub-sort-field {
    display: flex;
    grid-column: 1 / -1;
  }
  .admin-hub :is(input:not([type='radio']), select, textarea),
  .admin-hub #bulk-people {
    font-size: 16px;
  }
  /* Owner, 17 Oct 2026: four columns on a phone, closer together, so the checked list fits the
     screen without a sideways scroll. */
  .admin-hub .hub-bulk-table {
    font-size: 13px;
  }
  .admin-hub .hub-bulk-table :is(th, td) {
    padding: 8px;
  }
  .admin-hub .hub-bulk-table th:nth-child(1) {
    width: 24%;
  }
  .admin-hub .hub-bulk-table th:nth-child(2) {
    width: 32%;
  }
  .admin-hub .hub-bulk-table th:nth-child(3) {
    width: 24%;
  }
  .admin-hub .hub-bulk-table .hub-bulk-note {
    font-size: 12px;
  }
}

/* Church Leadership (view only), owner decision of 8 October 2026: the one line at the top of
   Admin-Hub and of each person page that says the account can look but not change anything. */
:is(.admin-hub, .person-page) .view-only-line {
  max-width: 62ch;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--brass-line);
  border-radius: var(--radius);
  background: var(--brass-soft);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

/* === Onboarding redesign A: shared ticks === */
/* The tick that saves itself (handoff §4; public/ticks.mjs): a real checkbox in its own label,
   one feedback line under it. Brass while a saved form is still to send, green once done, a red
   border when a save failed or was refused. The spinner is shared by every "Saving…",
   "Loading…" and pressed button, and stops for reduced motion. */
.tick {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.tick.is-on {
  border-color: #bcdac6;
  background: var(--green-soft);
}
.tick.is-on.is-ready {
  border-color: #ddcca8;
  background: var(--brass-soft);
}
.tick.is-error {
  border-color: #9a392b;
}
.tick-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px 14px;
  cursor: pointer;
}
.tick-row input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.tick-row input[aria-disabled='true'] {
  cursor: progress;
  opacity: 0.7;
}
.tick-label {
  font-weight: 600;
  line-height: 1.4;
}
.tick-extra {
  font-weight: 400;
  color: var(--muted);
}
.tick-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.tick .tick-line {
  margin-top: -4px;
  padding: 0 14px 12px 48px;
}
.tick-line[hidden] {
  display: none;
}
.tick-line .icon {
  flex: none;
  width: 16px;
  height: 16px;
}
.tick-line.is-done {
  color: var(--green);
}
.tick-line.is-ready {
  color: var(--brass);
}
.tick-line.is-error {
  color: #9a392b;
}
.tick-line.is-saving,
.tick-line.is-meta {
  color: var(--muted);
  font-weight: 500;
}
.spinner {
  flex: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #c3d0d4;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: tick-spin 0.8s linear infinite;
}
.button.primary .spinner {
  border-color: rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
}
@keyframes tick-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}
@media (max-width: 760px) {
  .tick-row input {
    font-size: 16px;
  }
}
/* === end A === */

/* ----------------------------------------------------------------------
   Each part writes only between its own two markers (merge-safe gap).
   ---------------------------------------------------------------------- */

/* === Onboarding redesign B: the step page === */
/* My onboarding's step page (handoff §1–§6, §9, §10; public/view-onboarding.mjs). A 1080px
   page like Admin-Hub, the step list across it, and the step's header, content and actions in a
   760px column under it. One breakpoint at 760px. Widths are classes (.f0–.f5), never style
   attributes. The handoff's colours not among the shared tokens are custom properties here. */
.onb-page {
  --onb-done-line: #bcdac6;
  --onb-ready-line: #ddcca8;
  --onb-todo-ring: #b5ad9d;
  --onb-divider: #ece7dc;
  --onb-error: #9a392b;
  --onb-error-soft: #f6e6e2;
  --onb-blue-line: #a8d2e3;
  --onb-button-line: #c3d0d4;
  max-width: 1080px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.5;
}
.onb-page :is(h1, h2, h3, p, ol, ul, fieldset, legend) {
  margin: 0;
}
.onb-page :is(ol, ul) {
  padding: 0;
  list-style: none;
}
.onb-page .icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* The step list is the progress bar (§2). */
.onb-steps {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.onb-steps-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 12px;
  margin-bottom: 14px;
}
.onb-steps-name,
.onb-count {
  font-size: 14px;
  font-weight: 650;
  color: var(--navy);
}
.onb-count {
  color: var(--ink);
}
.onb-count.is-done {
  color: var(--green);
}
.onb-track {
  position: relative;
}
.onb-rail {
  position: absolute;
  left: 8.333%;
  right: 8.333%;
  top: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.onb-rail-fill {
  width: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--green);
}
.onb-rail-fill.f1 {
  width: 20%;
}
.onb-rail-fill.f2 {
  width: 40%;
}
.onb-rail-fill.f3 {
  width: 60%;
}
.onb-rail-fill.f4 {
  width: 80%;
}
.onb-rail-fill.f5 {
  width: 100%;
}
.onb-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.onb-list li {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.onb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 0 4px 2px;
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
}
.onb-step:hover .onb-step-title {
  text-decoration: underline;
}
.onb-circle,
.onb-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
}
.onb-circle {
  box-shadow: 0 0 0 4px var(--paper);
}
.onb-page :is(.onb-circle, .onb-mark) .icon {
  width: 16px;
  height: 16px;
}
:is(.onb-circle, .onb-mark).is-todo {
  background: var(--paper);
  border: 1.5px solid var(--onb-todo-ring);
  color: var(--muted);
}
:is(.onb-circle, .onb-mark).is-next {
  background: var(--blue);
  color: #fff;
}
:is(.onb-circle, .onb-mark).is-done {
  background: var(--green-soft);
  border: 1px solid var(--onb-done-line);
  color: var(--green);
}
.onb-circle:is(.is-ready, .is-due) {
  background: var(--brass-soft);
  border: 1px solid var(--onb-ready-line);
  color: var(--brass);
}
.onb-step[aria-current='step'] .onb-circle {
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 5px var(--blue);
}
.onb-step-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.onb-step[aria-current='step'] .onb-step-title {
  color: var(--navy);
  font-weight: 700;
}
.onb-step-status {
  margin-top: -4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--brass);
}
.onb-ready-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px !important;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--brass-soft);
  color: var(--brass);
  font-size: 14px;
}
.onb-ready-note .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.onb-ready-note a,
.onb-note a {
  padding: 12px 0;
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Loading and couldn't load (§9). */
.onb-loading-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--muted);
}
.onb-skeleton {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.onb-skeleton span {
  height: 28px;
  border-radius: 14px;
  background: var(--well);
}
.onb-skeleton-card {
  margin-top: 30px;
}
.onb-skeleton-line {
  display: block;
  height: 9px;
  margin-top: 11px;
  border-radius: 5px;
  background: var(--well);
}
.onb-skeleton-line.w90 {
  width: 90%;
}
.onb-skeleton-line.w75 {
  width: 75%;
}
.onb-skeleton-line.w60 {
  width: 60%;
}
.onb-skeleton-line.w40 {
  width: 40%;
}
.onb-failed {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.onb-failed > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.onb-failed p {
  font-weight: 650;
}
.onb-failed-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--onb-error-soft);
  color: var(--onb-error);
}

/* The step header (§3). */
.onb-column {
  max-width: 760px;
}
.onb-head {
  margin-top: 30px;
}
.onb-eyebrow {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
.onb-page .onb-h1 {
  margin-top: 4px;
  font-size: 34px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.onb-h1:focus {
  outline: none;
}
.onb-now {
  max-width: 640px;
  margin-top: 10px !important;
  font-size: 17px;
}
.onb-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

/* Cards, the green done card, notes and the privacy box. */
.onb-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.onb-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 12px;
}
.onb-card-title {
  padding: 0;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}
.onb-card-line {
  margin-top: 4px !important;
  font-size: 14px;
  color: var(--muted);
}
.onb-card-title + .onb-list-rows {
  margin-top: 10px;
}
.onb-page .button {
  font-size: 14px;
}
.onb-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--well);
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.onb-badge.is-done {
  background: var(--green-soft);
  color: var(--green);
}
.onb-done {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--onb-done-line);
  border-radius: 12px;
  background: var(--green-soft);
}
.onb-done-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}
.onb-done-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.onb-done-body h2 {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--green);
}
.onb-done-date {
  font-weight: 500;
}
.onb-done-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
}
.onb-done-warn {
  font-size: 13px;
  color: var(--muted);
}
.onb-reopen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.onb-text-button,
.onb-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.onb-arrow-link .icon {
  width: 16px;
  height: 16px;
}
.onb-text-button:hover,
.onb-arrow-link:hover {
  color: var(--navy);
}
.onb-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--onb-ready-line);
  border-radius: 10px;
  background: var(--brass-soft);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.onb-privacy .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--brass);
}
.onb-privacy.is-shared strong {
  font-weight: 650;
}
.onb-privacy.is-compact {
  padding: 8px 12px;
  font-size: 13px;
}
.onb-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.onb-or::before,
.onb-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.onb-alt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.onb-alt-title {
  font-size: 16px;
  font-weight: 650;
}
.onb-alt-line {
  font-size: 14px;
  color: var(--muted);
}
.onb-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--onb-blue-line);
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--ink);
}
.onb-info > .icon {
  color: var(--navy);
}
.onb-info > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.onb-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}
.onb-note .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--muted);
}

/* Buttons: the step's main ones are 48px; a locked one stays focusable and looks locked. */
.onb-page .button.onb-big {
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
  gap: 8px;
}
.onb-page .button.onb-locked,
.onb-page .button.onb-locked:hover {
  background: var(--well);
  border-color: var(--line);
  color: var(--muted);
  opacity: 1;
  cursor: not-allowed;
}
.onb-page .button.onb-locked .spinner {
  border-color: #c3d0d4;
  border-top-color: var(--blue);
}

/* Steps 1 and 3: three numbered rows joined by a 2px line (§6). */
.onb-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 14px;
  padding-bottom: 22px;
}
.onb-row:last-child {
  padding-bottom: 0;
}
.onb-row::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 34px;
  bottom: 6px;
  width: 2px;
  border-radius: 1px;
  background: var(--line);
}
.onb-row:last-child::before {
  display: none;
}
.onb-row.is-done::before {
  background: var(--onb-done-line);
}
.onb-row-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-top: 2px;
}
.onb-row-body > :is(.button, .onb-arrow-link) {
  align-self: flex-start;
}
.onb-row-title {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
}
.onb-row:is(.is-done, .is-todo) .onb-row-title {
  color: var(--muted);
}
.onb-row-hint {
  margin-top: -9px !important;
  font-size: 14px;
  color: var(--muted);
}
.onb-row-hint + .onb-row-hint {
  margin-top: -12px !important;
}

/* Step 3's renewal box (§6, approved by Chris) and the earlier sending under it. */
.onb-renewal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--onb-ready-line);
  border-radius: 12px;
  background: var(--brass-soft);
}
.onb-renewal h2 {
  font-size: 18px;
  font-weight: 650;
  color: var(--brass);
}
.onb-renewal .onb-privacy {
  background: var(--paper);
}
.onb-earlier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
}
.onb-earlier .icon {
  width: 16px;
  height: 16px;
}

/* Where would you like to serve? (§4: saves itself, with no date). */
.onb-serving {
  min-width: 0;
  padding: 0;
  border: 0;
}
.onb-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin: 14px 0 0;
}
.onb-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-weight: 600;
  cursor: pointer;
}
.onb-chip input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--blue);
}
.onb-chip.is-on {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.onb-serving > .tick-line {
  margin-top: 12px;
}
/* Owner, 15 Oct 2026: Sunday Children's program's three areas, below the programs while it is
   ticked, set in from a rule on the left. */
.onb-serving-areas {
  margin: 14px 0 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--blue-soft);
}
.onb-areas-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.onb-serving-areas .onb-chips {
  margin-top: 10px;
}

/* Lists of modules, policies and steps. */
.onb-list-rows {
  border-top: 1px solid var(--onb-divider);
}
.onb-list-rows > li {
  border-bottom: 1px solid var(--onb-divider);
}
.onb-list-rows > li:last-child {
  border-bottom: 0;
}
.onb-module {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 2px;
  color: var(--ink);
  text-decoration: none;
}
.onb-module:hover .onb-module-title {
  text-decoration: underline;
}
.onb-module-title,
.onb-left-title {
  flex: 1 1 200px;
  min-width: 0;
  font-weight: 600;
  line-height: 1.35;
}
.onb-module-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.onb-module-status.is-done,
.onb-policy-read {
  color: var(--green);
}
.onb-module-status.is-ready {
  color: var(--brass);
}
.onb-chevron {
  display: flex;
  color: var(--muted);
}
.onb-page .onb-chevron .icon {
  width: 16px;
  height: 16px;
}
.onb-policy {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 2px;
}
.onb-policy-body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-width: 0;
}
.onb-policy-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.onb-policy-title {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
.onb-policy-read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}
.onb-page .onb-policy-read .icon {
  width: 16px;
  height: 16px;
}
.onb-sign-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 12px;
}
.onb-lock-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.onb-page .onb-lock-line .icon {
  width: 16px;
  height: 16px;
}
.onb-left,
.onb-done-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 56px;
  padding: 8px 2px;
}
.onb-left-status {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.onb-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.onb-way {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--rail);
}
.onb-way h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 650;
  color: var(--navy);
}
.onb-page .onb-way h3 .icon {
  width: 18px;
  height: 18px;
}
.onb-way p {
  font-size: 14px;
}
.onb-send-ticks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.onb-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  text-align: left;
}
.onb-toggle .icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 0.15s;
}
.onb-toggle[aria-expanded='true'] .icon {
  transform: rotate(90deg);
}
.onb-your-steps {
  margin-top: 10px;
}

/* The actions bar (§5): Back, the reason, Continue. */
.onb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 14px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.onb-actions .back-link {
  margin-right: auto;
}
.onb-reason {
  flex: 1 1 220px;
  max-width: 360px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
  text-align: right;
}
.onb-reason.is-error {
  color: var(--onb-error);
  font-weight: 600;
}
.onb-page .onb-reason .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* Phone: 760px and under (§10). The circles and count stay; titles and statuses are hidden
   visually but stay in each link's name. */
@media (max-width: 760px) {
  .onb-steps {
    padding: 14px 10px;
  }
  .onb-steps-head {
    padding: 0 4px;
  }
  .onb-step-title,
  .onb-step-status {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .onb-head {
    margin-top: 24px;
  }
  .onb-page .onb-h1 {
    font-size: 28px;
  }
  .onb-now {
    font-size: 16px;
  }
  .onb-card,
  .onb-done {
    padding: 16px;
  }
  .onb-row-body > .button.onb-big,
  .onb-info .button,
  .onb-renewal .button {
    width: 100%;
  }
  .onb-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .onb-actions .button {
    width: 100%;
  }
  .onb-actions .back-link {
    order: 3;
    margin-right: 0;
  }
  .onb-reason {
    order: 1;
    flex: none;
    max-width: none;
    justify-content: flex-start;
    text-align: left;
  }
  .onb-actions > .button:not(.back-link) {
    order: 2;
  }
  .onb-page :is(input, select, textarea) {
    font-size: 16px;
  }
}
/* === end B === */

/* ----------------------------------------------------------------------
   Each part writes only between its own two markers (merge-safe gap).
   ---------------------------------------------------------------------- */

/* === Onboarding redesign C: readers and dialogs === */
/* Every form, policy, module and the covenant on its own page (handoff §7): the back link, the
   eyebrow and title with the tools on the right, the sealed reader in a white card and the end bar
   under it. The owner, 8 October 2026 ("Whole page scrolls"): the reader is as tall as its
   document, so the whole page scrolls and the end bar comes after the document. Then the three
   dialogs as real modals (handoff §8). */
.rdr-page {
  max-width: 1080px;
  margin: 0 auto;
}
.rdr-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-dark);
  text-decoration: none;
}
.rdr-back:hover {
  color: var(--navy);
  text-decoration: underline;
}
.rdr-back .icon {
  width: 16px;
  height: 16px;
}
.rdr-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 2px 0 14px;
}
.rdr-head {
  flex: 1 1 300px;
  min-width: 0;
}
.rdr-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--blue);
}
.rdr-h1 {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--navy);
}
.rdr-h1:focus {
  outline: none;
}
.rdr-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rdr-tools .button {
  gap: 8px;
  padding: 0 18px;
  font-size: 14px;
}
.rdr-guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 820px;
  margin: 0 0 14px;
  font-size: 14px;
}
.rdr-guide p {
  margin: 0;
}
.rdr-s1 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.rdr-s1 .icon,
.rdr-warn .icon,
.rdr-note .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.rdr-s1 .icon {
  color: var(--navy);
}
.rdr-warn,
.rdr-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--brass-soft);
  color: var(--brass);
  font-size: 14px;
  font-weight: 600;
}
.rdr-warn a {
  padding: 12px 0;
  color: var(--blue-dark);
}
#reader-followup:empty {
  display: none;
}
#reader-followup {
  margin-bottom: 14px;
}
.rdr-doc {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
/* While a reader is open, the page keeps its own place when the frame's height changes (no
   browser scroll anchoring; reader-bridge.mjs fitFrame keeps focus below the frame in view
   itself), the same in every browser. */
html:has(.rdr-frame) {
  overflow-anchor: none;
}
/* The owner, 8 October 2026 ("Whole page scrolls"): the frame is as tall as its document, so it
   never scrolls on its own and the whole page does. Its height is the frame's height attribute,
   set from the reader's report (reader-bridge.mjs fitFrame), never a style attribute; no rule
   here may set a height once that attribute is there. Until the reader first reports, the card
   holds most of a screen. */
.rdr-frame .rdr-iframe {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--paper);
}
.rdr-frame .rdr-iframe:not([height]) {
  height: 80vh;
}
/* Until then the end bar under the frame is about to move, so it takes no clicks: a press can't
   land in the document as the frame grows under the pointer. The keyboard works as ever. If no
   height comes (a reader that can't report), it takes clicks after 10 seconds anyway. */
.rdr-doc:has(> .rdr-frame > .rdr-iframe:not([height])) > .rdr-end {
  animation: rdr-await-height 10s step-end;
}
@keyframes rdr-await-height {
  from,
  to {
    pointer-events: none;
  }
}
.rdr-frame .rdr-iframe:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: -3px;
}
/* Owner, 8 Oct 2026 (evening): "Opening…" over the white card until the document is on screen. */
.rdr-frame {
  position: relative;
}
.rdr-frame .rdr-opening {
  position: absolute;
  top: 0;
  left: 0;
  padding: 18px 22px;
  pointer-events: none;
}
.rdr-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--rail);
}
.rdr-end[hidden] {
  display: none;
}
.rdr-end .tick {
  flex: 1 1 320px;
}
.rdr-end .button {
  gap: 8px;
  padding: 0 22px;
  min-height: 48px;
  font-size: 15px;
}
.rdr-end .button[aria-disabled='true'] {
  opacity: 1;
  cursor: progress;
}
/* Locked while the document opens, as a locked onboarding button looks. */
.rdr-end .button[data-opening],
.rdr-end .button[data-opening]:hover {
  background: var(--well);
  border-color: var(--line);
  color: var(--muted);
}
.rdr-end-line {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.rdr-end-line.is-ready {
  color: var(--brass);
  font-weight: 600;
}
.rdr-end-done:focus {
  outline: none;
}
.rdr-note {
  flex-basis: 100%;
  margin: 0;
}
/* The three dialogs: Review your email, Leave this form? and Clear your answers?. */
.dlg {
  width: min(520px, calc(100% - 32px));
  padding: 22px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgb(35 40 48 / 25%);
}
.dlg::backdrop {
  background: rgb(35 40 48 / 45%);
}
.dlg .dlg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.dlg .dlg-title {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--navy);
}
.dlg .dlg-text,
.dlg.email-dialog p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.dlg.email-dialog .after-send {
  font-size: 14px;
  color: var(--muted);
}
.dlg .dlg-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.dlg .button {
  gap: 8px;
  padding: 0 18px;
  font-size: 14px;
}
.dlg .button.danger {
  border-color: #9a392b;
  background: #9a392b;
  color: #fff;
}
.dlg .button.danger:hover {
  background: #7f2f23;
}
.dlg.email-dialog dl {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  font-size: 14px;
}
.dlg.email-dialog dt,
.dlg.email-dialog dd {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline-soft);
}
.dlg.email-dialog dt {
  font-weight: 400;
  color: var(--muted);
}
.dlg.email-dialog pre {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--rail);
  font-size: 14px;
  line-height: 1.5;
}
.dlg.email-dialog > .button.primary {
  margin-top: 14px;
  min-height: 48px;
  font-size: 15px;
}
@media (max-width: 760px) {
  /* main.reader-main keeps 8px on phones; the page adds 8px for the 16px gutter (handoff §1). */
  .rdr-page {
    padding: 0 8px;
  }
  .rdr-h1 {
    font-size: 18px;
  }
  .rdr-tools {
    width: 100%;
  }
  .rdr-tools .button {
    flex: 1;
  }
  .rdr-end {
    padding: 14px 16px;
  }
  .rdr-end .button {
    width: 100%;
  }
  .rdr-end .tick {
    flex-basis: 100%;
  }
}
/* === end C === */

/* ----------------------------------------------------------------------
   Each part writes only between its own two markers (merge-safe gap).
   ---------------------------------------------------------------------- */

/* === Onboarding redesign D: Home, My account and Admin-Hub === */
/* My account: a record row's second line (the police row's "Renewal form sent · {date}"). */
.account-more {
  font-size: 14px;
  color: var(--green);
}
/* The person page's renewal box: the date the person ticked their renewal form as sent. */
.person-page .person-renewal-sent {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--pp-due-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}
.person-page .person-renewal-sent .icon {
  flex: none;
  width: 16px;
  height: 16px;
}
/* === end D === */

/* === Already approved at Bethany, stage 2 (owner, 8 Oct 2026) === */
/* Add a person and Add several people: "New to serving" or "Already approved at Bethany", in the
   role cards' style (their own classes, so the role cards are still the only role cards). */
.admin-hub .hub-serving-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.admin-hub .hub-serving-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  cursor: pointer;
}
.admin-hub .hub-serving-card.is-picked {
  border-color: var(--blue);
  background: var(--blue-soft);
}
/* Add a person: the police check date under "Already approved at Bethany", with its hint. */
.admin-hub .hub-before-date {
  max-width: 320px;
}
.admin-hub .hub-before-date[hidden] {
  display: none;
}
.admin-hub .hub-field-hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
/* The person page: "Mark as approved before the SafeGuard Hub" and "Add police check date". */
.person-page .status-before {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.person-page .police-row-add {
  justify-content: flex-start;
}
.person-page .step-covenant-check {
  padding-top: 6px;
}
.person-confirm .mark-before-field {
  margin-top: 12px;
}
/* Add several people, already approved: those already in SafeGuard weren't changed. */
.admin-hub .hub-result-unchanged {
  font-size: 14px;
  color: var(--brass);
}
/* The dialog sits outside the person page: its date hint is small and muted, as in Add a person. */
.person-confirm .mark-before-field .police-form-note {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}
/* My account: what is left to finish is a to-do, in the due colour. */
.account-record .is-due .account-more {
  color: var(--brass);
}
@media (max-width: 760px) {
  .person-page :is(.status-before, .police-row-add) > .button:not(.text) {
    flex: 1 1 100%;
    width: 100%;
  }
}
/* === end already approved, stage 2 === */

/* === Roles for many people at once; Church Leadership needs no police check (owner, 19 Oct 2026) === */
/* Admin-Hub's ticks, an administrator's only: a 40px column before the red dot's, the heading's
   tick for everyone shown, and on a phone a tick beside each person's link. Each tick sits in a
   label that fills its cell (44px on a phone), so a press near it ticks instead of opening the
   person. Name keeps its room at 1440 (about 214px, long names on one line): with the ticks the
   red dot's column is 32px, the invitation column 292px (its buttons 10px in from each side) and
   Where they'd like to serve 166px beside it (186px before the Onboarding column took 20px of it,
   owner, 19 Oct 2026); below that width the table scrolls in its card. */
.admin-hub .hub-col-select {
  width: 40px;
}
.admin-hub .hub-table :is(th.hub-col-select, td.hub-cell-select) {
  padding: 0 0 0 8px;
  text-align: center;
}
.admin-hub .hub-table.has-select .hub-col-attention {
  width: 32px;
}
.admin-hub
  .hub-table.has-select
  :is(th.hub-col-attention, td.hub-cell-attention) {
  padding-left: 0;
  padding-right: 0;
}
.admin-hub .hub-table.has-select.has-invite .hub-col-serve {
  width: 166px;
}
.admin-hub .hub-table.has-select .hub-col-invite {
  width: 292px;
}
.admin-hub .hub-table.has-select .hub-invite-button {
  padding: 0 10px;
}
/* (input.hub-tick: over the hub's text-field rule for every other input.) */
.admin-hub input.hub-tick {
  flex: none;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
  cursor: pointer;
  vertical-align: middle;
}
.admin-hub .hub-tick-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 40px;
  cursor: pointer;
}
.admin-hub .hub-card.has-select {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 2px;
  padding-left: 4px;
}
.admin-hub .hub-card.has-select > .hub-card-invite {
  grid-column: 2;
}
.admin-hub .hub-card-select {
  display: flex;
  justify-content: center;
}
.admin-hub .hub-card-select .hub-tick-target {
  min-width: 44px;
  min-height: 44px;
}
/* The selection bar: on a phone the tick for everyone shown; once anyone is ticked, how many with
   Change role and Clear, on pale blue. */
.admin-hub .hub-select-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}
.admin-hub .hub-select-bar.is-on {
  padding: 6px 12px 6px 14px;
  border: 1px solid #b9dbe8;
  border-left: 5px solid var(--blue);
  border-radius: 10px;
  background: var(--blue-soft);
}
.admin-hub .hub-select-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.admin-hub .hub-select-count {
  font-weight: 650;
  color: var(--navy);
}
.admin-hub .hub-select-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-left: auto;
}
.admin-hub .hub-select-change {
  padding: 0 18px;
}
/* Change role for the people ticked: three role cards, each a button that opens the one
   confirmation; then the progress bar and the result (green, or brass with the names not
   changed and why). */
.admin-hub .hub-roles-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.admin-hub .hub-roles-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.admin-hub .hub-roles-card:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.admin-hub .hub-roles-result.is-error {
  border-color: var(--brass-line);
  background: var(--brass-soft);
}
.admin-hub .hub-roles-result.is-error .hub-result-title {
  color: var(--ink);
}
.admin-hub .hub-roles-problems {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
  font-size: 14px;
}
.admin-hub .hub-roles-problems strong {
  font-weight: 650;
}
.admin-hub .hub-roles-stopped {
  font-size: 14px;
  font-weight: 600;
  color: var(--hub-error);
}
.person-confirm .hub-confirm-names {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 14px;
}
/* The person page's Change role: each other role's card is the button that opens its confirmation
   (no separate "Change to" step), the current one marked, and a role the server would refuse
   drawn disabled with the reason on it. A refusal after confirming is an alert at the top of the
   panel. */
.person-page button.role-card {
  align-items: stretch;
  width: 100%;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.person-page button.role-card:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.person-page button.role-card:disabled {
  opacity: 1;
}
.person-page .role-card.is-current {
  border-color: var(--blue);
  background: var(--blue-soft);
  cursor: default;
}
.person-page .role-card-reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brass);
}
.person-page .role-card-reason .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.person-page .role-refusal {
  padding: 12px 14px;
  border: 1px solid #e3b7b0;
  border-left: 5px solid #9b2620;
  border-radius: 10px;
  background: #fbeeec;
  color: #7c1d18;
  font-size: 15px;
  font-weight: 600;
}
.person-page .role-refusal:focus {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
/* Church Leadership's police check line on the person page. */
.person-page p.police-row-text {
  font-size: 14px;
  color: var(--muted);
}
/* === end roles for many people === */