/* ============================================================================
   SIGN-IN — pages/Login.jsx and its illustration (assets/login/FinanceScene.jsx).
   ----------------------------------------------------------------------------
   Pulse's login, ported: the brand on the Aurora gradient, one card, one
   primary action. Split on desktop (brand and illustration left, card right),
   stacked below 960px (logo on top, the illustration reduced to a strip).

   Reads the mt3 tokens (styles/mt3/tokens.css). The --lg-* and --lgs-* names
   exist only so this one screen can follow prefers-color-scheme, which the
   rest of the app does not do yet; nothing outside .lg reads them.

   The Aurora here is a shade deeper than pulse's header gradient at the start
   (#5a63d8, not #667eea): white body text on #667eea is 3.7:1, below AA; on
   #5a63d8 it is 5.0:1. The mini header inside the illustration keeps pulse's
   exact gradient, since it carries no text anyone has to read.
   ========================================================================== */

.lg {
  --lg-page: var(--page);
  --lg-surface: var(--surface);
  --lg-sunk: var(--sunken);
  --lg-hover: var(--row-hover);
  --lg-ink: var(--ink);
  --lg-ink-2: var(--ink-2);
  --lg-ink-3: var(--ink-3);
  --lg-ink-4: var(--ink-4);
  --lg-line: var(--line);
  --lg-line-2: var(--line-2);
  --lg-line-3: var(--line-3);
  --lg-accent: var(--accent);
  --lg-focus: var(--accent);
  --lg-ring: var(--accent-ring);
  --lg-edge: var(--accent);
  --lg-btn: var(--accent);
  --lg-btn-hi: var(--accent-hi);
  --lg-btn-lo: var(--accent-lo);
  --lg-btn-off: var(--mute-bg);
  --lg-btn-off-fg: var(--ink-4);
  --lg-bad-fg: var(--bad-fg);
  --lg-bad-bg: var(--bad-bg);
  --lg-bad-line: var(--bad-line);
  --lg-bad-edge: var(--bad-dot);
  --lg-warn-fg: var(--warn-fg);
  --lg-warn-bg: var(--warn-bg);
  --lg-warn-line: var(--warn-line);
  --lg-ok: var(--ok-dot);
  --lg-select: var(--accent-tint);
  --lg-wash-a: rgba(102, 126, 234, .10);
  --lg-wash-b: rgba(118, 75, 162, .07);
  --lg-down: var(--warn-dot);
  --lg-card-shadow: 0 1px 2px rgba(16, 22, 34, .04), 0 18px 40px -18px rgba(16, 22, 34, .22);
  --lg-aurora: linear-gradient(135deg, #5a63d8 0%, #6b4fbd 52%, #764ba2 100%);
  --lg-aurora-strip: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

  /* the illustration's app window */
  --lgs-surface: #ffffff;
  --lgs-sunk: #f4f5fa;
  --lgs-line: #e6e9ee;
  --lgs-line-2: #c9cfd9;
  --lgs-text: #616b7c;
  --lgs-strong: #3d4654;
  --lgs-skel: #e6e9f0;
  --lgs-skel-2: #cfd5e0;
  --lgs-bar-a: #667eea;
  --lgs-bar-b: #764ba2;
  --lgs-spark: #4338ca;
  --lgs-ok: #10906a;
  --lgs-ok-tint: #e8f6f0;
  --lgs-due: #c4780b;
  --lgs-shadow: 0 30px 60px -24px rgba(24, 14, 70, .6), 0 0 0 1px rgba(255, 255, 255, .22);
  --lgs-chip-shadow: 0 12px 28px -12px rgba(24, 14, 70, .55), 0 0 0 1px rgba(20, 16, 60, .04);

  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(440px, 1fr);
  background: var(--lg-page);
  color: var(--lg-ink);
  font-family: var(--font);
  color-scheme: light;
}

.lg ::selection { background: var(--lg-select); }

@media (prefers-color-scheme: dark) {
  .lg {
    --lg-page: #0d1016;
    --lg-surface: #151a23;
    --lg-sunk: #1a2029;
    --lg-hover: #202734;
    --lg-ink: #e8ebf1;
    --lg-ink-2: #c5ccd8;
    --lg-ink-3: #a1aaba;
    --lg-ink-4: #8b95a7;
    --lg-line: #252c38;
    --lg-line-2: #343d4c;
    --lg-line-3: #4a5467;
    --lg-accent: #a5b4fc;
    --lg-focus: #a5b4fc;
    --lg-ring: rgba(129, 140, 248, .34);
    --lg-edge: #818cf8;
    --lg-btn: #4f46e5;
    --lg-btn-hi: #5b54ee;
    --lg-btn-lo: #4338ca;
    --lg-btn-off: #222938;
    --lg-btn-off-fg: #7d8798;
    --lg-bad-fg: #fca5a5;
    --lg-bad-bg: #2a1618;
    --lg-bad-line: #5b2a2e;
    --lg-bad-edge: #f87171;
    --lg-warn-fg: #fcd34d;
    --lg-warn-bg: #2a2314;
    --lg-warn-line: #5a4717;
    --lg-ok: #34d399;
    --lg-select: rgba(129, 140, 248, .42);
    --lg-wash-a: rgba(102, 126, 234, .10);
    --lg-wash-b: rgba(118, 75, 162, .08);
    --lg-down: #fbbf24;
    --lg-card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .7);
    --lg-aurora: linear-gradient(135deg, #272c6e 0%, #33296b 50%, #43245f 100%);

    --lgs-surface: #171c27;
    --lgs-sunk: #1d2331;
    --lgs-line: #293143;
    --lgs-line-2: #3a4459;
    --lgs-text: #9aa4b5;
    --lgs-strong: #dde2ea;
    --lgs-skel: #283041;
    --lgs-skel-2: #3a4459;
    --lgs-bar-a: #8b93f8;
    --lgs-bar-b: #a78bfa;
    --lgs-spark: #a5b4fc;
    --lgs-ok: #34d399;
    --lgs-ok-tint: rgba(52, 211, 153, .14);
    --lgs-due: #fbbf24;
    --lgs-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08);
    --lgs-chip-shadow: 0 12px 28px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
    color-scheme: dark;
  }
}

