/* The chrome -- colours, type, buttons, inputs, panels, header -- is the house
   style shared with aLOTofImaginArches, UnBaAct and StressRealm and lives in
   ../css/ui-kit.css, vendored byte for byte. This file is the LAYOUT of the
   survey page and the few things only this page has: the photograph pane, the
   seven-step wizard, the result tables and the printed data sheet. */

:root {
  --control-font: 12px;
  --label-font: 12px;
  --control-pad-y: 6px;
  --control-pad-x: 9px;

  /* The three outcomes keep one colour each wherever they appear: in the
     wizard, in the summary table and on the printed sheet. */
  --nf: #b34a32;
  --nf-soft: #fbede7;
  --pf: #805e16;
  --pf-soft: #fff3d8;
  --f: #1b6a45;
  --f-soft: #e8f3ec;
  --unknown: #68807e;
  --unknown-soft: #eef2f1;
}

body {
  font-size: 13px;
  line-height: 1.5;
}

/* The page fills the window and never scrolls as a whole: the panel scrolls
   inside itself so that the photograph stays put and stays as large as the
   window allows. Every ancestor of the canvas therefore needs a definite
   height, which is what the grid rows and the min-height:0 below provide. */
html,
body {
  height: 100%;
}
body {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--page);
}

body > header {
  gap: 14px;
  flex-wrap: wrap;
}
.header-note {
  flex: 1;
  margin: 0;
  font-size: 12px;
  color: var(--muted-foreground);
}
@media (max-width: 1100px) {
  .header-note {
    display: none;
  }
}

/* Three columns: the survey, the photograph being worked on, and the two
   views a camera usually cannot take. The right-hand column is split two to
   one, because a section wants the room and a single block does not. */
main {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr) 290px;
  gap: 10px;
  padding: 10px;
  min-height: 0;
}
#panel {
  grid-area: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  overflow-y: auto;
  min-height: 0;
}
#stage {
  grid-area: 1 / 2;
  display: grid;
  /* toolbar, the fold-out that asks for a measured distance, the photograph,
     the hint. The second row collapses to nothing while the fold-out is
     hidden, which is nearly always. */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
  min-height: 0;
}

#aux {
  grid-area: 1 / 3;
  display: grid;
  grid-template-rows: 2fr 1fr;
  gap: 10px;
  min-height: 0;
}
.aux-cell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  min-height: 0;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.aux-cell.active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.aux-head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}
.aux-head h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aux-head h3 {
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted-foreground);
}
.aux-head .pill {
  margin-left: auto;
}
.aux-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  overflow: hidden;
}
.aux-body .photo-thumb {
  flex: 1 1 auto;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: none;
  display: block;
  cursor: pointer;
}
.aux-body .photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: var(--radius-sm);
}
.aux-body .meta {
  margin: 0;
  flex: 0 0 auto;
}
/* The drawings take the width of their third of the cell, and are capped in
   height so that the caption under them is never pushed out of the cell. */
.aux-body .sketch-choice {
  flex: 0 1 auto;
  min-height: 0;
}
.aux-body svg.sketch {
  max-height: min(120px, 11vh);
}
.aux-foot {
  display: flex;
  gap: 4px;
}
.aux-foot > * {
  flex: 1;
}

/* The three hypotheses, when there is nothing to photograph. Choosing one is
   an assessment, so it reads as one: the chosen card carries the colour of the
   outcome it stands for, exactly as the wizard does. */
.sketch-choice {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 5px;
  min-height: 0;
}
.sketch-option {
  display: grid;
  grid-template-rows: auto auto;
  gap: 3px;
  padding: 5px 4px;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
}
.sketch-option:hover {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}
.sketch-option .badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.sketch-option[data-outcome='NF'] .badge { color: var(--nf); }
.sketch-option[data-outcome='PF'] .badge { color: var(--pf); }
.sketch-option[data-outcome='F'] .badge { color: var(--f); }
.sketch-option[data-outcome='NF'].chosen { border-color: var(--nf); background: var(--nf-soft); }
.sketch-option[data-outcome='PF'].chosen { border-color: var(--pf); background: var(--pf-soft); }
.sketch-option[data-outcome='F'].chosen { border-color: var(--f); background: var(--f-soft); }
.sketch-option.chosen {
  border-width: 2px;
  padding: 4px 3px;
}
/* The drawing keeps its own proportions and takes the width it is given: an
   svg told to be 100% of a height that is itself content-based resolves to
   nothing at all, which is how these came out as empty boxes the first time. */
