/* Hub chrome — the base element rules, the shared primitives every page composes
   (wrap, nav, buttons, inputs, type, section header, starfield) and the surfaces that
   sit between them and the per-page scoped sheets.

   The primitives lived in site.css, the marketing stylesheet copied verbatim from the
   prototype. Marketing moved to www.cloudatmo.com (Cloudatmo.Site.Public) and /hub became
   a sign-in shim, which left ~85% of that file styling nothing; the 25 classes the Hub
   still uses moved here on 2026-09-17, re-expressed on the hub-tokens.css bands (no raw
   colour literal outside the token sheet), and site.css was deleted. */

/* ---------------------------------------------------------------------------
   Base. tokens.css paints html and body with the marketing light --bg; the Hub is
   dark-only, so re-ground both — html too: its background, not body's, paints the canvas
   below a short page (the white band under the 80vh shims and the white flash between
   OIDC navigations).
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--color-ultramarine);
    color: var(--fg-on-dark);
    font-family: var(--font-body);
}
body { overflow-x: hidden; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* tokens.css styles code for the light marketing pages (near-white --neutral-100
   ground), which on the Hub's dark ground renders as an unreadable white-on-white
   chip (the Themes-tab notes, the error page's request-id reference). Re-ground it;
   the padding and radius from tokens.css stand. Loads after tokens.css, so the
   equal-specificity element rule wins on order. */
code {
    background: var(--dk-surface-3);
    color: var(--dk-text-3);
}

/* ---------------------------------------------------------------------------
   Layout and grounds.
   --------------------------------------------------------------------------- */
.ca-wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}
.ca-wrap--wide { max-width: 1360px; }

.ca-bg-space {
    background:
        radial-gradient(80% 50% at 50% 0%, var(--purple-a18) 0%, transparent 70%),
        radial-gradient(60% 40% at 90% 30%, var(--cyan-a10) 0%, transparent 70%),
        var(--color-ultramarine);
    position: relative;
}

/* Decorative starfield for any dark ground; dot brightness sits on the white text bands. */
.ca-stars {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    background-image:
        radial-gradient(1px 1px at 8% 14%, var(--white-a75), transparent 60%),
        radial-gradient(1px 1px at 18% 64%, var(--white-a55), transparent 60%),
        radial-gradient(1.5px 1.5px at 33% 8%, var(--white-a75), transparent 60%),
        radial-gradient(1px 1px at 52% 22%, var(--white-a55), transparent 60%),
        radial-gradient(1px 1px at 72% 12%, var(--white-a75), transparent 60%),
        radial-gradient(1.2px 1.2px at 86% 48%, var(--white-a55), transparent 60%),
        radial-gradient(1px 1px at 92% 84%, var(--white-a55), transparent 60%),
        radial-gradient(1px 1px at 25% 92%, var(--white-a35), transparent 60%),
        radial-gradient(1px 1px at 62% 78%, var(--white-a55), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 28%, var(--white-a75), transparent 60%);
}

/* ---------------------------------------------------------------------------
   Type.
   --------------------------------------------------------------------------- */