/* ── BRAND SIDE ───────────────────────────────────────────────────────── */
.lg-brand {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px clamp(40px, 5vw, 80px);
  background: var(--lg-aurora);
  color: #fff;
}
/* ledger ruling: faint horizontal rules and the double Dr/Cr column rules of a ledger page */
.lg-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, transparent 81.6%, rgba(255, 255, 255, .09) 81.6% 81.75%, transparent 81.75% 82.2%,
      rgba(255, 255, 255, .09) 82.2% 82.35%, transparent 82.35%),
    linear-gradient(to right, transparent 91%, rgba(255, 255, 255, .07) 91% 91.15%, transparent 91.15%),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .065) 0 1px, transparent 1px 34px);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 40% 45%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 80% at 40% 45%, #000 30%, transparent 85%);
}
/* two soft lights */
.lg-brand::after {
  content: '';
  position: absolute;
  inset: -15%;
  z-index: -1;
  background:
    radial-gradient(38% 34% at 18% 16%, rgba(255, 255, 255, .20), transparent 70%),
    radial-gradient(34% 30% at 86% 88%, rgba(253, 230, 138, .16), transparent 70%);
  pointer-events: none;
}

.lg-brand-in {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  container: lgbrand / inline-size;
}

.lg-id { display: flex; align-items: center; gap: 30px; }
.lg-seal {
  flex: none;
  width: 164px;
  height: 164px;
  border-radius: 50%;
  overflow: hidden;   /* the seal image is flattened onto white: its square corners stay inside the disc */
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .13), 0 22px 44px -16px rgba(20, 12, 60, .55);
}
.lg-seal img { width: 80%; height: auto; display: block; }
.lg-id-text { min-width: 0; }
.lg-co {
  margin: 0 0 8px;
  font-size: var(--t-label);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}
.lg-product {
  margin: 0;
  font-size: clamp(36px, 3.4vw, 50px);
  line-height: 1.04;
  font-weight: var(--w-semi);
  letter-spacing: -.024em;
}
.lg-promise {
  margin: 14px 0 0;
  max-width: 32ch;
  font-size: 17px;
  line-height: var(--lh-body);
}

