/* ————————————————————————————————————————————————————————————
   room.css — the drawing plates for /exam-rooms.

   Loaded AFTER course.css, which this page uses for everything structural: the
   masthead, the crumb, the title block, the facts band, .prog, .ask, the footer,
   and both rooms of the light switch. Nothing in here restyles any of that.

   What IS here is one idea. These pages carry no photograph — not because a
   photograph would be worse, but because most exam rooms have never been
   photographed, and a page that goes blank on those rooms is a page that fails
   the student who needed it most. So the room is DRAWN, from an archetype, and
   the archetype is drawn once and inherited. A room nobody ever visited with a
   camera still gets a complete page.

   That decision spends the whole credibility budget on the drawing being right,
   which is why the plates are technical plates and not illustration: hairlines,
   one weight of construction line, one filled mass, one accent, and captions
   that say plainly what is measured and what is approximate.
   ———————————————————————————————————————————————————————————— */

/* ————————————————————————————————————————————————————————————
   THE SHEET, RE-RULED

   course.css prints these pages on an answer sheet — a lattice of bubbles with
   a scatter of them filled in pink. That is exactly right for a course page: the
   reader is preparing for an exam, and the paper under them is the paper that
   exam is taken on.

   It is wrong here, for two reasons. A field of small circles is BUSY, and this
   page asks you to read a long column of specifics. And the pink marks put loud
   accent ink on a page whose drawings each spend their single accent very
   deliberately — the sheet was competing with the plates for the same colour.

   So the sheet is re-ruled, not removed. This page is a set of technical
   drawings, so it is printed on the sheet a drawing lives on: a drafting grid,
   fine module with a heavier line every fourth, in two layers that behave
   differently depending on whether there is room for them.

     ::before   VERTICAL guides, full bleed, at every width.
                Vertical rules are the one direction that cannot fight running
                text — the eye reads them as column edges, never as underlines,
                so they can pass straight behind a paragraph and cost nothing.

     ::after    HORIZONTAL guides, in the OUTER MARGINS only.
                A horizontal hairline behind body copy is a second, misaligned
                leading, and the eye catches it every time. So the grid only
                completes itself in the space where nothing is being read, and
                steps back to bare verticals through the reading column.

   The result: the margins carry a true square drafting grid, the column carries
   only its guides, and below 1024px — where there is no margin — the horizontals
   simply do not exist and the page keeps its verticals rather than going blank.
   ———————————————————————————————————————————————————————————— */

/* the dawn stays: it is the brand's one light, and it is what puts the title
   block IN something. What goes is the desk falloff course.css adds at ≥1024px —
   with a grid ruling the margins, darkening them too is a second frame around
   the same column. One idea per page. */
body.sheet-plan{
  background-image:
    radial-gradient(circle 560px at 88% -130px, rgba(224,86,143,.10), rgba(224,86,143,0) 66%);
  background-repeat: no-repeat;
  background-size: 100% 620px;
}
:root[data-room="dark"] body.sheet-plan{
  background-image:
    radial-gradient(circle 560px at 88% -130px, rgba(224,86,143,.09), rgba(224,86,143,0) 66%);
}

body.sheet-plan::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M.5 0V72' fill='none' stroke='%230c0a09' stroke-opacity='.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
  /* ——— the module is the measure ———
     A grid that lands wherever it happens to land is wallpaper. This one is
     derived from the column: the sheet is 820px wide, so its edges sit at
     50% ± 410, and the module is sized so a rule falls exactly there. The page
     is laid out ON the grid rather than over it, and it stays true at every
     viewport because 820 never moves.

     Only the FINE module runs full bleed. The heavy rules are on ::after with
     the horizontals, which means nothing weighty ever crosses a line of text —
     and the heaviest rule on the page is the one that stops at the column edge,
     because that is the edge it was measured from. */
  background-position: center top;
  background-size: 68.335px 68.335px;
  /* the ruling starts under the masthead and stops before the footer, so the two
     elements that have to read as chrome never sit on it — course.css's rule */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 300px), transparent calc(100% - 140px));
          mask-image: linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 300px), transparent calc(100% - 140px));
}

body.sheet-plan::after{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='288'%3E%3Cpath d='M.5 0V288' fill='none' stroke='%230c0a09' stroke-opacity='.13'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='288'%3E%3Cpath d='M0 .5H288' fill='none' stroke='%230c0a09' stroke-opacity='.10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 .5H72' fill='none' stroke='%230c0a09' stroke-opacity='.05'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat, repeat;
  background-position: center top, center top, center top;
  background-size: 273.34px 273.34px, 273.34px 273.34px, 68.335px 68.335px;
  opacity: 1;
  /* two masks, intersected: keep out of the reading column, AND observe the same
     top-and-tail as the verticals. The horizontal stop is 412px from centre so
     that the major rule sitting on 410 is still all but fully inked — the grid's
     last line IS the column edge — and the fade finishes at 352, which is where
     the content inside the wrap's padding actually begins.
     Where `intersect` is unsupported the pair falls back to a union, showing the
     grid through the column too: quieter than what it replaced, so a harmless
     floor rather than a bug. */
  -webkit-mask-image:
    linear-gradient(to right, #000 0, #000 calc(50% - 412px), transparent calc(50% - 352px), transparent calc(50% + 352px), #000 calc(50% + 412px), #000 100%),
    linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 300px), transparent calc(100% - 140px));
          mask-image:
    linear-gradient(to right, #000 0, #000 calc(50% - 412px), transparent calc(50% - 352px), transparent calc(50% + 352px), #000 calc(50% + 412px), #000 100%),
    linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 300px), transparent calc(100% - 140px));
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* below 1024px the margin the horizontals live in does not exist. course.css
   answers the same problem by letting its marks cross the page at half strength;
   that cannot be borrowed here, because the thing crossing would be a ruled
   line under every sentence. The verticals carry the page alone. */