.ca-h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    margin: 0;
}
.ca-eyebrow {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-cyan);
    margin: 0 0 16px;
    display: inline-flex; align-items: center; gap: 8px;
}
.ca-eyebrow::before {
    content: ""; width: 24px; height: 1px; background: var(--color-cyan);
}
.ca-lede {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.6;
    color: var(--dk-text-2);
    margin: 0;
    max-width: 60ch;
}
.ca-mono {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   Nav bar. DashboardNav.razor.css adds the burger and the user menu; the link strip
   hides under 980px (breakpoints below) and the burger takes over.
   --------------------------------------------------------------------------- */
.ca-nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: var(--dk-nav-glass);
    border-bottom: 1px solid var(--dk-divider);
}
.ca-nav__inner {
    display: flex; align-items: center; gap: 32px;
    height: 64px;
}
.ca-nav__logo {
    height: 28px; cursor: pointer; flex-shrink: 0;
}
.ca-nav__links {
    display: flex; align-items: center; gap: 4px; list-style: none;
    margin: 0; padding: 0;
}
.ca-nav__link {
    background: none; border: 0; color: var(--dk-text-2);
    font-size: 14px; font-weight: 500;
    padding: 8px 14px; border-radius: 8px; cursor: pointer;
    font-family: inherit;
    transition: color .15s, background .15s;
    position: relative;
}
.ca-nav__link:hover { color: var(--dk-text-1); background: var(--dk-surface-3); }
.ca-nav__link[aria-current="page"] {
    color: var(--dk-text-1);
}
.ca-nav__link[aria-current="page"]::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
    height: 2px; background: var(--color-cyan); border-radius: 2px;
}
.ca-nav__spacer { flex: 1; }

/* ---------------------------------------------------------------------------
   Buttons and links.
   --------------------------------------------------------------------------- */
.ca-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-weight: 600;
    border: 0; cursor: pointer;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 15px;
    transition: transform .18s var(--ease-out), opacity .18s, box-shadow .18s;
    text-decoration: none;
    white-space: nowrap;
}
.ca-btn:hover { transform: translateY(-2px); }
.ca-btn:active { transform: translateY(0) scale(.97); }
.ca-btn--cta {
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--color-gold) 100%);
    color: var(--white);
    box-shadow: 0 10px 24px var(--gold-a40);
}
.ca-btn--cyan {
    background: var(--color-cyan); color: var(--white);
    box-shadow: 0 8px 20px var(--cyan-a30);
}
/* The destructive confirm — one button, on a sheet that deletes something. */
.ca-btn--danger {
    background: var(--color-danger); color: var(--white);
    box-shadow: 0 8px 20px var(--danger-a40);
}
.ca-btn--ghost {
    background: var(--dk-surface-3);
    border: 1px solid var(--white-a18);
    color: var(--white);
}
.ca-btn--ghost:hover { background: var(--white-a12); }
.ca-btn--lg { padding: 16px 32px; font-size: 16px; }
.ca-btn--sm { padding: 8px 16px; font-size: 13px; }

/* A disabled button must not keep the pointer cursor and hover lift and look live.
   Applies to the Brand Button primitive and every raw ca-btn usage alike. */
.ca-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

.ca-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-cyan); font-weight: 600;
    font-size: 14px; cursor: pointer;
    background: none; border: 0; padding: 0;
    font-family: inherit;
    transition: gap .15s, opacity .15s;
}
.ca-link:hover { gap: 10px; opacity: .85; }

/* ---------------------------------------------------------------------------
   Inputs. .ca-input paints its own cyan ring on focus, so the global :focus-visible
   rule further down excludes it.
   --------------------------------------------------------------------------- */
.ca-input {
    width: 100%;
    background: var(--black-a18);
    border: 1px solid var(--dk-border-strong);
    color: var(--white);
    font-family: inherit;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color .15s, background .15s;
}
.ca-input:focus {
    border-color: var(--color-cyan);
    background: var(--black-a35);
    box-shadow: 0 0 0 3px var(--cyan-a14);
}
.ca-input::placeholder { color: var(--dk-text-3); }
textarea.ca-input { resize: vertical; min-height: 86px; font-family: inherit; }

/* Native <select> lists (20 Oct 2026). The open list is drawn by the browser, which cannot
   paint a translucent ground such as .ca-input's, so it fell back to its own light grey while
   the options inherited the control's white text: white on light grey, unreadable. Every
   select gets a solid dark ground and light text on its options, which Chromium and Firefox
   honour, and color-scheme: dark, which asks the browser for its dark list where it ignores
   option colours (Safari, macOS) and lightens the control's own arrow. The page-scoped rules
   on the Activity, Logs, Projects and Resources selects still apply on top. */
