/* ==========================================================================
   brief-site — shared stylesheet
   Dark casino-luxury. Same visual language as the briefs it hosts, so the
   landing page and the documents feel like one product.
   Mobile-first: single column by default, grids widen at >=768px.
   Dark-only by design — there is no theme toggle.
   ========================================================================== */

:root {
    --bg-dark:      #0B0F19;
    --bg-panel:     #161D2B;
    --gold-primary: #D4AF37;
    --gold-light:   #F5E6A8;
    --accent-red:   #8B0000;
    --text-main:    #E2E8F0;
    --text-muted:   #94A3B8;

    /* Derived tokens — keep every rgba() of gold in one place. */
    --gold-hairline: rgba(212, 175, 55, 0.20);
    --gold-hairline-strong: rgba(212, 175, 55, 0.45);
    --gold-glow:     rgba(212, 175, 55, 0.10);
    --panel-shadow:  0 4px 15px rgba(0, 0, 0, 0.5);
    --panel-shadow-lifted: 0 14px 32px rgba(0, 0, 0, 0.65);
    --signature:     linear-gradient(90deg, var(--accent-red), var(--gold-primary));
    --radius:        8px;
}

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

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

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    min-height: 100vh;
    padding: 24px 18px 0;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    body { padding: 40px 32px 0; }
}

a {
    color: var(--gold-primary);
    text-decoration: none;
    transition: color .18s ease;
}

a:hover { color: var(--gold-light); }

:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
}

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

.wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    flex: 1 0 auto;
}

.wrap--narrow { max-width: 520px; }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
    text-align: center;
    border-bottom: 2px solid var(--gold-primary);
    padding-bottom: 18px;
    margin-bottom: 34px;
}

.masthead h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 6vw, 3rem);
    line-height: 1.15;
    color: var(--gold-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.masthead .tagline {
    color: var(--gold-light);
    font-size: clamp(.85rem, 2.6vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 1px;
}

/* A masthead variant with a right-hand action cluster (admin screen). */
.masthead--bar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    align-items: flex-start;
}

.masthead--bar h1 { font-size: clamp(1.5rem, 5vw, 2.25rem); margin-bottom: 4px; }

.masthead-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

@media (min-width: 768px) {
    .masthead--bar {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

/* --------------------------------------------------------------------------
   Panels — the base surface for everything
   -------------------------------------------------------------------------- */

.panel {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-panel);
    border: 1px solid var(--gold-hairline);
    border-radius: var(--radius);
    box-shadow: var(--panel-shadow);
    padding: 22px;
}

@media (min-width: 768px) {
    .panel { padding: 25px; }
}

/* Signature 3px red→gold bar across the top of every panel. */
.panel::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--signature);
}

.panel-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--gold-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.panel-note {
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Brief card grid (landing page)
   -------------------------------------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: 1fr;      /* mobile-first: one column */
    gap: 20px;
}

@media (min-width: 768px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
}

@media (min-width: 1100px) {
    .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
    display: flex;
    flex-direction: column;
    min-height: 200px;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover,
.card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--panel-shadow-lifted);
    border-color: var(--gold-hairline-strong);
    color: inherit;
}

.card-eyebrow {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.card h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.25;
    color: var(--gold-light);
    margin-bottom: 10px;
}

.card p {
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.6;
    flex: 1 1 auto;
    margin-bottom: 18px;
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--gold-hairline);
    padding-top: 14px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.card-foot .cue {
    color: var(--gold-primary);
    font-weight: 600;
    white-space: nowrap;
}

.card:hover .cue { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.empty {
    text-align: center;
    padding: 48px 22px;
}

.empty .mark {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3rem;
    color: var(--gold-primary);
    opacity: .5;
    line-height: 1;
    margin-bottom: 14px;
}

.empty h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--gold-light);
    margin-bottom: 10px;
}

