:root {
    background-color: var(--surface);

    /* Fonts Settings */
    /* Legacy font aliases -> the two self-hosted families (tokens.css). */
    --font-family: var(--font-ui);
    --second-family: var(--font-ui);
    --third-family: var(--font-display);
    --font3: var(--font-ui);
    --font4: var(--font-display);
    /* Colors Settings */
    /* Legacy aliases. Kept for out-of-scope pages; identical values are
       mapped to tokens.css primitives. New code uses semantic tokens. */
    --blue-color: var(--blue-500);
    --green-color: var(--green-500);
    --yellow-color: var(--amber-500);
    --red-color: var(--red-500);
    --text-gray-color: var(--ink-500);
    --text-dark-color: var(--ink-900);
    --text-gray-dark: #474E64;
    --text-gray-dark-color: #54596b;

    --gray-200: var(--ink-50);
    --gray-300: var(--ink-300);
    --gray-500: var(--ink-500);
    --gray-600: #6C7589;
    --gray-700: #54596B;
    --gray-800: var(--ink-900);
}

/* ---------- Base (Mobile First) ---------- */

html, body, #app {
    height: 100%;
    min-height: 100%;
    margin: 0;
}

html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--surface);
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background-color: var(--gray-200);
    color: var(--text-gray-dark-color);
}

main {
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Global scroll lock for modals/drawers (toggled from JS). */
html.scroll-lock,
body.scroll-lock {
    overflow: hidden;
}

/* Skip link: first focusable element, visible only on focus. */
.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: var(--z-toast);
    background: var(--surface-inverse);
    color: var(--white);
    padding: 12px 16px;
    border-radius: var(--r-sm);
    font-weight: var(--w-bold);
    text-decoration: none;
    transition: top var(--d-fast) var(--ease-out);
}

    .skip-link:focus {
        top: 16px;
    }

.overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--surface-overlay);
    /* Above the sticky header and the tab bar — a loader that leaves a white
       strip of chrome on top reads as a broken page. */
    z-index: var(--z-modal);
    transition: opacity .3s ease-in-out;
}

/* Loading overlay: the loader with an optional caption underneath it */
.loading-modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-modal__text {
    color: #fff;
    font-size: 15px;
    text-align: center;
}

/* Layout (mobile): single column */
.layout {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 12px calc(var(--tabbar-h) + var(--s-3) + env(safe-area-inset-bottom));
    display: block;
    gap: 16px;
}

/* Focused flows (passing, constructors, relay) hide the tab bar:
   they carry their own bottom action bars. */
.layout:has(.tp-root, .tc-root, .qc-root, .rl-root) {
    padding-bottom: 20px;
}

    .layout:has(.tp-root, .tc-root, .qc-root, .rl-root) .tabbar {
        display: none;
    }

/* Focused shell for the create-test workshop (/tests/new) and for passing a test: nav chrome and
   header tools step aside, nothing distracts from the flow, which carries its own way out. */
.layout:has(.ctp-root, .tp-root) {
    padding-bottom: 20px;
}

    .layout:has(.ctp-root, .tp-root) .tabbar,
    .layout:has(.ctp-root, .tp-root) .sidebar,
    .layout:has(.ctp-root, .tp-root) .header-search,
    .layout:has(.ctp-root, .tp-root) .header-search-mobile,
    .layout:has(.ctp-root, .tp-root) .header-create {
        display: none;
    }

@media (min-width: 768px) {
    .layout:has(.ctp-root, .tp-root) {
        grid-template-areas:
            "header header"
            "body body"
            "footer footer";
    }
}

p {
    margin: 0px;
}

/* Header: compact, burger visible on mobile */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

.logo {
    max-height: 40px;
}

.header-body {
    display: none; /* hidden on mobile */
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
    flex-grow: 1;
}

.header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* One primary CTA per screen: the My Tests overview has its own create
   button, so the header one hides there (rule 7 of the spec). */
