:root {
    color-scheme: dark;

    --bg: var(--ds-bg);
    --panel: var(--ds-surface);

    --text: var(--ds-text);
    --text-soft: var(--ds-text-soft);
    --muted: var(--ds-text-muted);

    --gold: var(--ds-gold);
    --gold-soft: var(--ds-border-strong);

    --border: var(--ds-border);

    --danger: var(--ds-danger);
    --success: var(--ds-success);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    min-height: 100vh;
    margin: 0;

    background:
        radial-gradient(
            circle at 50% 0,
            var(--ds-surface-2) 0,
            var(--bg) 42%
        );

    color: var(--text);

    font-family: var(--ds-font-body);
    line-height: var(--ds-line-body);
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

.shell {
    width:
        min(
            var(--ds-container),
            calc(100% - 2 * var(--ds-page-gutter))
        );

    margin: 0 auto;
}

.topbar {
    min-height: var(--ds-header-desktop);
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    padding-block: var(--ds-space-2);

    display: flex;
    align-items: center;
    justify-content: space-between;

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

.brand {
    color: var(--text);
    text-decoration: none;

    font-weight: 700;
    letter-spacing: .08em;
}

.brand span {
    margin-left: .65rem;

    color: var(--gold);

    font-size: .68rem;
    letter-spacing: .14em;
}

.content {
    padding:
        clamp(2rem, 6vw, 5rem)
        0;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 1rem;

    font-family: var(--ds-font-display);
    font-size: var(--ds-font-h1);

    line-height: 1.05;
}

h2 {
    font-size: 1.1rem;
}

.eyebrow {
    margin-bottom: .85rem;

    color: var(--gold);

    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
}

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

.auth-card,
.panel {
    width:
        min(
            100%,
            580px
        );

    margin:
        5vh
        auto
        0;

    padding:
        clamp(
            1.5rem,
            5vw,
            3rem
        );

    border:
        1px solid var(--border);

    background:
        var(--ds-surface);
}

.panel.narrow {
    width:
        min(
            100%,
            720px
        );
}

.form {
    display: grid;
    gap: 1.25rem;

    margin-top: 2rem;
}

label {
    display: grid;
    gap: .55rem;

    color: var(--text-soft);

    font-size: .9rem;
}

input {
    width: 100%;

    padding:
        .9rem
        1rem;

    border:
        1px solid var(--ds-border-strong);

    border-radius: var(--ds-radius-sm);


    background: var(--ds-bg-elevated);
    color: var(--text);
}

input:focus {
    border-color: var(--gold);
}

button,
.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(--ds-control-height);

    padding: var(--ds-control-padding);
    font-weight: var(--ds-control-weight);

    border-radius: var(--ds-radius-sm);

    cursor: pointer;

    text-decoration: none;
}

.primary {
    border:
        1px solid var(--gold);

    background: var(--gold);
    color: var(--ds-on-accent);

    font-weight: 700;
}

.secondary {
    border:
        1px solid var(--gold-soft);

    background: transparent;
    color: var(--text);
}

.link-button {
    border: 0;

    background: transparent;
    color: var(--muted);

    cursor: pointer;
}

.link-button:hover {
    color: var(--gold);
}

.divider {
    margin:
        2rem
        0
        1rem;

    color: var(--muted);

    font-size: .8rem;
    text-align: center;
}

.auth-card h1 {
    font-size: clamp(1.65rem, 4vw, 3rem);
    overflow-wrap: anywhere;
}

.notice,
.success,
.error {
    margin-bottom: 1.5rem;

    padding: 1rem;

    border:
        1px solid var(--border);
}

.success {
    color: var(--success);
}

.error {
    color: var(--danger);
}

.qr {
    display: inline-flex;

    margin:
        1.5rem
        0;

    padding: 1rem;

    background: #fff;
}

.qr svg {
    display: block;

    width:
        min(
            280px,
            70vw
        );

    height: auto;
}

.recovery-codes {
    display: grid;
    gap: .5rem;

    margin-top: 1.5rem;

    padding: 1.25rem;

    border:
        1px solid var(--border);

    background: var(--ds-bg);
}

.recovery-codes code {
    color: var(--text);
}

.actions {
    margin-top: 2rem;
}

.dashboard-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 2.5rem;
}

.security-ok {
    padding:
        .55rem
        .8rem;

    border:
        1px solid
        rgb(159 198 152 / 35%);

    color: var(--success);

    font-size: .78rem;
}

.grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1rem;
}

.card {
    min-height: 180px;

    padding: 1.5rem;

    border:
        1px solid var(--border);

    background:
        rgb(16 16 15 / 88%);
}

.card p {
    color: var(--text-soft);

    line-height: 1.6;
}

