/* Self-hosted brand faces. Serving these from our own origin keeps the
   Content-Security-Policy tight (style-src/font-src 'self') and removes a
   third-party request from the critical path. Bebas Neue and Mulish are the
   same files the Dashboard Design system ships, so the app, the dashboards and
   the report render in one typeface family. */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bebas-neue-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/fonts/mulish-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/fonts/mulish-latin-var-italic.woff2") format("woff2");
}

/* Brand script font, self-hosted. */
@font-face {
  font-family: "Rockness";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Rockness.woff") format("woff");
}
/* ---- Kristen Hadeed brand palette ----
   #f34f1f primary orange-red · #ec633b secondary orange
   #fbc128 golden yellow · #fbefeb warm cream · #85d8de teal pop */
:root {
  --orange: #f34f1f;
  --orange-2: #ec633b;
  --yellow: #fcc13d;
  --teal: #85d8de;
  --teal-deep: #2e9aa3;
  --cream: #fbefeb;
  --ink: #2b2320;
  --ink-soft: #6b5f57;
  --card: #ffffff;
  --line: #efd9cf;
  --orange-tint: #fdeae3;
  --display: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
  --body:
    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --script: "Rockness", cursive;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  font: 17px/1.6 var(--body);
  background: var(--cream);
  color: var(--ink);
}
main {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
/* The dashboard is a layout, not a reading column. */
main.wide {
  max-width: 1200px;
  padding: 3rem 2rem 6rem;
}
h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 0.75rem;
}
h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--orange);
  margin: 3rem 0 0.75rem;
}
h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 4vw, 1.7rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.75rem;
}
p {
  margin: 0.6rem 0;
  color: var(--ink-soft);
}
.lede {
  color: var(--ink);
  font-size: 1.05rem;
}

button {
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: 0.85rem 2rem;
  background: var(--orange);
  color: #fff;
  transition:
    transform 0.08s ease,
    background 0.15s ease;
}
button:hover {
  background: var(--orange-2);
}
button:active {
  transform: translateY(1px);
}
button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--orange);
}

