/* ---------------------------------------------------------------------------
   Roofer sub-brand: "the shop drawing".
   Declared in docs/roofers-DESIGN.md. Scoped to /roofers and /roofers/scorecard.

   One opinionated decision: the page is a technical elevation of a roof.
   Hairline geometry, measurement ticks, mono annotations, tabular figures.
   Cyan is the only accent and it only ever draws structure or the primary action.
   --------------------------------------------------------------------------- */

:root {
  --rf-line: rgba(0, 212, 255, 0.55);
  --rf-line-ghost: rgba(0, 212, 255, 0.16);
  --rf-hair: rgba(255, 255, 255, 0.08);
}

/* --- Grain. The single texture, over everything, barely there. -------------- */
body.rf::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Aurora wash. Exactly two on a page: the hero, and the result number. --- */
.rf-aurora {
  position: absolute;
  left: 0;
  right: 0;
  top: -180px;
  height: 680px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 46% at 22% 4%, rgba(0, 212, 255, 0.15), transparent 70%),
    radial-gradient(42% 42% at 80% 16%, rgba(0, 212, 255, 0.08), transparent 72%),
    radial-gradient(72% 38% at 52% -8%, rgba(88, 120, 255, 0.10), transparent 74%);
}
.rf-aurora--tight { top: -140px; height: 420px; }

/* ---------------------------------------------------------------------------
   The roof. Generated by scripts/gen-roof-elevation.py.

   Composition: the gable end faces the viewer so the peak reads immediately,
   with the long roof plane receding off the right edge. Value carries the form.
   One light source: the roof plane is lit, the gable wall is in shade, snow is
   the brightest mass, and the gable window is the single brightest thing here.

   The window is the one deliberate warm note in an otherwise cyan-only palette.
   It is semantic, not decorative: it says somebody is home under that roof, and
   it is what makes the image sell warmth rather than engineering. Declared in
   docs/roofers-DESIGN.md.
   --------------------------------------------------------------------------- */
.rf-roof { display: block; width: 100%; height: auto; overflow: hidden; }
.rf-roof g { fill: none; stroke: none; }

