/* Orbit Monitor — production additions on top of the Demo 3 design files (tokens, base, components, orbit, auth).
   Only what the PHP views need that the design files do not already have. Colours come from tokens.css only. */

.mb-4 { margin-bottom: var(--sp-4); }

/* flash messages (server-side) */
.flash { margin-bottom: var(--sp-4); }
.flash .callout__text { color: var(--text); }
.callout--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.callout--ok .callout__icon { color: var(--ok-text); }
.callout--danger .callout__icon { color: var(--danger-text); }
.callout--warn .callout__icon { color: var(--warn-text); }
.callout__icon { flex: none; margin-top: 1px; }
.au-card .flash { margin: var(--sp-5) 0 0; }

/* sign out is a real POST form inside the user menu */
.menu__form { margin: 0; display: block; }
.menu__form .menu__item { width: 100%; }

/* login / 2FA / update */
.au-hint { flex: 1; }
.au-twofa { margin-top: var(--sp-6); }
.au-twofa .au-otp { margin-top: 0; }
.upd-list { margin: var(--sp-5) 0 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); overflow: hidden; }
.upd-list__head { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 10px 14px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); border-bottom: 1px solid var(--border); }
.upd-list ul { max-height: 220px; overflow: auto; }
.upd-list li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.upd-list li:last-child { border-bottom: 0; }
.upd-list li .icon { color: var(--warn-dot); }

/* dashboard welcome */
.db-welcome { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 980px; }
.db-welcome .page-head { margin-bottom: 0; }
.welcome__empty { padding: 56px var(--sp-5); }
.welcome__mark { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-soft-border); width: 64px; height: 64px; border-radius: 18px; }
.welcome__title { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; color: var(--text); }
.welcome__text { max-width: 46ch; font-size: var(--fs-md); line-height: 1.55; }
.syscheck__list { display: flex; flex-direction: column; }
.syscheck__row { display: flex; align-items: center; gap: var(--sp-4); padding: 14px var(--sp-5); border-top: 1px solid var(--border); }
.syscheck__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface-3); color: var(--text-2); flex: none; }
.syscheck__main { flex: 1; min-width: 0; }
.syscheck__title { font-weight: 600; font-size: var(--fs-sm); }
.syscheck__sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }

/* profile and 2FA (from Demo 3 profile.css, trimmed) */
.pf--narrow { max-width: 860px; }
.pf .page-head { margin-bottom: 0; }
.pf-id { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-6); flex-wrap: wrap; }
.pf-id__avatar { width: 64px; height: 64px; font-size: 22px; }
.pf-id__main { flex: 1; min-width: 220px; } .pf-id__name { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; } .pf-id__mail { color: var(--text-3); font-size: var(--fs-sm); margin-top: 2px; }
.pf-id__facts { display: flex; gap: var(--sp-6); flex-wrap: wrap; } .pf-id__facts dt { font-size: var(--fs-xs); color: var(--text-3); } .pf-id__facts dd { margin-top: 2px; font-size: var(--fs-sm); font-weight: 600; }
.pf-rows { padding-top: 0; padding-bottom: 0; }
.pf-val { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.pf-val__text { font-size: var(--fs-sm); font-weight: 550; min-width: 0; overflow-wrap: anywhere; } .pf-val__text .muted { font-weight: 400; margin-left: 6px; }
.pf-val__lock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); } .pf-val__lock .icon { width: 13px; height: 13px; }
.pf-typed { padding: 1px 6px; border-radius: 5px; background: var(--surface-3); font-weight: 600; }
.pf-codes__note { margin-bottom: var(--sp-4); }
.pf-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
.pf-codes li { font-family: var(--font-mono); font-size: 14px; font-weight: 550; letter-spacing: 0.04em; padding: 8px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); text-align: center; user-select: all; }
.pf-steps { display: flex; flex-direction: column; gap: var(--sp-6); }
.pf-step { display: flex; gap: var(--sp-4); }
.pf-step__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-soft-border); font-weight: 650; font-size: var(--fs-sm); }
.pf-step__main { flex: 1; min-width: 0; }
.pf-step__title { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.01em; }
.pf-step__text { margin-top: 3px; color: var(--text-3); font-size: var(--fs-sm); }
.pf-setup { display: flex; gap: var(--sp-6); align-items: flex-start; flex-wrap: wrap; margin-top: var(--sp-4); }
.pf-qr { flex: none; width: 196px; padding: 10px; border-radius: var(--radius-lg); background: var(--qr-bg); border: 1px solid var(--border-strong); line-height: 0; }
.pf-qr svg { width: 100%; height: auto; display: block; }
.pf-key { flex: 1; min-width: 220px; }
.pf-key__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
.pf-key__row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pf-key__code { padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); font-weight: 600; letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; }
.pf-key .help { margin-top: 8px; }
.pf-key__open { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 550; } .pf-key__open .icon { width: 15px; height: 15px; }
.pf-form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); max-width: 360px; }
.pf-code { letter-spacing: 0.3em; font-size: 18px; text-align: center; }
@media (max-width: 720px) { .pf-id { padding: var(--sp-5); } .pf-id__facts { gap: var(--sp-4); } .pf-val { align-items: flex-start; } .pf-codes { grid-template-columns: minmax(0, 1fr); } }

/* error pages: dev-only detail */
.sys-dev { margin-top: var(--sp-6); max-width: min(720px, 100%); overflow: auto; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); font: 12px/1.5 var(--font-mono); white-space: pre-wrap; }