.lg-pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}
.lg-pillars li { display: flex; gap: 12px; align-items: flex-start; }
.lg-pillars b { display: block; font-size: var(--t-body); font-weight: var(--w-semi); margin-bottom: 2px; }
.lg-pillar-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

/* ── SIGN-IN SIDE ─────────────────────────────────────────────────────── */
.lg-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* never wider than the screen, whatever a child's intrinsic width */
  grid-template-rows: 1fr auto;
  min-width: 0;
  padding: 48px 40px 0;
  background:
    radial-gradient(60% 45% at 100% 0%, var(--lg-wash-a), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, var(--lg-wash-b), transparent 70%),
    var(--lg-page);
}
/* Anchored from the top, not centred: an error or the help then extends the card downwards instead of
   moving the field the reader just typed in. The margin puts the resting card where centring did. */
.lg-side-in {
  align-self: start;
  margin-top: clamp(16px, calc(50vh - 300px), 240px);
  justify-self: center;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.lg-card {
  position: relative;
  overflow: hidden;
  background: var(--lg-surface);
  border: 1px solid var(--lg-line);
  border-radius: var(--r-modal);
  box-shadow: var(--lg-card-shadow);
  padding: 36px 34px 26px;
}
/* pulse's card wears the gradient on its head; this one keeps a thread of it */
.lg-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--lg-aurora-strip);
}
.lg-title {
  margin: 0;
  font-size: 24px;
  line-height: var(--lh-tight);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-title);
  color: var(--lg-ink);
}
.lg-sub { margin: 8px 0 0; font-size: var(--t-body); color: var(--lg-ink-2); }

.lg-test {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--lg-warn-bg);
  border: 1px solid var(--lg-warn-line);
  color: var(--lg-warn-fg);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}
.lg-test-tag {
  flex: none;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: var(--r-badge);
  border: 1px solid currentColor;
}

.lg-form { display: flex; flex-direction: column; margin-top: 24px; }
.lg-label { font-size: var(--t-label); font-weight: var(--w-semi); color: var(--lg-ink-2); margin-bottom: 7px; }
.lg-field {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 50px;
  padding-right: 6px;
  border: 1px solid var(--lg-line-2);
  border-radius: 11px;
  background: var(--lg-surface);
  transition: border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease);
}
.lg-field:hover { border-color: var(--lg-line-3); }
.lg-field:focus-within { border-color: var(--lg-edge); box-shadow: 0 0 0 3px var(--lg-ring); }
.lg-field.is-bad { border-color: var(--lg-bad-edge); }
.lg-field.is-bad:focus-within { box-shadow: 0 0 0 3px var(--bad-ring); }
.lg-field-ic { flex: none; display: grid; place-items: center; width: 42px; color: var(--lg-ink-4); }
.lg-field:focus-within .lg-field-ic { color: var(--lg-edge); }
.lg-input {
  flex: 1;
  width: 0;          /* no intrinsic 20-character width: the row decides (360px phones scrolled sideways) */
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0 6px 0 0;
  background: transparent;
  color: var(--lg-ink);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .01em;
  outline: none;
}
.lg-input::placeholder { color: var(--lg-ink-3); opacity: 1; }
.lg-input[readonly] { color: var(--lg-ink-3); }
.lg-icbtn {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lg-ink-3);
  cursor: pointer;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
}
.lg-icbtn:hover:not(:disabled) { background: var(--lg-hover); color: var(--lg-ink); }
.lg-icbtn.is-on { color: var(--lg-accent); }
.lg-icbtn:disabled { cursor: default; opacity: .5; }
.lg-icbtn:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 0; border-radius: 8px; }

.lg-note { margin: 8px 0 0; font-size: var(--t-meta); color: var(--lg-ink-3); }
.lg-hint { margin: 8px 0 0; font-size: var(--t-meta); color: var(--lg-ink-2); }
.lg-err {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--lg-bad-bg);
  border: 1px solid var(--lg-bad-line);
  color: var(--lg-bad-fg);
  font-size: var(--t-cell);
  line-height: var(--lh-body);
}
.lg-err .ic { flex: none; margin-top: 2px; }

