/* ═══════════════════════════════════════════════════════════════════════
   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;
}


/* ── The sign-in screen ─────────────────────────────────────────────── */

/* One sign-in screen for every app in both services (owner, 2026-09-13):
   the participant sign-in of all three sims, the trainer and admin
   sign-in, the password screen and the connectivity check. The markup
   comes from js/shared/signin.js, which is the same file in both repos,
   and this section is the same text in both copies of this file.

   It used to be written five times, in alm.css, console.css, mm-sim.css,
   portfolio-sim.css and simtest.css, and the copies had drifted into
   three designs. Every screen now reads the MM participant's design, and
   the values below are that screen's values. Its palette is carried
   here, for the reason the disclaimer footer carries its own: the
   foundations hold different token values, and a screen that reads the
   page's tokens renders a different grey, rule and accent on each.

   So the screen sets what it renders. The font, the line height, the
   numeral features and the smoothing are stated on .join-screen, because
   the foundations disagree on each. Every colour reads a --signin-*
   property, set once per theme. */

.join-screen {
  --signin-ground: #111114;
  --signin-grid: rgba(255,255,255,0.02);
  --signin-accent: #2E6DA4;
  --signin-surface: #161B22;
  --signin-elevated: #1C232C;
  --signin-input: #20262F;
  --signin-border: #252830;
  --signin-text: #e8eaf0;
  --signin-muted: #a8aec8;
  --signin-title: #f0f0f0;
  --signin-subtitle: rgba(255,255,255,0.45);
  --signin-button: linear-gradient(135deg, #ffffff 0%, #e8e8e8 100%);
  --signin-button-ink: #0B0B0C;
  --signin-button-glow: rgba(255,255,255,0.1);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
  background: var(--signin-ground);

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'zero' 1;
  -webkit-font-smoothing: antialiased;
  color: var(--signin-text);
}

[data-theme="light"] .join-screen {
  --signin-ground: #f0f2f7;
  --signin-grid: rgba(0,0,0,0.03);
  --signin-surface: #ffffff;
  --signin-elevated: #f8f9fc;
  --signin-input: #f4f6fa;
  --signin-border: #dde1ec;
  --signin-text: #1B3A5C;
  --signin-muted: #5e7082;
  --signin-title: #1a1a1e;
  --signin-subtitle: rgba(0,0,0,0.45);
  --signin-button: linear-gradient(135deg, #1a1a1e 0%, #333 100%);
  --signin-button-ink: #ffffff;
  --signin-button-glow: rgba(0,0,0,0.15);
}

/* The grid ground, and a glow in the brand accent in the top corner. */
.join-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--signin-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--signin-grid) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
}
.join-screen::after {
  content: '';
  position: fixed;
  top: -200px; left: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--signin-accent) 6%, transparent) 0%,
    transparent 70%);
  z-index: 0;
}

/* The sim's own module lockup at full size. The platform surface that
   does the same is the boot overlay, so the name treatment and the
   centring come from there (platform.css :47-56). The centring is flex,
   never text-align, which would centre the wordmark over the module name
   instead of leaving the whole lockup left aligned against its bar. */
.join-logo {
  position: relative;
  z-index: 1;
  margin-bottom: 56px;
  display: flex;
  justify-content: center;
}
.join-logo .lockup-led .name {
  font-weight: 700;
  text-transform: none;
  line-height: 1.15;
  /* Two-value edge form: current Edge does not parse "trim-start cap". */
  text-box: trim-start cap alphabetic;
}

/* A flat panel: square corners, a hairline border, no glass. */
.join-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 44px 40px;
  background: var(--signin-surface);
  border: 1px solid var(--signin-border);
  border-radius: 0;
}

.join-title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.5px;
  text-align: center;
  color: var(--signin-title);
}

.join-subtitle {
  margin: 0 0 28px;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  color: var(--signin-subtitle);
}

.join-footer {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  font-size: 12px;
  text-align: center;
  color: var(--signin-muted);
}

/* ── Fields ── */

