/*
 * GAMANDE base styles. Consumes tokens.css and declares no raw values of its own.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--gm-surface);
    color: var(--gm-ink);
    font-family: var(--gm-font-sans);
    font-size: var(--gm-text-base);
    line-height: var(--gm-leading-normal);
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* One focus treatment for everything, declared once. A component that removes its outline
   without replacing it makes that screen unusable by keyboard. */
:focus-visible {
    outline: var(--gm-focus-ring) solid var(--gm-focus-colour);
    outline-offset: var(--gm-focus-offset);
    border-radius: var(--gm-radius-control);
}

/* The one exception, and it is narrow.
   Blazor's FocusOnNavigate moves focus to the page heading so a screen reader announces the
   new page rather than leaving the reader at the top of an unchanged document. That heading
   carries tabindex="-1", so it is reachable only programmatically — nobody can tab to it.
   Drawing a ring there marks a destination the person did not navigate to, on every page
   load. Focus still moves, and the announcement still happens; only the ring is suppressed,
   and only for elements no keyboard can reach. */
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* ---- Typography ------------------------------------------------------------------- */

.gm-h1,
.gm-h2,
.gm-h3 {
    line-height: var(--gm-leading-tight);
    font-weight: var(--gm-weight-bold);
    text-wrap: balance;
}

.gm-h1 {
    font-size: var(--gm-text-3xl);
    letter-spacing: -0.01em;
}

.gm-h2 {
    font-size: var(--gm-text-xl);
}

.gm-h3 {
    font-size: var(--gm-text-lg);
    font-weight: var(--gm-weight-medium);
}

.gm-lead {
    font-size: var(--gm-text-lg);
    color: var(--gm-ink-muted);
    max-width: var(--gm-measure);
}

.gm-prose {
    max-width: var(--gm-measure);
}

.gm-prose > * + * {
    margin-top: var(--gm-space-4);
}

.gm-muted {
    color: var(--gm-ink-muted);
}

.gm-small {
    font-size: var(--gm-text-sm);
}

/* Reserved for values somebody may need to compare character by character. */
.gm-code {
    font-family: var(--gm-font-mono);
    font-size: var(--gm-text-sm);
    word-break: break-all;
}

/* Visible to screen readers, not to the eye. Used for headings that give a region a name
   and for live-region announcements. */
.gm-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- Layout ------------------------------------------------------------------------ */

.gm-page {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.gm-container {
    width: 100%;
    max-width: 68rem;
    margin-inline: auto;
    padding-inline: var(--gm-space-5);
}

.gm-stack > * + * {
    margin-top: var(--gm-space-4);
}

.gm-stack-loose > * + * {
    margin-top: var(--gm-space-6);
}

.gm-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gm-space-3);
    align-items: center;
}

/*
 * The account screens: a quiet orientation panel beside the form.
 *
 * The panel is not decoration. Somebody in crisis can arrive at a sign-in page, so it
 * carries a calm, always-present route to urgent help — which is a content requirement
 * before it is a layout one. On a narrow viewport it becomes a header rather than
 * disappearing.
 */
.gm-auth {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100dvh;
}

.gm-auth__aside {
    background: var(--gm-surface-inverse);
    color: var(--gm-ink-inverse);
    padding: var(--gm-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--gm-space-5);
}

.gm-auth__main {
    padding: var(--gm-space-6) var(--gm-space-5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.gm-auth__form {
    width: 100%;
    max-width: 26rem;
}

@media (min-width: 60rem) {
    .gm-auth {
        grid-template-columns: minmax(18rem, 24rem) 1fr;
    }

    .gm-auth__aside {
        padding: var(--gm-space-7) var(--gm-space-6);
        justify-content: space-between;
    }

    .gm-auth__main {
        padding: var(--gm-space-8) var(--gm-space-6);
        align-items: center;
    }
}

/* ---- Panels ------------------------------------------------------------------------ */

.gm-panel {
    background: var(--gm-surface-raised);
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius-panel);
    padding: var(--gm-space-5);
}

.gm-panel--raised {
    box-shadow: var(--gm-shadow-raised);
}

/* ---- Controls ----------------------------------------------------------------------- */

.gm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gm-space-2);
    min-height: var(--gm-target-min);
    padding: var(--gm-space-2) var(--gm-space-5);
    border: 1px solid transparent;
    border-radius: var(--gm-radius-control);
    font-weight: var(--gm-weight-medium);
    cursor: pointer;
    transition: background-color var(--gm-motion-fast) var(--gm-motion-ease),
        border-color var(--gm-motion-fast) var(--gm-motion-ease);
}

