/* Site chrome only: the header, the data banner, the upload form, the
   delete control and the footer that sit around the report.

   This sheet holds no colour of its own. Every value comes from
   tokens.css through var(), and the guard in
   tests/test_release_guards.py fails the build if a hex, an rgb(), an
   hsl() or a CSS named colour appears here.

   The --site-* block that used to live at the top of this file is gone.
   It is not aliased onto the new names, deliberately: --site-ink meant
   dark TEXT here and a dark PANEL BACKGROUND on the sibling Option Desk
   service, and --site-paper meant the white BACKGROUND here and light
   TEXT there. The same two names carried inverted meanings across the
   two services, so keeping them as aliases would have left a trap for
   whoever next moved a rule between the repositories. Nothing outside
   this file ever read them; that was checked before they were removed.

   Load order: the renderer's inline style, then tokens.css, then
   components.css, then this file. */

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  position: static;
  display: inline-block;
  padding: var(--od-space-4) var(--od-space-5);
  color: var(--od-signal-ink);
  background: var(--od-signal);
  border: var(--od-border-hair) solid var(--od-signal);
  border-radius: var(--od-radius-2);
}

/* Header */

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--od-space-5);
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0 var(--od-space-5) 0;
  margin: 0 0 var(--od-space-6) 0;
  border-bottom: var(--od-border-hair) solid var(--od-line);
}

.site-brand {
  color: var(--od-text);
  text-decoration: none;
}

.site-brand strong {
  font-size: var(--od-font-size-1);
  font-weight: var(--od-weight-strong);
  letter-spacing: var(--od-tracking-tight);
}

/* The one place the brand signal appears as a mark rather than as a
   focus ring. A rule under the wordmark, not a fill behind it, so it
   cannot be mistaken for a state chip. */
.site-brand strong::after {
  content: "";
  display: block;
  height: var(--od-border-rule);
  margin-top: var(--od-space-1);
  background: var(--od-signal);
}

.site-brand .meta {
  display: block;
  font-size: var(--od-font-size-6);
  color: var(--od-text-muted);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--od-space-4);
}

.pill {
  display: inline-block;
  padding: var(--od-space-2) var(--od-space-5);
  font-size: var(--od-font-size-5);
  color: var(--od-text);
  text-decoration: none;
  background: var(--od-surface);
  border: var(--od-border-hair) solid var(--od-line);
  border-radius: var(--od-radius-2);
}

.pill:hover,
.pill:focus-visible {
  border-color: var(--od-accent);
  color: var(--od-accent);
}

.pill.on {
  color: var(--od-accent-ink);
  background: var(--od-accent);
  border-color: var(--od-accent);
}

/* Footer */

.site-footer {
  padding: var(--od-space-6) 0 0 0;
  margin: var(--od-space-8) 0 0 0;
  font-size: var(--od-font-size-6);
  color: var(--od-text-muted);
  border-top: var(--od-border-hair) solid var(--od-line);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--od-space-5);
  margin: var(--od-space-3) 0;
}

.site-footer a {
  color: var(--od-text-muted);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--od-accent);
}

/* The upload form. Structure plus tokens, no colour and no size of its
   own, so the shared layer keeps ownership of both. */

.upload-form {
  display: flex;
  flex-direction: column;
  gap: var(--od-space-5);
  max-width: 44rem;
  margin: var(--od-space-5) 0 0 0;
}

.upload-form label {
  display: flex;
  flex-direction: column;
  gap: var(--od-space-2);
  font-size: var(--od-font-size-4);
  color: var(--od-text);
}

.upload-form label.check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--od-space-4);
}

.upload-form label.check input {
  margin: var(--od-space-1) 0 0;
  flex: none;
  accent-color: var(--od-accent);
}

.upload-form .hint {
  font-size: var(--od-font-size-6);
  color: var(--od-text-muted);
}

.upload-form input[type="file"] {
  padding: var(--od-space-4) 0;
  color: var(--od-text);
}

.upload-form button {
  align-self: flex-start;
  font: inherit;
  font-size: var(--od-font-size-5);
  font-weight: var(--od-weight-strong);
  padding: var(--od-space-4) var(--od-space-6);
  color: var(--od-accent-ink);
  background: var(--od-accent);
  border: var(--od-border-hair) solid var(--od-accent);
  border-radius: var(--od-radius-2);
  cursor: pointer;
}

.upload-form button:hover,
.upload-form button:focus-visible {
  color: var(--od-accent);
  background: var(--od-surface);
}

.upload-form button[disabled] {
  cursor: default;
  color: var(--od-text-muted);
  background: var(--od-surface);
  border-color: var(--od-line);
}

.upload-result:empty {
  display: none;
}

/* The result line reports a refusal far more often than a success, and a
   refusal is a degraded outcome for the caller, so it takes the degraded
   treatment including the hatch rather than a plain tint. */
.upload-result {
  padding: var(--od-space-4) var(--od-space-5);
  font-size: var(--od-font-size-4);
  color: var(--od-text);
  background-color: var(--od-degraded-ground);
  background-image: var(--od-degraded-hatch);
  border-left: var(--od-border-flag) solid var(--od-degraded);
  border-radius: var(--od-radius-2);
}

/* The delete control on a private report. */

.private-controls {
  margin: var(--od-space-4) 0 0 0;
}

.private-controls button {
  font: inherit;
  font-size: var(--od-font-size-5);
  font-weight: var(--od-weight-medium);
  padding: var(--od-space-3) var(--od-space-5);
  color: var(--od-text);
  background: var(--od-surface-raised);
  border: var(--od-border-hair) solid var(--od-line-strong);
  border-radius: var(--od-radius-2);
  cursor: pointer;
}

.private-controls button:hover,
.private-controls button:focus-visible {
  color: var(--od-accent);
  border-color: var(--od-accent);
}

@media (max-width: 600px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }
}