/* ==========================================================================
   Fullers Properties Performance Appraisal
   Built on the Cloudflare design system: Kumo brand orange, cream-over-white,
   4px spacing grid, 3/4/6/8px radii, monospace as the metadata voice.

   Contrast notes (WCAG AA):
   - #ff5e1f carries INK text, not white (4.95:1 vs 3.06:1).
   - Band colours are never text. They fill bars and swatches, which get a
     hairline ring so the component boundary clears 3:1 even for #00bd7d.
   ========================================================================== */

:root {
  /* brand + voltage */
  --brand:        #ff5e1f;
  --brand-hover:  #ff7038;
  --brand-soft:   #ff9650;
  --brand-dark:   #d63c01;

  /* surfaces */
  --canvas:       #ffffff;
  --cream:        #fffbf5;

  /* text */
  --ink:          #262626;
  --ink-soft:     #414040;
  --muted:        #727272;
  --nav-muted:    #6a6967;

  /* structure */
  --hairline:     #f0f0f0;
  --hairline-2:   #e2ded8;

  /* product domain */
  --compute:      #0a95ff;
  --storage:      #ee0ddb;
  --ai:           #00bd7d;
  --sase:         #0d9488;

  /* semantic */
  --red:          #ed1641;
  --attack:       #b52932;

  /* rating ramp, drawn from the tokens above */
  --band-unsat:     var(--red);
  --band-below:     var(--brand-dark);
  --band-meets:     var(--muted);
  --band-good:      var(--compute);
  --band-excellent: var(--ai);

  /* 4px spacing grid */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;

  /* radii */
  --r-xs: 3px;  --r-sm: 4px;  --r-md: 6px;  --r-lg: 8px;  --r-pill: 999px;

  /* type */
  --t-11: 0.6875rem; --t-12: 0.75rem;  --t-13: 0.8125rem; --t-14: 0.875rem;
  --t-16: 1rem;      --t-18: 1.125rem; --t-20: 1.25rem;   --t-24: 1.5rem;
  --t-32: 2rem;      --t-40: 2.5rem;   --t-56: 3.5rem;

  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --rail: 21rem;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ring: inset 0 0 0 1px rgba(38, 38, 38, 0.22);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-14);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "cv08" 1;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--brand); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --------------------------------------------------------------- buttons */

.btn {
  font: inherit;
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s4);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--muted); }

.btn--brand {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);          /* ink on orange = 4.95:1; white would be 3.06:1 */
  font-weight: 600;
}
.btn--brand:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn:disabled {
  background: var(--hairline);
  border-color: var(--hairline-2);
  color: #a5a19b;
  cursor: not-allowed;
}

.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--nav-muted);
  font-family: var(--mono);
  font-size: var(--t-12);
}
.btn--quiet:hover { color: var(--ink); border-color: transparent; }

/* ================================================================ HERO */

/* voltage as canvas: the brand fills the block, it is not an accent here */
.hero-band {
  background: var(--brand);
  color: var(--ink);
  padding: clamp(var(--s10), 6vh, var(--s16)) clamp(var(--s4), 4vw, var(--s12));
  border-bottom: 1px solid var(--brand-dark);
}
.hero-band__inner {
  max-width: 76rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--s8) clamp(var(--s10), 7vw, var(--s24));
  align-items: end;
}

.hero__eyebrow {
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--ink);
  opacity: 0.72;
  margin: 0 0 var(--s4);
}

.hero__lede {
  font-size: clamp(var(--t-24), 4.4vw, var(--t-40));
  font-weight: 500;                 /* CF display strategy: 500, not 700 */
  line-height: 0.95;
  letter-spacing: -0.028em;
  margin: 0;
  max-width: 17ch;
}

.hero__note {
  font-size: var(--t-16);
  line-height: 1.55;
  margin: 0;
  max-width: 46ch;
  color: var(--ink);
}
.hero__note strong { font-weight: 600; }

