/* The questionnaire's own: its questions and options, its results with the
   donut and the bars, its report card - and the print theme, which exists
   to put those results on paper. */
/* Section header - the block carries the spacing, the paragraph none, so it
   stays flush with the question cards and its margins cannot collapse away. */
.section-header {
  margin: 24px 0 28px;
}
.section-header p {
  font-size: 14px;
  color: var(--text2);
  max-width: 600px;
  line-height: 1.6;
}

/* Area-to-area navigation, above and below the section.
   The auto margins hold the progress between the two links, and the
   forward one against the right edge even with no link on the left. */
.section-nav {
  display: flex;
  align-items: center;
}
/* The hairline faces the questions: under the row above them, over the
   row below them. Only the inward side is spaced - the outward one is
   .inner-pad's padding. */
#section-view > .section-nav:first-child {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
#section-view > .section-nav:last-child {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
/* Whatever the row carries between its two links. The padding keeps it off
   them where the row runs out of width; min-width lets it shrink that far,
   which a flex item does not do on its own - without it the text pushes the
   links instead of ellipsing. */
.section-nav-mid {
  margin: 0 auto;
  padding: 0 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-nav-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

/* An area's mark, wherever it is shown. `.icon` (core/shell.css) draws it in
   line and in the colour of what it sits in; the size and the weight are the
   two places' own. In the sidebar it fills the icon column exactly, so the
   labels start where they always did; over the questions it is set to the
   heading's size and dropped onto its baseline. */
.nav-item-icon .icon-glyph {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}
.section-nav-title .icon-glyph {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  vertical-align: -3px;
}
.nav-answered {
  font-size: 12px;
  color: var(--text3);
}

.section-nav-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: color 0.15s;
}
.section-nav-link:hover {
  text-decoration: underline;
}

/* Question cards */
.qcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 12px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  /* animation: fadeUp 0.3s ease both; */
}

.qcard.answered {
  border-color: rgba(16,185,129,0.3);
  border-left-color: #10B981;
  box-shadow: 0 4px 20px rgba(16,185,129,0.08);
}

.qhead {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.qcode {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.qtext {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  font-weight: 400;
}

/* Options grid */
.opts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

/* A scale question answers from one dropdown, not a card per value - a 1-10
   scale would otherwise be ten near-identical cards. */
.opts-scale {
  display: block;
}
.opt-select {
  width: 100%;
  max-width: 320px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--lc, var(--border));
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text2);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
}
.opt-select:hover {
  background: var(--surface3);
  border-color: var(--border2);
}
.opt-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Answered: the same colour the option's card would have carried */
.opt-select[data-opt-pos] {
  --lc: var(--option-color);
  background: color-mix(in srgb, var(--lc) 12%, var(--surface2));
  border-color: var(--lc);
  color: var(--option-color);
  font-weight: 600;
}
.opt-select option {
  background: var(--surface2);
  color: var(--text);
  font-weight: 400;
}

.opt {
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--lc, var(--border));
  border-radius: var(--radius);
  background: var(--surface2);
  padding: 12px 10px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.opt::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.opt:hover { transform: translateY(-2px); border-color: var(--border2); background: var(--surface3); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.opt:hover::before { opacity: 1; }

.opt-pts {
  font-size: 11px;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
  color: var(--text2);
}
.opt-desc {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text2);
}

.opt.selected {
  border-color: var(--lc) !important;
  background: color-mix(in srgb, var(--lc) 12%, var(--surface2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc) 18%, transparent),
              0 6px 24px color-mix(in srgb, var(--lc) 16%, transparent);
  transform: translateY(-2px);
}

/* ─── RESULTS ─── */
/* Which of the questionnaire's two positions is showing, said by the one class
   the view carries - so the swap is a state read from the stylesheet rather
   than two elements switched on and off by hand. */
#results-view { display: none; }
.main.results-open #results-view { display: block; }
.main.results-open #section-view { display: none; }

.results-header { margin-bottom: 32px; }
.results-header h2 {
  font-size: 32px;
  margin-bottom: 6px;
}
.results-header p { font-size: 14px; color: var(--text2); }
/* The tally under the subtitle - quieter than it, being a detail of it.
   Two columns, so the figures line up under each other and the labels read
   as one column rather than as the start of two sentences. */
.results-header .results-meta {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 16px;
  row-gap: 2px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text3);
}
.results-header .results-meta dd { color: var(--text2); }
/* The score and its band speak in the band's colour, as the arcs and bars
   below them do - their line carries the score-* class that sets it. */
.result-summary-pct,
.result-summary-label {
  color: var(--score-color);
}