/* No overflow: a drawing allowed to paint outside its box climbed over the
   caption underneath it as soon as the cell got short. The viewBoxes carry
   their own margin, so nothing is clipped by keeping it in. */
svg.sketch {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
}

/* The representative dimensions, under the drawing they belong to: a letter,
   a value that may be a range, a unit -- the row the paper's data sheets put
   under their block. */
.dims {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.dim {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 11px;
  color: var(--muted-foreground);
}
.dim > span {
  font-style: italic;
  color: var(--foreground-soft);
}
.dim input {
  width: 100%;
  min-width: 0;
  padding: 3px 4px;
  font-size: 11px;
  text-align: center;
}
.dim small {
  font-size: 9px;
  white-space: nowrap;
}

.sketch-chosen {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
}
.aux-body .sketch-chosen svg.sketch {
  max-height: min(150px, 18vh);
}

/* A button that reads as a link, for the one word that changes a choice. */
button.link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font-size: inherit;
  text-decoration: underline;
}
button.link:hover {
  background: none;
  color: var(--primary-strong);
}

.quote-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1px 4px;
  font-size: 11px;
}

.viewtabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.viewtabs button {
  border: 0;
  background: none;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--muted-foreground);
}
.viewtabs button.active {
  background: var(--surface);
  color: var(--foreground);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.viewtabs button .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
}
.viewtabs button.has-content .dot {
  background: var(--primary);
}

#panel .tabs {
  position: sticky;
  top: -14px;
  background: var(--surface);
  z-index: 2;
  padding: 14px 0 4px;
  margin-bottom: 8px;
}
#panel .pane[hidden] {
  display: none;
}
#panel section {
  margin-bottom: 18px;
}
#panel h2 {
  margin: 0 0 7px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted-foreground);
}
#panel select,
#panel input[type='text'],
#panel input[type='date'],
#panel input[type='number'],
#panel textarea {
  width: 100%;
}
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.button-row > * {
  flex: 1 1 auto;
}
.meta {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------- photo stage --- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.toolbar .tool.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.toolbar-spacer {
  flex: 1;
}
.divider-v {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--border);
}
.file-btn {
  position: relative;
  overflow: hidden;
}
.file-btn input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

/* The one thing that interrupts the photograph: the question that turns two
   clicked points into a scale. It is here rather than in a dialog because the
   answer is read off the wall in front of the surveyor, not remembered. */
.stage-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary-soft);
}
.stage-form[hidden] {
  display: none;
}
.stage-form .inline-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.stage-form .inline-field > span {
  white-space: nowrap;
}
.stage-form input[type='number'] {
  width: 90px;
}
.stage-form .unit {
  font-size: 12px;
  color: var(--muted-foreground);
}
.stage-form .meta {
  margin: 0;
}

.app-details {
  margin: 8px 0;
}
.app-details > summary {
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted-foreground);
  padding: 4px 0;
}
.app-details .check {
  margin: 2px 0;
}

#photo {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  touch-action: none;
}
#stage .hint {
  margin: 0;
}

/* ------------------------------------------------------------- the seven -- */

.steps {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 14px;
}
.steps button {
  padding: 6px 0 4px;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.4px;
}
.steps button .dot {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--border-strong);
}
.steps button.done .dot {
  background: var(--primary);
}
.steps button.unknown .dot {
  background: repeating-linear-gradient(
    90deg,
    var(--border-strong) 0 3px,
    transparent 3px 6px
  );
}
.steps button.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--foreground);
  font-weight: 700;
}

.step .eyebrow {
  margin-bottom: 2px;
}
.step h3 {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.3;
}
.step .prompt {
  margin: 0 0 8px;
  color: var(--foreground-soft);
}
.step .why {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted-foreground);
  border-left: 2px solid var(--border-strong);
  padding-left: 8px;
}