.ladder__row {
  display: grid;
  grid-template-columns: var(--s3) 5.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--s2);
  padding: var(--s1) 0;
}
.swatch {
  width: var(--s3);
  height: var(--s3);
  border-radius: var(--r-xs);
  background: var(--band);
  box-shadow: var(--ring);   /* carries the 3:1 boundary for pale fills */
}
.ladder__range {
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--muted);
}
.ladder__name {
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--ink);
}

/* ============================================================= FORM VIEW */

.sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: clamp(var(--s8), 5vw, var(--s16));
  max-width: 82rem;
  margin: 0 auto;
  padding: var(--s12) clamp(var(--s4), 4vw, var(--s12)) var(--s24);
  align-items: start;
}

.doc { min-width: 0; }

.doc__head {
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--s4);
  margin-bottom: var(--s10);
}
.doc__title {
  font-size: clamp(var(--t-32), 5vw, var(--t-40));
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1;
  margin: 0 0 var(--s2);
}
.doc__role {
  font-family: var(--mono);
  font-size: var(--t-13);
  color: var(--brand-dark);
  margin: 0;
}

.warn {
  background: #fff6ef;
  border: 1px solid var(--brand-soft);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  margin: 0 0 var(--s8);
  font-size: var(--t-14);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 64ch;
}

/* --- sections ----------------------------------------------------------- */

.sect { margin: 0 0 var(--s12); }
.sect > h2 {
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--s5);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--hairline-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
}
.sect > h2 small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--t-11);
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

/* --- employee data ------------------------------------------------------ */

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s6);
  background: var(--canvas);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s6);
}

.field { display: flex; flex-direction: column; gap: var(--s1); }
.field--wide { grid-column: span 2; }
.field > span {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--muted);
}
.field input,
.field select {
  font: inherit;
  font-size: var(--t-14);
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-xs);
  padding: var(--s2) var(--s3);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.field input::placeholder { color: #a5a19b; }
.field input:hover, .field select:hover { border-color: var(--muted); }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 94, 31, 0.18);
}
.field--fixed input { color: var(--muted); background: var(--cream); }

.empty {
  margin: 0;
  padding: var(--s10) var(--s6);
  text-align: center;
  font-size: var(--t-14);
  color: var(--muted);
  background: var(--canvas);
  border: 1px dashed var(--hairline-2);
  border-radius: var(--r-lg);
  max-width: 46ch;
  margin-inline: auto;
}

/* --- KPI rows ----------------------------------------------------------- */

.kpi {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 var(--s5);
  background: var(--canvas);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  padding: var(--s5);
  margin-bottom: var(--s2);
  transition: border-color 0.16s;
}
.kpi[data-scored="1"] { border-color: var(--hairline-2); }
.kpi[data-na="1"] { background: var(--cream); }

/* the filled share of the track IS this criterion's weight */
.kpi__weight { display: flex; flex-direction: column; gap: var(--s2); }
.kpi__pct {
  font-family: var(--mono);
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--ink);
}
.kpi__track {
  position: relative;
  width: 4px;
  height: 3.5rem;
  background: var(--hairline);
  border-radius: var(--r-pill);
}
.kpi__bar {
  position: absolute;
  inset: auto 0 0 0;
  background: var(--muted);
  border-radius: var(--r-pill);
  transition: background 0.22s;
}
.kpi[data-scored="1"] .kpi__bar { background: var(--brand); }
.kpi[data-na="1"] .kpi__bar { background: var(--hairline); }
.kpi[data-na="1"] .kpi__pct { color: #a5a19b; text-decoration: line-through; }

.kpi__body { min-width: 0; }

.kpi__name {
  font-size: var(--t-18);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.25;
  margin: 0 0 var(--s1);
}
.kpi__name input {
  font: inherit;
  width: 100%;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-xs);
  padding: var(--s1) var(--s2);
}
.kpi__name input::placeholder { color: #a5a19b; font-weight: 400; }
.kpi__name input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 94, 31, 0.18);
}

.kpi__assessed {
  font-size: var(--t-14);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 var(--s4);
  max-width: 68ch;
}

.kpi[data-na="1"] .kpi__name,
.kpi[data-na="1"] .kpi__assessed { opacity: 0.5; }

