/* ==========================================================================
   Gruubuya — application shell

   One hand-written stylesheet. No framework, no build step, no runtime
   compilation: the browser gets finished CSS.

   Everything is a token on :root. A change happens in one place, and adding a
   dark palette later means overriding this block rather than hunting hardcoded
   values through 900 lines.

   Layout model: a fixed sidebar and a scrolling content column on desktop; the
   sidebar becomes a top bar with a slide-in drawer below 900px.
   ========================================================================== */

:root {
    /* Surfaces: cool slate, coolest at the back. The app background is never
       pure white, so that cards have something to sit on. */
    --bg:         #f8fafc;
    --surface:    #ffffff;
    --surface-2:  #f1f5f9;
    --surface-3:  #e2e8f0;

    /* Text. Three steps is enough; a fourth always gets misused. */
    --text:   #0f172a;
    --text-2: #475569;
    /* --text-3 carries timestamps, counts and empty states: read, not
       decoration, so it has to clear WCAG AA like any other text.
       At the slate-400 this palette suggests it measured 2.5:1. Solved against
       --surface-2, the darkest thing it ever sits on (a hovered row). */
    --text-3: #617187;

    --border:        #e2e8f0;
    --border-strong: #cbd5e1;

    /* One accent. Indigo carries every interactive thing - links, primary
       buttons, focus rings, the unread state - and nothing else uses it, so
       "coloured" reads as "you can act on this". */
    --accent:        #4f46e5;
    --accent-hover:  #4338ca;
    --accent-tint:   #eef2ff;
    --accent-border: #c7d2fe;

    /* Status. Only two carry colour, because only two are ever urgent:
       something worked, or something went wrong. */
    --success:      #15803d;
    --success-tint: #ecfdf3;
    --danger:       #be123c;
    --danger-tint:  #fff1f2;

    /* Pending is deliberately colourless. "Not ready" and "unverified" are
       waiting states, not warnings - painting them amber implied a problem
       where there is none, and shouted louder than the accent. */
    --pending:      #475569;
    --pending-tint: #f1f5f9;

    /* A single family everywhere. Inter for its tall x-height and unambiguous
       numerals, which matter in join codes and counts. */
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.8125rem;
    --text-base: 0.9375rem;
    --text-md:   1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.25rem;

    /* 8px grid, with 4px available for tight work. */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;
    --s8: 4rem;

    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow:    0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 28px -8px rgba(15, 23, 42, 0.18);

    --sidebar-width: 240px;
    --content-max:   1140px;
    --header-height: 56px;
}

/* ---------------------------------------------------------------- reset */

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

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.011em;
}

p {
    margin: 0;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* =========================================================== app shell */

.shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    padding: var(--s4) var(--s3);
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-section {
    padding: var(--s4) var(--s3) var(--s2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s3);
    width: 100%;
    padding: var(--s2) var(--s3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-base);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* aria-current on the link the page belongs to. */
.nav-item[aria-current="page"] {
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
}

.nav-item i {
    width: 1rem;
    font-size: var(--text-base);
    text-align: center;
}

/* The content column is pushed, not overlapped, so nothing hides under the
   sidebar when the page is scrolled. */
.content {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--sidebar-width);
}

.content-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s5) var(--s5) var(--s8);
}

/* Top bar: full viewport width, above the sidebar rather than beside it, so
   the brand and the account menu sit at the two ends of one continuous rule. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--s3);
    height: var(--header-height);
    padding: 0 var(--s4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-left: auto;
}

/* The drawer handle only exists where the sidebar is hidden. */
.topbar-toggle {
    display: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-2);
    font-size: var(--text-md);
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

.icon-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 1.05rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}

/* ------------------------------------------------------------ menu */

.menu {
    position: relative;
}

/* <summary> ships with a disclosure triangle in every engine; the caret icon
   replaces it. Both the standard property and the WebKit pseudo-element are
   needed to remove it everywhere. */
.menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.menu-trigger::-webkit-details-marker {
    display: none;
}

.menu-trigger::marker {
    content: "";
}

.menu-trigger:hover {
    background: var(--surface-2);
}

.menu[open] .menu-trigger {
    background: var(--surface-2);
}

.menu[open] /* Usernames are up to 32 characters; the bar is not. */
.menu-trigger-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-caret {
    transform: rotate(180deg);
}

.menu-caret {
    font-size: 0.625rem;
    color: var(--text-3);
    transition: transform 0.12s ease;
}