.empty p {
    color: var(--text-muted);
    max-width: 46ch;
    margin: 0 auto 20px;
    font-size: .95rem;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 18px;
    min-height: 40px;
    border-radius: 4px;
    border: 1px solid var(--gold-hairline-strong);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.btn:hover {
    background: var(--gold-glow);
    border-color: var(--gold-primary);
    color: var(--gold-light);
}

.btn--primary {
    background: var(--signature);
    border-color: transparent;
    color: #FFF8E1;
    font-weight: 800;
}

.btn--primary:hover {
    color: #fff;
    filter: brightness(1.12);
    background: var(--signature);
}

.btn--danger { border-color: rgba(139, 0, 0, .8); color: #F0A0A0; }
.btn--danger:hover { background: rgba(139, 0, 0, .28); border-color: var(--accent-red); color: #FFD7D7; }

.btn--small {
    padding: 6px 10px;
    min-height: 34px;
    font-size: .68rem;
    letter-spacing: .5px;
}

.btn--icon {
    padding: 6px 0;
    min-width: 34px;
    min-height: 34px;
    font-size: .8rem;
    letter-spacing: 0;
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: .35;
    cursor: not-allowed;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

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

.field { margin-bottom: 18px; }

.field label,
.label {
    display: block;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold-primary);
    margin-bottom: 7px;
}

.field .hint {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

input[type="text"],
input[type="password"],
input[type="file"],
textarea,
select {
    width: 100%;
    font-family: inherit;
    font-size: .92rem;
    color: var(--text-main);
    background: rgba(11, 15, 25, .75);
    border: 1px solid var(--gold-hairline);
    border-radius: 4px;
    padding: 11px 13px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

/* Custom chevron so the native control matches the dark palette everywhere. */
select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 38px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--gold-primary) 50%),
        linear-gradient(135deg, var(--gold-primary) 50%, transparent 50%);
    background-position: right 18px center, right 13px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Native dropdown list is painted by the OS — force readable colors. */
select option { background: var(--bg-panel); color: var(--text-main); }

textarea { resize: vertical; min-height: 76px; line-height: 1.5; }

input::placeholder,
textarea::placeholder { color: #5A6579; }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

/* Checkbox line ("Publish immediately"). */
.field label.checkline,
.checkline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: .9rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-main);
    cursor: pointer;
    margin-bottom: 0;
}

.checkline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--gold-primary);
    cursor: pointer;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .92em;
    color: var(--gold-light);
    background: rgba(212, 175, 55, .09);
    border-radius: 3px;
    padding: 1px 5px;
}

input[type="file"] { padding: 9px 11px; cursor: pointer; }

input[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold-light);
    background: rgba(212, 175, 55, .12);
    border: 1px solid var(--gold-hairline-strong);
    border-radius: 3px;
    padding: 7px 12px;
    margin-right: 12px;
    cursor: pointer;
}

/* Two-up form rows on wide screens. */
.field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 18px;
}

