/* Submission viewer */

.sv-job { font-family: var(--wo-font-mono); font-size: 12px; }

.sv-meta { display: flex; gap: 26px; flex-wrap: wrap; background: #fff; border: 1px solid var(--wo-border);
           border-radius: 6px; padding: 11px 16px; margin: 14px 0 10px; font-size: 13px; }
.sv-meta > div    { display: flex; flex-direction: column; gap: 2px; }
.sv-meta span     { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #98A1AC; font-weight: 600; }
.sv-meta code     { font-family: var(--wo-font-mono); font-size: 12px; color: #56636F; }

.sv-note { background: var(--wo-subtle); border-left: 3px solid var(--wo-blue); padding: 8px 12px;
           border-radius: 3px; font-size: 12.5px; color: #46586E; margin-bottom: 16px; }

.sv-group      { margin-bottom: 18px; }
.sv-group-head { font-size: 13px; font-weight: 600; color: #14417F; background: #EAF1FC;
                 border-radius: 4px; padding: 6px 12px; margin: 0 0 6px; }

.sv-table    { width: 100%; border-collapse: collapse; background: #fff;
               border: 1px solid var(--wo-border); border-radius: 6px; overflow: hidden; }
.sv-table th { text-align: left; font-weight: 400; color: #707A86; width: 38%;
               padding: 7px 14px; border-bottom: 1px solid #F1F3F6; font-size: 13px; vertical-align: top; }
.sv-table td { padding: 7px 14px; border-bottom: 1px solid #F1F3F6; font-size: 13px;
               font-weight: 600; color: var(--wo-ink); }
.sv-table tr:last-child th, .sv-table tr:last-child td { border-bottom: 0; }

.sv-missing td, .sv-missing th { background: #FFF6F5; }
.sv-required { color: #C42B1C; font-weight: 400; font-style: italic; }
.sv-blank    { color: #C3C9D1; }

.sv-foot { margin-top: 8px; }

/* Images captured against an answer - a signature, or the photographs on a
   question that allows them. A row of thumbnails, each a link to the full
   size, because this table is a summary and the full image is a click away
   rather than a scroll. */
/* Last in the cell, after the answer and the note, as the certificate prints
   them - so the margin is above rather than below. */
.sv-images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sv-images:first-child { margin-top: 0; }   /* a signature, which IS the answer */
.sv-thumb  { width: 86px; height: 64px; object-fit: cover; border-radius: 4px;
             border: 1px solid #E3E7EC; display: block; }
.sv-thumb:hover { border-color: #B9C0C9; }

/* A position's map, under its coordinates.

   A button rather than a div, so it is reachable by keyboard and announced as
   something that can be activated - the whole point of it is that clicking
   opens a larger one. Leaflet draws into it happily either way.

   Wider than a photo thumbnail because it has to be read rather than
   recognised: a reader is checking a street against an address. Same 4:3 as
   the certificate prints, so the two look like the same map. */
/* position+z-index is load-bearing, not tidying. Leaflet puts z-index 400 on
   its panes, and without a stacking context here that 400 is measured against
   the whole page - where the modal backdrop is only 80. The thumbnail then
   painted straight over an open dialog, including over its attribution.
   Giving the button its own context keeps Leaflet's numbers inside it. */
.sv-map        { width: 180px; height: 135px; padding: 0; margin-top: 6px;
                 border: 1px solid #E3E7EC; border-radius: 4px; overflow: hidden;
                 display: block; cursor: pointer; background: #E8E8E8;
                 position: relative; z-index: 0; }
.sv-map:hover  { border-color: #B9C0C9; }
.sv-map:focus-visible { outline: 2px solid #1F4E79; outline-offset: 2px; }

/* Leaflet gives a divIcon a white background and a 1px border by default, so
   without this the pin arrives in a little white box. The engineer map clears
   the same thing on .mwm-pin-wrap. */
.wo-pin { background: transparent; border: none; }

/* Leaflet's own attribution sits inside the map. At thumbnail size it would
   cover a third of it, so it is hidden here and the dialog carries the credit
   instead - which is where a reader can actually follow the link. */
.sv-map .leaflet-control-attribution { display: none; }

/* Zoom buttons would be absurd in 180px. */
.sv-map .leaflet-control-container   { display: none; }

/* The larger one, in the dialog. */
/* Same containment, for the same reason. This one sits inside the dialog so
   it has nothing to escape over today, but a map that can lift itself out of
   its own panel is a trap worth closing in both places at once. */
.sv-map-large  { width: 100%; height: 420px; border: 1px solid #E3E7EC;
                 border-radius: 4px; overflow: hidden;
                 position: relative; z-index: 0; }

/* The coordinates above the dialog's map: the answer itself, and the only
   thing in there worth copying. Monospaced so the digits line up. */
.sv-map-coords { margin: 0 0 10px; font-family: ui-monospace, Consolas, monospace;
                 font-size: 13px; color: #2B3440; }

/* The engineer's note on a question. Set apart from the answer rather than run
   on from it: it explains the answer, and on a gas certificate "flue reading
   taken at the terminal, panel seized" is the part an assessor reads. Quoted
   with a rule down the left so it cannot be mistaken for the value itself. */
/* An engineer's note on one question.
   A class of its own: .sv-note above is the "rendered using version N" banner
   at the top of the page, and this was briefly sharing it - two rules for one
   name, each setting half the appearance, which is how a style ends up looking
   like neither thing on purpose.
   The background is --wo-subtle, #f2f5f7, which is also ReportTheme.SectionBg,
   so the screen and the certificate are the same grey rather than two greys
   that happen to be close. */
.sv-answer-note { margin-top: 5px; padding: 5px 9px; background: #f2f5f7;
                  border-left: 3px solid #E3E7EC; border-radius: 3px;
                  color: #4A5260; font-style: italic; white-space: pre-wrap; }