select { color-scheme: dark; }
select option,
select optgroup {
    background-color: var(--dk-well-1);
    color: var(--dk-text-1);
}
select option:disabled { color: var(--dk-text-5); }

.ca-label {
    font-family: var(--font-heading); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--dk-text-3);
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
}

/* ---------------------------------------------------------------------------
   Section header (the Brand SectionHeader primitive composes these).
   --------------------------------------------------------------------------- */
.ca-shead {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: flex-end;
    margin-bottom: 56px;
}
.ca-shead--center {
    display: block; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto;
}
.ca-shead p { margin: 16px 0 0; }

/* Breakpoints for the primitives. */
@media (max-width: 980px) {
    .ca-nav__links { display: none; }
}
@media (max-width: 600px) {
    .ca-wrap { padding: 0 20px; }
}

/* Full-viewport hub page shell, shared by every authenticated page.
   Per-page padding tweaks and the starfield opacity stay in each page's scoped css. */
.ca-screen {
    min-height: 100vh;
    position: relative;
}

.ca-page-wrap {
    position: relative;
    padding: 32px 32px 80px;
}

.ca-page {
    min-height: 70vh;
    padding: 64px 0;
    color: var(--fg-on-dark);
}

.ca-page h1 {
    color: var(--white);
    margin: 0 0 16px;
}

.ca-page h3 {
    color: var(--white);
    margin: 32px 0 12px;
    font-family: var(--font-heading);
}

.ca-page ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--white-a85);
}

.ca-page ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--white-a06);
}

.ca-page a {
    color: var(--color-cyan);
}

.ca-placeholder {
    margin: 24px 0 32px;
    padding: 14px 16px;
    background: var(--cyan-a06);
    border: 1px dashed var(--cyan-a30);
    border-radius: 8px;
    color: var(--white-a75);
    font-family: var(--font-mono);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ca-backlink {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--white-a65);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 13px;
}

.ca-company-group {
    margin-top: 32px;
}

/* Branded sign-in / sign-out shim — replaces the white flash when OIDC challenge fires. */
.ca-signin-shim {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--color-ultramarine);
    color: var(--white);
    padding: 64px 24px;
    text-align: center;
}

.ca-signin-shim__badge {
    padding: 4px 10px;
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--cyan-a14);
    color: var(--color-cyan);
    border-radius: 4px;
    border: 1px solid var(--cyan-a30);
    font-weight: 600;
}

.ca-signin-shim__msg {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    margin: 16px 0 4px;
    /* tokens.css targets h1 directly with the light-surface --fg1, which beats the
       shim container's inherited white — restate the colour on the element. */
    color: var(--dk-text-1);
}

.ca-signin-shim__hint {
    color: var(--white-a60);
    font-size: 13px;
    font-family: var(--font-mono);
    max-width: 480px;
}

.ca-signin-shim__retry {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 8px 16px;
    background: var(--color-cyan);
    border-radius: 8px;
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    transition: filter .15s;
}

.ca-signin-shim__retry:hover {
    filter: brightness(1.08);
    opacity: 1;
}

/* Secondary affordance under a primary __retry (e.g. Back to the Hub beneath the
   admin-consent link on /signin-failed?reason=approval). */
.ca-signin-shim__ghost {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 8px 16px;
    color: var(--white-a70);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 13px;
}

.ca-signin-shim__ghost:hover {
    color: var(--white);
}

/* Self-registration flow (/register, /register/join, /register/company) — shared by the
   three pages, so global here rather than scoped per page. Dark shell like the sign-in shim. */
.reg {
    min-height: 80vh;
    background: var(--color-ultramarine);
    color: var(--white);
    padding: 64px 24px 96px;
}

.reg-wrap {
    max-width: 720px;
    margin: 0 auto;
}

.reg-wrap--narrow {
    max-width: 520px;
}