.menu-panel {
    position: absolute;
    top: calc(100% + var(--s2));
    right: 0;
    z-index: 60;
    min-width: 12rem;
    padding: var(--s1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    padding: var(--s2) var(--s3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: var(--text-base);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-item:hover {
    background: var(--surface-2);
}

.menu-item i {
    width: 1rem;
    color: var(--text-3);
    text-align: center;
}

.menu-item-danger,
.menu-item-danger:hover i {
    color: var(--danger);
}

.sidebar-scrim {
    display: none;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: 35;
    background: rgba(15, 23, 42, 0.45);
}

@media (max-width: 900px) {
    .topbar {
        padding: 0 var(--s4);
    }

    .topbar-toggle {
        display: grid;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.18s ease;
        box-shadow: var(--shadow-lg);
    }

    body.nav-open .sidebar {
        transform: translateX(0);
    }

    body.nav-open .sidebar-scrim {
        display: block;
    }

    .content {
        margin-left: 0;
    }

    .content-inner {
        padding: var(--s5) var(--s4) var(--s7);
    }
}

/* ============================================================= plain shell */

/* Signed-out pages and errors: no chrome at all, one centred column. Sign-in
   and registration carry their own links to each other, so a header here would
   only repeat them. */
.plain {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.plain-col {
    width: 100%;
    max-width: 34rem;
}

/* Spacing between a paragraph of explanation and the form it introduces. */
.form-top {
    margin-top: var(--s4);
}

.plain-body {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: var(--s5);
}

/* ================================================================ pages */

.page-head {
    margin-bottom: var(--s5);
}

.page-title {
    font-size: var(--text-2xl);
}

.page-sub {
    margin-top: var(--s1);
    color: var(--text-2);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s4);
}

/* Two-column content where a page has a main flow and a side rail. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
}

@media (min-width: 1000px) {
    .split-2 {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }

    /* The chat column matches the height of the rail beside it. */
    .split-fill {
        align-items: stretch;
    }

    .split-even {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
}

/* ================================================================ cards */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--border);
}

.card-title {
    font-size: var(--text-md);
    font-weight: 600;
}

.card-body {
    padding: var(--s5);
}

.card-body-flush {
    padding: 0;
}

.card-foot {
    padding: var(--s3) var(--s5);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius) var(--radius);
}

.card-danger {
    border-color: var(--accent-border);
}

.card-danger .card-head {
    background: var(--danger-tint);
    border-bottom-color: var(--danger-tint);
}

/* ================================================================ forms */

.field {
    margin-bottom: var(--s4);
}

.field:last-child {
    margin-bottom: 0;
}

.label {
    display: block;
    margin-bottom: var(--s1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-2);
}

.input,
select.input,
textarea.input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.4;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.input::placeholder {
    color: var(--text-3);
}

.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.input-inline {
    width: auto;
    min-width: 10rem;
    padding: 0.3rem 0.5rem;
    font-size: var(--text-sm);
}

.checkbox {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s4);
    font-size: var(--text-base);
    color: var(--text-2);
}

.hint {
    margin-top: var(--s1);
    font-size: var(--text-sm);
    color: var(--text-3);
}

.form-row {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
}

.form-row .input {
    flex: 1 1 12rem;
}

/* ============================================================== buttons */

.btn,
.btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn {
    padding: 0.5rem 0.95rem;
    font-size: var(--text-base);
}

.btn-small {
    padding: 0.3rem 0.65rem;
    font-size: var(--text-sm);
}

.btn:hover,
.btn-small:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.btn-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

.btn-danger {
    border-color: var(--border-strong);
    color: var(--danger);
}

.btn-danger:hover {
    border-color: var(--danger);
    background: var(--danger-tint);
    color: var(--danger);
}

.btn-ghost {
    border-color: transparent;
    background: none;
    color: var(--text-2);
}

.btn-ghost:hover {
    background: var(--surface-2);
    border-color: transparent;
    color: var(--text);
}

.btn-block {
    width: 100%;
}

.inline-form {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin: 0;
}

/* ================================================================ links */

.link {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-muted {
    color: var(--text-2);
}

.link-button {
    border: none;
    background: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
}

.link-button:hover {
    text-decoration: underline;
}

.muted {
    color: var(--text-3);
}

/* =============================================================== alerts */

.flash-wrap:not(:empty) {
    margin-bottom: var(--s4);
}

.alert {
    display: flex;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s3);
    border: 1px solid;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
}

.alert-success {
    border-color: #bbf7d0;
    background: var(--success-tint);
    color: var(--success);
}

.alert-error {
    border-color: #fecdd3;
    background: var(--danger-tint);
    color: var(--danger);
}

.alert-list {
    margin: 0;
    padding-left: var(--s4);
}

/* ================================================================ lists */

.rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) var(--s5);
    border-bottom: 1px solid var(--border);
}

.row:last-child {
    border-bottom: none;
}

.row:hover {
    background: var(--surface-2);
}

.row-stacked {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--s3);
}

.row-main {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-width: 0;
}

.row-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2);
    font-weight: 600;
}

.row-name a {
    text-decoration: none;
}

.row-name a:hover {
    color: var(--accent);
}

.row-meta {
    display: block;
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-3);
}

.row-actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.row-actions-wrap {
    flex-wrap: wrap;
}

.empty {
    padding: var(--s6) var(--s5);
    color: var(--text-3);
    font-size: var(--text-base);
    text-align: center;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s4);
    padding: var(--s3) var(--s5);
    font-size: var(--text-sm);
    color: var(--text-2);
}

/* ================================================================ table */

