/* =====================================================================
   report-issues.css - the styling for everything issues-screen.js emits.
   ---------------------------------------------------------------------
   ONE STYLESHEET, BOTH PAGES. validate.html (BS 7671) and validate-is.html
   (I.S. 10101) render findings with the SAME shared renderer, and each used
   to carry its own copy of these rules.

   THEY DIVERGED, AND IT WAS INVISIBLE. Two commits of visual work - the Zs
   measurement panel and the per-circuit grouping - went into validate.html
   only. The Irish page, which is the one the inspector actually uses, had
   NONE of it: 20 renderer classes with no rules at all. The markup was
   correct on both pages, and one of them could not display it.

   Nothing caught it because every check called renderIssuesHTML() and
   measured the returned STRING. The CSS lives in the page, not in the
   renderer, so "does this reach a page that can show it" was outside
   everything being measured - including the parity guard, which asserts the
   two RENDERERS agree and was quite right that they did.

   Sharing the file makes that divergence impossible rather than merely
   detectable. A guard still covers the other half - a class the renderer
   emits and NOBODY styles - in test/styleCoverage.test.js.

   VARIABLES: this file uses --card, --card-border, --red, --amber, --blue,
   --muted and --surface, plus --text with a literal fallback. Every page
   linking it must define them, which the style-coverage test asserts.
   ===================================================================== */

.issue-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 18px; margin-bottom: 8px; border-left: 3px solid transparent; }
.issue-card.Critical { border-left-color: var(--red); }
.issue-card.Required { border-left-color: var(--amber); }
.issue-card.Advisory { border-left-color: var(--blue); }
.issue-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.severity-pill { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; margin-top: 2px; }
.severity-pill.Critical { background: rgba(192,57,43,0.1); color: var(--red); }
.severity-pill.Required { background: rgba(212,134,10,0.1); color: var(--amber); }
.severity-pill.Advisory { background: rgba(46,117,182,0.1); color: var(--blue); }
/* INFO - quieter than Advisory, and deliberately not a warning colour. It is a
   recorded reading, not a problem: an origin Ze that is evidence the value was
   taken and considered. It counts toward no total. */