.reg-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    margin: 0 0 8px;
    color: var(--white);
}

.reg-sub {
    color: var(--white-a72);
    font-size: 15px;
    margin: 0 0 28px;
}

.reg-hint {
    color: var(--white-a50);
    font-size: 13px;
    font-family: var(--font-mono);
    margin: 12px 0 0;
}

.reg-error {
    margin-top: 16px;
    padding: 10px 14px;
    background: var(--red-a12);
    border: 1px solid var(--red-a40);
    border-radius: 8px;
    color: var(--red-tint);
    font-size: 13px;
}

.reg-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

/* A box that belongs to the one above it — the Practice Management site, under the SharePoint
   address it is joined to. */
.reg-form__indent {
    margin-left: 24px;
}

/* A fixed part of a value shown beside the part that is asked for (the "/sites/" before the
   site box) — the registration wizard's take on the Ubiquiti panel's uri-box. */
.reg-affix {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reg-affix__text {
    flex-shrink: 0;
    color: var(--white-a50);
    font-family: var(--font-mono);
    font-size: 13px;
    white-space: nowrap;
}

.reg-affix .ca-input {
    flex: 1 1 auto;
    min-width: 0;
}

.reg-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
}

.reg-back {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--white-a65);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 13px;
}

.reg-back:hover {
    color: var(--white);
}

/* Choice cards on /register. */
.reg-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.reg-choice {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px;
    background: var(--white-a04);
    border: 1px solid var(--white-a14);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s;
}

.reg-choice:hover {
    border-color: var(--color-cyan);
    background: var(--cyan-a10);
}

.reg-choice__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: var(--white);
}

.reg-choice__text {
    color: var(--white-a65);
    font-size: 13px;
    line-height: 1.5;
}

/* Wizard step strip. */
.reg-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    list-style: none;
    margin: 0 0 28px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--white-a10);
}

.reg-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--white-a45);
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: nowrap;
}

.reg-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--white-a30);
    font-size: 11px;
}

.reg-step--active {
    color: var(--white);
}

.reg-step--active .reg-step__num {
    background: var(--color-cyan);
    border-color: var(--color-cyan);
    color: var(--white);
}

.reg-step--done {
    color: var(--cyan-a85);
}

.reg-step--done .reg-step__num {
    border-color: var(--cyan-a55);
    color: var(--color-cyan);
}

/* Grouped selection (projects, practice management, credential choice). */
.reg-group {
    margin-top: 16px;
    border: 1px solid var(--white-a14);
    border-radius: 12px;
    overflow: hidden;
}

.reg-group__title {
    padding: 10px 16px;
    background: var(--white-a05);
    border-bottom: 1px solid var(--white-a10);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white-a70);
}

.reg-group__section {
    padding: 8px 16px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white-a45);
}

.reg-option {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    color: var(--white-a75);
    font-size: 14px;
    border-bottom: 1px solid var(--white-a06);
}

.reg-option:last-of-type {
    border-bottom: none;
}

.reg-option:hover {
    background: var(--white-a03);
}

.reg-option--locked {
    cursor: default;
    color: var(--white-a60);
}

.reg-option strong {
    color: var(--white);
}

/* Users step. */
.reg-users {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reg-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--white-a04);
    border: 1px solid var(--white-a12);
    border-radius: 10px;
}

.reg-user__name {
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
}

.reg-user__upn {
    color: var(--white-a65);
    font-family: var(--font-mono);
    font-size: 13px;
}

.reg-user__badge {
    margin-left: auto;
    padding: 2px 8px;
    background: var(--cyan-a14);
    border: 1px solid var(--cyan-a30);
    border-radius: 4px;
    color: var(--color-cyan);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* An invitee's phone number, or the note that none was given. */
.reg-user__contact {
    color: var(--white-a50);
    font-family: var(--font-mono);
    font-size: 13px;
    white-space: nowrap;
}

.reg-user__remove {
    margin-left: auto;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--white-a50);
}

