/* Trace the Energy Source. Phone first: one column, widening on desktop.
   Colours and fonts are imocs-safety.com's; only the dial is an instrument. */

:root {
  --ink: #0b1217; --steel: #1f2a32; --steel-muted: #606e78;
  --blue: #0067b9; --blue-dark: #004f8f; --paper: #f3f1eb; --white: #fff;
  --signal: #f0b429; --line-dark: #0b121729;
  /* The focus ring, in the site's blue: 5.1:1 on the paper, 5.8:1 on
     white and 3.3:1 on ink (a pressed toggle beside the focused one), so
     it stands out from everything it is drawn over (WCAG 1.4.11: 3:1). */
  --focus: #0067b9;
  /* The person's own high-energy line on the dial: 4.8:1 on --ink, 3.9:1
     on white paper. */
  --red: #e5484d;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
}

#app {
  box-sizing: content-box;
  max-width: 34rem;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
}

p { margin: 0 0 16px; }

.note { color: var(--steel-muted); font-size: 0.9375rem; }

/* Buttons */

button {
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 0;
  background: var(--blue);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
button:hover { background: var(--blue-dark); }
/* Not available yet (Next until its screen is answered), and never faded
   (R36): the paper inside a dashed grey edge, the words grey. Words 4.65:1
   on the paper, the edge 4.65:1 against the page. #app lifts it over every
   kind of button's own colours, hovered or not. */
#app button:disabled {
  border: 2px dashed var(--steel-muted);
  background: var(--paper);
  color: var(--steel-muted);
  cursor: not-allowed;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* A screen's heading takes focus only so a screen reader starts at the
   new screen (app.js); it is not a control, so it shows no ring. */
h1[tabindex="-1"]:focus { outline: none; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.actions button { flex: 1 1 12rem; }

.nav { display: flex; gap: 12px; margin-top: 24px; }
.nav button { min-width: 7rem; }
.nav [data-nav="next"] { margin-left: auto; }

/* Answers: white until picked, ink once picked. */

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.choice {
  min-height: 56px;
  border: 2px solid var(--line-dark);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
}
.choice:hover { background: var(--white); border-color: var(--blue); }
.choice[aria-pressed="true"],
.choice[aria-pressed="true"]:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Hazard tiles: two across, five from 720px. */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}
@media (min-width: 720px) {
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 4px;
  font-size: 1.0625rem;
}
.tile .icon { width: 40px; height: 40px; flex: none; }

/* The dial: a steel housing round an ink face, white scale, signal needle,
   and the readout in a recessed strip under the arc. The strip is the
   face's own background, placed where dial.js sets the readout (y 258 of
   a 270-high viewBox), so it scales with the face. */

[data-dial] {
  margin: 0 0 24px;
  padding: 12px;
  border-radius: 24px;
  background: var(--steel);
  box-shadow: inset 0 1px 0 #ffffff1f, 0 6px 18px #0b121740;
}

.dial {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  /* Two layers make the strip's bevel: dark top and left, light bottom
     and right. */
  background:
    linear-gradient(to right, #000 0 2px, transparent 2px calc(100% - 1px), #3a4853 calc(100% - 1px))
      50% 99% / 74% 9.6% no-repeat,
    linear-gradient(#000 0 2px, #05090c 2px calc(100% - 1px), #3a4853 calc(100% - 1px))
      50% 99% / 74% 9.6% no-repeat,
    var(--ink);
}

/* Outer ring, the unit picked: rim ticks and labels in the display face.
   Inner ring, the other unit: its own finer ticks and smaller labels in
   the body face. The captions under the hub follow the same pairing. */
.dial-arc { stroke: var(--steel-muted); stroke-width: 2; }
.dial-tick-major { stroke: var(--white); stroke-width: 2; }
.dial-tick-minor { stroke: #ffffff99; stroke-width: 1; }
.dial-label { fill: var(--white); font-size: 14px; }
.dial-inner-major { stroke: #ffffffd9; stroke-width: 1.5; }
.dial-inner-minor { stroke: #ffffff73; stroke-width: 1; }
.dial-inner-label { fill: #ffffffe6; font-family: var(--font-body); font-weight: 400; font-size: 11px; }
.dial-unit { fill: #ffffffbf; font-size: 13px; letter-spacing: 0.04em; }
.dial-inner-unit { fill: #ffffffa6; font-family: var(--font-body); font-weight: 400; font-size: 10.5px; }
/* The person's high-energy line: the rim red from it to the peg, and the
   ticks of both rings inside that span red too (R50). The labels and the
   needle keep their own colours. */
.dial-band { stroke: var(--red); stroke-width: 6; }
.dial-tick.in-band { stroke: var(--red); }
.dial-needle { stroke: var(--signal); }
.dial-hub { fill: var(--signal); }
.dial-readout, .dial-count { fill: var(--white); font-size: 15px; letter-spacing: 0.03em; }
/* While the needle swings (dial.js), a copy counts the reading it passes
   and the readout itself waits underneath, unseen. */
.dial-readout.is-counting { visibility: hidden; }

[data-screen="opening"] h1 { font-size: 2.5rem; }

/* Energy screen. On a phone the dial, the switches and the boxes share
   one screen; the dial is capped so they still do on a short desktop. */

[data-screen="energy"] [data-dial] { max-width: 26rem; margin-left: auto; margin-right: auto; }

.switch { display: flex; flex-wrap: wrap; margin: 0 0 16px; }
.toggle {
  flex: 1 1 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid var(--line-dark);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
}
.toggle + .toggle { border-left-width: 0; }
.toggle:hover { background: var(--white); border-color: var(--blue); }
.toggle[aria-pressed="true"],
.toggle[aria-pressed="true"]:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.field label { display: block; margin: 0 0 4px; font-weight: 600; }
.field-row { display: flex; align-items: center; gap: 8px; }
.field-row input { flex: 1 1 auto; }
.unit { flex: none; min-width: 2.5rem; color: var(--steel); }

input[type="number"],
input[type="text"],
input[type="date"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 2px solid var(--line-dark);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
}
input[type="number"]:hover,
input[type="text"]:hover,
input[type="date"]:hover { border-color: var(--blue); }

/* The optional note under Plan / Chance: a box that grows with the person
   (resize), and inside it, while empty, an italic grey line (Trevor,
   2026-11-12). The grey is the page's own muted steel: 5.3:1 on white. */
.note-field { margin: 0 0 16px; }
textarea {
  display: block;
  width: 100%;
  min-height: 88px;
  padding: 8px 10px;
  border: 2px solid var(--line-dark);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  resize: vertical;
}
textarea:hover { border-color: var(--blue); }
textarea::placeholder { color: var(--steel-muted); font-style: italic; opacity: 1; }

/* The optional high-energy line box: one box, not stretched across a
   desktop column. */
.line-field { max-width: 20rem; margin: 0 0 16px; }

.input-note { color: var(--steel); font-weight: 600; }
.comparison { color: var(--steel); text-wrap: pretty; }
.comparison:empty { margin: 0; }

button.secondary {
  margin: 0 0 8px;
  border: 2px solid var(--blue);
  background: var(--white);
  color: var(--blue);
}
button.secondary:hover { background: var(--white); border-color: var(--blue-dark); color: var(--blue-dark); }
/* "I don't have the numbers" sits under the calculator's boxes (R49), 16px
   below them and set further off from what follows, so it reads as theirs. */
[data-screen="energy"] [data-action="no-numbers"] { margin-bottom: 24px; }

.measured { margin: 0; padding: 0; border: 0; min-width: 0; }
.measured legend { margin: 0 0 12px; padding: 0; font-weight: 600; font-size: 1.125rem; }

.help { color: var(--steel); }
.help strong { color: var(--ink); }

/* The sample tag, at the top of every screen while the sample runs. On
   the page it follows the heading (screens.js), so a screen reader hears
   the heading first; it is drawn above everything else, in room the
   screen keeps clear for it: its own height and a 12px gap. */

.screen.is-sample { position: relative; padding-top: calc(0.9375rem * 1.5 + 16px); }
.sample-tag {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 2px 10px;
  background: var(--signal);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Screen 6, the record. */

[data-screen="record"] { position: relative; }

.summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  /* A measured value typed with no spaces still wraps on a phone. */
  overflow-wrap: anywhere;
}

/* The ten tiles again, smaller and not pressable: four across on a phone,
   five from 480px. The chosen one is filled ink. */
.record-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 480px) {
  .record-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.record-tiles .tile {
  gap: 4px;
  padding: 8px 2px;
  border: 2px solid var(--line-dark);
  background: var(--white);
  color: var(--steel);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
}
.record-tiles .icon { width: 28px; height: 28px; }
.record-tiles .tile.is-chosen { border-color: var(--ink); background: var(--ink); color: var(--white); }
/* Under 360px the longest word, Temperature, is wider than its tile at
   15px; at 12.5px every word stays whole. */
@media (max-width: 359px) {
  .record-tiles .tile { font-size: 0.78125rem; }
}

[data-screen="record"] [data-dial] { max-width: 22rem; margin-left: auto; margin-right: auto; }

/* The pathway: one line, a mark per answer, the dot in --signal like the
   needle. A node's words show grey (--steel-muted, 4.6:1 on the paper)
   until the dot reaches it, then in their own colours. Sizes are set on
   the drawing itself; the vertical form is capped so its words stay near
   body size. */
.pathway { display: block; width: 100%; height: auto; margin: 8px 0 24px; overflow: visible; }
.pathway[data-orientation="vertical"] { max-width: 22rem; }
.path-line { fill: none; stroke: var(--steel-muted); stroke-width: 2; }
.path-mark { fill: var(--paper); stroke: var(--steel-muted); stroke-width: 2; transition: fill 200ms, stroke 200ms; }
.path-node text { transition: fill 200ms; }
.path-node:not(.is-lit) text { fill: var(--steel-muted); }
.path-node.is-lit .path-mark { fill: var(--blue); stroke: var(--blue); }
.path-label { fill: var(--steel); font-family: var(--font-body); }
.path-answer { fill: var(--ink); font-family: var(--font-display); font-weight: 600; }
.path-dot { fill: var(--signal); stroke: var(--ink); stroke-width: 2; }

.record-fields { margin-top: 8px; }

/* The person's note on plan or chance, under the pathway, as typed. */
.plan-note { margin: 0 0 16px; white-space: pre-wrap; overflow-wrap: anywhere; }

.ready-line { font-weight: 600; }
/* Empty, it takes no room but stays on the page: a screen reader is then
   already listening to it (aria-live) when the line arrives. */
.ready-line:empty { margin: 0; }

.actions button.secondary { margin: 0; }

/* What Start new, or Try a sample incident, asks before it clears or
   replaces a record of your own, in the row's place: the line, then Yes
   (blue) and Cancel (white, outlined) in a row of their own. Nothing here
   sets display: the print rules hide it by this class. */
.confirm {
  margin: 0 0 16px;
  padding: 16px;
  border: 2px solid var(--ink);
  background: var(--white);
}
.confirm-line { margin: 0 0 12px; font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.confirm .actions { margin: 0; }

/* Print is ready: three pulses of --signal. Back from the Start new
   question by Cancel or Escape it stays still (record.js, R33). */
[data-action="print"].is-ready { animation: ready-pulse 700ms ease-in-out 3; }
[data-action="print"].is-ready.is-settled { animation: none; }
@keyframes ready-pulse {
  50% { box-shadow: 0 0 0 6px var(--signal); }
}

.record-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  text-align: center;
}
.record-footer img { display: block; width: 200px; max-width: 100%; height: auto; margin: 0 auto 8px; }
.credit { margin: 0; font-size: 11px; color: var(--steel-muted); }

/* The SAMPLE mark, stamped at the top right of a sample's record. */
.sample-mark {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0 8px;
  border: 3px solid var(--steel-muted);
  color: var(--steel-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  transform: rotate(-6deg);
  pointer-events: none;
}

/* On paper only: the product name and the Date / Site lines. */
.print-only { display: none; }

/* Read out by screen readers, never seen. */
.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;
}

.not-set-up { margin: 24px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The printout: one page, ink on white, in this order: product name,
   summary, date and site, the ten tiles, the dial, the comparison, the
   pathway across the page, the footer (the logo, then the credit last).
   What is only for the screen goes: every button, the Start new question,
   the boxes (their values print as the Date / Site lines), the ready
   line, the sample tag (the SAMPLE mark stays). It reads without
   background graphics: only the chosen tile and the needle ask for exact
   colour. Nothing prints part way through the finale: record.js finishes
   it on beforeprint, and the pathway below prints as it ends whatever
   its class. */

@media print {
  @page { size: auto; margin: 12mm; }

  html, body { background: var(--white); color: var(--ink); }
  #app { max-width: none; padding: 0; }

  button, .actions, .confirm, .nav, .record-fields, .ready-line, .sample-tag,
  [data-screen="record"] h1 { display: none; }
  .print-only { display: block; }
  .screen.is-sample { padding-top: 0; }

  .print-name {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.1;
  }
  .summary { margin: 0 0 6px; }
  /* Date, Site and, when set, the high-energy line: three lines at 20 px
     and a 6 px gap keep the longest record on one Letter page. */
  .print-details { margin: 0 0 6px; }
  .print-line { margin: 0; line-height: 1.25; }
  .print-label { font-weight: 600; }

  .record-tiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0 0 12px;
    break-inside: avoid;
  }
  .record-tiles .tile {
    padding: 5px 2px;
    border: 1px solid var(--steel-muted);
    background: var(--white);
    color: var(--steel);
  }
  .record-tiles .icon { width: 24px; height: 24px; }
  .record-tiles .tile.is-chosen {
    border: 3px solid var(--ink);
    background: var(--ink);
    color: var(--white);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The dial: the housing an ink outline, the face white, both rings,
     the needle and the readout ink. */
  [data-screen="record"] [data-dial] {
    max-width: 16rem;
    margin: 0 auto 10px;
    padding: 6px;
    border: 2px solid var(--ink);
    border-radius: 18px;
    background: var(--white);
    box-shadow: none;
    break-inside: avoid;
  }
  .dial { background: var(--white); color: var(--ink); }
  .dial-arc, .dial-tick-major, .dial-tick-minor, .dial-inner-major, .dial-inner-minor { stroke: var(--ink); }
  .dial-label, .dial-inner-label, .dial-unit, .dial-inner-unit, .dial-readout { fill: var(--ink); }
  .dial-readout { font-weight: 600; }
  /* Printing ends any count first (record.js); should one still show, the
     readout prints and the counting copy does not. */
  .dial-readout.is-counting { visibility: visible; }
  .dial-count { display: none; }
  .dial-needle {
    stroke: var(--ink);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* The line's band prints red (grey on a black-and-white printer), and
     so do the ticks of both rings inside its span. */
  .dial-band {
    stroke: var(--red);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .dial-tick.in-band { stroke: var(--red); }
  .dial-hub { fill: var(--ink); }

  .comparison { margin: 0 0 8px; }

  .pathway { max-width: 34rem; margin: 2px auto 10px; break-inside: avoid; }
  .path-mark, .path-node text { transition: none; }
  .path-node:not(.is-lit) .path-label { fill: var(--steel); }
  .path-node:not(.is-lit) .path-answer { fill: var(--ink); }
  .path-node .path-mark { fill: var(--blue); stroke: var(--blue); }

  /* The note may be long: it flows on, onto a second page if it must
     (Trevor, 2026-11-12). */
  .plan-note { margin: 0 0 10px; }

  .record-footer { margin-top: 10px; padding-top: 8px; break-inside: avoid; }
  .record-footer img { width: 100px; margin-bottom: 4px; }
}