@import url("tokens.css");

/* ==========================================================================
   newscms — admin console
   Same tokens as the public site, deliberately quieter. This is the internal
   tool, not the publication: compact rows, mono labels, hairline rules.
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: var(--accent-soft);
    /* Native controls (date pickers, datalist popups, scrollbars) follow the
       active theme. The attribute is set pre-paint by the inline head script. */
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) { color-scheme: dark; }
}

html[data-theme="dark"] { color-scheme: dark; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }

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

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute; top: 0; left: var(--sp-3); z-index: 200;
    padding: var(--sp-2) var(--sp-4);
    background: var(--ink); color: var(--paper);
    font: 600 var(--step--1)/1 var(--font-mono);
    letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
    transform: translateY(-120%);
    transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); color: var(--paper); }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--sp-4);
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0 8px,
            color-mix(in srgb, var(--rule) 45%, transparent) 8px 9px
        ),
        var(--paper);
}

.login-box {
    width: min(24rem, 100%);
    padding: var(--sp-6);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    box-shadow: var(--shadow);
}

.login-box__brand {
    display: block;
    margin-bottom: var(--sp-5);
    font: 700 var(--step-3) / 1 var(--font-serif);
    letter-spacing: -.02em;
    color: var(--ink);
    text-decoration: none;
}
.login-box__brand em { font-style: normal; color: var(--accent); }

.login-box h1 {
    font: 600 var(--step-1) / 1.2 var(--font-serif);
    margin-bottom: var(--sp-5);
}

.login-box__foot {
    margin-top: var(--sp-5);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--rule);
    font: 400 var(--step--1) / 1.5 var(--font-mono);
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.admin-shell { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-4);
    background: var(--ink);
    color: var(--ink-invert);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.admin-nav__brand {
    font: 700 var(--step-2) / 1 var(--font-serif);
    letter-spacing: -.02em;
    color: var(--ink-invert);
    text-decoration: none;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--rule-strong);
}
.admin-nav__brand em { font-style: normal; color: var(--accent); }
.admin-nav__brand:hover { color: var(--accent); }

.admin-nav__label {
    font: 600 var(--step--1) / 1 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--sp-3);
}

.admin-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.admin-nav__list a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    font: 500 var(--step-0) / 1.4 var(--font-sans);
    color: var(--ink-2);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.admin-nav__list a:hover { background: rgb(255 255 255 / .06); color: var(--ink-invert); }
.admin-nav__list a[aria-current="page"] {
    background: rgb(255 255 255 / .06);
    color: var(--ink-invert);
    border-left-color: var(--accent);
}

.admin-nav__foot { margin-top: auto; display: grid; gap: var(--sp-3); }

.admin-nav__meta {
    font: 400 var(--step--1) / 1.5 var(--font-mono);
    color: var(--ink-3);
    letter-spacing: .04em;
}

/* Ghost buttons sit on the dark nav slab, so they need inverted ink. */
.admin-nav .btn--ghost {
    color: var(--ink-invert);
    border-color: var(--rule-strong);
}
.admin-nav .btn--ghost:hover {
    background: var(--ink-invert);
    border-color: var(--ink-invert);
    color: var(--ink);
}

.admin-nav__signout { width: 100%; }

.admin-main { min-width: 0; padding: var(--sp-5) var(--sp-6) var(--sp-8); }

.admin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-4);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-5);
    border-bottom: 2px solid var(--ink);
}

.admin-head h1 {
    font: 600 var(--step-3) / 1.1 var(--font-serif);
    letter-spacing: -.015em;
}

.admin-head__actions { margin-left: auto; display: flex; gap: var(--sp-2); }

.admin-crumb {
    font: 500 var(--step--1) / 1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--sp-2);
}
.admin-crumb a { color: var(--ink-3); text-decoration: none; }
.admin-crumb a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.stat-card {
    padding: var(--sp-4);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--ink);
}

.stat-card__value {
    display: block;
    font: 700 var(--step-4) / 1 var(--font-serif);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    margin-bottom: var(--sp-1);
}

.stat-card__label {
    font: 500 var(--step--1) / 1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

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

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--paper-raised); }

table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }

caption {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    font: 500 var(--step--1) / 1.4 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--rule);
}

th, td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

thead th {
    position: sticky;
    top: 0;
    background: var(--paper-sunken);
    font: 600 var(--step--1) / 1.3 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }

td.is-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.cell-title { font-weight: 500; color: var(--ink); text-decoration: none; }
.cell-title:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }

.cell-muted { color: var(--ink-3); font-size: var(--step--1); }

.mono { font-family: var(--font-mono); font-size: var(--step--1); }

/* Byline ledger — the per-desk breakdown on /admin/bylines. Reads as a wire
   manifest: one ruled row per distinct byline, counts right-aligned. */
.ledger {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    min-width: 0;
}