@media (min-width: 768px) {
    .field-row--split { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */

.flash {
    border-radius: 4px;
    padding: 13px 16px;
    margin-bottom: 22px;
    font-size: .88rem;
    border: 1px solid;
}

.flash--ok {
    background: rgba(212, 175, 55, .08);
    border-color: var(--gold-hairline-strong);
    color: var(--gold-light);
}

.flash--err {
    background: rgba(139, 0, 0, .22);
    border-color: rgba(139, 0, 0, .85);
    color: #FFD7D7;
}

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

.auth-shell {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0 48px;
}

.auth-card { width: 100%; max-width: 420px; }

.auth-card .crest {
    text-align: center;
    margin-bottom: 22px;
}

.auth-card .crest .rule {
    width: 60px;
    height: 3px;
    background: var(--signature);
    margin: 0 auto 16px;
}

.auth-card .crest h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    color: var(--gold-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
}

.auth-card .crest p {
    color: var(--text-muted);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Admin: brief table.
   A real table on desktop; stacked label/value rows under 900px so the inline
   edit inputs stay usable on a phone.
   -------------------------------------------------------------------------- */

.table-scroll { width: 100%; overflow-x: auto; }

.briefs {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.briefs thead th {
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold-primary);
    text-align: left;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--gold-hairline);
    white-space: nowrap;
}

.briefs tbody tr { border-bottom: 1px solid rgba(212, 175, 55, .10); }
.briefs tbody tr:last-child { border-bottom: 0; }

.briefs td { padding: 14px 12px; vertical-align: middle; }

.briefs .col-order { width: 84px; }
.briefs .col-state { width: 130px; }
.briefs .col-date  { width: 140px; color: var(--text-muted); font-size: .78rem; white-space: nowrap; }
.briefs .col-act   { width: 210px; }

.slug {
    display: block;
    margin-top: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    color: var(--text-muted);
}

.pill {
    display: inline-block;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid;
}

.pill--live   { color: var(--gold-light); border-color: var(--gold-hairline-strong); background: rgba(212, 175, 55, .12); }
.pill--draft  { color: var(--text-muted); border-color: rgba(148, 163, 184, .35); background: rgba(148, 163, 184, .08); }
.pill--broken { color: #FFD7D7; border-color: rgba(139, 0, 0, .85); background: rgba(139, 0, 0, .25); }

.row-form { display: grid; gap: 8px; }

/* --------------------------------------------------------------------------
   Admin: trash.
   Deliberately the quietest panel on the page. A deleted brief is recoverable,
   so the section reads as a holding area — dimmed surface, no gold signature
   bar, muted heading — and NOT as a warning. The only alarming thing in it is
   .btn--destroy, which is the only control on the whole site that destroys
   anything. Keeping every other cue calm is what makes that one read.
   -------------------------------------------------------------------------- */

.panel--trash {
    /* Sits apart from the library above it, and recedes. */
    margin-top: 10px;
    background-color: rgba(22, 29, 43, .55);
    border-color: rgba(148, 163, 184, .18);
    box-shadow: none;
}

/* No red→gold signature bar: that flourish marks the working surfaces. */
.panel--trash::before { background: rgba(148, 163, 184, .22); }

.panel-title--quiet {
    color: var(--text-muted);
    font-size: .9rem;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.panel-note--quiet { font-size: .78rem; }

.briefs--trash { margin-top: 14px; }
.briefs--trash thead th { color: var(--text-muted); border-bottom-color: rgba(148, 163, 184, .18); }
.briefs--trash tbody tr { border-bottom-color: rgba(148, 163, 184, .12); }

.trash-title {
    font-weight: 600;
    color: var(--text-main);
}

.trash-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, .14);
}

.trash-foot .hint {
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.4;
}

/* The one genuinely irreversible control on the site. Solid red, not an
   outline — it should not look like the calm buttons beside it. */
.btn--destroy {
    border-color: var(--accent-red);
    background: rgba(139, 0, 0, .42);
    color: #FFD7D7;
}

.btn--destroy:hover {
    background: var(--accent-red);
    border-color: #B22222;
    color: #FFF0F0;
}

@media (max-width: 899px) {
    .briefs--trash .col-state,
    .briefs--trash .col-date,
    .briefs--trash .col-act { width: auto; }
}

@media (max-width: 899px) {
    .briefs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

    .briefs,
    .briefs tbody,
    .briefs tr,
    .briefs td { display: block; width: 100%; }

    .briefs tbody tr {
        border: 1px solid var(--gold-hairline);
        border-radius: var(--radius);
        padding: 6px 0;
        margin-bottom: 16px;
        background: rgba(11, 15, 25, .4);
    }

    .briefs td { padding: 10px 14px; }

    /* Label each stacked cell using the data-label attribute from the markup. */
    .briefs td::before {
        content: attr(data-label);
        display: block;
        font-size: .62rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--gold-primary);
        margin-bottom: 6px;
    }

    .briefs .col-order,
    .briefs .col-state,
    .briefs .col-date,
    .briefs .col-act { width: auto; }
}

/* --------------------------------------------------------------------------
   Admin: mobile-friendliness advisory.

   A CAUTION, not an error. The upload worked and the brief is live — nothing
   here failed, so it must not wear the red of .flash--err, which is reserved
   for "your request was refused". Amber-gold on a dim surface reads as "look
   at this when you have a moment", which is exactly its status.
   -------------------------------------------------------------------------- */

.advice {
    border: 1px solid var(--gold-hairline-strong);
    border-left: 3px solid var(--gold-primary);
    border-radius: 4px;
    background: rgba(212, 175, 55, .06);
    padding: 16px 18px;
    margin-bottom: 22px;
}

.advice-head {
    color: var(--gold-primary);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.advice-lead {
    color: var(--text-main);
    font-size: .92rem;
    line-height: 1.55;
}

.advice-lead strong { color: var(--gold-light); }

.advice-why {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.advice-list {
    margin: 6px 0 0;
    padding-left: 20px;
    color: var(--text-muted);
    font-size: .85rem;
    line-height: 1.55;
}

.advice-list li { margin-bottom: 4px; }

.advice-note {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.5;
    font-style: italic;
}

.advice .btn-row { margin-top: 14px; }

/* --------------------------------------------------------------------------
   Admin: starter-template strip.
   Sits at the top of the upload panel. Quiet — it is an offer, not a step, and
   the owner who already has a document should be able to skip straight past it.
   -------------------------------------------------------------------------- */

.starter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 1px dashed var(--gold-hairline-strong);
    border-radius: 4px;
    background: rgba(212, 175, 55, .05);
}

.starter-copy {
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.55;
}

.starter-lead {
    display: block;
    color: var(--gold-primary);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .starter { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
    .starter .btn { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   preview.php — device previewer.

   The layout is a fixed-height column (bar, readout, stage) so that the STAGE
   is the only thing that scrolls. That matters: the stage's scrollbars are the
   honest signal that a document is wider or taller than the device it is being
   previewed at, and a page-level scrollbar would swallow that signal.
   -------------------------------------------------------------------------- */

body.previewer {
    padding: 0;
    /* Same reset as body.reader — min-height beats height, so the base rule's
       min-height:100vh has to go before the height below means anything. */
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pvbar {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 9px 14px;
    background: rgba(11, 15, 25, .96);
    border-bottom: 1px solid var(--gold-hairline);
}

.pvbar::after {
    content: '';
    position: absolute;
    inset: auto 0 -3px 0;
    height: 3px;
    background: var(--signature);
    opacity: .8;
}

.pvbar .home {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold-primary);
    white-space: nowrap;
}

.pvbar .home:hover { color: var(--gold-light); }

.pv-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 200px;
}

.pv-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: .95rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The width picker. A segmented control, not four loose buttons — the choices
   are mutually exclusive and should look it. */
.pv-devices {
    display: flex;
    flex: 0 0 auto;
    border: 1px solid var(--gold-hairline-strong);
    border-radius: 4px;
    overflow: hidden;
}

.pv-btn {
    font-family: inherit;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--gold-hairline);
    padding: 8px 12px;
    min-height: 34px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.pv-btn:first-child { border-left: 0; }
.pv-btn:hover { color: var(--gold-light); background: var(--gold-glow); }

.pv-btn.is-on {
    color: #FFF8E1;
    background: var(--signature);
}

.pv-right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.pv-fit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.pv-fit input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--gold-primary);
    cursor: pointer;
}

.pv-fit input[disabled] { cursor: not-allowed; opacity: .4; }

.pv-link {
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    white-space: nowrap;
}

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

/* The Reload control is a <button> but reads as the text link beside it. */
.pv-reload {
    font-family: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* The honesty line: true CSS width, then the zoom applied afterwards. */
.pv-readout {
    flex: 0 0 auto;
    padding: 7px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
    letter-spacing: .3px;
    color: var(--text-muted);
    background: rgba(11, 15, 25, .6);
    border-bottom: 1px solid rgba(212, 175, 55, .08);
}

.pv-stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    /* Keep in sync with GUTTER in preview.php's script. */
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* A faint grid so the edges of the framed device are visible even when the
       brief's own background is the same near-black as the page. */
    background:
        repeating-linear-gradient(0deg, rgba(148,163,184,.05) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(148,163,184,.05) 0 1px, transparent 1px 40px),
        var(--bg-dark);
}

/* Occupies the SCALED footprint. The frame inside it keeps its true size and is
   transformed — see the note in preview.php. */
.pv-box {
    flex: 0 0 auto;
    position: relative;
    box-shadow: var(--panel-shadow-lifted);
    border-radius: 2px;
    outline: 1px solid var(--gold-hairline-strong);
}

.pv-frame {
    display: block;
    border: 0;
    background: var(--bg-dark);
}

@media (max-width: 719px) {
    /* On a phone the bar cannot hold everything. The document title is the
       first thing to go — the width picker is why the page exists. */
    .pv-doc { display: none; }
    .pv-right { margin-left: 0; }
    .pv-stage { padding: 12px; }
}

/* --------------------------------------------------------------------------
   admin.php?tab=stats — the statistics screen.

   Everything here is presentation for numbers that PHP has already worked out.
   There is no script on this page at all: the range picker and the column sorts
   are ordinary links, and the chart is an <svg> the server emitted, so the
   styles below are the only thing between the markup and the screen.
   -------------------------------------------------------------------------- */

/* The range picker. A segmented control, like the device previewer's width
   picker, because the choices are mutually exclusive and should look it. */
.rangebar {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--gold-hairline-strong);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 22px;
    width: fit-content;
    max-width: 100%;
}

.range-btn {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    border-left: 1px solid var(--gold-hairline);
    padding: 9px 14px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.range-btn:first-child { border-left: 0; }
.range-btn:hover { color: var(--gold-light); background: var(--gold-glow); }

.range-btn.is-on {
    color: #FFF8E1;
    background: var(--signature);
}

.range-btn.is-on:hover { color: #fff; }

/* Top-line tiles. One column on a phone; they are read top to bottom and each
   one carries a sentence, so cramming them side by side would cost the
   sentences their legibility long before it saved any space. */
.tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 900px) {
    .tiles { grid-template-columns: repeat(3, 1fr); }
}

.tile-label {
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold-primary);
    margin-bottom: 8px;
}

.tile-value {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 7vw, 2.8rem);
    line-height: 1.05;
    color: var(--gold-light);
    margin-bottom: 10px;
}