/* Area bars - they live in the donut card, as its legend */
.bar-row { margin-bottom: 16px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-track2 { height: 8px; background: var(--surface3); border-radius: 4px; overflow: hidden; }
.bar-fill2 { height: 100%; border-radius: 4px; transition: width 0.7s cubic-bezier(0.4,0,0.2,1); }

/* Warnings - the card is the donut card's twin, so the two read as one panel;
   the severity is carried by the dot alone, not by the card around it. */
.warn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  color: var(--text);
  font-size: 13px;
}
/* An area heads its own warnings: the name, a hairline across the card, then
   what the area has to say under it. */
.warn-table { display: flex; flex-direction: column; gap: 20px; }
.warn-area {
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  padding-bottom: 6px;
}
.warn-labels { display: flex; flex-direction: column; gap: 8px; }
.warn-label { display: flex; gap: 8px; }
.warn-dot {
  align-items: center;
  border-radius: 50%;
  color: var(--bg);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  line-height: 1;
  margin-top: 2px;    /* the dot rides the first line of a label that wraps */
  width: 16px;
}
.warn-info { background: var(--text3); }
.warn-warning { background: var(--C); }
.warn-critical { background: var(--A); }

/* Readiness table */
/* The readiness bands, as a strip along the bottom of the donut card. A row
   per band would cost five lines to say what wraps into two. */
.readiness-table {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* One band: the range it covers and what that range is called. The pair is
   grouped, so the strip wraps between bands and never within one. */
.rt-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
}
/* The dot rides with the range it belongs to, inside the term. */
.rt-range {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  white-space: nowrap;
}
.rt-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.rt-label { color: var(--text2); white-space: nowrap; }

/* Disclaimer */
.disclaimer {
  font-size: 11px;
  color: var(--text3);
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .opts { grid-template-columns: 1fr; }
  .legend { gap: 4px; }
  .leg-info { display: none; }
}


.top-prog-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 5px;
}
.top-prog-track {
  height: 4px;
  background: var(--surface3);
  border-radius: 4px;
  overflow: hidden;
}
.top-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #7C3AED);
  border-radius: 4px;
  transition: width 0.4s;
  width: 0%;
}
.top-bar-score {
  text-align: right;
  white-space: nowrap;
}
.top-bar-score .ts-pts { font-size: 18px; font-weight: 700; color: var(--text); }
.top-bar-score .ts-label { font-size: 11px; color: var(--text3); }



/* Answer option colour.
   The five answer colours are read as the stops of one ramp, so a question
   with any number of options lands somewhere on it - a five-option question
   hits the stops exactly. The client picks the two stops an option sits
   between and how far along it is (see Survey.applyOptionColors). */
[data-opt-pos] {
  --option-color: color-mix(in srgb, var(--opt-from, var(--A)), var(--opt-to, var(--A)) calc(var(--opt-t, 0) * 100%));
  --option-bg: color-mix(in srgb, var(--option-color) 8%, transparent);
  --option-border: color-mix(in srgb, var(--option-color) 25%, transparent);
}

.leg-letter[data-opt-pos] {
  background: var(--option-bg);
  border: 1px solid var(--option-border);
  color: var(--option-color);
}
.leg-pts[data-opt-pos] {
  color: var(--option-color);
}

.qarea { flex: 1; }
.opt[data-opt-pos] {
  --lc: var(--option-color);
}
.opt .opt-badge {
  border: 1px solid color-mix(in srgb, var(--option-border) 35%, transparent);
  border-radius: 6px;
  color: var(--option-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  height: 26px;
  margin-bottom: 7px;
  min-width: 26px;
}
.opt.selected .opt-badge {
  background: var(--option-bg);
  border-color: var(--option-border);
  box-shadow: 0 0 8px var(--option-border);
}
.opt.selected .opt-pts,
.opt.selected .opt-desc {
  color: var(--option-color);
}

.bar-row-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.bar-row-pct {
  color: var(--score-color);
  font-weight: 600;
}
/* Keys an area to its arc in the donut - white in both places, so the letter
   reads as a label rather than as another carrier of the band colour */
.bar-letter {
  color: var(--text);
  display: inline-block;
  font-weight: 700;
  min-width: 13px;
}
.bar-fill2 { background: var(--score-color); }

.donut-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-bottom: 16px;
  padding: 24px;
}
/* Donut beside its bars while both fit, donut above them when they do not.
   The bars outgrow the chart by so much that sharing a row leaves the chart at
   its 200px basis; alone on a row it takes the full width and centres the
   donut. Which row things land on is left to wrapping, so there is no
   breakpoint here to keep in step with the padding around it. */