.severity-pill.Info { background: var(--surface); color: var(--muted); border: 1px solid var(--card-border); }
.issue-card.Info, .issue-bullet.Info { border-left-color: var(--card-border); opacity: .88; }
.issue-title { font-size: 14px; font-weight: 600; flex: 1; }
.issue-rule { font-size: 11px; color: var(--muted); background: var(--surface); padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }
.issue-detail { font-size: 13px; color: #4a5568; line-height: 1.5; margin-bottom: 6px; }
.issue-location { font-size: 12px; color: var(--muted); }


.issue-group { margin-bottom: 20px; }
.issue-group-header { font-size: 14px; font-weight: 700; color: var(--text, #1a202c); padding: 8px 4px; margin-bottom: 6px; border-bottom: 2px solid var(--card-border); display: flex; align-items: center; gap: 8px; }
.issue-group-header.empty { opacity: .55; border-bottom-style: dashed; }
.issue-group-count { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface); padding: 2px 8px; border-radius: 10px; }
.issue-board-header { font-size: 12.5px; font-weight: 700; color: var(--text, #1a202c); padding: 6px 4px 4px 14px; margin: 10px 0 4px; border-bottom: 1px solid var(--card-border); display: flex; align-items: center; gap: 8px; }
.issue-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 4px 4px 10px 14px; }
.issue-group-warning { font-size: 12px; color: #c53030; padding: 4px 4px 8px 14px; }
.issue-cell { font-size: 11px; color: var(--muted); background: var(--surface); padding: 2px 6px; border-radius: 4px; flex-shrink: 0; font-family: monospace; }
.issue-cell-ref { opacity: .7; }
/* ---- Per-circuit grouping -------------------------------------------
   One entry per circuit, its issues as bullets beneath. The heading shows
   the WORST severity; every bullet carries its own pill, because a reader
   needs to know which of three is the Critical one.

   The TOTALS at the top are unaffected - they are issue counts, computed at
   the report boundary before any of this runs. Three issues on one circuit
   contribute three. */
.circuit-group { margin: 10px 0 14px; }
.circuit-head { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 12px; border-left: 3px solid var(--card-border); }
.circuit-head.header { border-left-style: dotted; }
.circuit-label { font-size: 13.5px; font-weight: 700; color: var(--text, #1a202c); }
.circuit-head .severity-pill { margin-left: auto; }
.issue-bullets { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 3px solid var(--card-border); }
.issue-bullet { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 12px; margin: 0 0 6px 0; border-left: 3px solid transparent; }
.issue-bullet.Critical { border-left-color: var(--red); }
.issue-bullet.Required { border-left-color: var(--amber); }
.issue-bullet.Advisory { border-left-color: var(--blue); }
.issue-bullet-top { display: flex; align-items: flex-start; gap: 10px; }
.issue-bullet-text { font-size: 13.5px; flex: 1; }

/* ---- Engine Status: NOT a certificate section ------------------------
   It reports whether the VALIDATION can be trusted - a module that failed
   to load, a degraded AI layer, an extraction fault - and is read before
   any finding about the installation. Marked apart from the seven numbered
   sections so it does not read as the first of them.

   Five IE modules never loaded for six weeks and every report in that
   period read clean. This band is what that cost bought. */
.issue-group-header.engine { background: var(--text, #1a202c); color: #fff; border-radius: 8px; padding: 8px 12px; border-bottom: none; }
.issue-group-header.engine .issue-group-count { color: rgba(255,255,255,0.72); }
.issue-group.engine { margin-bottom: 18px; padding-bottom: 6px; border-bottom: 2px solid var(--card-border); }

/* ---- Zs measurement strip -------------------------------------------
   THREE STATES, DISTINGUISHED STRUCTURALLY RATHER THAN BY TONE.

   A quieter version of the same row reads as "less important", which is
   backwards: a circuit nobody could check is more dangerous than one that
   merely exceeded, because nothing checked it. So the states differ in
   SHAPE - border style, fill, and whether a slot holds a figure or a ruled
   blank - and colour is the last signal, never the only one. The printed
   PDF is mono and must still separate them.

   The state class comes from zsPanel() in report-sections.js. This
   stylesheet never decides which state a finding is in. */
.zs-strip { margin-top: 10px; padding: 8px 12px; border-radius: 6px; font-size: 12px; }
.zs-head { font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 4px; }
.zs-slots { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.zs-slot { display: inline-flex; align-items: baseline; gap: 6px; }
.zs-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.zs-value { font-family: monospace; font-size: 13px; font-weight: 700; }
.zs-verdict { margin-top: 5px; font-size: 11.5px; font-weight: 700; }
.zs-caveat { margin-top: 3px; font-size: 11px; color: var(--muted); }

/* GRADED AND FAILED - both slots carry a figure. Solid, filled, full weight. */
.zs-strip.zs-EXCEEDED { background: rgba(192,57,43,0.07); border: 1px solid rgba(192,57,43,0.35); }
.zs-strip.zs-EXCEEDED .zs-verdict { color: var(--red); }

/* A READING NOBODY COULD CHECK - solid and filled like an exceedance,
   separated from it by the ruled blank standing where the limit should be
   and by the verdict wording, not by being dimmer. */
.zs-strip.zs-UNVALIDATED { background: rgba(212,134,10,0.07); border: 1px solid rgba(212,134,10,0.45); }
.zs-strip.zs-UNVALIDATED .zs-verdict { color: var(--amber); }

/* NO READING TAKEN - dashed and unfilled. There is nothing to put in it,
   and the border says so before a word is read. */
.zs-strip.zs-INCOMPLETE { background: none; border: 1px dashed rgba(212,134,10,0.65); }
.zs-strip.zs-INCOMPLETE .zs-verdict { color: var(--amber); }
.zs-strip.zs-INCOMPLETE .zs-value { font-weight: 400; }

/* ---- Suggested observation ------------------------------------------
   THE ONE PIECE OF OUTPUT MEANT TO BE COPIED VERBATIM onto a certificate,
   and until now it was the tail of the finding's own sentence behind a
   `  ||  ` separator - 392 characters on one line, impossible to select as
   a unit.

   So it is a BLOCK, not a run of text: its own surface, its own heading,
   and the copyable text in one element with a button beside it. The
   engine's own sentence stays in the bullet above and does not travel.

   Deliberately quieter than the finding it hangs off. It is a suggestion -
   the inspector decides - and a block louder than the defect would invert
   that. */
.sug-box { margin-top: 10px; background: var(--surface); border: 1px solid var(--card-border); border-left: 3px solid var(--card-border); border-radius: 6px; padding: 8px 12px; }
.sug-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.sug-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--muted); }
.sug-code { font-size: 10px; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--card-border); border-radius: 4px; padding: 1px 6px; font-family: monospace; }
.sug-copy { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--card-border); border-radius: 4px; padding: 3px 10px; cursor: pointer; }
.sug-copy:hover { color: var(--text, #1a202c); }
.sug-text { font-size: 12.5px; line-height: 1.5; color: var(--text, #1a202c); }
/* One line per line of the observation. The template's Location and
   Regulation lines were being flattened into the sentence by a
   `.replace(/\n/g, ' ')` at emission; they are structure, and they print
   as structure. */
.sug-line + .sug-line { margin-top: 2px; color: var(--muted); font-size: 12px; }

.no-issues { text-align: center; padding: 48px; color: var(--muted); }