/* Global base: only what every screen shares. Everything else is scoped to its component. */

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

html, body {
    margin: 0;
    height: 100%;
    background: var(--gs-bg);
    color: var(--gs-ink);
    font-family: var(--gs-font-ui);
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* The body never scrolls; each screen scrolls its own content, so the header and the menu stay
   put (the pattern from the Lyker Key app). */
body {
    overflow: hidden;
}

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

input::placeholder, textarea::placeholder {
    color: var(--gs-muted);
    opacity: .8;
}

a {
    color: var(--gs-primary-text);
}

:focus-visible {
    outline: 3px solid var(--gs-brass);
    outline-offset: 2px;
}

.gs-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Typography used directly by pages. Serif only from 20 pt up (Komponenter §2). */
.gs-display {
    font: 400 2.625rem/1 var(--gs-font-display);
    margin: 0;
}

.gs-heading {
    font: 400 var(--gs-text-heading)/1.1 var(--gs-font-display);
    margin: 0;
}

.gs-subheading {
    font: 400 1.5rem/1.2 var(--gs-font-display);
    margin: 0;
}

.gs-lead {
    font: 400 var(--gs-text-body)/1.45 var(--gs-font-ui);
    color: var(--gs-muted);
    margin: 0;
    text-wrap: pretty;
}

.gs-body {
    font: 400 var(--gs-text-body)/1.45 var(--gs-font-ui);
    margin: 0;
}

.gs-field-label {
    font: 700 var(--gs-text-body) var(--gs-font-ui);
    margin: 0;
}

.gs-optional {
    font-weight: 400;
    color: var(--gs-muted);
}

.gs-quote {
    font: italic 400 1.0625rem/1.35 var(--gs-font-serif);
    color: var(--gs-brass-ink);
}

#blazor-error-ui {
    display: none;
}

/* Colour helpers for icons that carry a mode's colour. */
.gs-color-dating { color: var(--gs-dating); }
.gs-color-buddy { color: var(--gs-buddy); }
.gs-color-brass { color: var(--gs-brass-ink); }

/* Vertical stacks used by pages. */
.gs-stack { display: flex; flex-direction: column; gap: .875rem; }
.gs-stack-tight { display: flex; flex-direction: column; gap: var(--gs-space-2); }
.gs-chip-row { display: flex; gap: var(--gs-space-2); flex-wrap: wrap; }
.gs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gs-space-3); }

/* A screen with a header, a scrolling body and maybe a footer. */
.gs-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.gs-danger-text { color: var(--gs-danger); }

/* Sheet texts shared by several sheets. */
.gs-sheet-kicker { font: 600 .9375rem var(--gs-font-ui); color: var(--gs-muted); padding-top: var(--gs-space-1); }
.gs-sheet-quote { font: italic 400 1.3125rem/1.3 var(--gs-font-serif); padding-bottom: .375rem; }
.gs-sheet-title { font: 400 1.75rem var(--gs-font-display); padding-top: var(--gs-space-1); margin: 0; }
.gs-sheet-text { font: 400 var(--gs-text-body)/1.45 var(--gs-font-ui); color: var(--gs-muted); margin: 0 0 .625rem; }
.gs-sheet-row {
    min-height: 3.5rem; display: flex; align-items: center; width: 100%;
    border: none; border-bottom: 1px solid var(--gs-line); background: transparent;
    font: 600 1.1875rem var(--gs-font-ui); text-align: left; cursor: pointer;
}
.gs-sheet-row:last-child { border-bottom: none; }
.gs-sheet-row-danger { color: var(--gs-danger); }

/* The big serif title at the top of a tab (Matcher, Profil, Spela). */
.gs-tab-title { flex: none; margin: 0; padding: var(--gs-space-1) var(--gs-space-5) var(--gs-space-3); font: 400 2rem var(--gs-font-display); }

/* Rows in the moderation lists: avatar, two lines, a badge. */
.gs-mod-row {
    width: 100%; min-height: 4rem; padding: var(--gs-space-2) var(--gs-space-4);
    display: flex; align-items: center; gap: var(--gs-space-3);
    border: none; border-bottom: 1px solid var(--gs-line); background: transparent; text-align: left; cursor: pointer;
}
.gs-mod-row:last-child { border-bottom: none; }
.gs-mod-avatar { flex: none; width: 2.75rem; height: 2.75rem; }
.gs-mod-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.gs-mod-title { font: 600 1.0625rem var(--gs-font-ui); }
.gs-mod-sub { font: 400 .9375rem var(--gs-font-ui); color: var(--gs-muted); }
.gs-mod-flag { align-self: flex-start; font: 700 .8125rem var(--gs-font-ui); color: var(--gs-danger); }
.gs-mod-flag-right { align-self: flex-end; }
.gs-mod-system { align-self: center; font: 600 .875rem var(--gs-font-ui); color: var(--gs-muted); text-align: center; }