/* ═══════════════════════════════════════════════════════════════════════
   Shared chrome — the pieces that must read identically in every app.
   ═══════════════════════════════════════════════════════════════════════

   Loaded LAST by every page, participant and console alike, in both this
   service and the bank ALM sim. One definition, so there is nothing to
   keep in sync and nothing to drift.

   Why this file exists (owner, 2026-08-26). The participant pages load
   the platform foundation, base.css and components.css. The trainer and
   admin pages load console.css, which is a separate implementation of
   the same design system. The two disagree on every property the
   disclaimer footer renders with:

       property                     participant        console
       ------------------------------------------------------------
       font stack                   Inter, system-ui   Inter, -apple-system
       body line-height             1.6                1.5
       -webkit-font-smoothing       (unset)            antialiased
       font-variant-numeric         tabular lining     (unset)
       --text-muted   (light)       #5e7082            #5a5a64
       --border       (light)       #dde1ec            #e0e0e4
       --color-accent (light)       #2E6DA4            #2563eb

   So the same markup rendered differently in each: different stroke
   weight from the smoothing, different figures in "2026" from the
   numeral features, a different grey, a different rule.

   Every rule below therefore sets what it renders rather than inheriting
   it, and carries its own colours rather than reading the page's tokens.
   The values are the participant desk's, which is the baseline. That
   means the disclaimer is a deliberate half-tone off the console's own
   muted text, and identical to the desk's, which is the trade the rule
   above asks for.

   Placement is NOT here. Where the footer sits in a sidebar belongs to
   that app's own stylesheet; what it looks like belongs here. */


/* ── The disclaimer footer ──────────────────────────────────────────── */

.disclaimer-footer {
  /* The participant palette, carried rather than read, because the two
     foundations' tokens differ. */
  --disclaimer-ink: #a8aec8;
  --disclaimer-rule: #252830;
  --disclaimer-link: #4A90D9;

  padding: 12px 16px 0;
  border-top: 1px solid var(--disclaimer-rule);

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  /* The figures in the copyright year, and the smoothing, both of which
     the two foundations set differently. */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'zero' 1;
  -webkit-font-smoothing: auto;

  color: var(--disclaimer-ink);
}

[data-theme="light"] .disclaimer-footer {
  --disclaimer-ink: #5e7082;
  --disclaimer-rule: #dde1ec;
  --disclaimer-link: #2E6DA4;
}

/* The trigger: a button that reads as an inline link, so it sits beside
   the copyright without changing the line. `font: inherit` takes the
   whole block above with it. */
.disclaimer-footer .footer-disclaimer,
.footer-disclaimer {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.disclaimer-footer .footer-disclaimer:hover,
.footer-disclaimer:hover {
  color: var(--disclaimer-link, currentColor);
}

.disclaimer-footer .footer-disclaimer:focus-visible,
.footer-disclaimer:focus-visible {
  outline: 2px solid var(--disclaimer-link, currentColor);
  outline-offset: 2px;
}


/* ── The header lockup's position ───────────────────────────────────── */

/* The lockup starts on the same line in every shell.

   Measured, not guessed. The participant header pads nothing and insets
   its logo column by calc(var(--workspace-gutter) - 1.5px) = 26.5px,
   which is what centres the lockup's bar on the workspace divider below
   it. The console header (trainer, admin, and the ALM shells) pads 24px
   and insets its logo by nothing, so its bar sat 2.5px to the left of
   the desk's and no amount of work on the shared rule reached it: the
   two shells position different elements, .header-logo and .app-logo.

   Both are named here, and the console header's own left padding is
   dropped so the inset is not counted twice. Its right padding stays,
   because that is what positions the controls on the other end. */

.header-logo,
.app-logo {
  padding-left: 26.5px;
}

.app-header:has(.app-logo) {
  padding-left: 0;
}


/* ── The lockup's own box ───────────────────────────────────────────── */

/* #header-logo-mount is a bare span: no stylesheet gives it a rule
   outside a mobile breakpoint. It blockifies as a flex item, and the
   lockup inside it is display:inline-flex, so the lockup is an
   INLINE-level box sitting on a text line box. That line box carries a
   strut sized by whatever font-size and line-height the mount inherits,
   and the two shells inherit different ones: the desks give it 16px at
   the body's 1.6, the console's .app-logo sets 15px at the body's 1.5.
   Different strut, different line-box height, so the lockup came to
   rest at a different height inside a header that is centring it. It is
   not a property either side sets, which is why comparing the rules
   never found it (owner, 2026-08-26).

   Making the mount a flex container takes the lockup off the baseline
   altogether: no line box, no strut, and the box is exactly the height
   of the lockup in every shell. */

.header-logo-mount {
  display: flex;
  align-items: center;
  min-width: 0;
}