.status {
    color: var(--muted);

    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

dl {
    display: grid;

    grid-template-columns:
        auto
        1fr;

    gap:
        .7rem
        1rem;

    margin-bottom: 0;
}

dt {
    color: var(--muted);
}

dd {
    margin: 0;

    overflow-wrap: anywhere;
}

@media (max-width: 820px) {
    .grid {
        grid-template-columns: 1fr;
    }

    .dashboard-heading {
        display: block;
    }

    .security-ok {
        display: inline-block;

        margin-bottom: 1rem;
    }
}

.scheduler-state {
    display: inline-flex;

    margin-bottom: 1.25rem;

    padding:
        .4rem
        .65rem;

    border:
        1px solid var(--border);

    font-size: .72rem;
    font-weight: 700;

    letter-spacing: .1em;
}

.scheduler-state--ok {
    color: var(--success);

    border-color:
        rgb(159 198 152 / 35%);
}

.scheduler-state--warning {
    color: var(--gold);

    border-color:
        rgb(212 175 106 / 45%);
}

.scheduler-state--error {
    color: var(--danger);

    border-color:
        rgb(215 140 130 / 45%);
}

.scheduler-state--unknown {
    color: var(--muted);
}

.admin-nav {
    display: flex;
    align-items: center;
    gap: .25rem;

    min-height: 54px;

    overflow-x: auto;

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

.admin-nav__item {
    flex: 0 0 auto;

    padding:
        .65rem
        .8rem;

    color: var(--muted);

    font-size: .82rem;
    text-decoration: none;
}

.admin-nav__item:hover,
.admin-nav__item.is-active {
    color: var(--text);
}

.admin-nav__item.is-active {
    border-bottom:
        1px solid var(--gold);
}

.admin-nav__item.is-disabled {
    opacity: .45;
    cursor: default;
}

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 2rem;
}

.editor-panel,
.empty-state {
    padding:
        clamp(
            1.25rem,
            4vw,
            2rem
        );

    border:
        1px solid var(--border);

    background:
        rgb(16 16 15 / 88%);
}

.empty-state {
    color: var(--text-soft);
}

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        1.5rem
        1rem;
}

.field {
    align-content: start;
}

.field--wide {
    grid-column:
        1 / -1;
}

.field-help {
    color: var(--muted);

    font-size: .75rem;
    line-height: 1.45;
}

select {
    width: 100%;

    padding:
        .9rem
        1rem;

    border:
        1px solid var(--ds-border-strong);

    border-radius: var(--ds-radius-sm);


    background: var(--ds-bg-elevated);
    color: var(--text);

    font: inherit;
}

select:focus {
    border-color: var(--gold);
}

.form-actions {
    display: flex;
    align-items: center;
    gap: .75rem;

    margin-top: 2rem;
}

.table-wrap {
    overflow-x: auto;

    border:
        1px solid var(--border);
}

.admin-table {
    width: 100%;

    border-collapse: collapse;

    background:
        rgb(16 16 15 / 88%);
}

.admin-table th,
.admin-table td {
    padding:
        .95rem
        1rem;

    border-bottom:
        1px solid var(--border);

    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    color: var(--muted);

    font-size: .72rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table code {
    color: var(--text-soft);
}

.table-action,
.card-link {
    color: var(--gold);

    text-decoration: none;
}

.table-action:hover,
.card-link:hover {
    text-decoration: underline;
}

.record-status {
    display: inline-flex;

    padding:
        .3rem
        .5rem;

    border:
        1px solid var(--border);

    font-size: .7rem;
}

.record-status--published {
    color: var(--success);

    border-color:
        rgb(159 198 152 / 35%);
}

.record-status--draft {
    color: var(--gold);
}

.record-status--archived {
    color: var(--muted);
}

.pagination-simple {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 1rem;

    color: var(--muted);

    font-size: .8rem;
}

.pagination-simple a {
    color: var(--gold);

    text-decoration: none;
}

@media (max-width: 700px) {
    .page-heading {
        display: block;
    }

    .page-heading > .button-link {
        margin-top: 1rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field--wide {
        grid-column: auto;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-nav {
        margin:
            0
            -.25rem;
    }
}

/* M7.2 TRANSLATIONS START */

textarea {
    width: 100%;

    padding:
        .9rem
        1rem;

    border:
        1px solid var(--ds-border-strong);

    border-radius: var(--ds-radius-sm);


    resize: vertical;

    background: var(--ds-bg-elevated);
    color: var(--text);

    font: inherit;
    line-height: 1.6;
}

textarea:focus {
    border-color: var(--gold);
}

.readonly-value {
    padding:
        .9rem
        1rem;

    border:
        1px solid var(--border);

    background: var(--ds-bg-elevated);
    color: var(--text-soft);
}

.back-link {
    margin-top: 1.5rem;
}

.back-link a {
    color: var(--gold);
    text-decoration: none;
}

.back-link a:hover {
    text-decoration: underline;
}

/* M7.2 TRANSLATIONS END */

/* M7.3 EDITIONS START */

.edition-book-block {
    margin-bottom: 2rem;
}

.edition-book-block > h2 {
    margin-bottom: 1rem;

    color: var(--text);

    font-size: 1.2rem;
}

/* M7.3 EDITIONS END */

/* Administration uses the same brand and component scale as the public site. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    max-inline-size: 100%;
    font-family: var(--ds-font-brand);
    font-size: var(--ds-brand-size);
    letter-spacing: var(--ds-brand-tracking);
}

.brand::before {
    content: "";
    flex: 0 0 var(--ds-logo-size);
    inline-size: var(--ds-logo-size);
    block-size: var(--ds-logo-size);
    background: linear-gradient(145deg, var(--ds-gold-bright), var(--ds-gold));
    mask: url("/images/logo-icon.svg") center / contain no-repeat;
    -webkit-mask: url("/images/logo-icon.svg") center / contain no-repeat;
}

.brand span {
    margin-inline-start: 0;
    padding: 0.125rem 0.4rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-body);
}

.auth-card,
.panel {
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
}

.auth-card h1 {
    font-size: clamp(1.65rem, 4vw, 3rem);
    overflow-wrap: anywhere;
}

.notice,
.success,
.error,
.recovery-codes {
    border-radius: var(--ds-radius-sm);
}

input,
select,
textarea {
    min-block-size: var(--ds-control-height);
    font-size: 1rem;
}

.primary:hover {
    background: var(--ds-gold-bright);
    border-color: var(--ds-gold-bright);
}

.secondary:hover {
    background: var(--ds-accent-soft);
    border-color: var(--ds-gold);
}