.gm-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.gm-button--primary {
    background: var(--gm-primary);
    color: var(--gm-primary-ink);
}

.gm-button--primary:hover:not(:disabled) {
    background: var(--gm-primary-strong);
}

.gm-button--secondary {
    background: var(--gm-surface-raised);
    border-color: var(--gm-border-strong);
    color: var(--gm-ink);
}

.gm-button--secondary:hover:not(:disabled) {
    background: var(--gm-surface-sunken);
}

.gm-button--quiet {
    background: transparent;
    color: var(--gm-primary);
    padding-inline: var(--gm-space-2);
}

.gm-button--quiet:hover:not(:disabled) {
    text-decoration: underline;
}

.gm-button--block {
    width: 100%;
}

.gm-link {
    color: var(--gm-primary);
    text-underline-offset: 0.2em;
}

.gm-link:hover {
    color: var(--gm-primary-strong);
}

/* ---- Fields ------------------------------------------------------------------------- */

.gm-field {
    display: block;
}

.gm-field__label {
    display: block;
    font-weight: var(--gm-weight-medium);
    margin-bottom: var(--gm-space-1);
}

.gm-field__hint {
    display: block;
    color: var(--gm-ink-muted);
    font-size: var(--gm-text-sm);
    margin-bottom: var(--gm-space-2);
}

.gm-input,
.gm-select {
    width: 100%;
    min-height: var(--gm-target-min);
    padding: var(--gm-space-2) var(--gm-space-3);
    background: var(--gm-surface-raised);
    border: 1px solid var(--gm-border-strong);
    border-radius: var(--gm-radius-control);
    color: var(--gm-ink);
}

.gm-input:disabled,
.gm-select:disabled {
    background: var(--gm-surface-sunken);
    cursor: not-allowed;
}

/* The border alone would carry the error for sighted users only; the message below is
   associated by aria-describedby and the input is marked aria-invalid. */
.gm-input--invalid {
    border-color: var(--gm-danger);
    border-width: 2px;
}

.gm-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--gm-space-2);
    margin-top: var(--gm-space-2);
    color: var(--gm-danger);
    font-size: var(--gm-text-sm);
}

/* ---- Checkbox -----------------------------------------------------------------------
 * Sized to the minimum target and laid out so the whole row is clickable, because the
 * single agreement checkbox is the most consequential control in the product.
 */
.gm-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--gm-space-3);
    min-height: var(--gm-target-min);
    padding: var(--gm-space-2) 0;
    cursor: pointer;
}

.gm-checkbox__control {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    accent-color: var(--gm-primary);
    cursor: pointer;
}

.gm-checkbox__label {
    line-height: var(--gm-leading-normal);
}

/* ---- Status chips and alerts ---------------------------------------------------------
 * Both pair a colour with an icon slot. Colour is never the only carrier of meaning.
 */
.gm-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gm-space-2);
    padding: var(--gm-space-1) var(--gm-space-3);
    border-radius: var(--gm-radius-pill);
    font-size: var(--gm-text-sm);
    font-weight: var(--gm-weight-medium);
}

.gm-chip--neutral {
    background: var(--gm-surface-sunken);
    color: var(--gm-ink-muted);
}

.gm-chip--success {
    background: var(--gm-success-soft);
    color: var(--gm-success);
}

.gm-chip--caution {
    background: var(--gm-caution-soft);
    color: var(--gm-caution);
}

.gm-chip--danger {
    background: var(--gm-danger-soft);
    color: var(--gm-danger);
}

.gm-chip--info {
    background: var(--gm-info-soft);
    color: var(--gm-info);
}

.gm-alert {
    display: flex;
    gap: var(--gm-space-3);
    padding: var(--gm-space-4);
    border-radius: var(--gm-radius-panel);
    border: 1px solid transparent;
}