/* --- Sky ------------------------------------------------------------------ */
.rf-roof .rr-sky circle { fill: #a8ecff; opacity: 0.32; }
.rf-roof .rr-aur   { fill: url(#rrAur); }
.rf-roof .rr-smoke { fill: none; stroke: #cfefff; stroke-width: 9; stroke-linecap: round; }
.rf-roof .rr-mtn-far  { fill: #101f31; stroke: #3d92b0; stroke-width: 1; stroke-opacity: 0.4; }
.rf-roof .rr-mtn-near { fill: #0a1622; stroke: #3d92b0; stroke-width: 1.2; stroke-opacity: 0.5; }
.rf-roof .rr-mtn-cap  { fill: #cdf3ff; opacity: 0.2; }

/* --- The gable wall: the shade plane -------------------------------------- */
.rf-roof .rr-wall {
  fill: url(#rrWall);
  stroke: #6fd8ff; stroke-width: 2.2; stroke-opacity: 0.42; stroke-linejoin: round;
}
.rf-roof .rr-siding    { stroke: #6fd8ff; stroke-width: 1; stroke-opacity: 0.13; }
.rf-roof .rr-louvrebox { fill: #071522; stroke: #8fe9ff; stroke-width: 1.5; stroke-opacity: 0.45; stroke-linejoin: round; }
.rf-roof .rr-louvre    { stroke: #8fe9ff; stroke-width: 1.2; stroke-opacity: 0.3; }
.rf-roof .rr-trim      { fill: #16344a; stroke: #a9f0ff; stroke-width: 1.2; stroke-opacity: 0.5; }

/* The focal point. Nothing else in the frame is this bright, and nothing else
   is warm. */
.rf-roof .rr-win {
  fill: url(#rrWin);
  stroke: #ffe9b8; stroke-width: 1.6; stroke-opacity: 0.85;
  filter: drop-shadow(0 0 22px rgba(255, 190, 110, 0.5));
}
.rf-roof .rr-win2 { fill: #ffc46b; fill-opacity: 0.42; stroke: #ffe9b8; stroke-width: 1.2; stroke-opacity: 0.5; }
.rf-roof .rr-mull { stroke: #2a1a08; stroke-width: 2; stroke-opacity: 0.75; }

/* --- The roof plane: the lit plane, and the subject ----------------------- */
.rf-roof .rr-slope {
  fill: url(#rrSlope);
  stroke: #8fe9ff; stroke-width: 2.6; stroke-opacity: 0.6; stroke-linejoin: round;
}
/* Tabs are cut as dark grooves, not drawn as light lines, so the texture reads
   as depth in the surface rather than as pattern on top of it. */
.rf-roof .rr-tab    { stroke: #061320; stroke-width: 1.2; stroke-opacity: 0.6; }
.rf-roof .rr-course { stroke: #9beeff; stroke-width: 1; stroke-opacity: 0.15; }

/* --- Roof edges. These define the silhouette, so they carry the most weight. */
.rf-roof .rr-barge  { fill: #1b3f59; stroke: #b5f3ff; stroke-width: 2; stroke-opacity: 0.62; stroke-linejoin: round; }
.rf-roof .rr-cap    { fill: #22506e; stroke: #c3f6ff; stroke-width: 2; stroke-opacity: 0.66; stroke-linejoin: round; }
.rf-roof .rr-captick { stroke: #c3f6ff; stroke-width: 1; stroke-opacity: 0.22; }
.rf-roof .rr-fascia { fill: #12293b; stroke: #8fe9ff; stroke-width: 1.7; stroke-opacity: 0.5; stroke-linejoin: round; }
.rf-roof .rr-gutter { fill: #08151f; stroke: #8fe9ff; stroke-width: 1.4; stroke-opacity: 0.38; stroke-linejoin: round; }

/* --- Solids: two faces each, so every object has a light side ------------- */
.rf-roof .rr-lit   { fill: #15334a; stroke: #a9f0ff; stroke-width: 1.7; stroke-opacity: 0.6; stroke-linejoin: round; }
.rf-roof .rr-shade { fill: #071320; stroke: #6fd8ff; stroke-width: 1.6; stroke-opacity: 0.4; stroke-linejoin: round; }
.rf-roof .rr-top   { fill: #24485f; stroke: #b5f3ff; stroke-width: 1.5; stroke-opacity: 0.55; stroke-linejoin: round; }
.rf-roof .rr-brick { stroke: #a9f0ff; stroke-width: 0.9; stroke-opacity: 0.16; }
.rf-roof .rr-flash { fill: #1a3d51; stroke: #b5f3ff; stroke-width: 1.3; stroke-opacity: 0.5; stroke-linejoin: round; }
.rf-roof .rr-valley { stroke: #a9f0ff; stroke-width: 1.5; stroke-opacity: 0.3; }
.rf-roof .rr-edge  { stroke: #cdf4ff; stroke-width: 1.6; stroke-opacity: 0.55; stroke-linecap: round; }

/* --- Weather. Snow is the brightest mass on the roof. --------------------- */
.rf-roof .rr-snow { fill: url(#rrSnow); stroke: #f2fdff; stroke-width: 1.2; stroke-opacity: 0.4; stroke-linejoin: round; }
.rf-roof .rr-ice  { fill: #cdf4ff; fill-opacity: 0.5; stroke: #f2fdff; stroke-width: 0.7; stroke-opacity: 0.32; }

/* Motion: the drawing resolves once, back to front. Opacity only. A transform
   on an SVG <g> scales about the user-space origin, which shears the whole
   illustration, so it is not used here. */
@media (prefers-reduced-motion: no-preference) {
  .rf-roof > g { animation: rf-fade 700ms ease-out both; }
  .rf-roof > g:nth-child(-n + 5)  { animation-delay: 0ms; }
  .rf-roof > g:nth-child(n + 6)   { animation-delay: 150ms; }
  .rf-roof > g:nth-child(n + 14)  { animation-delay: 300ms; }
}
@keyframes rf-fade { from { opacity: 0; } }

/* --- The ridge. Kept as the mid-page divider. ------------------------------ */
.rf-ridge {
  display: block;
  width: 100%;
  height: auto;
  color: #00d4ff;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.rf-ridge .pitch {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}
.rf-ridge .pitch--ghost { opacity: 0.16; }
.rf-ridge .dim {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.3;
  vector-effect: non-scaling-stroke;
}
.rf-ridge .dim--dash { stroke-dasharray: 3 5; opacity: 0.22; }
.rf-ridge .tick { stroke: currentColor; stroke-width: 1; opacity: 0.35; vector-effect: non-scaling-stroke; }
.rf-ridge text {
  fill: currentColor;
  opacity: 0.55;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
}

/* pathLength="1" on every drawn path, so one dash rule fits any geometry. */
@media (prefers-reduced-motion: no-preference) {
  .rf-ridge .pitch {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rf-draw 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  .rf-ridge .pitch--ghost { animation-delay: 120ms; }
}
@keyframes rf-draw { to { stroke-dashoffset: 0; } }

/* --- Drawing-sheet annotation gutter. ------------------------------------- */
@media (min-width: 1024px) {
  .rf-sheet { display: grid; grid-template-columns: 132px 1fr; gap: 3rem; align-items: start; }
  .rf-sheet > .rf-kicker { position: sticky; top: 104px; }
}
.rf-kicker { border-top: 1px solid var(--rf-hair); padding-top: 0.75rem; }

/* --- The staircase. The four stages ascend; it is the argument, drawn. ----- */
@media (min-width: 1024px) {
  .rf-stair > *:nth-child(2) { margin-left: 2.5rem; }
  .rf-stair > *:nth-child(3) { margin-left: 5rem; }
  .rf-stair > *:nth-child(4) { margin-left: 7.5rem; }
}

/* --- Figures. Every number on the page is tabular. ------------------------ */
.rf-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* --- Segmented progress: a level gauge, not a bar. ------------------------ */
.rf-ticks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.rf-tick {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 200ms ease-out;
}
.rf-tick[data-on="1"] { background: #00d4ff; }

/* --- Focus. Visible on every interactive element, 3:1 against the ground. -- */
.rf a:focus-visible,
.rf button:focus-visible,
.rf input:focus-visible,
.rf summary:focus-visible {
  outline: 2px solid #00d4ff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Answer options: the hit target is the whole row, and it reads as one. - */
.rf-opt { transition: border-color 160ms ease-out, background-color 160ms ease-out, transform 160ms ease-out; }
@media (prefers-reduced-motion: no-preference) {
  .rf-opt:hover { transform: translateX(3px); }
}

/* --- Result entrance. One moment, once. ----------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rf-rise { animation: rf-rise 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .rf-rise--2 { animation-delay: 90ms; }
  .rf-rise--3 { animation-delay: 180ms; }
}
@keyframes rf-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}