/* score selector */
.scale { display: flex; align-items: stretch; gap: var(--s1); flex-wrap: wrap; }
.scale__opt { position: relative; }
.scale__opt input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.scale__opt label {
  display: block;
  min-width: 2.5rem;
  padding: var(--s2) var(--s1);
  text-align: center;
  font-family: var(--mono);
  font-size: var(--t-14);
  color: var(--ink-soft);
  background: var(--canvas);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.scale__opt:hover label { border-color: var(--muted); background: var(--cream); }
.scale__opt input:focus-visible + label {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.scale__opt input:checked + label {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);           /* 4.95:1; white here would fail AA */
  font-weight: 500;
}

.scale__na label {
  min-width: auto;
  padding-inline: var(--s3);
  font-family: var(--sans);
  font-size: var(--t-13);
}
.scale__na input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.kpi__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  min-height: var(--s5);
}
.kpi__contrib {
  font-family: var(--mono);
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-xs);
  padding: 0 var(--s2);
}
.kpi__contrib[data-empty="1"] { color: #a5a19b; }
.kpi__verdict { font-size: var(--t-13); color: var(--muted); }

/* how to check */
.howto { margin-top: var(--s4); }
.howto > summary {
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  transition: color 0.14s;
}
.howto > summary:hover { color: var(--ink); }
.howto > summary::-webkit-details-marker { display: none; }
.howto > summary::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-1px, 1px);
  transition: transform 0.16s;
}
.howto[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.howto__body {
  font-size: var(--t-13);
  line-height: 1.65;
  color: var(--ink-soft);
  white-space: pre-line;
  max-width: 70ch;
  margin: var(--s3) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--cream);
  border-radius: var(--r-sm);
}

/* free text */
textarea {
  font: inherit;
  font-size: var(--t-14);
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  width: 100%;
  resize: vertical;
  transition: border-color 0.14s, box-shadow 0.14s;
}
textarea::placeholder { color: #a5a19b; }
textarea:hover { border-color: var(--muted); }
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 94, 31, 0.18);
}

.notes-field { margin-top: var(--s4); }
.notes-field > span {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--muted);
}
.notes-field textarea { min-height: var(--s10); resize: none; font-size: var(--t-13); }

/* improvement plan */
.plan__row {
  display: grid;
  grid-template-columns: var(--s5) repeat(3, minmax(0, 1fr));
  gap: var(--s3) var(--s5);
  padding: var(--s4);
  background: var(--canvas);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  margin-bottom: var(--s2);
  align-items: start;
}
.plan__n {
  font-family: var(--mono);
  font-size: var(--t-13);
  color: var(--muted);
  padding-top: var(--s5);
}
.plan__cell { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.plan__cell > span {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--muted);
}
.plan__cell textarea { min-height: 3.5rem; resize: none; font-size: var(--t-13); }

/* =============================================================== THE RAIL */

.rail { position: sticky; top: var(--s16); }

.verdict {
  background: var(--canvas);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s5) var(--s5) var(--s5);
}

.verdict__score {
  font-size: var(--t-56);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin: 0;
}
.verdict[data-band="none"] .verdict__score { color: #bdb9b3; }

.verdict__of {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--muted);
  margin: var(--s2) 0 var(--s4);
}

.verdict__band {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-16);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--s4);
}
.verdict__band .swatch { flex: none; }
.verdict[data-band="none"] .verdict__band { color: var(--muted); }
.verdict[data-band="none"] .verdict__band .swatch { background: var(--hairline); }

.verdict__track {
  position: relative;
  height: 6px;
  background: var(--hairline);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: var(--s5);
}
.verdict__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--band);
  border-radius: var(--r-pill);
  box-shadow: var(--ring);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.tally {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
}
.tally__row { display: flex; justify-content: space-between; gap: var(--s4); }
.tally__row dt { font-size: var(--t-13); color: var(--muted); }
.tally__row dd {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-13);
  color: var(--ink);
}
.tally__row dd[data-warn="1"] { color: var(--attack); }

.rail__actions { display: flex; gap: var(--s2); margin-top: var(--s5); }
.rail__actions .btn { flex: 1; }