.ledger li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--sp-3);
    padding: .2rem 0;
    font: var(--step--1) / 1.4 var(--font-mono);
    min-width: 0;
}

.ledger li + li { border-top: 1px solid var(--rule); }

.ledger__name,
.ledger__none {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ledger__none { color: var(--ink-3); letter-spacing: .04em; }

.ledger__n {
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    text-align: right;
}

.byline-form input { min-width: 12rem; }

.pill {
    display: inline-block;
    padding: .15em .5em;
    background: var(--paper-sunken);
    border: 1px solid var(--rule-interactive);
    font: 500 var(--step--1) / 1.3 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
}
.pill--on { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.pill--off { background: var(--paper-sunken); color: var(--ink-3); }

.table-empty { padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--ink-3); }
.table-empty b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: var(--sp-1); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-grid { display: grid; gap: var(--sp-4); max-width: 60rem; }

.field { display: grid; gap: var(--sp-2); min-width: 0; }

.field > label,
.field-label {
    font: 600 var(--step--1) / 1.3 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.field__hint { font-size: var(--step--1); color: var(--ink-3); }

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--paper-raised);
    border: 1px solid var(--rule-interactive);
    color: var(--ink);
    font-size: var(--step-0);
}
.field textarea { font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.65; min-height: 22rem; resize: vertical; }
.field select { cursor: pointer; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-3); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--focus); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.preview {
    margin-top: var(--sp-2);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border: 1px solid var(--rule);
    background: var(--paper-sunken);
}
.preview img { max-height: 4.5rem; width: auto; border: 1px solid var(--rule); }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule);
}

.inline-form { display: inline-flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { min-height: 44px; padding: var(--sp-2) var(--sp-3); background: var(--paper-raised); border: 1px solid var(--rule-interactive); color: var(--ink); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font: 600 var(--step--1) / 1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn--ghost { background: none; color: var(--ink); border-color: var(--rule-interactive); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

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

.btn--sm { min-height: 2.25rem; padding: 0 var(--sp-3); font-size: .7rem; letter-spacing: .08em; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.alert {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink-3);
    background: var(--paper-raised);
    font-size: var(--step--1);
    line-height: 1.55;
}
.alert p { margin: 0; }
.alert--error { border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.alert--success { border-left-color: var(--success); background: var(--success-bg); color: var(--success); }
.alert--info { border-left-color: var(--link); background: color-mix(in srgb, var(--link) 6%, transparent); color: var(--ink-2); }
.alert a { color: inherit; font-weight: 600; }

.alert code {
    font-family: var(--font-mono);
    background: var(--paper-sunken);
    padding: .1em .35em;
    word-break: break-all;
}

/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.media-item {
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    overflow: hidden;
}
.media-item img { width: 100%; height: 8rem; object-fit: cover; }
.media-item figcaption {
    padding: var(--sp-2);
    font: 400 var(--step--1) / 1.4 var(--font-mono);
    color: var(--ink-3);
    word-break: break-all;
    border-top: 1px solid var(--rule);
}

.dropzone {
    display: grid;
    place-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6);
    border: 1px dashed var(--rule-interactive);
    background: var(--paper-raised);
    text-align: center;
}
.dropzone p { font: 400 var(--step--1) / 1.5 var(--font-mono); color: var(--ink-3); margin: 0; }

/* --------------------------------------------------------------------------
   Confirmation modal
   Built by JS on first use.
   -------------------------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--sp-4); }
.modal[hidden] { display: none; }

.modal__backdrop { position: absolute; inset: 0; background: rgb(10 9 6 / .55); }

.modal__panel {
    position: relative;
    width: min(28rem, 100%);
    padding: var(--sp-5);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    box-shadow: var(--shadow-lift);
}

.modal__title { font: 600 var(--step-2) / 1.2 var(--font-serif); margin-bottom: var(--sp-3); }
.modal__text { font-size: var(--step-0); line-height: 1.6; color: var(--ink-2); margin: 0; }
.modal__actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.muted { color: var(--ink-3); }
.mono-label { font: 600 var(--step--1) / 1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.empty-state {
    padding: var(--sp-7) var(--sp-4);
    border: 1px dashed var(--rule-interactive);
    text-align: center;
    color: var(--ink-3);
}
.empty-state b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: var(--sp-2); font-size: var(--step-1); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 56rem) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-nav {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-3);
    }
    .admin-nav__brand { border-bottom: none; padding-bottom: 0; margin-right: auto; }
    .admin-nav__label { display: none; }
    .admin-nav__list { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
    .admin-nav__list a { border-left: none; border-bottom: 2px solid transparent; }
    .admin-nav__list a[aria-current="page"] { border-left: none; border-bottom-color: var(--accent); }
    .admin-nav__foot { margin-top: 0; }
    .admin-nav__meta { display: none; }
    .admin-main { padding: var(--sp-4); }
    .field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}