.outcomes {
  display: grid;
  gap: 8px;
}
.outcome {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
.outcome:hover {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}
.outcome-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.outcome-head strong {
  font-size: 12px;
  letter-spacing: 0.3px;
}
.outcome-head .scores {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.outcome ul {
  margin: 0;
  padding-left: 16px;
  font-size: 11.5px;
  color: var(--foreground-soft);
}
.outcome li {
  margin: 2px 0;
}
.outcome li.quantitative::marker {
  color: var(--primary);
}
.outcome .silence {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted-foreground);
  font-style: italic;
}
.outcome[data-outcome='NF'] .badge {
  color: var(--nf);
}
.outcome[data-outcome='PF'] .badge {
  color: var(--pf);
}
.outcome[data-outcome='F'] .badge {
  color: var(--f);
}
.outcome.chosen {
  border-width: 2px;
  padding: 8px 9px;
}
.outcome[data-outcome='NF'].chosen {
  border-color: var(--nf);
  background: var(--nf-soft);
}
.outcome[data-outcome='PF'].chosen {
  border-color: var(--pf);
  background: var(--pf-soft);
}
.outcome[data-outcome='F'].chosen {
  border-color: var(--f);
  background: var(--f-soft);
}
.outcome.unknown.chosen {
  border-color: var(--unknown);
  background: var(--unknown-soft);
}

.tool-box {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}
.tool-box h4 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted-foreground);
}
.tool-box .reading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0;
}
.tool-box .reading b {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.measured-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
}
.measured-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border-top: 1px solid var(--border);
}
.measured-list li button {
  margin-left: auto;
  padding: 1px 6px;
  font-size: 11px;
}

.step-nav {
  position: sticky;
  bottom: -14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.step-nav button {
  flex: 1;
}
.step-nav .meta {
  margin: 0;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- the result -- */

.result-head {
  display: grid;
  gap: 10px;
}
.result-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.result-row:last-child {
  border-bottom: 0;
}
.result-row .where {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted-foreground);
}
.result-row .index {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.result-row .index.open {
  font-size: 15px;
  color: var(--foreground-soft);
}
.grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 15px;
}
.grade-A {
  background: var(--f-soft);
  color: var(--f);
  border: 1px solid var(--f);
}
.grade-B {
  background: var(--pf-soft);
  color: var(--pf);
  border: 1px solid var(--pf);
}
.grade-C {
  background: var(--nf-soft);
  color: var(--nf);
  border: 1px solid var(--nf);
}
.grade-open {
  background: var(--unknown-soft);
  color: var(--unknown);
  border: 1px dashed var(--unknown);
  font-size: 12px;
}

svg.catbar {
  display: block;
  width: 100%;
  height: auto;
}
.catbar .band-A {
  fill: #dbeee2;
}
.catbar .band-B {
  fill: #fdf0d5;
}
.catbar .band-C {
  fill: #f8e2da;
}
.catbar .band-label {
  font: 8px Arial, sans-serif;
  fill: var(--muted-foreground);
}
.catbar .marker {
  fill: var(--foreground);
}
.catbar .interval {
  fill: none;
  stroke: var(--foreground-soft);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.catbar .value {
  font: 9px Arial, sans-serif;
  fill: var(--foreground);
}

svg.chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 4px 0 2px;
}
.chart .grid {
  stroke: var(--border);
  stroke-width: 0.6;
}
.chart .axis {
  stroke: var(--border-strong);
  stroke-width: 1;
}
.chart .tick,
.chart .axis-label {
  font: 9px Arial, sans-serif;
  fill: var(--muted-foreground);
}
.chart .band {
  fill: var(--primary-soft);
  opacity: 0.75;
}
.chart .curve {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.4;
}
.chart .codeband {
  fill: var(--pf);
  opacity: 0.16;
}
.chart .here {
  fill: none;
  stroke: var(--foreground);
  stroke-width: 1.4;
}
.chart .drop {
  stroke: var(--foreground);
  stroke-width: 0.8;
  stroke-dasharray: 3 3;
}

table.grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
table.grid-table th,
table.grid-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
table.grid-table th:first-child,
table.grid-table td:first-child {
  text-align: left;
}
table.grid-table thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted-foreground);
  font-weight: 400;
}
table.grid-table tr.total td {
  border-top: 1px solid var(--border-strong);
  font-weight: 700;
}
td .o-NF,
span.o-NF {
  color: var(--nf);
}
td .o-PF,
span.o-PF {
  color: var(--pf);
}
td .o-F,
span.o-F {
  color: var(--f);
}
td .o-none,
span.o-none {
  color: var(--unknown);
}