/* Scrolls inside itself rather than pushing the page sideways. */
.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th {
    padding: var(--s2) var(--s5);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td {
    padding: var(--s3) var(--s5);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover {
    background: var(--surface-2);
}

.table-primary {
    display: block;
    font-size: var(--text-base);
    font-weight: 600;
}

.table-note {
    display: block;
    color: var(--text-3);
    font-size: var(--text-xs);
}

.table-nowrap {
    white-space: nowrap;
    color: var(--text-2);
}

/* Actions need room to breathe; everything else can compress. */
.table-actions-col {
    width: 1%;
}

/* ================================================================= tags */

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.375rem;
    letter-spacing: 0.01em;
}

.tag-ready {
    background: var(--success-tint);
    color: var(--success);
}

.tag-waiting {
    background: var(--pending-tint);
    color: var(--pending);
}

.tag-admin {
    background: var(--accent-tint);
    color: var(--accent);
}

.tag-banned {
    background: var(--danger-tint);
    color: var(--danger);
}

/* ================================================================ stats */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--s3);
}

.stat,
.stat-link {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.stat-link:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.stat-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-2);
}

.stat-caption {
    font-size: var(--text-xs);
    color: var(--text-3);
}

/* ============================================================== lobbies */

/* Join codes get read aloud and typed by hand, so they are set wide, in a
   monospace face, with tabular figures. */
.lobby-code {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--text);
}

.lobby-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

/* ================================================================= chat */

/* The chat card is a column: header, then a message list that takes every
   remaining pixel, then the composer pinned at the bottom. Without this the
   list sat at its natural height and left dead space under the input whenever
   the roster beside it was taller. */
.chat-card {
    display: flex;
    flex-direction: column;
    min-height: 32rem;
}

.chat {
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: var(--s4) var(--s5);
    min-height: 0;
    overflow-y: auto;
}

.chat-line {
    display: flex;
    gap: var(--s2);
    padding: 0.15rem 0;
    font-size: var(--text-base);
}

.chat-author {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--text);
}

.chat-body {
    flex: 1 1 auto;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.chat-system {
    color: var(--text-3);
    font-size: var(--text-sm);
    font-style: italic;
}

.chat-form {
    display: flex;
    gap: var(--s2);
    padding: var(--s3) var(--s5);
    border-top: 1px solid var(--border);
}

.chat-form .input {
    flex: 1 1 auto;
}

/* ======================================================== notifications */

.notif {
    position: relative;
}

.notif-panel {
    position: absolute;
    top: calc(100% + var(--s2));
    right: 0;
    z-index: 60;
    width: min(21rem, calc(100vw - 2rem));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    font-weight: 600;
}

.notif-list,
.notif-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notif-list {
    max-height: 21rem;
    overflow-y: auto;
}

.notification {
    border-bottom: 1px solid var(--border);
}

.notification:last-child {
    border-bottom: none;
}

.notification.is-unread {
    background: var(--accent-tint);
}

.notification-link {
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
    padding: var(--s3) var(--s4);
    color: var(--text);
    text-decoration: none;
}

.notification-link:hover {
    background: var(--surface-2);
}

.notification-icon {
    margin-top: 0.2rem;
    width: 1rem;
    color: var(--text-3);
    font-size: var(--text-sm);
    text-align: center;
}

.notification.is-unread .notification-icon {
    color: var(--accent);
}

.notification-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: var(--text-sm);
}

.notification-ago {
    color: var(--text-3);
    font-size: var(--text-xs);
}

.notification-empty {
    padding: var(--s5) var(--s4);
    color: var(--text-3);
    font-size: var(--text-sm);
    text-align: center;
}

.notif-foot {
    display: block;
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--border);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}

.notif-foot:hover {
    background: var(--surface-2);
}

/* ================================================================ audit */

.audit {
    list-style: none;
    margin: 0;
    padding: 0;
}

.audit-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s2) var(--s5);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
}

.audit-line:last-child {
    border-bottom: none;
}

/* ================================================================= auth */

.auth-card {
    width: 100%;
    max-width: 25rem;
    margin: 0 auto;
}

.auth-title {
    font-size: var(--text-xl);
}

.auth-sub {
    margin-top: var(--s1);
    color: var(--text-2);
    font-size: var(--text-base);
}

.auth-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s3);
    font-size: var(--text-sm);
}

/* ================================================================= hero */

.hero {
    max-width: 34rem;
    text-align: center;
}

.hero-title {
    font-size: var(--text-3xl);
    letter-spacing: -0.03em;
}

.hero-tagline {
    margin-top: var(--s3);
    font-size: var(--text-lg);
    color: var(--text-2);
}

.hero-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s3);
    margin-top: var(--s5);
}

@media (min-width: 640px) {
    .hero-title {
        font-size: 3rem;
    }
}

/* ================================================================ error */

.error-page {
    text-align: center;
}

.error-code {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--border-strong);
}

.error-title {
    margin-top: var(--s3);
    font-size: var(--text-xl);
}

.error-message {
    margin-top: var(--s2);
    color: var(--text-2);
}

.error-back {
    margin-top: var(--s5);
}

/* ================================================================ print */

@media print {
    .sidebar,
    .topbar,
    .row-actions,
    .page-actions {
        display: none;
    }

    .content {
        margin-left: 0;
    }

    body {
        background: #fff;
    }
}