@media (max-width: 1023px){
  body.sheet-plan::after{ display: none; }
}

/* the blackout: paper-at-low-alpha instead of ink-at-low-alpha, exactly as the
   answer sheet inverts itself. A drawn line and a scored line, same grid. */
:root[data-room="dark"] body.sheet-plan::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M.5 0V72' fill='none' stroke='%23faf8f7' stroke-opacity='.055'/%3E%3C/svg%3E");
}
:root[data-room="dark"] body.sheet-plan::after{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='288'%3E%3Cpath d='M.5 0V288' fill='none' stroke='%23faf8f7' stroke-opacity='.15'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='288'%3E%3Cpath d='M0 .5H288' fill='none' stroke='%23faf8f7' stroke-opacity='.12'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 .5H72' fill='none' stroke='%23faf8f7' stroke-opacity='.055'/%3E%3C/svg%3E");
}

/* ——— the plate ———
   A white sheet on the printed sheet. The course pages already established that
   a white surface here needs a real contact shadow or it reads as a hole punched
   in the paper (--lift), and that in the dark a card stops being an object and
   becomes a keyline. Both hold. */
.plate{
  margin: 26px 0 0; padding: clamp(14px, 3.4vw, 26px);
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 14px; box-shadow: var(--lift);

  /* the drawing's own inks. Same convention the sheet uses: ink-at-low-alpha on
     paper, paper-at-low-alpha on ink — so a plate is lit by the one switch in
     the house and never carries a colour of its own.
       --dw-ink   the construction line: every outline is this, one weight
       --dw-mass  a filled solid (the chair's shell, the table's section)
       --dw-faint hatch, leader lines, and the walls of a room that is not the
                  subject of the drawing */
  --dw-ink:   rgba(12,10,9,.74);
  --dw-mass:  rgba(12,10,9,.085);
  --dw-faint: rgba(12,10,9,.22);
}
:root[data-room="dark"] .plate{
  --dw-ink:   rgba(250,248,247,.72);
  --dw-mass:  rgba(250,248,247,.085);
  --dw-faint: rgba(250,248,247,.22);
}

/* the plate's own title — smaller than an h2, because the section heading above
   already named the subject; this names the VIEW, which is a draughtsman's
   caption, not a heading */
.plate-t{
  margin: 0 0 4px; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700;
  font-size:1rem; line-height:1.6; color: var(--fg);
}
.plate-t .view{
  font-family:'Readex Pro', sans-serif; font-weight:300;
  font-size:.82rem; color: var(--fg-mute);
}
.plate-t .view::before{ content:'—'; margin-inline: 7px; }

/* the caption. This is where the page tells the truth about itself: what the
   drawing is built from, and which parts of it are approximate. It is the whole
   reason a drawing is allowed to stand in for a photograph, so it is never
   optional and never smaller than this. */
.plate figcaption{
  margin: 14px 0 0; padding-block: 12px 0; border-top: 1px solid var(--line);
  font-size:.82rem; line-height:1.75; color: var(--fg-mute);
}

/* ——— the drawing ———
   Fluid to the plate. viewBox does the scaling; nothing inside is sized in the
   page's units, so a plate on a phone is the same drawing, smaller. */
.dw{ display:block; width:100%; height:auto; overflow:visible; }

/* one weight of outline, everywhere, on every plate. The temptation is to vary
   it for emphasis; the discipline is not to — an even line is what makes a set
   of drawings read as one instrument, and emphasis has an accent for it. */
.dw .o{
  fill:none; stroke: var(--dw-ink); stroke-width:1.7;
  stroke-linejoin:round; stroke-linecap:round;
}
.dw .m{ fill: var(--dw-mass); stroke: var(--dw-ink); stroke-width:1.7; stroke-linejoin:round; }
.dw .f{ fill:none; stroke: var(--dw-faint); stroke-width:1.1; stroke-linecap:round; }
.dw .fd{ fill:none; stroke: var(--dw-faint); stroke-width:1.1; stroke-dasharray:5 4; }
.dw .grd{ fill:none; stroke: var(--dw-faint); stroke-width:1.1; }

/* behind the cutting plane. On the row elevation the chairs stand BEHIND the
   table, and a drawing that gives them the same line as the table in front of
   them is a drawing with no depth — which is exactly how the first pass read,
   all chair and no table. Lighter line, same fill. */