.panel-list {
  display: grid;
  gap: 6px;
}
.panel-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}
.panel-card.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.panel-card .name {
  font-weight: 700;
}
.panel-card .sub {
  font-size: 11px;
  color: var(--muted-foreground);
}
.panel-card .acts {
  display: flex;
  gap: 4px;
}
.panel-card .acts button {
  padding: 2px 6px;
  font-size: 11px;
}

/* ------------------------------------------------------ narrow screens --- */

/* Below three columns the section and the block go under the photograph,
   side by side, which is the only place left for them that is still beside
   the thing they belong to. */
@media (max-width: 1180px) {
  main {
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 210px;
  }
  #panel {
    grid-row: 1 / 3;
  }
  #stage {
    grid-area: 1 / 2;
  }
  #aux {
    grid-area: 2 / 2;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 40vh 200px minmax(0, 1fr);
  }
  #stage {
    grid-area: 1 / 1;
  }
  #aux {
    grid-area: 2 / 1;
  }
  #panel {
    grid-area: 3 / 1;
    grid-row: 3 / 4;
  }
  .steps {
    grid-template-columns: repeat(7, 1fr);
  }
  .two-up {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------- report ---- */

.report {
  padding: 16px;
}
.report h2 {
  font-size: 16px;
  margin: 0 0 2px;
}
.report .sheet {
  border: 1px solid var(--foreground);
  margin-bottom: 18px;
  page-break-after: always;
  break-after: page;
}
.report .sheet:last-child {
  page-break-after: auto;
  break-after: auto;
}
.report .sheet-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  border-top: 1px solid var(--foreground);
}
.report .sheet-row:first-child {
  border-top: 0;
}
.report .sheet-row > .label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  padding: 6px 2px;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-right: 1px solid var(--foreground);
}
.report .sheet-row > .body {
  padding: 8px 10px;
  min-width: 0;
}
.report .sheet-photo img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}
.report .sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.report .outcomes-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--foreground);
  max-width: 360px;
}
.report .outcomes-strip div {
  border-right: 1px solid var(--foreground);
  text-align: center;
  padding: 2px 0;
  font-size: 11px;
}
.report .outcomes-strip div:last-child {
  border-right: 0;
}
.report .outcomes-strip .h {
  background: var(--surface-muted);
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* The figures of the first sheet: the face large, the section and the block
   beside it, each with what it is and whether it was photographed or drawn. */
.report .sheet-figures {
  display: grid;
  /* The section gets more room than the block: it is the one that carries
     measurements, and a traced path is worth nothing if it cannot be read. */
  grid-template-columns: 2fr 1.4fr 1fr;
  gap: 10px;
  align-items: start;
}
.report .sheet-figures figure {
  margin: 0;
  min-width: 0;
}
.report .sheet-figures img {
  display: block;
  width: 100%;
  max-height: 250px;
  object-fit: contain;
}
.report .sheet-figures svg.sketch {
  height: 110px;
}
.report figcaption {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted-foreground);
}
.report figcaption b {
  color: var(--foreground);
}

/* The second sheet: what the application shows on screen, on paper. */
.report .results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.report .results-grid > div {
  min-width: 0;
}
.report h3 {
  margin: 0 0 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted-foreground);
}
.report .result-row {
  padding: 6px 0;
}
.report .charts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.report .code-note {
  font-size: 11px;
}
/* A table of three columns has no business being as wide as the page: on the
   data sheet the numbers belong next to each other, not at opposite edges. */
.report .sheet-row > .body > table.grid-table {
  max-width: 460px;
}

@media print {
  body {
    display: block;
    overflow: visible;
    height: auto;
    background: #ffffff;
  }
  header,
  main {
    display: none !important;
  }
  .report[hidden] {
    display: block !important;
  }
  .report {
    padding: 0;
  }
  .chart .band {
    opacity: 0.5;
  }
  /* A category is a colour before it is a letter, and a printed report that
     dropped the colour would lose the thing the eye reads first. */
  .grade,
  .status,
  .catbar,
  .chart,
  .sketch,
  .outcomes-strip div,
  .report .o-NF,
  .report .o-PF,
  .report .o-F {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}