/* The caveat under every figure. Deliberately NOT tiny-and-grey-to-the-point-of
   -invisible: these sentences are what make the number above them mean
   something, and a note nobody can read is the same as no note. */
.tile-note {
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.5;
}

.tile-note strong { color: var(--gold-light); font-weight: 600; }

/* --- the chart ---------------------------------------------------------- */

/* Scrolls inside its own box rather than pushing the page sideways. The SVG has
   a fixed viewBox and scales to the width it is given, so this only ever
   engages on a screen narrower than the minimum legible chart. */
.chart-wrap {
    width: 100%;
    overflow-x: auto;
}

.chart {
    display: block;
    width: 100%;
    min-width: 320px;
    height: auto;
}

.chart-grid  { stroke: rgba(148, 163, 184, .16); stroke-width: 1; }
.chart-axis  { stroke: var(--gold-hairline-strong); stroke-width: 1; }

.chart-ytick,
.chart-xtick {
    fill: var(--text-muted);
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 11px;
    letter-spacing: .3px;
}

.chart-bar {
    fill: var(--gold-primary);
    opacity: .85;
    transition: opacity .15s ease, fill .15s ease;
}

.chart-bar:hover { opacity: 1; fill: var(--gold-light); }

/* A bucket with no views is still drawn, as a baseline tick. It keeps the
   hover target (which says "0 views" — information) and stops a quiet day
   reading as a gap in the data. */