.legend {
  margin-top: var(--s8);
  background: var(--canvas);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5) var(--s5);
}
.legend h3 {
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 var(--s3);
}
.legend dl { margin: 0; display: grid; gap: var(--s2); }
.legend__row { display: grid; grid-template-columns: var(--s4) 1fr; gap: var(--s2); align-items: baseline; }
.legend__row dt { font-family: var(--mono); font-size: var(--t-12); color: var(--muted); }
.legend__row dd { margin: 0; font-size: var(--t-13); color: var(--ink-soft); }

.hintbox {
  margin-top: var(--s5);
  font-size: var(--t-12);
  line-height: 1.6;
  color: var(--muted);
  padding: 0 var(--s1);
}
.hintbox kbd {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline-2);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  padding: 1px var(--s1);
}

/* band colours */
[data-band="unsat"]     { --band: var(--band-unsat); }
[data-band="below"]     { --band: var(--band-below); }
[data-band="meets"]     { --band: var(--band-meets); }
[data-band="good"]      { --band: var(--band-good); }
[data-band="excellent"] { --band: var(--band-excellent); }
[data-band="none"]      { --band: var(--hairline); }

/* ============================================================ RESPONSIVE */

@media (max-width: 62rem) {
  .hero-band__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .hero__lede { max-width: 100%; }

  .sheet {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 12rem;
  }

  .rail { position: fixed; inset: auto 0 0 0; top: auto; z-index: 30; }
  .verdict {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--s5);
    border: 0;
    border-top: 1px solid var(--hairline-2);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    padding: var(--s3) clamp(var(--s4), 4vw, var(--s12)) var(--s4);
  }
  .verdict__score { font-size: var(--t-32); grid-row: 1; }
  .verdict__of { display: none; }
  .verdict__band { grid-column: 2; grid-row: 1; margin: 0; }
  .verdict__track { grid-column: 1 / -1; margin: var(--s3) 0 0; }
  .tally {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    justify-content: space-between;
    margin-top: var(--s3);
    padding-top: var(--s3);
  }
  .rail__actions { grid-column: 1 / -1; margin-top: var(--s3); }
  .legend, .hintbox { display: none; }

  .plan__row { grid-template-columns: var(--s5) minmax(0, 1fr); }
  .plan__n { grid-row: span 3; padding-top: var(--s4); }
}

@media (max-width: 46rem) {
  .fields { grid-template-columns: minmax(0, 1fr); }
  .field--wide { grid-column: auto; }
}