.donut-chart {
  display: flex;
  justify-content: center;
  flex: 1 1 200px;
}
.donut-bars {
  flex: 999 1 280px;
  min-width: 0;
}
.result-donut-svg {
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.25));
  flex-shrink: 0;
  height: 200px;
  width: 200px;
}
.result-donut-bg { stroke: var(--surface3); }
.result-donut-svg .donut-seg {
  stroke: var(--score-color);
}
.donut-key {
  fill: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
}
.result-donut-score {
  fill: var(--text);
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 700;
}
.result-donut-label {
  fill: var(--text3);
  font-family: var(--font-sans);
  font-size: 11px;
}
.rt-row .rt-dot { background: var(--score-color); }
.rt-row .rt-range { color: var(--score-color); }

/* ─── REPORT CARD ─── */
/* The report stands with the results, under what those results warn about: the
   donut card's twin again. */
.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.report-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  padding: 20px 24px;
}
/* What the card holds: the report, or the loader standing in for one. */
.report-panel {
  border-top: 1px solid var(--border);
  color: var(--text);
  line-height: 1.7;
  padding: 8px 24px 24px;
}

.report-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  gap: 20px;
  text-align: center;
}
.report-loader p { color: var(--text2); font-size: 14px; }
/* What the loader says instead when the report could not be had. */
.report-loader p.report-error { color: var(--A); }
/* How many areas the grounding has behind it, under the stage it is in: the
   count moves while the stage stands, so it is set apart from it. */
.report-loader p.report-progress-count { color: var(--text3); font-size: 13px; }

#report-text {
  font-size: 15px;
  color: var(--text);
}
#report-text h1, #report-text h2, #report-text h3, #report-text h4 {
  margin: 24px 0 12px;
  color: var(--accent);
}
#report-text h1 { font-size: 28px; }
#report-text h2 { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
#report-text h3 { font-size: 18px; color: var(--text3); }
/* The service programme closes the report as an offer rather than one more
   finding, so its heading carries the brand's blue where the others stay
   muted. */
#report-text h3.report-services { color: var(--accent); }
/* The area's name, with its grade dot beside it rather than above: the heading
   carries the two as one line. */
#report-text h4 {
  align-items: center;
  color: var(--text);
  display: flex;
  font-size: 15px;
  gap: 8px;
  margin: 20px 0 6px;
}
/* An area's grade, as the warn-dot's circle in the colour of its readiness
   band - the score-* class on it sets the --score-color it is filled with. */
#report-text .report-grade {
  align-items: center;
  background: var(--score-color);
  border-radius: 50%;
  color: var(--bg);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  line-height: 1;
  width: 16px;
}
#report-text p { margin-bottom: 16px; }
#report-text ul, #report-text ol { margin-bottom: 16px; padding-left: 20px; }
#report-text li { margin-bottom: 8px; }
#report-text a { text-decoration: none; color: var(--accent); }
#report-text strong { color: var(--text); font-weight: 600; }
#report-text hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* ─── PRINT ─── */
/* Paper is not a screen: the results go out light. The palette is variables
   all the way down, so the theme is those variables read again in print
   colours; every rule above follows. What belongs to reading on screen - the
   bar, the drawer, the ambient glow - is the shell's own and is taken out
   there (see core/shell.css). */
@media print {
  :root {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface2: #F4F6FA;
    /* What a value is measured against - the bar tracks, the donut's ring.
       Light, but not so light that an area scoring nothing leaves a blank. */
    --surface3: #E4E8F0;
    --border: rgba(0,0,0,0.18);
    --border2: rgba(0,0,0,0.30);
    --text: #101319;
    --text2: #3B4557;
    --text3: #5C6880;
    --accent: #1F6C9E;

    /* The readiness ramp, darkened for white: the screen's colours are pitched
       against #0F1117 and go weak on paper - the gold worst of all, and it has
       to carry label text. Same warm-to-cool path, one step deeper. */
    --A: #C62B41;
    --B: #B85E17;
    --C: #8A6B12;
    --D: #3E8A38;
    --E: #12805C;
  }

  /* A band's colour is the whole point of the dot it fills, so it is not the
     browser's to drop when it strips backgrounds. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  @page { margin: 14mm; }

  /* Whichever position the questionnaire stands in, paper gets the results:
     printing is what the results' own action asks for. */
  #results-view { display: block !important; }
  #section-view { display: none !important; }

  /* Depth is a screen effect - on paper it prints as dirt. */
  .donut-card, .warn-card, .report-card, .disclaimer { box-shadow: none; }
  .result-donut-svg { filter: none; }

  .results-header h2 { font-size: 24px; }

  /* A card split across a page break reads as two half-cards; the report is
     longer than a page and has to break, so it is the parts inside it that are
     held together instead. */
  .donut-card, .warn-card, .disclaimer { break-inside: avoid; }
  .warn-group, .bar-row, .rt-row { break-inside: avoid; }
  .report-title, #report-text h3, #report-text h4 { break-after: avoid; }
  #report-text p, #report-text li { break-inside: avoid; }
}