.dw .bk{ fill: var(--dw-mass); stroke: var(--dw-faint); stroke-width:1.4; stroke-linejoin:round; }

/* a seat in plan. Lighter than the furniture it sits at, because on a floor plan
   the seats are the COUNT — what they have to convey is density, and ninety of
   them drawn at the outline weight would read as a texture, not a room. */
.dw .seat{ fill: var(--dw-mass); stroke: var(--dw-faint); stroke-width:1.1; }

/* the accent. ONE per drawing — the art direction's foreground-accent rule, and
   here it earns its keep: it marks the thing the drawing was made to answer. On
   the seat and the table that is the writing surface; on the plan it is the
   board, which is the only thing that gives the room an orientation. */
.dw .acc{ fill:none; stroke: var(--accent); stroke-width:2.4; stroke-linecap:round; }
.dw .acc-f{ fill: var(--accent); }

/* leaders and labels. A leader is a hairline with a dot where it touches the
   thing it names — no arrowheads, which read as diagram furniture. */
.dw .dot{ fill: var(--dw-ink); }
.dw text{
  font-family:'Readex Pro', system-ui, sans-serif; font-weight:400;
  font-size:15px; fill: var(--fg-soft);
}
.dw .lbl{ font-size:14.5px; fill: var(--fg-soft); }
.dw .sub{ font-size:12.5px; fill: var(--fg-mute); font-weight:300; }
.dw .key{ font-size:14.5px; fill: var(--accent); font-weight:500; }

/* ——— callouts, at two widths ———
   A label inside an SVG scales with the SVG. On a 390px phone these drawings
   render at roughly half their drawn width, which turns a 14.5px label into a
   7px one — present, unreadable, and worse than absent. So the callouts have
   two forms and the drawing keeps both:

     .cd  leader line + dot + the label itself      (wide screens)
     .cm  a numbered pin on the thing, and nothing else, with the words moved
          out of the drawing into an ordered list underneath  (narrow screens)

   The pin survives the shrink because a numeral inside a disc is legible at a
   size no sentence is. Nothing is duplicated in the accessible tree: the SVG
   carries an aria-label describing the whole drawing either way, and the list
   is real text at the page's own size. */
.dw .cm{ display: none; }
.dw .pin{ fill: var(--accent); }
.dw .pinn{
  font-family:'Rubik', system-ui, sans-serif; font-weight:500;
  font-size:17px; fill:#fff;
}

.dw-legend{
  display: none; margin: 14px 0 0; padding: 0; list-style: none;
  counter-reset: dwk;
}
.dw-legend li{
  counter-increment: dwk; position: relative;
  padding-inline-start: 30px; margin-bottom: 8px;
  font-size:.9rem; line-height:1.75; color: var(--fg-soft);
}
.dw-legend li:last-child{ margin-bottom: 0; }
.dw-legend li::before{
  content: counter(dwk); position: absolute; inset-inline-start: 0; top: .28em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color:#fff;
  font-family:'Rubik', system-ui, sans-serif; font-weight:500;
  font-size:.72rem; line-height:20px; text-align: center;
}

@media (max-width: 700px){
  .dw .cd{ display: none; }
  .dw .cm{ display: block; }
  .dw-legend{ display: block; }

  /* Once the labels leave, a wide frame around a tall subject is just margin.
     The chair drawing is 2:1 because the LABELS need that width; the chair
     itself is portrait. `slice` scales the viewBox to cover the box instead of
     fitting inside it, so squaring the box up here crops the empty sides away
     and renders the chair about twice as large. Harmless on wide screens: at
     the intrinsic ratio, slice and meet resolve to the same scale. */
  .dw-crop{ aspect-ratio: 400 / 380; }
}

/* ——— the verdict ———
   One line, above the drawings, that answers the question a student actually
   asked. It is set as a definition list because that is what it is: three terms
   and their values, not a sentence pretending to be one. */
.verdict{
  margin: 34px 0 0; padding: 0; display:grid; gap:1px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--line); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.verdict > div{ background: var(--card); padding: 16px 18px 18px; }
.verdict dt{
  margin:0; font-size:.78rem; line-height:1.5; color: var(--fg-mute);
}
.verdict dd{
  margin: 6px 0 0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700;
  font-size: clamp(1rem, .9rem + .5vw, 1.2rem); line-height:1.45; color: var(--fg);
}
@media (max-width: 620px){
  .verdict{ grid-template-columns: 1fr; }
}

/* ——— the source note ———
   Sits at the foot of the page, in the register of a colophon: where the facts
   came from, when they were last looked at, and what would make them wrong. A
   page that replaces a photograph with a drawing owes the reader this. */
.source{
  margin: 46px 0 0; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 12px;
  font-size:.85rem; line-height:1.85; color: var(--fg-mute);
}
.source b{ display:block; color: var(--fg-soft); font-weight:500; margin-bottom:4px; }
.source p{ margin: 0 0 10px; }
.source p:last-child{ margin-bottom:0; }