.layout:has(.mt-root:not(.mt-root--list) > .pbar) .header-create {
    display: none;
}

/* The search page carries the real field — the header door to it hides there. */
.layout:has(.sr-root) .header-search,
.layout:has(.sr-root) .header-search-mobile {
    display: none;
}

/* Header search: submits to the library (GET /library?q=...). */
/* The header field is a door to the search page, not a field of its own: it wears the shape of an
   input so the page it opens continues the same object. */
.header-search {
    flex: 1;
    max-width: 420px;
    min-width: 0;
    box-sizing: border-box;
    height: var(--ctl-md);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0 var(--s-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface-raised);
    font-family: var(--font-ui);
    font-size: var(--t-ui);
    color: var(--text-secondary);
    text-decoration: none;
}

    .header-search span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-search svg {
        flex: 0 0 auto;
    }

@media (hover: hover) {
    .header-search:hover {
        border-color: var(--text-tertiary);
        color: var(--text-secondary);
    }
}

.header-search:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 0;
    border-color: transparent;
}

/* Mobile-only door to the search page: the header field above is hidden below 768px. */
.header-search-mobile {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ctl-md);
    height: var(--ctl-md);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface-raised);
    color: var(--text-secondary);
    text-decoration: none;
}

@media (min-width: 768px) {
    .header-search-mobile {
        display: none;
    }
}

/* "Ввести код": the way into an online testing room from any page. */
.header-join,
.header-join-mobile {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--ctl-md);
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-line);
    color: var(--text-on-soft);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: var(--w-semi);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease;
}

.header-join {
    padding: 0 16px;
}

.header-join-mobile {
    width: var(--ctl-md);
}

/* On phones the logo takes the free space, so the code and search doors sit together on the right. */
.header > .logo-container {
    margin-right: auto;
}

    .header-join:hover,
    .header-join-mobile:hover {
        background: var(--blue-100);
        color: var(--text-on-soft);
    }

@media (min-width: 768px) {
    .header-join-mobile {
        display: none;
    }
}

/* Focused flows and the code screen itself do not need the door. */
.layout:has(.ctp-root, .tp-root, .rl-root) .header-join,
.layout:has(.ctp-root, .tp-root, .rl-root) .header-join-mobile {
    display: none;
}

.header-body-nav {
    display: none; /* hidden on mobile */
}

.default-button {
    /* Button */
    cursor: pointer;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 32px;
    gap: 10px;
    border-radius: 12px;
    /* Text */
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.outline-button {
    background-color: transparent;
    color: var(--gray-700);
    border: 1px solid var(--gray-700);
}

/* System buttons (design system 7.2). Replace .green-button / .blue-button. */
.btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: var(--ctl-md);
    padding: 0 var(--s-5);
    border: none;
    border-radius: var(--r-sm);
    font-family: var(--font-ui);
    font-size: var(--t-ui);
    font-weight: var(--w-semi);
    line-height: var(--t-ui-lh);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}

    .btn:active {
        transform: scale(.97);
    }

.btn--primary {
    background: var(--accent-action);
    color: var(--text-on-accent);
}

@media (hover: hover) {
    .btn--primary:hover {
        background: var(--accent-hover);
    }
}

.btn--soft {
    background: var(--accent-soft);
    color: var(--text-on-soft);
}

.btn--ghost {
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
}

@media (hover: hover) {
    .btn--ghost:hover {
        border-color: var(--text-tertiary);
        color: var(--text-primary);
    }
}

.btn--danger {
    background: var(--danger);
    color: var(--white);
}

.btn--sm {
    min-height: var(--ctl-sm);
    padding: 0 var(--s-3);
    font-size: var(--t-sub);
}

/* ---------- Bottom tab bar (mobile) ----------
   Mirrors the app's TabBar (Controls/TabBar.xaml): a white card rounded 20 at
   the top, four tabs with filled icons; the active tab only changes colour. */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-tabbar);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface-raised);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 16px rgba(22, 30, 39, .08);
}

.tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: var(--tap-min);
    font-family: var(--font-ui);
    font-size: var(--t-cap);
    font-weight: var(--w-semi);
    color: var(--nav-inactive);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

    .tab svg {
        flex: 0 0 auto;
    }

    .tab.active {
        color: var(--accent-action);
    }

/* Sidebar for desktop is hidden on mobile */
.sidebar {
    display: none;
}

a.nav-item {
    box-sizing: border-box;
    position: relative;
    display: flex;
    padding: 24px 12px;
    width: auto;
    height: 48px;
    flex-direction: row;
    gap: 12px;
    justify-content: start;
    align-items: center;
    font-family: var(--font-ui);
    font-weight: var(--w-semi);
    font-size: var(--t-ui);
    text-decoration: none;
    line-height: 150%;
    color: var(--text-secondary);
    background-color: transparent;
    border-width: 0;
    margin: 0;
    cursor: pointer;
    transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}

    a.nav-item svg {
        color: var(--text-tertiary);
        transition: color var(--d-fast) var(--ease-out);
    }

    a.nav-item:hover {
        background-color: var(--surface-sunken);
        border-radius: 12px;
        color: var(--text-primary);
    }

    /* The brand facet: 3px edge + soft fill, no more blue pill. */
    a.nav-item.active {
        border-radius: 12px;
        background-color: var(--accent-soft);
        color: var(--text-on-soft);
    }

        a.nav-item.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            bottom: 10px;
            width: var(--edge);
            border-radius: 0 var(--edge) var(--edge) 0;
            background: var(--accent);
        }

        a.nav-item.active svg {
            color: var(--accent-action);
        }

/* Content column: pages sit directly on --surface; panels and cards carry their own white. */
.body {
    padding: 4px 0 0;
    background: transparent;
    overflow: visible;
    margin-top: 0;
}

/* The column takes focus after navigation (skip link, FocusOnNavigate); a ring around the whole
   content would read as a plate. */
.body:focus {
    outline: none;
}

/* Breadcrumbs / small utilities */
/* InDevelopment component related (mobile defaults) */
.title {
    font-family: var(--third-family);
    color: var(--text-gray-dark-color);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
    text-align: center;
}