.gm-alert__icon {
    flex: none;
    font-size: var(--gm-text-lg);
    line-height: var(--gm-leading-tight);
}

.gm-alert__body {
    min-width: 0;
}

.gm-alert--info {
    background: var(--gm-info-soft);
    border-color: var(--gm-primary);
    color: var(--gm-ink);
}

.gm-alert--success {
    background: var(--gm-success-soft);
    border-color: var(--gm-success);
    color: var(--gm-ink);
}

.gm-alert--caution {
    background: var(--gm-caution-soft);
    border-color: var(--gm-caution);
    color: var(--gm-ink);
}

.gm-alert--danger {
    background: var(--gm-danger-soft);
    border-color: var(--gm-danger);
    color: var(--gm-ink);
}

/* ---- Agreement reader ----------------------------------------------------------------
 * The one place this design spends its boldness. Seven separate documents were replaced by
 * one, so navigating it is the whole point: a real reading measure, a section index, and a
 * version stamp that makes "the exact version you accepted" visible rather than buried in
 * a database column.
 */
.gm-agreement {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gm-space-6);
    padding-block: var(--gm-space-6);
}

@media (min-width: 60rem) {
    .gm-agreement {
        grid-template-columns: 16rem 1fr;
        gap: var(--gm-space-7);
    }

    .gm-agreement__index {
        position: sticky;
        top: var(--gm-space-5);
        align-self: start;
        max-height: calc(100dvh - var(--gm-space-8));
        overflow-y: auto;
    }
}

.gm-agreement__index ol {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--gm-border);
}

.gm-agreement__index li > a {
    display: block;
    padding: var(--gm-space-2) var(--gm-space-4);
    color: var(--gm-ink-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
}

.gm-agreement__index li > a:hover {
    color: var(--gm-ink);
    border-left-color: var(--gm-border-strong);
}

.gm-agreement__body {
    max-width: var(--gm-measure);
    line-height: var(--gm-leading-loose);
}

.gm-agreement__body h2 {
    font-size: var(--gm-text-xl);
    margin-top: var(--gm-space-7);
    margin-bottom: var(--gm-space-3);
    scroll-margin-top: var(--gm-space-5);
}

.gm-agreement__body h2:first-child {
    margin-top: 0;
}

.gm-agreement__body p + p {
    margin-top: var(--gm-space-4);
}

/* A definition list rather than a run of values joined by separators: it reads correctly to
   a screen reader, and each value is labelled rather than inferred from position. */
.gm-stamp {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gm-space-1) var(--gm-space-4);
    margin: 0;
    padding: var(--gm-space-4);
    background: var(--gm-surface-sunken);
    border-radius: var(--gm-radius-panel);
    font-size: var(--gm-text-sm);
}

.gm-stamp dt {
    color: var(--gm-ink-muted);
}

.gm-stamp dd {
    margin: 0;
}

/* ---- States --------------------------------------------------------------------------
 * Loading, empty, error and offline are designed states, not afterthoughts. A measured zero
 * must look different from data that could not be loaded.
 */
.gm-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gm-space-3);
    padding: var(--gm-space-6);
    border: 1px dashed var(--gm-border-strong);
    border-radius: var(--gm-radius-panel);
    color: var(--gm-ink-muted);
}

.gm-skeleton {
    background: linear-gradient(
        90deg,
        var(--gm-surface-sunken) 25%,
        var(--gm-border) 37%,
        var(--gm-surface-sunken) 63%
    );
    background-size: 400% 100%;
    border-radius: var(--gm-radius-control);
    animation: gm-skeleton-shimmer 1.4s ease infinite;
}

@keyframes gm-skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gm-skeleton {
        animation: none;
    }
}

/* ---- Tables --------------------------------------------------------------------------- */

.gm-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}

.gm-table th,
.gm-table td {
    padding: var(--gm-space-3);
    border-bottom: 1px solid var(--gm-border);
    text-align: start;
    vertical-align: top;
}

.gm-table th {
    font-weight: var(--gm-weight-medium);
    color: var(--gm-ink-muted);
}

/* Wide content scrolls inside its own container; the page body never scrolls sideways. */
.gm-scroll-x {
    overflow-x: auto;
}