.reg-user__remove:hover {
    color: var(--white);
}

/* The owner row wraps so the required phone field sits under the identity line. */
.reg-user--owner {
    flex-wrap: wrap;
}

.reg-user__phone {
    flex-basis: 100%;
    margin-top: 4px;
}

.reg-addrow {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

.reg-addrow .ca-input {
    flex: 1;
}

.reg-addrow .reg-addrow__phone {
    flex: 0 1 180px;
}

@media (max-width: 560px) {
    .reg-addrow {
        flex-wrap: wrap;
    }

    .reg-addrow .reg-addrow__phone {
        flex-basis: 100%;
    }
}

/* Summary step. */
.reg-summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reg-summary__section {
    border: 1px solid var(--white-a12);
    border-radius: 12px;
    overflow: hidden;
}

.reg-summary__heading {
    padding: 10px 16px;
    background: var(--white-a05);
    border-bottom: 1px solid var(--white-a10);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white-a70);
}

.reg-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--white-a06);
    font-size: 14px;
}

.reg-summary__row:last-child {
    border-bottom: none;
}

.reg-summary__row span:first-child {
    color: var(--white-a55);
    font-family: var(--font-mono);
    font-size: 13px;
    white-space: nowrap;
}

.reg-summary__row span:last-child {
    color: var(--white);
    text-align: right;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   Error + reconnection chrome (see App.razor / DashboardLayout.razor).
   --------------------------------------------------------------------------- */

/* Unhandled-circuit-error bar — blazor.web.js flips it to display:block. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px 48px 12px 20px;
    background: var(--dk-elevated);
    border-top: 1px solid var(--red-a50);
    color: var(--white);
    font-size: 13px;
    box-shadow: 0 -12px 32px var(--black-a40);
}

#blazor-error-ui .ca-error-bar__reload {
    margin-left: 12px;
    color: var(--color-cyan);
    font-weight: 600;
    text-decoration: none;
}

#blazor-error-ui .ca-error-bar__dismiss {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--white-a60);
}

/* Reconnection modal — the framework toggles components-reconnect-{show,failed,rejected}
   on #components-reconnect-modal; only the message for the active state renders. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    align-items: center;
    justify-content: center;
    background: var(--dk-scrim-strong);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.ca-reconnect__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 40px;
    background: var(--dk-elevated);
    border: 1px solid var(--white-a08);
    border-radius: 12px;
    box-shadow: 0 24px 60px var(--black-a40);
    color: var(--white);
    font-size: 14px;
    text-align: center;
}

.ca-reconnect__msg {
    display: none;
    margin: 0;
}

.ca-reconnect__msg a {
    color: var(--color-cyan);
}

.components-reconnect-show .ca-reconnect__msg--show,
.components-reconnect-failed .ca-reconnect__msg--failed,
.components-reconnect-rejected .ca-reconnect__msg--rejected {
    display: block;
}

/* ---------------------------------------------------------------------------
   Keyboard focus. Nothing in the primitives above / the scoped sheets defined a :focus-visible
   state, and .ca-input resets the outline, so keyboard users had no ring at all.
   --------------------------------------------------------------------------- */
:where(a, button, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-cyan);
    outline-offset: 2px;
    border-radius: 4px;
}

/* .ca-input paints its own cyan ring on focus (above). */
input:not(.ca-input):focus-visible {
    outline: 2px solid var(--color-cyan);
    outline-offset: 2px;
}

/* FocusOnNavigate (Routes.razor) moves focus to the page's h1 after navigation for
   screen readers. The heading isn't interactive, so suppress the UA default focus
   ring Chromium draws around it (same convention as the Blazor template's app.css). */
h1:focus {
    outline: none;
}

@media (max-width: 600px) {
    .ca-page-wrap { padding: 16px 16px 64px; }
}