/* ==========================================================================
   SITE-SCORES.CSS — the collapsible "environmental context" panel that sits
   under a well-location map.
   --------------------------------------------------------------------------
   Author: Sharmila Parthiban.  13 Sep 2026.

   ITS OWN FILE, for the reason env-banner.css sets out at length:
   Views/Shared/_SiteScorePanel.cshtml is a partial any screen with a
   coordinate can drop in, and rules for it in site-enhance.css would only
   apply on the pages _Layout happens to render. A panel that renders as
   unstyled prose is not merely plain — a <details> with no visual boundary
   reads as a stray link above the Save button.

   ONLY TOKENS, NO LITERAL COLOURS. Every colour below is a var(--c-*) from
   tokens.css, which theme.css re-points per theme — so this panel follows
   light, dark and print without a rule of its own. tools/theme-contrast.mjs
   proves the token pairings; it parses tokens.css and prototype-app.css, so
   declaring a NEW --c-* here would create a token that validator never checks.
   There are none.

   NO NEW LAYOUT VOCABULARY. The contents are the prototype's own .dl--inline,
   .fs__hint, .alert--sm and .u-mono. This file styles the disclosure box
   around them and nothing else, which is why it is thirty lines rather than
   three hundred.
   ========================================================================== */

/*  A SUNKEN BOX, NOT A CARD. It sits inside a .fs section that is already a
    bounded region, and a second card inside it reads as a second form section
    — which would imply there is something here to fill in. Sunken says
    "belongs to the block above me". */
.ss {
    margin: .75rem 0 0;
    padding: 0;
    border: 1px solid var(--c-paper-alt);
    border-radius: var(--radius-sm, .25rem);
    background: var(--c-paper-sunken);
}

/*  The disclosure row. Padded generously because it is the whole hit area on a
    phone, where a summary is the only control in the panel. */
.ss__sum {
    padding: .5rem .75rem;
    font-size: var(--fs-2xs, .875rem);
    font-weight: var(--fw-semibold, 600);
    color: var(--c-primary-dark);
    cursor: pointer;
}

/*  The focus ring is the browser's, moved onto the row rather than the tiny
    marker triangle: a 2 mm focus outline on a disclosure arrow is technically
    present and practically invisible. */
.ss__sum:focus-visible {
    outline: 2px solid var(--c-primary-vivid);
    outline-offset: -2px;
}

.ss__body {
    padding: 0 .75rem .75rem;
    border-top: 1px solid var(--c-paper-alt);
}

/*  The hint reads as the panel's own caveat rather than as a form hint, so it
    keeps its distance from the numbers underneath it. */
.ss__body .fs__hint {
    margin: .5rem 0 .625rem;
}

/*  A SCORE IS A NUMBER AND IS READ AS ONE. Slightly larger than the label above
    it and in the ink colour, because the point of the panel is the value; the
    .u-mono in the markup keeps two scores vertically comparable when a page
    renders several panels down the side of a cluster-well grid. */
.ss__body .dl--inline dd {
    font-size: var(--fs-xs, 1rem);
    color: var(--c-ink);
}

/*  "Not scored" is not a number and must not be mistaken for one at a glance —
    a suppressed score is genuinely absent, and rendering it in the same weight
    as 89.63 invites it being read as a low one. */
.ss__body .dl--inline dd[data-empty="true"] {
    color: var(--c-ink-subtle);
    font-style: italic;
}