@media (max-width: 34rem) {
  .kpi { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s4); }
  .kpi__weight { flex-direction: row; align-items: center; gap: var(--s2); }
  .kpi__track { width: 100%; height: 4px; }
  .kpi__bar { inset: 0 auto 0 0; height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ================================================================= PRINT */

@media print {
  @page { size: A4; margin: 14mm 13mm 12mm; }

  :root {
    --canvas: #fff; --cream: #fff;
    --ink: #000; --ink-soft: #222; --muted: #444;
    --hairline: #ccc; --hairline-2: #999;
  }

  body { background: #fff; color: #000; font-size: 9.5pt; line-height: 1.4; }

  .rail, .howto, .hintbox, .hero-band, .no-print { display: none !important; }

  ::placeholder { color: transparent !important; opacity: 0 !important; }
  textarea, input { resize: none !important; }
  input[type="date"]::-webkit-calendar-picker-indicator { display: none !important; }

  .sheet { display: block; max-width: none; padding: 0; }

  .doc__head { border-bottom: 1.5pt solid #000; padding-bottom: 2mm; margin-bottom: 6mm; }
  .doc__title { font-size: 17pt; margin: 0 0 1mm; }
  .doc__role { font-size: 10pt; color: #000; }

  .warn { display: none; }

  .sect { margin: 0 0 6mm; }
  .sect > h2 {
    font-size: 9pt;
    background: #eee;
    border: 1px solid #000;
    border-radius: 0;
    padding: 1.2mm 2mm;
    margin: 0 0 3mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sect > h2 small { display: none; }

  .fields {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 6mm;
    border: 1px solid #000;
    border-radius: 0;
    padding: 2.5mm 3mm;
  }
  .field { flex-direction: row; align-items: baseline; gap: 2mm; padding: 1.1mm 0; }
  .field > span { flex: 0 0 34mm; font-size: 8.5pt; color: #000; }
  .field input, .field select {
    flex: 1;
    border: 0; border-bottom: 0.4pt solid #777; border-radius: 0;
    padding: 0 0 0.4mm;
    font-size: 9.5pt; color: #000; background: none;
    -webkit-appearance: none; appearance: none;
  }

  .kpi {
    grid-template-columns: 13mm minmax(0, 1fr);
    gap: 0 3mm;
    border: 0;
    border-bottom: 0.4pt solid #999;
    border-radius: 0;
    padding: 2.2mm 0;
    margin: 0;
    background: none !important;
    break-inside: avoid;
  }
  .kpi:first-of-type { border-top: 0.8pt solid #000; }
  .kpi__weight { flex-direction: row; align-items: baseline; gap: 0; }
  .kpi__pct { font-size: 9.5pt; color: #000; }
  .kpi__track { display: none; }
  .kpi[data-na="1"] .kpi__pct { text-decoration: line-through; color: #666; }

  .kpi__name { font-size: 10.5pt; margin: 0 0 0.8mm; color: #000; }
  .kpi__name input { border: 0; border-bottom: 0.4pt solid #777; border-radius: 0; background: none; color: #000; }
  .kpi__assessed { font-size: 9pt; color: #222; margin: 0 0 1.4mm; max-width: none; }
  .kpi[data-na="1"] .kpi__name, .kpi[data-na="1"] .kpi__assessed { opacity: 1; color: #666; }

  .scale { gap: 0; }
  .scale__opt label {
    min-width: 6.5mm;
    padding: 0.5mm 0;
    font-size: 9pt;
    border: 0.4pt solid #555;
    border-radius: 0;
    margin-right: -0.4pt;
    color: #555;
    background: none;
  }
  .scale__opt input:checked + label {
    background: #000 !important;
    color: #fff !important;
    border-color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .scale__na label { padding-inline: 2mm; }
  .scale__na input:checked + label { background: #000 !important; color: #fff !important; }

  .kpi__meta { margin-top: 1.2mm; min-height: 0; }
  .kpi__contrib { font-size: 9pt; color: #000; background: none; border: 0; padding: 0; }
  .kpi__contrib[data-empty="1"] { color: #888; }
  .kpi__verdict { font-size: 9pt; color: #333; }

  .notes-field { margin-top: 1.4mm; display: flex; flex-direction: row; align-items: baseline; gap: 2mm; }
  .notes-field > span { flex: 0 0 12mm; font-size: 8pt; color: #444; }
  .notes-field textarea {
    border: 0; border-bottom: 0.4pt solid #999; border-radius: 0;
    min-height: 5mm; font-size: 9pt; padding: 0;
  }

  .print-total { display: block !important; }

  textarea {
    background: none; border: 0.4pt solid #999; border-radius: 0;
    color: #000; font-size: 9pt; padding: 1.5mm 2mm;
    overflow: hidden;
  }
  .plan__row {
    grid-template-columns: 6mm repeat(3, minmax(0, 1fr));
    padding: 1.5mm 0;
    border: 0; border-bottom: 0.4pt solid #ccc; border-radius: 0;
    margin: 0;
    break-inside: avoid;
  }
  .plan__n { font-size: 9pt; padding-top: 3mm; }
  .plan__cell > span { font-size: 8pt; color: #444; }
  .plan__cell textarea { border: 0; border-bottom: 0.4pt solid #999; min-height: 8mm; }
}

/* screen hides the print-only total */
.print-total { display: none; }
.print-total__inner {
  display: grid;
  grid-template-columns: 13mm minmax(0, 1fr);
  gap: 0 3mm;
  padding: 2mm 0 0;
  border-top: 0.8pt solid #000;
  font-weight: 600;
  font-size: 10.5pt;
}
.print-total__label { grid-column: 2; display: flex; justify-content: space-between; gap: 4mm; }