/* ============================================================
   Score7 — Fluent UI re-skin
   One layer, on purpose. Fluent components are re-skinned here
   and never forked: if a component cannot be reached from this
   file, the answer is a bespoke component, not a copy of Fluent.
   ============================================================ */

/* ---- Focus ---------------------------------------------------
   The azure ring is non-negotiable, so it is painted twice over:
   on ordinary elements through :focus-visible, and on Fluent's
   custom elements through :focus-within on the host. The host
   route is what works for a web component — the focused element
   is the button inside the shadow tree, and Fluent draws its own
   black outline there that we switch off. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible,
.s7-focusable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 171, 252, .35);
    border-radius: var(--radius-md);
}

.s7-button:focus-within,
.s7-field:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 171, 252, .35);
    border-radius: var(--radius-md);
}

.s7-button::part(control):focus-visible,
.s7-field::part(control):focus-visible {
    outline: none;
    box-shadow: none;
}

/* ---- Buttons -------------------------------------------------
   Five variants and three sizes, matching the design system the
   screens were drawn against. Fluent supplies behaviour and
   accessibility; everything visible comes from the tokens. */
.s7-button {
    --s7-button-height: var(--control-h-md);
    display: inline-flex;
    /* The host has a height of its own; without this it clips the control we just
       resized through ::part, and the button reads at Fluent's default size. */
    height: var(--s7-button-height);
}

.s7-button::part(control) {
    height: var(--s7-button-height);
    min-width: 0;
    padding: 0 22px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-weight: var(--weight-bold);
    font-size: 14px;
    letter-spacing: 0;
    transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.s7-button--sm {
    --s7-button-height: var(--control-h-sm);
}

.s7-button--sm::part(control) {
    padding: 0 14px;
    font-size: 12px;
}

.s7-button--lg {
    --s7-button-height: var(--control-h-lg);
}

.s7-button--lg::part(control) {
    padding: 0 28px;
    font-size: 15px;
}

/* Solid buttons darken a step on hover, another on press, and
   shrink very slightly — the handoff is explicit about this. */
.s7-button:active::part(control) {
    transform: scale(.98);
}

.s7-button--primary::part(control) {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.s7-button--primary:hover::part(control) {
    background: var(--color-primary-hover);
}

.s7-button--primary:active::part(control) {
    background: var(--color-primary-active);
}

.s7-button--secondary::part(control) {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
}

.s7-button--secondary:hover::part(control) {
    background: var(--color-secondary-hover);
}

.s7-button--secondary:active::part(control) {
    background: var(--color-secondary-active);
}

/* Fluent paints its outline and stealth appearances with `background: transparent
   !important` inside the shadow tree, and the shadow-parts cascade gives an inner
   !important priority over an outer one — so no ::part rule can repaint them. The
   face is painted on the host instead, which the transparent control lets through.
   This is still a re-skin: no Fluent component is copied or forked. */
.s7-button--outline {
    background: var(--surface-card);
    border-radius: var(--radius-md);
}

.s7-button--outline:hover {
    background: var(--surface-page);
}

.s7-button--outline::part(control) {
    border-color: var(--border-subtle);
    color: var(--text-strong);
}

.s7-button--outline:hover::part(control) {
    border-color: var(--border-default);
}

.s7-button--ghost::part(control) {
    color: var(--text-muted);
}

.s7-button--ghost {
    border-radius: var(--radius-md);
}

.s7-button--ghost:hover {
    background: var(--surface-sunken);
}

.s7-button--ghost:hover::part(control) {
    color: var(--text-strong);
}

.s7-button--danger::part(control) {
    background: var(--color-danger);
    color: var(--neutral-0);
}

.s7-button--danger:hover::part(control) {
    background: var(--danger-600);
}

.s7-button--danger:active::part(control) {
    background: var(--danger-700);
}

/* ---- Text fields --------------------------------------------
   44px is the baseline touch target: the app is used standing,
   at a table, with a thumb. */
.s7-field::part(root) {
    height: var(--control-h-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-card);
}

.s7-field::part(control) {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-strong);
}

/* A field has to be able to shrink. Fluent's input carries the browser's default width of
   some twenty characters, and a row on a phone is not twenty characters wide. Buttons got
   this at the top of the file; fields never did, and they are what pushed the seats and the
   round-total table past the screen. */
.s7-field,
.s7-field::part(root) {
    min-width: 0;
}

.s7-field::part(control) {
    min-width: 0;
    width: 100%;
}

/* ---- Motion --------------------------------------------------
   Nothing loops, and everything stops when the reader asks. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .s7-button:active::part(control) {
        transform: none;
    }
}


/* ---- Phone ---------------------------------------------------- */
/* The small control height is a desktop measurement. A thumb needs 44, whatever the design
   calls the size. */
@media (max-width: 767px) {
    .s7-button--sm::part(control) {
        min-height: 44px;
    }

    .s7-choice,
    .s7-topbar__link {
        min-height: 44px;
    }
}