/* Progress */
.progress-wrap {
  margin: 0 0 1.75rem;
}
.progress-bar {
  height: 8px;
  background: #f3ddd3;
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--orange);
  transition: width 0.25s ease;
}
.progress-text {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin: 0.6rem 0 0;
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 14px 34px -22px rgba(243, 79, 31, 0.45);
}
.stem {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.options {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
label.option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  /* Spacing between options comes from .options' gap. The shell's generic
     label margin would otherwise stack on top of it. */
  margin: 0;
  padding: 0.95rem 1.1rem;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
label.option:hover {
  border-color: var(--orange);
  background: var(--orange-tint);
}
label.option.selected {
  border-color: var(--orange);
  background: var(--orange-tint);
}
label.option input {
  margin-top: 0.32rem;
  accent-color: var(--orange);
  flex: none;
}

/* Back and Next, one row at the foot of the question card. The top margin is
   the breathing room between the last option and the controls. */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.nav button {
  margin: 0;
}

.script {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  line-height: 1.1;
  color: var(--teal);
  margin: 0 0 0.5rem;
}
.center {
  text-align: center;
}
.muted {
  color: var(--ink-soft);
}
.hidden {
  display: none;
}
.err {
  color: var(--orange);
  font-weight: 700;
}

/* ---- Report ---- */
.report-quote {
  border-left: 4px solid var(--yellow);
  padding: 0.4rem 0 0.4rem 1.2rem;
  margin: 2rem 0;
}
.report-quote .q {
  font-family: var(--script);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  color: var(--ink);
  margin: 0 0 0.3rem;
}
.checkin p {
  color: var(--ink);
}
.checkin .muted {
  color: var(--ink-soft);
}

.radars {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  margin: 1.5rem 0 0.5rem;
}
.radar-box {
  flex: 1 1 280px;
  max-width: 330px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 0.5rem 0.75rem;
  box-shadow: 0 14px 34px -22px rgba(243, 79, 31, 0.45);
  text-align: center;
}
.radar-box .rt {
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 0.25rem;
}
.radar-box .rv {
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  margin: 0.3rem 0 0;
}
.radar-box .rl {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
svg.radar {
  width: 100%;
  height: auto;
  display: block;
}

.pattern-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.75rem;
  margin: 1.25rem 0;
  border-top: 6px solid var(--yellow);
  box-shadow: 0 14px 34px -22px rgba(243, 79, 31, 0.45);
}
.pattern-card p {
  color: var(--ink);
}
.pattern-card .start {
  margin-top: 1.1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  background: var(--orange-tint);
  color: var(--ink);
  font-size: 0.98rem;
}
.pattern-card .start b {
  color: var(--orange);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.domain-label {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2rem);
  color: var(--orange-2);
  margin: 2.5rem 0 0.75rem;
}
.dim-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.6rem 1.75rem;
  margin: 1rem 0;
}
.dim-card .head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.dim-card .head h3 {
  margin: 0;
}
.lvl-chip {
  display: inline-block;
  background: var(--yellow);
  color: #000;
  border-radius: 6px;
  padding: 0.15rem 0.6rem;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.dim-card .sect {
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin: 1.1rem 0 0.2rem;
}
.dim-card p {
  margin: 0.25rem 0;
  color: var(--ink);
}
.dim-card .prompt {
  font-family: var(--script);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--orange-2);
}

.standout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.standout > div {
  flex: 1 1 260px;
}
ol.stand-list {
  margin: 0.5rem 0;
  padding-left: 1.3rem;
}
ol.stand-list li {
  margin: 0.45rem 0;
  color: var(--ink);
}
.override-note {
  margin-top: 1.25rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  background: var(--orange-tint);
  border: 1px solid var(--line);
  color: var(--ink);
}

.closing p {
  color: var(--ink);
}
.todo dt {
  font-weight: 800;
  color: var(--ink);
  margin-top: 0.9rem;
}
.todo dd {
  margin: 0.15rem 0 0 0;
  color: var(--ink-soft);
}
.signoff {
  font-family: var(--script);
  font-size: 1.6rem;
  color: var(--orange-2);
}
hr.sep {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

/* ---------------------------------------------------------------------------
   Application shell
   The report and the assessment were designed first; this dresses the
   surrounding chrome (navigation, account menu, forms, tables) in the same
   system so nothing reads as a different product.
   --------------------------------------------------------------------------- */

header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
header > a:first-child {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
}
nav {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  align-items: center;
}
nav a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
nav a:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
a {
  color: var(--orange);
}

/* Account menu. Kept quiet: a disclosure, not a second navigation bar. */
details {
  margin-left: auto;
  position: relative;
}
details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  list-style: none;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] > summary {
  border-color: var(--orange);
  color: var(--orange);
}
details nav {
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  padding: 1rem;
  margin-top: 0.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  position: absolute;
  right: 0;
  min-width: 15rem;
  z-index: 20;
  box-shadow: 0 10px 30px rgba(43, 35, 32, 0.12);
}
details nav form {
  margin: 0;
}
details nav button {
  width: 100%;
  font-size: 0.9rem;
  padding: 0.5rem 0.9rem;
}

/* The reference-mode banner. Deliberately loud: it means the data is fictional. */
.notice {
  background: var(--orange-tint);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
  text-align: center;
}
main > .notice {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0 0 1.5rem;
  text-align: left;
}

form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem;
  margin: 1.25rem 0;
}
label {
  display: block;
  margin: 0.9rem 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
input:not([type="checkbox"]):not([type="radio"]),
select {
  display: block;
  width: 100%;
  max-width: 28rem;
  margin-top: 0.4rem;
  font: inherit;
  font-weight: 400;
  padding: 0.6rem 0.7rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
}
input:focus-visible,
select:focus-visible {
  border-color: var(--orange);
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
legend {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1rem;
}
.check {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  font-weight: 400;
  color: var(--ink-soft);
}
.check input {
  flex: none;
  accent-color: var(--orange);
}

ul,
ol {
  padding-left: 1.2rem;
}
li {
  margin: 0.5rem 0;
  color: var(--ink-soft);
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background: var(--card);
}
th,
td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 0.6rem;
  font-size: 0.94rem;
}
th {
  color: var(--ink);
}
td {
  color: var(--ink-soft);
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem;
  font-size: 0.85rem;
}
code {
  background: var(--orange-tint);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.88em;
}
footer {
  padding: 2rem 1.5rem 3rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}

@media (max-width: 34rem) {
  header {
    padding: 0.9rem 1rem;
  }
  main {
    padding: 1.75rem 1rem 3rem;
  }
  .standout {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Progress dashboard
   Ported from the Dashboard Design canvas ("Leadership Progress Dashboard").
   The canvas carries these as inline styles; they live here as classes so the
   server-rendered markup stays readable.
   --------------------------------------------------------------------------- */

.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}
.dash-eyebrow {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
}
.dash-h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0.875rem 0 1.25rem;
  text-wrap: pretty;
}
.dash-h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.dash-h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
/* Bebas renders uppercase; the accent phrase drops to italic coral Mulish. */
.dash-h1 .accent,
.dash-h2 .accent,
.dash-h3 .accent {
  font-family: var(--body);
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  color: var(--orange);
  letter-spacing: 0;
  font-size: 0.8em;
}
.dash-lede {
  margin: 0 0 1rem;
  max-width: 52ch;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.dash-cta {
  margin: 2rem 0 0;
}
.dash-cta a {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  border-bottom: 0;
}
.dash-cta a:hover {
  background: #d43f13;
}
.dash-quote {
  display: flex;
  gap: 1.125rem;
  align-items: flex-start;
}
.dash-quote .mark {
  font-family: var(--display);
  font-size: 3.5rem;
  line-height: 0.8;
  color: var(--yellow);
  flex: none;
}
.dash-quote > div:last-child {
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
  text-wrap: pretty;
}
.dash-kicker {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dash-kicker.gold {
  color: var(--yellow);
}
.dash-note {
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.dash-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.75rem 1.875rem;
  box-shadow: 0 2px 8px rgba(43, 35, 32, 0.06);
}

/* Empty state */
.dash-empty {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 4rem;
  align-items: center;
  padding: 0 0 3rem;
}
.dash-steps {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}
.dash-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1.125rem;
  align-items: start;
  border-top: 2px solid var(--line-2, #efeae7);
  padding-top: 1.125rem;
}
.dash-step .n {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 0.92;
  color: var(--orange);
}
.dash-step .t {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.dash-step .b {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.dash-step-foot {
  border-top: 2px solid #efeae7;
  padding-top: 1.125rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Check-in */
.dash-checkin {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 4rem;
  align-items: end;
  margin-bottom: 0.75rem;
}

/* Averages */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 1.75rem 0;
}
.dash-stat {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.dash-stat-row {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  flex-wrap: wrap;
}
.dash-stat-row .v {
  font-family: var(--display);
  font-size: 4rem;
  line-height: 0.92;
  color: var(--ink);
}
.dash-stat-row .d {
  font-size: 0.875rem;
  font-weight: 800;
}
.dash-stat-row .muted-d {
  color: var(--ink-soft);
}
.dash-spark {
  width: 100%;
  height: 56px;
  margin-top: 0.625rem;
  overflow: visible;
}

/* A 1-5 track with the current score marked. */
.dash-track {
  position: relative;
  height: 22px;
  margin-top: 1.25rem;
}
.dash-track .rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 2px;
  background: #efeae7;
}
.dash-track .tick {
  position: absolute;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d8d1cd;
  box-sizing: border-box;
  margin-left: -4px;
}
.dash-track .covered {
  position: absolute;
  top: 9px;
  height: 4px;
  border-radius: 2px;
  background: var(--yellow);
}
.dash-track .from {
  position: absolute;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  margin-left: -5px;
}
.dash-track .now {
  position: absolute;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
  margin-left: -6px;
  box-shadow: 0 0 0 3px #fff;
}

/* Radar + commitment */
.dash-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.dash-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.dash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.dash-radar-card {
  display: flex;
  flex-direction: column;
}
.dash-radar {
  width: 100%;
  height: auto;
  margin: 0.5rem 0;
  overflow: visible;
}
.dash-legend {
  display: flex;
  gap: 1.125rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.dash-legend span {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}
.dash-legend .swatch {
  width: 14px;
  display: inline-block;
}
.dash-legend .swatch.solid {
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
}
.dash-legend .swatch.dashed {
  height: 0;
  border-top: 2px dashed #a29a95;
}

.dash-commit {
  background: var(--orange);
  border-radius: 20px;
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  color: #fff;
  box-shadow: 0 2px 8px rgba(43, 35, 32, 0.06);
}
.dash-commit-dim {
  font-family: var(--display);
  font-size: 2.5rem;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.dash-commit-text,
.dash-commit-foot {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.dash-commit-foot {
  border-top: 2px solid rgba(255, 255, 255, 0.22);
  padding-top: 0.875rem;
  margin-top: 0.375rem;
}
.dash-commit-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 0.25rem;
}
.dash-commit-bar .rail {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
  position: relative;
}
.dash-commit-bar .fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: var(--yellow);
}
.dash-commit-bar .nums {
  font-family: var(--display);
  font-size: 1.625rem;
  line-height: 1;
  white-space: nowrap;
}

.dash-patterns {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: 1;
}
.dash-pattern-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  border-top: 2px solid #efeae7;
  padding-top: 0.75rem;
}
.dash-pattern-row .n {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.dash-pattern-row .s {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.dash-pattern-row .dots {
  display: flex;
  gap: 0.375rem;
}
.dash-patterns .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  background: #fff;
  border: 2px solid #d8d1cd;
  box-sizing: border-box;
}
.dash-patterns .dot.on {
  background: var(--orange);
  border-color: var(--orange);
}
.dash-pattern-foot {
  margin-top: auto;
  display: flex;
  gap: 1rem;
}
.dash-pattern-foot .key {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Fourteen ladders */
.dash-ladders {
  margin: 1.5rem 0;
}
.dash-ladder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3.5rem;
}
.dash-group-label {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 1.125rem 0 0.5rem;
}
.dash-ladder-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 84px;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 2px solid #efeae7;
}
.dash-ladder-row .n {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.dash-ladder-row .l {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.dash-ladder-row .dash-track {
  margin-top: 0;
}
.dash-ladder-score {
  text-align: right;
}
.dash-ladder-score .v {
  font-family: var(--display);
  font-size: 1.625rem;
  line-height: 0.92;
  color: var(--ink);
}
.dash-ladder-score .d {
  font-size: 0.8125rem;
  font-weight: 800;
}

/* Reports table */
.dash-reports {
  margin: 2rem 0 0;
}
.dash-table {
  padding: 0;
  overflow: hidden;
}
.dash-tr {
  display: grid;
  grid-template-columns: 160px 78px 78px minmax(0, 1.6fr) minmax(0, 1fr) 110px;
  gap: 1.25rem;
  padding: 1.125rem 1.875rem;
  align-items: center;
  border-top: 2px solid #efeae7;
  font-size: 0.9375rem;
}
.dash-tr.head {
  border-top: 0;
  padding: 0.875rem 1.875rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dash-tr .d {
  font-weight: 800;
  color: var(--ink);
}
.dash-tr .o {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.dash-tr .num {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 0.92;
  color: var(--ink);
}
.dash-tr .p {
  color: #4a413d;
  line-height: 1.45;
}
.dash-tr .go {
  display: flex;
  justify-content: flex-end;
}
.dash-tr .go a {
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 2px solid var(--orange);
  color: var(--orange);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
}
.dash-tr .go a:hover {
  background: var(--orange);
  color: #fff;
}

@media (max-width: 60rem) {
  .dash-empty,
  .dash-checkin,
  .dash-split,
  .dash-stats,
  .dash-ladder-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .dash-tr {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
  }
  .dash-tr.head {
    display: none;
  }
  .dash-ladder-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* Team view -------------------------------------------------------------- */
.team-overview {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.team-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.team-stat {
  padding: 1.5rem 1.625rem;
}
.team-stat .v {
  font-family: var(--display);
  font-size: 3.5rem;
  line-height: 0.92;
  color: var(--ink);
  margin: 0.375rem 0 0.5rem;
}
.dash-legend .swatch.gold {
  height: 2px;
  background: var(--yellow);
}

.team-members {
  margin: 2rem 0 0;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.625rem;
}
.team-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.team-card-head .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--ink);
}
.team-card-head .n {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.team-card-head .r {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.3;
}
.team-mini {
  width: 100%;
  height: 150px;
  overflow: visible;
}
.team-scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.team-scores .k {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.team-scores .row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.team-scores .v {
  font-family: var(--display);
  font-size: 2.125rem;
  line-height: 0.92;
  color: var(--ink);
}
.team-scores .d {
  font-size: 0.8125rem;
  font-weight: 800;
}
.team-facts {
  border-top: 2px solid #efeae7;
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink);
}
.team-facts .muted {
  color: var(--ink-soft);
}
.team-card-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.625rem;
  padding-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.team-card-foot a {
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 2px solid var(--orange);
  color: var(--orange);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.team-card-foot a:hover {
  background: var(--orange);
  color: #fff;
}
.team-empty {
  height: 150px;
  border-radius: 14px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.team-rule {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2.5rem 0 0.5rem;
}
.team-rule span {
  flex: 1;
  height: 2px;
  background: #e4dcd7;
}
.team-rule em {
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

@media (max-width: 70rem) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 60rem) {
  .team-overview,
  .team-stats {
    grid-template-columns: 1fr;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* Assessment flow -------------------------------------------------------- */
/* The question card's form is the card, so it carries no second border. */
.card form {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.card fieldset legend.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
label.option:hover {
  border-color: var(--orange);
  background: var(--orange-tint);
}
label.option.selected {
  border-color: var(--orange);
  background: var(--orange-tint);
}
label.option input {
  margin-top: 0.32rem;
  accent-color: var(--orange);
  flex: none;
}
label.option span {
  font-weight: 400;
  color: var(--ink);
}
.nav a {
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  border: 2px solid var(--orange);
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
}
.nav a:hover {
  background: var(--orange);
  color: #fff;
}
.nav .muted {
  font-size: 0.8rem;
  max-width: 46ch;
  text-align: right;
}
.center {
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Screen patterns
   The body vocabulary shared by every page that is not the report, the
   dashboard or the assessment. The chrome around them is already identical:
   every screen renders through one page() shell, so nav and header cannot
   drift. Only what sits inside main varies, and it varies within these.
   --------------------------------------------------------------------------- */

/* A small caps label introducing a block. */
.sect {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--orange);
  margin: 1.4rem 0 0.3rem;
}
.kicker {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.chip {
  display: inline-block;
  background: var(--yellow);
  color: #000;
  border-radius: 6px;
  padding: 0.15rem 0.6rem;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Layout helpers. Flex with gap rather than margins, so rows survive edits. */
.row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
/* The description takes the slack and wraps; the action keeps its size and
   stays right. Without this a long line pushes the button onto its own row,
   where it lands on the left and stops looking like the row's action. */
.between > :first-child {
  flex: 1 1 15rem;
  min-width: 0;
}
.between > :last-child {
  flex: 0 0 auto;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.divided > * + * {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

/* Empty states carry copy, not an apology. A dashed edge says "nothing here
   yet" without looking like a card that failed to load. */
.empty {
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 2.5rem 1.75rem;
  text-align: center;
  margin: 1.25rem 0;
}
.empty .script {
  margin-bottom: 0.25rem;
}

/* The one screen where a decision is irreversible gets a heavier edge. */
.card.consequential {
  border: 2px solid var(--orange);
}

/* A secondary action that should not compete with the primary button. */
a.action {
  display: inline-block;
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  border: 2px solid var(--orange);
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
}
a.action:hover {
  background: var(--orange);
  color: #fff;
}
.stat {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 0.92;
  color: var(--ink);
}
.stat.accent {
  color: var(--orange);
}

/* A link that is the page's primary action reads as one. */
a.cta {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: 10px;
  border-bottom: 0;
}
a.cta:hover {
  background: #d43f13;
  color: #fff;
}

/* The context switcher inside the account menu. It sets what the dashboard and
   reports show, so it sits above the links and is separated from them. */
details nav .context {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
details nav .context select {
  width: 100%;
  max-width: none;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 0.55rem;
}
details nav form:first-child {
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
  margin-bottom: 0.2rem;
}