.lg-submit {
  margin-top: 20px;
  height: 50px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 11px;
  background: var(--lg-btn);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--w-semi);
  cursor: pointer;
  transition: background var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.lg-submit:hover:not(:disabled) { background: var(--lg-btn-hi); }
.lg-submit:active:not(:disabled) { background: var(--lg-btn-lo); transform: translateY(1px); }
.lg-submit:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 3px; }
.lg-submit:disabled { cursor: not-allowed; background: var(--lg-btn-off); color: var(--lg-btn-off-fg); }
.lg-submit.is-busy:disabled { cursor: progress; background: var(--lg-btn); color: #fff; }
.lg-spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .38);
  border-top-color: #fff;
  animation: lg-spin .8s linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

.lg-helpbox { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lg-line); }
.lg-helpbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  margin: -4px -6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--lg-accent);
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: var(--w-med);
  cursor: pointer;
}
.lg-helpbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg-helpbtn:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 1px; }
.lg-chev { transition: transform var(--d2) var(--ease); }
.lg-chev.is-open { transform: rotate(180deg); }
.lg-help {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--lg-sunk);
  border: 1px solid var(--lg-line);
  color: var(--lg-ink-2);
  font-size: var(--t-meta);
  line-height: var(--lh-prose);
}
.lg-help[hidden] { display: none; }
.lg-help p { margin: 0; }
.lg-help p + p { margin-top: 8px; }
.lg-help code { font-family: var(--mono); font-size: .95em; color: var(--lg-ink); }
.lg-path {
  display: inline-block;
  padding: 0 6px;
  border-radius: var(--r-badge);
  border: 1px solid var(--lg-line-2);
  background: var(--lg-surface);
  color: var(--lg-ink);
  font-weight: var(--w-semi);
  white-space: nowrap;
}

.lg-trust {
  list-style: none;
  margin: 0;
  padding: 0 4px;
  display: grid;
  gap: 9px;
  font-size: var(--t-meta);
  line-height: var(--lh-body);
  color: var(--lg-ink-3);
}
.lg-trust li { display: flex; gap: 10px; align-items: flex-start; }
.lg-trust .ic { flex: none; margin-top: 2px; color: var(--lg-ink-4); }

.lg-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 16px;
  padding: 28px 0 22px;
  font-size: var(--t-label);
  color: var(--lg-ink-3);
}
.lg-foot code { font-family: var(--mono); font-size: 11.5px; }
.lg-status { display: inline-flex; align-items: center; gap: 7px; }
.lg-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--lg-ok); }
.lg-status.is-ok i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-ok) 22%, transparent); }
.lg-status.is-down i { background: var(--lg-down); }

/* ── THE ILLUSTRATION ─────────────────────────────────────────────────── */
.lgs { margin: 6px 40px 22px; font-family: var(--font); }
.lgs-in { position: relative; }
.lgs-win {
  overflow: hidden;
  border-radius: 14px;
  background: var(--lgs-surface);
  color: var(--lgs-text);
  box-shadow: var(--lgs-shadow);
  font-size: 10px;
  line-height: 1.3;
}
.lgs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.lgs-bar-logo { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #f7a25e; }
.lgs-bar-name { color: #fff; font-weight: var(--w-semi); font-size: 10.5px; white-space: nowrap; }
.lgs-bar-nav { display: flex; gap: 7px; margin-left: 12px; }
.lgs-bar-nav i { width: 30px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .42); }
.lgs-bar-nav i:first-child { background: rgba(255, 255, 255, .8); }
.lgs-bar-av { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .34); }

