/* Shared performance-disclaimer label. Namespaced `g10-disc-*`; the markup comes from
   js/disclaimer.js and the wording from GET /api/disclaimer, so this file only sizes and
   colours it. Colours go through the app's theme tokens because the theme flips via a
   `data-theme` attribute at runtime — a literal colour here would survive into light mode
   and read as unstyled text. That argument also rules out the `var(--token, #fallback)`
   form: the fallback only ever paints when the token is missing, and the dark hex it used
   to carry would then paint on ivory too. The label is deliberately secondary to the numbers it
   qualifies, but never so faint that it reads as decoration: it has to be legible in a
   screenshot months from now, which is the whole point of publishing it. */

.g10-disc { margin: 0; }
.g10-disc p { margin: 0 0 6px; }
.g10-disc p:last-child { margin-bottom: 0; }

/* The short and real-money variants are one statement, so the version stamp sits inline
   beside the text and wraps below it only when there is genuinely no room. */
.g10-disc--short,
.g10-disc--real-money {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
}

/* Capped at 96ch like every other run of prose in the design: on a 1560px shell an
   uncapped legend would run to twice reading width, which is how a legend stops being
   read at all. */
.g10-disc-p {
  font-size: 11px; line-height: 1.55; color: var(--text-muted);
  max-width: 96ch; text-wrap: pretty;
}

/* The prescribed legend is capitalised by the rule, not by us. Letter-spacing and a
   smaller size are what keep a paragraph of capitals readable rather than a grey block. */
.g10-disc-legend {
  font-size: 10px; line-height: 1.6; letter-spacing: .04em;
  color: var(--text-faint);
  max-width: 96ch; text-wrap: pretty;
}

/* A version stamp is a figure, so it is mono and does not wrap mid-stamp. */
.g10-disc-ver {
  font-family: var(--font-sans); font-size: 10px; line-height: 1.55;
  color: var(--text-faint); white-space: nowrap;
}

/* The persistent footer host lives inside #app, so it inherits the login gate and is
   never cleared by a view render. `hidden` is restated because every rule above sets a
   display on a child, and a future display rule on the bar itself would otherwise beat
   the attribute and reveal an empty bar before app.js has filled it.

   It is a card like everything else on the ground — a full-width rule across the page is
   the sheet metaphor this design replaced. No shadow, though: the bar is chrome that
   closes the page, not content floating on it, and the shadow is what says "content". */
.g10-disc-bar {
  margin-top: clamp(14px, 1.8vw, 22px); padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.g10-disc-bar[hidden] { display: none; }

@media (max-width: 760px) {
  .g10-disc-bar { margin-top: 14px; padding: 10px 12px; }
  .g10-disc--short,
  .g10-disc--real-money { gap: 2px 8px; }
  .g10-disc-p { font-size: 10px; line-height: 1.5; }
  .g10-disc-legend { font-size: 9px; letter-spacing: .03em; }
  /* Let the stamp wrap on a narrow screen rather than force a horizontal scroll. */
  .g10-disc-ver { white-space: normal; }
}