.chart-bar--zero { fill: rgba(148, 163, 184, .30); opacity: 1; }

.chart-caption {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: .74rem;
}

/* The excluded-crawler line. Set apart from the chart above it with a rule,
   because it is not part of the traffic — it is a statement about what was
   taken out of it. */
.excluded {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, .14);
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.55;
}

.excluded-n {
    color: var(--gold-light);
    font-weight: 700;
}

/* --- the per-brief table ------------------------------------------------ */

.stats-table td { vertical-align: top; }

.sort-link {
    color: var(--gold-primary);
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    white-space: nowrap;
}

.sort-link:hover { color: var(--gold-light); }
.sort-link.is-on { color: var(--gold-light); text-decoration: underline; }

.tiny { font-size: .68rem; line-height: 1.4; display: inline-block; }

/* --- "How to read this" ------------------------------------------------- */

/* Reuses .panel--trash's quiet surface on purpose: this is reference material,
   not part of the day's work, and it should read as something to consult rather
   than something to act on. */
.howto { margin-top: 22px; }

.howto-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.6;
}

.howto-list li { margin-bottom: 10px; }
.howto-list li:last-child { margin-bottom: 0; }
.howto-list strong { color: var(--text-main); font-weight: 600; }

/* The visitor's own words, on the owner's screen. Set apart as a quotation so
   it reads as something being shown TO the owner rather than written FOR them —
   it is the one paragraph on this page that is not addressed to them. */
.privacy-quote {
    margin: 10px 0 16px;
    padding: 10px 14px;
    border-left: 2px solid var(--gold-hairline-strong);
    color: var(--text-main);
    font-size: .82rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    flex: 0 0 auto;
    max-width: 1200px;
    width: 100%;
    margin: 48px auto 0;
    padding: 18px 0 26px;
    border-top: 1px solid rgba(212, 175, 55, .12);
    text-align: center;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--gold-primary); }
.site-footer .dot { margin: 0 8px; opacity: .5; }

/* A submit button that reads as a plain link (used for POST-only sign-out). */
.inline-form { display: inline; }

.linkbtn {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: var(--text-muted);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color .18s ease;
}

.linkbtn:hover { color: var(--gold-primary); }

/* --------------------------------------------------------------------------
   view.php — full-bleed brief with a slim fixed back-bar.
   The bar is deliberately understated so it does not compete with the brief's
   own design.
   -------------------------------------------------------------------------- */