.lgs-body { display: grid; gap: 11px; padding: 13px; background: var(--lgs-sunk); }
.lgs-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lgs-tile, .lgs-panel {
  min-width: 0;
  background: var(--lgs-surface);
  border: 1px solid var(--lgs-line);
  border-radius: 10px;
}
.lgs-tile { display: grid; gap: 7px; align-content: start; padding: 10px 11px 11px; }
.lgs-lbl { font-size: 8.5px; font-weight: var(--w-semi); letter-spacing: .07em; text-transform: uppercase; }
.lgs-val { display: flex; align-items: center; gap: 4px; height: 14px; }
.lgs-cur { color: var(--lgs-strong); font-weight: var(--w-bold); font-size: 13px; line-height: 1; }
.lgs-sk { display: inline-block; height: 6px; border-radius: 3px; background: var(--lgs-skel); }
.lgs-sk.is-val { height: 10px; border-radius: 5px; background: var(--lgs-skel-2); }
.lgs-sk.is-amt { height: 6px; }
.lgs-sk.is-strong { background: var(--lgs-skel-2); }
.lgs-spark { display: block; width: 100%; height: 26px; }
.lgs-spark-line { fill: none; stroke: var(--lgs-spark); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.lgs-spark-area { fill: var(--lgs-spark); opacity: .1; }
.lgs-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; padding-top: 4px; }
.lgs-months i { height: 14px; border-radius: 3px; background: var(--lgs-ok); opacity: .85; }
.lgs-months i.is-due { background: var(--lgs-due); }
.lgs-months i.is-open { background: var(--lgs-skel); opacity: 1; }
.lgs-ageing { display: flex; gap: 2px; height: 10px; margin-top: 6px; border-radius: 3px; overflow: hidden; }
.lgs-ageing i { background: var(--lgs-bar-a); }
.lgs-ageing i:nth-child(2) { opacity: .7; }
.lgs-ageing i:nth-child(3) { opacity: .48; }
.lgs-ageing i:nth-child(4) { background: var(--lgs-due); }

.lgs-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.lgs-panel { padding: 10px 12px 8px; position: relative; }
.lgs-ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
  color: var(--lgs-strong); font-weight: var(--w-semi); font-size: 10.5px; }
.lgs-ph-meta { font-weight: var(--w-med); font-size: 9px; color: var(--lgs-text); }
.lgs-chart { display: block; width: 100%; height: auto; overflow: visible; }
.lgs-grid { stroke: var(--lgs-line); stroke-width: 1; stroke-dasharray: 3 3; }
.lgs-axis { stroke: var(--lgs-line-2); stroke-width: 1; }
.lgs-month { fill: var(--lgs-text); font-size: 8px; font-family: var(--font); }
.lgs-stop-a { stop-color: var(--lgs-bar-a); }
.lgs-stop-b { stop-color: var(--lgs-bar-b); }

.lgs-lr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 42px;
  gap: 8px;
  align-items: center;
  min-height: 19px;
  border-bottom: 1px solid var(--lgs-line);
}
.lgs-lr > span:not(:first-child) { display: flex; justify-content: flex-end; }
.lgs-lr.is-head { min-height: 16px; font-size: 8.5px; font-weight: var(--w-semi); letter-spacing: .06em; text-transform: uppercase; }
.lgs-lr.is-head > span:not(:first-child) { color: var(--lgs-strong); }
.lgs-lr.is-total { border-bottom: 3px double var(--lgs-line-2); color: var(--lgs-strong); font-weight: var(--w-semi); }
.lgs-balanced {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 2px 7px 2px 5px;
  border-radius: 5px;
  background: var(--lgs-ok-tint);
  color: var(--lgs-ok);
  font-weight: var(--w-semi);
  font-size: 9.5px;
}