.subtitle {
    font-family: var(--font-family);
    color: var(--gray-500);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

.poster {
    align-self: center;
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
}

/* loaders kept as-is (desktop-like sizes ok) */
.wasm-loading-progress {
    position: absolute;
    display: block;
    width: 6rem;
    height: 6rem;
    inset: 18vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .wasm-loading-progress circle {
        fill: none;
        stroke: var(--blue-color);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .wasm-loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.wasm-loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .wasm-loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

.loader {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 50px auto;
}

.loader-circle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: rotate 1.5s linear infinite;
}

    .loader-circle:nth-child(1) {
        background-color: var(--green-500);
        top: 0;
        left: 0;
    }

    .loader-circle:nth-child(2) {
        background-color: var(--blue-500);
        top: 0;
        right: 0;
    }

    .loader-circle:nth-child(3) {
        background-color: var(--amber-500);
        bottom: 0;
        right: 0;
    }

    .loader-circle:nth-child(4) {
        background-color: var(--red-500);
        bottom: 0;
        left: 0;
    }

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader-square {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 50px auto;
    animation: rotate 2s linear infinite;
}

.square-circle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

    .square-circle:nth-child(1) {
        background-color: var(--green-500);
        top: -5px;
        left: -5px;
    }

    .square-circle:nth-child(2) {
        background-color: var(--blue-500);
        top: -5px;
        right: -5px;
    }

    .square-circle:nth-child(3) {
        background-color: var(--amber-500);
        bottom: -5px;
        right: -5px;
    }

    .square-circle:nth-child(4) {
        background-color: var(--red-500);
        bottom: -5px;
        left: -5px;
    }


/* Screens that open with a page bar, followed by their content on the surface. */
.crumbs-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.beta-indicator {
    height: 16px;
    padding: 2px 4px;
    align-content: center;
    align-self: flex-start;
    font-family: var(--font-family);
    line-height: 120%;
    color: #fff;
    background: var(--yellow-color);
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.footer {
    grid-area: footer;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 8px;
    margin: 32px 0;
}

/* Full tap-height rows on the phone; readable body size everywhere. */
.footer-link-item {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    text-decoration: none;
    font-family: var(--font-ui);
    font-weight: var(--w-semi);
    font-size: var(--t-body);
    line-height: var(--t-body-lh);
    color: var(--text-secondary);
}

@media (hover: hover) {
    .footer-link-item:hover {
        color: var(--text-primary);
    }
}

.copyright-container {
    margin-top: 24px;
    align-self: center;
}

.footer-copyright {
    font-family: var(--font-ui);
    font-weight: var(--w-medium);
    font-size: var(--t-sub);
    line-height: var(--t-sub-lh);
    color: var(--text-tertiary);
}


.cookie-consent-container {
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    bottom: calc(16px + var(--tabbar-h) + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    position: fixed;
    z-index: var(--z-overlay);
    max-width: 630px;
    max-height: 160px;
    border-radius: var(--r-xl);
    padding: 24px;
    background: var(--surface-raised);
    box-shadow: var(--elev-3);
    animation: slideUp 0.3s ease-out;
}

.cookie-consent-texts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


    .cookie-consent-title-container > p {
        align-content: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: var(--gray-800);
    }

.cookie-consent-image {
    max-width: 24px;
    max-height: 24px;
}

.cookie-consent-description {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--gray-600);
}

.cookie-consent-buttons-container {
    align-content: end;
}

.cookie-consent-button {
    width: 100%;
    max-height: 48px;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: White;
}

    .cookie-consent-button:hover {
        transform: translateY(1px);
    }

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.cookie-hide {
    animation: slideDown 0.3s ease-out forwards;
}

/* ---------- Tablet and up ---------- */
@media (min-width: 768px) {
    .layout {
        display: grid;
        grid-gap: 20px;
        grid-template-areas:
            "header header"
            "sidebar body"
            "footer footer";
        /* Fixed rail width: the sidebar must not breathe with the window. */
        grid-template-columns: var(--rail-w) minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        width: 100%;
        max-width: calc(var(--content-max) + var(--nav-w) + 20px);
        margin: 0 auto;
        padding: 0 var(--gutter) 0;
    }

    .tabbar {
        display: none;
    }

    .sidebar {
        display: block;
        width: auto;
        box-sizing: border-box;
        padding: 8px 0;
        /* Approved shell: the nav sits flat on the surface, no white plate. */
        background: transparent;
        position: sticky;
        top: var(--sticky-top);
        align-self: start;
        max-height: calc(100dvh - var(--header-h) - var(--s-8));
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header {
        grid-area: header;
        padding: 12px 0;
        position: sticky;
        top: 0;
        z-index: var(--z-header);
        min-height: var(--header-h);
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    .header-body {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-grow: 1;
    }

    .header-body-nav {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .logo {
        max-height: 24px;
    }

    a.nav-item.active {
        border-radius: 0;
    }

        a.nav-item {
            justify-content: center;
        }

        a.nav-item > svg {
            min-width: 24px;
            min-height: 24px;
        }

        a.nav-item > p {
            display: none;
        }

    .body {
        grid-area: body;
        min-width: 0;
    }

    .poster {
        max-width: 420px;
    }

    .title {
        font-size: 26px;
    }

    .subtitle {
        font-size: 16px;
    }

    /* The footer mirrors the header: the same height and a dividing line,
       with air below so it does not sit glued to the viewport edge. */
    .footer {
        margin: 0;
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 40px;
        min-height: var(--header-h);
        padding: 12px 0 24px;
        border-top: 1px solid var(--border);
    }

    .copyright-container {
        margin-top: 0;
        flex: 1;
        text-align: right;
    }

    .cookie-consent-container {
        flex-direction: row;
        right: 40px;
        bottom: 44px;
        left: auto;
    }

    .cookie-consent-image {
        max-width: 32px;
        max-height: 32px;
    }

    .cookie-consent-button {
        width: 216px;
        max-height: 48px;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: White;
    }
}

/* ---------- Desktop and wider ---------- */
@media (min-width: 1024px) {
    .layout {
        grid-template-columns: var(--nav-w) minmax(0, 1fr);
    }

    .header-body-nav > a {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 18px;
        line-height: 156%;
        color: #54596b;
    }

    .body {
        max-width: 100%;
    }

    .poster {
        max-width: 547px;
        max-height: 355px;
    }

    .title {
        font-size: 32px;
    }

    .subtitle {
        font-size: 18px;
    }

    a.nav-item {
        justify-content: start;
    }

        a.nav-item > svg {
            min-width: 24px;
            min-height: 24px;
        }

        a.nav-item > p {
            display: block;
        }
}

/* Direct grid children without a grid-area span the content column. */
.layout > .layout-fullrow {
    grid-column: 1 / -1;
}

/* ---------- Focused "screen" pages inside the document-scroll shell ----------
   Only the passing screen stays viewport-bound: it is a screen with its own
   pinned action bar. Authoring pages scroll with the document like everything
   else — a fixed height there stranded their sticky panels mid-page. */
@media (min-width: 768px) {
    .tp-root {
        height: calc(100dvh - var(--sticky-top) - var(--s-5));
    }
}

/* ===================== Floating action menu (speed-dial) ===================== */
.fab-root { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-overlay); }
.fab-backdrop { position: absolute; inset: 0; background: rgba(22,30,39,0); transition: background .2s; pointer-events: none; }
.fab-root--open .fab-backdrop { background: rgba(22,30,39,.28); pointer-events: auto; }
.fab-wrap { position: absolute; right: 24px; bottom: calc(24px + var(--tabbar-h) + env(safe-area-inset-bottom)); width: 56px; height: 56px; pointer-events: auto; }
.fab-main { position: absolute; right: 0; bottom: 0; width: 56px; height: 56px; border-radius: 50%; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(75,159,255,.40); transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.fab-root--open .fab-main { transform: rotate(45deg); }
.fab-item { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; justify-content: flex-end; opacity: 0; transform: translateY(0) scale(.5); pointer-events: none; transition: transform .24s cubic-bezier(.2,.7,.3,1), opacity .2s; margin: 0; padding: 0; background: none; border: none; font: inherit; cursor: pointer; }
.fab-root--open .fab-item { opacity: 1; transform: translateY(var(--y)) scale(1); pointer-events: auto; }
.fab-mini { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 0.5px solid var(--gray-300); color: var(--blue-color); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(22,30,39,.18); flex: 0 0 auto; }
.fab-label { background: #fff; border: 0.5px solid var(--gray-300); color: var(--text-dark-color); font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 10px; white-space: nowrap; box-shadow: 0 4px 12px rgba(22,30,39,.12); opacity: 0; transform: translateX(10px); transition: opacity .16s, transform .16s; }
.fab-root--open .fab-item .fab-label { opacity: 1; transform: translateX(0); transition-delay: calc(.20s + var(--d)); }

/* The speed-dial FAB is mobile-only; tablet+ uses the inline header buttons. */
@media (min-width: 768px) {
    .fab-root { display: none; }
}


/* ===================== Accessibility globals (stage 5) ===================== */

/* One global focus ring; never remove, only offset. */
:focus-visible {
    outline: var(--focus-ring) solid var(--border-focus);
    outline-offset: 2px;
}

/* iOS Safari zooms into inputs below 16px — forbid that on touch screens. */
@media (pointer: coarse) {
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* Reduced motion kills every animation and transition. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}