body.reader {
    padding: 0;
    /* min-height is NOT decoration here. The base `body` rule sets
       min-height:100vh, and min-height beats height — so without this reset the
       body stays 100vh tall no matter what the height below says, and the dvh
       line underneath would be dead code. */
    min-height: 0;
    height: 100vh;    /* fallback for engines without dvh */
    height: 100dvh;   /* mobile: 100vh is the LARGE viewport, i.e. the height
                         you get once the URL bar has retracted. Combined with
                         overflow:hidden that leaves the last ~60-115px of the
                         brief parked behind the browser toolbar with no way to
                         scroll to it. dvh tracks the visible viewport instead. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.backbar {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 46px;
    padding: 0 14px;
    background: rgba(11, 15, 25, .96);
    border-bottom: 1px solid var(--gold-hairline);
    backdrop-filter: blur(6px);
}

.backbar::after {
    content: '';
    position: absolute;
    inset: auto 0 -3px 0;
    height: 3px;
    background: var(--signature);
    opacity: .8;
}

.backbar .home {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold-primary);
    white-space: nowrap;
}

.backbar .home:hover { color: var(--gold-light); }

.backbar .doc-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: .95rem;
    color: var(--text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.backbar .bar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* One look for both controls — the fullscreen <button> and the new-tab <a> —
   so the bar reads as a pair of quiet text actions rather than a toolbar. */
.backbar .bar-btn {
    font-family: inherit;
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color .18s ease;
}

.backbar .bar-btn:hover { color: var(--gold-primary); }
.backbar .bar-btn[hidden] { display: none; }

/* Hide the centre title on narrow screens so the controls always fit. */
@media (max-width: 599px) {
    .backbar .doc-title { display: none; }
    .backbar { justify-content: space-between; }
    .backbar .bar-actions { gap: 12px; }
}

.brief-frame {
    flex: 1 1 auto;
    /* A flex item's default min-height:auto refuses to shrink below its content;
       0 lets the frame take exactly the space the bar leaves and no more, which
       is what keeps the parent from ever growing a second scrollbar. */
    min-height: 0;
    width: 100%;
    border: 0;
    display: block;
    background: var(--bg-dark);
}

/* When the frame itself is the fullscreen element the flex sizing no longer
   applies — the UA sizes it to the screen. Pin the backdrop to the site's dark
   so a brief with a transparent body never flashes white against it. */
.brief-frame:fullscreen {
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
}

.brief-frame::backdrop { background: var(--bg-dark); }

/* The visitor privacy note. Sized and coloured to read as a footnote — quieter
   than the back-bar above it, which is itself deliberately understated.

   flex: 0 0 auto is the load-bearing line. body.reader is a fixed-height flex
   column with overflow:hidden, and .brief-frame is the only 1 1 auto item in
   it: the note takes exactly the height of its own text and the frame gives up
   that much, so a longer notice can never push the brief past the bottom edge
   where nothing could scroll to it.

   It is in the normal flow on purpose. position:fixed would put it OVER the
   brief's last line, which is the one thing a note about respecting the reader
   must not do. */
.privacy-note {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid var(--gold-hairline);
    background: rgba(11, 15, 25, .96);
    color: var(--text-muted);
    font-size: .62rem;
    line-height: 1.45;
    letter-spacing: .2px;
    text-align: center;
    opacity: .85;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound {
    text-align: center;
    padding: 56px 22px;
}

.notfound .code {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(3.5rem, 16vw, 6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--gold-primary);
    letter-spacing: 4px;
    margin-bottom: 6px;
}

.notfound h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--gold-light);
    margin-bottom: 12px;
}

.notfound p {
    color: var(--text-muted);
    max-width: 44ch;
    margin: 0 auto 24px;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.stack > * + * { margin-top: 22px; }
.muted { color: var(--text-muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Activity-log event pills (log.php)
   Severity, not category: the eye should land on a purge or a failed sign-in
   without reading a word. Quiet grey is the normal state, so a red row in a
   screenful of grey is the whole interface.
   -------------------------------------------------------------------------- */

.ev--good  { color: var(--gold-light); border-color: var(--gold-hairline-strong); background: rgba(212, 175, 55, .12); }
.ev--quiet { color: var(--text-muted); border-color: rgba(148, 163, 184, .35); background: rgba(148, 163, 184, .08); }
.ev--warn  { color: #F5C97A; border-color: rgba(245, 201, 122, .45); background: rgba(245, 201, 122, .10); }
.ev--bad   { color: #FFD7D7; border-color: rgba(139, 0, 0, .85); background: rgba(139, 0, 0, .25); }