.lgs-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border-radius: 11px;
  background: var(--lgs-surface);
  color: var(--lgs-strong);
  box-shadow: var(--lgs-chip-shadow);
  font-size: 12.5px;
  font-weight: var(--w-semi);
  white-space: nowrap;
}
.lgs-chip-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none; }
/* the chips sit on the window's edges, over its padding and title bar, never over a label */
.lgs-chip.is-tb { top: -18px; right: 9%; }
.lgs-chip.is-tb .lgs-chip-ic { background: #4338ca; }
.lgs-chip.is-gst { top: 84px; left: -52px; }
.lgs-chip.is-gst .lgs-chip-ic { background: #0f8b9b; }
.lgs-chip.is-tds { top: 52%; right: -54px; }
.lgs-chip.is-tds .lgs-chip-ic { background: #1f74ba; }
.lgs-chip.is-pf { bottom: -24px; left: 16%; }
.lgs-chip.is-pf .lgs-chip-ic { background: #7c3aed; }
.lgs-verified { bottom: -30px; right: 8%; padding: 9px 16px 9px 9px; gap: 10px; }
.lgs-verified .lgs-chip-ic { width: 30px; height: 30px; border-radius: 50%; background: #10906a; }
.lgs-verified b { display: block; font-size: 13px; line-height: 1.2; }
.lgs-verified small { display: block; font-size: 11px; font-weight: var(--w-med); color: var(--lgs-text); line-height: 1.2; }

/* A narrow brand column scales the illustration as one picture, so the chips keep their places
   and the ledger keeps its columns, instead of squeezing it (it is drawn for about 560px). */
@container lgbrand (max-width: 559px) { .lgs { zoom: .9; } }
@container lgbrand (max-width: 509px) { .lgs { zoom: .82; } }
@container lgbrand (max-width: 459px) { .lgs { zoom: .74; } }

/* the strip (stacked layout only) */
.lgs-strip {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.lgs-strip-bars { width: 92px; height: 30px; flex: none; }
.lgs-strip-bars path { fill: rgba(255, 255, 255, .9); }
.lgs-strip-tags { display: inline-flex; gap: 6px; }
.lgs-strip-tags b {
  padding: 3px 8px;
  border-radius: 6px;
  background: #fff;
  color: #3b2a78;
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: .03em;
}
.lgs-strip-ok { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-meta); font-weight: var(--w-semi); }
.lgs-strip-ok .lgs-chip-ic { width: 20px; height: 20px; border-radius: 50%; background: #10906a; }

/* ── MOTION: only when the reader has not asked for less ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  .lg-brand::after { animation: lg-drift 24s ease-in-out infinite alternate; }
  .lgs-win { animation: lgs-rise .7s var(--ease) both; }
  .lgs-bars path, .lgs-strip-bars path {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: lgs-grow .8s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 55ms + 250ms);
  }
  .lgs-spark-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: lgs-draw 1.4s .5s var(--ease) forwards; }
  .lgs-balanced { animation: lgs-pop .5s 1.2s var(--ease) both; }
  .lgs-verified { animation: lgs-float 7s 1s ease-in-out infinite alternate; }
  .lgs-chip.is-tds { animation: lgs-float 8s 2s ease-in-out infinite alternate-reverse; }
  .lgs-chip.is-gst { animation: lgs-float 9s ease-in-out infinite alternate; }
}
@keyframes lg-drift { to { transform: translate3d(3%, -2%, 0) scale(1.04); } }
@keyframes lgs-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes lgs-grow { from { transform: scaleY(0); } }
@keyframes lgs-draw { to { stroke-dashoffset: 0; } }
@keyframes lgs-pop { from { opacity: 0; transform: scale(.85); } }
@keyframes lgs-float { to { transform: translateY(-6px); } }

/* ── NARROWER DESKTOPS ────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .lg { grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr); }
  .lg-seal { width: 136px; height: 136px; }
  .lg-id { gap: 24px; }
  .lg-brand-in { gap: 38px; }
  .lg-pillars { gap: 16px; }
  .lg-side { padding: 40px 32px 0; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .lg-seal { width: 116px; height: 116px; box-shadow: 0 0 0 8px rgba(255, 255, 255, .13), 0 18px 36px -16px rgba(20, 12, 60, .55); }
  .lg-id { gap: 22px; }
  .lg-co { font-size: var(--t-micro); }
  .lg-promise { font-size: 16px; }
  .lg-brand-in { gap: 32px; }
  .lg-pillars { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lg-pillars li { align-items: center; }
  .lg-pillars b { display: inline; margin: 0 6px 0 0; }
}

/* ── STACKED: tablets and phones ──────────────────────────────────────── */
@media (max-width: 959px) {
  .lg { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .lg-brand { padding: 30px 16px 20px; }
  .lg-brand-in { max-width: 560px; gap: 20px; }
  .lg-id { flex-direction: column; text-align: center; gap: 16px; }
  .lg-seal { width: 104px; height: 104px; box-shadow: 0 0 0 7px rgba(255, 255, 255, .13), 0 16px 32px -14px rgba(20, 12, 60, .55); }
  .lg-co { font-size: var(--t-micro); margin-bottom: 6px; }
  .lg-product { font-size: 32px; }
  .lg-promise { margin: 8px auto 0; font-size: 15px; }
  .lgs, .lg-pillars { display: none; }
  .lgs-strip { display: flex; }
  .lg-side { padding: 24px 16px 0; }
  .lg-side-in { max-width: 520px; gap: 18px; margin-top: 0; }
  .lg-card { padding: 28px 22px 22px; }
  .lg-foot { justify-content: center; text-align: center; padding: 22px 0 20px; }
}
@media (max-width: 420px) {
  .lg-brand { padding-top: 24px; }
  .lg-seal { width: 92px; height: 92px; }
  .lg-product { font-size: 30px; }
  .lg-card { padding: 24px 18px 20px; }
  .lg-title { font-size: 22px; }
}

/* Short landscape screens (laptops once the browser's bars are taken off: 1366x768 leaves about 657,
   1280x720 about 610): the brand column steps down so it fits the window. Less padding first, then
   a smaller seal and sketch, then the three lines keep only their titles. The content stays centred
   while it fits ("safe": top-aligned, and scrolling with the page, if it ever does not). */
@media (min-width: 960px) and (max-height: 860px) {
  .lg-brand { align-items: flex-start; align-items: safe center; padding-top: 44px; padding-bottom: 44px; }
}
@media (min-width: 960px) and (max-height: 760px) {
  .lg-brand { padding-top: 32px; padding-bottom: 32px; }
  .lg-brand-in { gap: 26px; }
  .lg-seal { width: 120px; height: 120px; }
  .lgs-in { zoom: .9; }
}
@media (min-width: 960px) and (max-height: 700px) {
  .lg-brand { padding-top: 24px; padding-bottom: 24px; }
  .lg-brand-in { gap: 20px; }
  .lg-seal { width: 104px; height: 104px; box-shadow: 0 0 0 7px rgba(255, 255, 255, .13), 0 16px 32px -14px rgba(20, 12, 60, .55); }
  .lg-promise { margin-top: 10px; }
  .lgs { margin-bottom: 18px; }
  .lgs-in { zoom: .82; }
}
@media (min-width: 960px) and (max-height: 640px) {
  .lgs-in { zoom: .78; }
  .lg-pillars { grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 28px; }
  .lg-pillars li { align-items: center; }
  .lg-pillars b { margin: 0; }
  .lg-pillar-d { display: none; }
  .lg-side { padding-top: 24px; }
  .lg-foot { padding: 18px 0 14px; }
}
@media (min-width: 960px) and (max-height: 580px) {
  .lg-brand { padding-top: 18px; padding-bottom: 18px; }
  .lg-brand-in { gap: 16px; }
  .lg-seal { width: 88px; height: 88px; }
  .lg-product { font-size: 34px; }
  .lgs-in { zoom: .68; }
}

/* ── WHILE A STORED KEY IS CHECKED (App.jsx, on reload) ──────────────────
   The app's own page colour, not the sign-in's: most reloads are signed in and go straight to the
   app. Blank for the first 0.7s; after that the seal and a line fade in, so a slow check does not
   look like a broken page. */
.lg-check {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--page);
  color: var(--ink-3);
  font-family: var(--font);
  font-size: var(--t-meta);
}
.lg-check-in {
  display: grid;
  justify-items: center;
  gap: 14px;
  opacity: 0;
  animation: lg-check-in .4s var(--ease) .7s forwards;
}
.lg-check-seal {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(16, 22, 34, .4);
}
.lg-check-seal img { width: 80%; height: auto; display: block; }
@keyframes lg-check-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lg-check-in { animation-duration: 1ms; }   /* still after 0.7s, without the fade */
}

/* forced colours: keep the edges that the gradients and shadows were drawing */
@media (forced-colors: active) {
  .lg-card, .lg-field, .lgs-win, .lgs-chip { border: 1px solid CanvasText; }
  .lg-submit { border: 1px solid ButtonText; }
}