.auth-field {
  margin-bottom: 20px;
  text-align: left;
}

/* The label reads in the simulation's eyebrow type without its capitals:
   a field label reads as written, "Username" and not "USERNAME". */
.auth-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--signin-muted);
}

/* The line under a label, where a field needs one ("Ask your trainer for
   the code"). */
.auth-field .auth-sublabel {
  display: block;
  margin: -4px 0 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--signin-muted);
}

/* Every field reads the same, a code field included: Inter, left aligned,
   at one size. A code field is marked by autocapitalize="characters",
   which also brings up capitals on a phone keyboard, and its letters read
   in capitals as they are typed. */
.auth-field input {
  width: 100%;
  padding: 14px 18px;
  background: var(--signin-input);
  border: 1px solid var(--signin-border);
  border-radius: 0;
  color: var(--signin-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  outline: none;
  transition: border-color 0.25s ease;
}
.auth-field input:focus { border-color: var(--signin-accent); }
.auth-field input::placeholder { color: var(--signin-muted); }
.auth-field input[autocapitalize="characters"] { text-transform: uppercase; }

/* ── Buttons ── */

.auth-btn {
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  background: var(--signin-button);
  color: var(--signin-button-ink);
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.auth-btn:hover { box-shadow: 0 8px 30px var(--signin-button-glow); }
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* The quieter action beside the main one: Back, Cancel, Sign Out. */
.auth-btn-secondary {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: transparent;
  color: var(--signin-muted);
  border: 1px solid var(--signin-border);
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}
.auth-btn-secondary:hover {
  color: var(--signin-text);
  border-color: var(--signin-muted);
}

.join-card button:focus-visible {
  outline: 2px solid var(--signin-accent);
  outline-offset: 2px;
}

/* The session a participant is about to join, once its code is found. */
.auth-info-box {
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--signin-elevated);
  border: 1px solid var(--signin-border);
  border-radius: 0;
}
.auth-info-box .auth-info-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--signin-text);
}

/* ── Password toggle, checklist, strength meter, confirm match ──
   The password screen (js/shared/password_ui.js). Taken from the
   EduMarkets platform's auth.css, so the screen reads the same as the
   platform's own. */

.auth-field-wrap { position: relative; }

.pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px;
  background: none;
  border: none;
  line-height: 0;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: color 0.2s;
}
.pw-toggle:hover { color: rgba(255,255,255,0.7); }
[data-theme="light"] .pw-toggle { color: rgba(0,0,0,0.3); }
[data-theme="light"] .pw-toggle:hover { color: rgba(0,0,0,0.6); }

.password-checklist { margin-top: 8px; margin-bottom: 12px; }

.pw-rule {
  padding: 2px 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  transition: color 0.2s;
}
.pw-rule .pw-icon { display: inline-block; width: 16px; font-weight: 600; }
.pw-rule.met { color: #22c55e; }
[data-theme="light"] .pw-rule { color: rgba(0,0,0,0.35); }
[data-theme="light"] .pw-rule.met { color: #16a34a; }

.pw-strength-bar {
  position: relative;
  margin-top: 8px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: visible;
}
.pw-strength-fill {
  width: 0%;
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease, background 0.3s ease;
}
.pw-strength-label {
  position: absolute;
  right: 0;
  top: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  transition: color 0.3s;
}
[data-theme="light"] .pw-strength-bar { background: rgba(0,0,0,0.06); }

.pw-match { margin-top: 4px; min-height: 1.2em; font-size: 0.78rem; }
.match-ok { color: #22c55e; }
.match-fail { color: #ef4444; }
[data-theme="light"] .match-ok { color: #16a34a; }
[data-theme="light"] .match-fail { color: #dc2626; }

/* ── Narrow screens ── */

@media (max-width: 768px) {
  .join-card { padding: 32px 24px; }
  .join-logo { margin-bottom: 40px; }
}
@media (max-width: 480px) {
  .join-card { padding: 20px; margin: 0 8px; }
}