/* Weazel News newsroom: story desk, front page and stats tabs.
   Only new styles live here; tabs, items, pills, buttons and form fields come from weazel.css.
   Built on the shared colour and type tokens so both themes work without extra rules. */

.tab-panel.desk { gap: 16px; }
.desk fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.desk .hint { font-family: var(--display); font-size: 13px; color: var(--muted); }
.desk .form-note:empty { display: none; }

/* List view */
.desk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.desk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.desk-chip-everyone { margin-left: 8px; }
.desk-who { margin: 0; }
.desk-list { display: grid; gap: 8px; }
.desk-row { width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; gap: 6px; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; }
.desk-row:hover { box-shadow: var(--shadow-1); border-color: var(--ink-2); }
.desk-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.desk-row-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.desk-row-title { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.nr-item.st-draft { border-left-color: var(--rule); }
.nr-item.st-submitted { border-left-color: var(--red); }
.nr-item.st-changes_requested { border-left-color: var(--warn); }
.nr-item.st-published { border-left-color: var(--ok); }
.nr-item.st-withdrawn { border-left-color: var(--muted); opacity: .8; }

/* Status pills: set on the pill itself so they never clash with the ad and tip colours in weazel.css. */
.pill.desk-pill { background: var(--ink); color: var(--surface); }
.pill.desk-pill.st-submitted { background: var(--red); color: var(--on-red); }
.pill.desk-pill.st-changes_requested { background: var(--warn); color: var(--band); }
.pill.desk-pill.st-published { background: var(--ok); color: var(--on-red); }
.pill.desk-pill.st-withdrawn { background: var(--muted); color: var(--surface); }
.desk-flag { font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; background: var(--red); color: var(--on-red); }
.desk-flag--ink { background: var(--ink); color: var(--surface); }

/* Editor */
.desk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.desk-save-state { margin-left: auto; }
.desk-sm { padding: 6px 10px; font-size: 12px; }
.desk-editor { gap: 20px; }
.desk-fields { display: grid; gap: 20px; }
.desk-fields[disabled] { opacity: .75; }
.desk-group { display: grid; gap: 10px; }
.desk-body { min-height: 320px; }
.desk-count { justify-self: end; font-family: var(--display); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.desk-count.is-bad { color: var(--red-ink); font-weight: 700; }
.desk-flags { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.desk-flags .check strong { font-family: var(--label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; }

.desk-note { background: var(--surface-2); border: 1px solid var(--rule); border-left: 5px solid var(--ink); padding: 12px 16px; display: grid; gap: 4px; }
.desk-note p { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; }
.desk-note strong { font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.desk-note--warn { border-left-color: var(--warn); }
.desk-note--ok { border-left-color: var(--ok); }
.desk-note--alert { border-left-color: var(--red); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.desk-note[hidden] { display: none; }

/* Photo picker */
.desk-img { display: grid; gap: 10px; }
.desk-drop { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 28px 16px; border: 2px dashed var(--rule); background: var(--surface-2); color: var(--muted); cursor: pointer; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.desk-drop strong { font-family: var(--label); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.desk-drop span { font-family: var(--display); font-size: 13px; }
.desk-drop:hover, .desk-drop.is-over, .desk-drop:focus-within { border-color: var(--red); }
.desk-drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.desk-drop.is-busy { opacity: .6; cursor: progress; }
.desk-drop[hidden] { display: none; }
.desk-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.desk-img-preview img { display: block; max-width: 100%; max-height: 280px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--rule); }
.desk-img-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.desk-img-fields[hidden], .desk-img-preview[hidden] { display: none; }

/* Sections */
.desk-sections { display: grid; gap: 14px; }
.desk-section { display: grid; gap: 12px; padding: 14px; background: var(--surface-2); border: 1px solid var(--rule); border-top: 3px solid var(--rule-strong); }
.desk .desk-section { padding: 14px; }
.desk-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.desk-sec-label { font-family: var(--label); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.desk-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.desk-section [hidden] { display: none; }

/* Poll */
.desk-poll { display: grid; gap: 10px; padding-left: 28px; }
.desk-poll[hidden] { display: none; }
.desk-poll-opts { display: grid; gap: 8px; }
.desk-poll-opt { display: flex; gap: 8px; align-items: center; }
.desk-poll-opt input { flex: 1; min-width: 0; }

/* Actions stay in reach at the bottom of the screen on long stories. */
.desk-actionbar { position: sticky; bottom: 0; z-index: 5; display: grid; gap: 6px; padding: 12px 0; background: var(--bg); border-top: 3px solid var(--rule-strong); }
.desk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.desk-actions a.btn-ghost { text-decoration: none; display: inline-block; }
.desk-actions button[disabled] { opacity: .6; cursor: wait; }
.desk-danger { color: var(--red-ink); }
.desk-review { display: grid; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--rule); border-left: 5px solid var(--warn); }
.desk-review[hidden] { display: none; }

.desk-audit ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.desk-audit li { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 2px 14px; padding: 8px 0; border-top: 1px solid var(--rule); font-family: var(--display); font-size: 14px; color: var(--ink-2); }
.desk-audit q { grid-column: 2; font-family: var(--serif); font-style: italic; color: var(--muted); }

/* Front page */
.desk-intro { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 68ch; }
.desk-strap legend { padding: 0 0 8px; }
.fp-list { display: grid; border-top: 3px solid var(--rule-strong); }
.fp-row { display: grid; grid-template-columns: 52px 52px 52px 1fr; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.fp-row input { width: 18px; height: 18px; justify-self: center; accent-color: var(--red); }
.fp-headrow span { font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.fp-headrow span:last-child { text-align: left; }
.fp-auto { cursor: pointer; font-family: var(--display); font-weight: 700; }
.fp-story { display: grid; gap: 2px; min-width: 0; }
.fp-story a { font-family: var(--display); font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.fp-story a:hover { color: var(--red-ink); }

/* Stats */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stat-tile { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--red); }
.stat-tile strong { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 40px; line-height: 1; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.stat-list { list-style: none; margin: 0; padding: 0; counter-reset: stat; display: grid; }
.stat-list li { counter-increment: stat; display: grid; grid-template-columns: 36px 1fr 120px 64px; grid-template-areas: "n title bar count" "n cat bar count"; align-items: center; gap: 0 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.stat-list li::before { content: counter(stat); grid-area: n; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 26px; color: var(--red-ink); }
.stat-list a { grid-area: title; font-family: var(--display); font-weight: 700; color: var(--ink); text-decoration: none; }
.stat-list a:hover { color: var(--red-ink); }
.stat-list .muted { grid-area: cat; }
.stat-bar { grid-area: bar; height: 8px; background: var(--surface-2); }
.stat-bar span { display: block; height: 100%; background: var(--red); }
.stat-n { grid-area: count; text-align: right; font-family: var(--display); font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
    .desk-img-fields { grid-template-columns: 1fr; }
    .desk-save-state { margin-left: 0; }
    .desk-audit li { grid-template-columns: 1fr; }
    .desk-audit q { grid-column: 1; }
    .fp-row { grid-template-columns: 36px 36px 36px 1fr; gap: 6px; }
    .stat-list li { grid-template-columns: 30px 1fr 56px; grid-template-areas: "n title count" "n cat count" "n bar bar"; }
    .stat-bar { margin-top: 6px; }
    .desk-poll { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .desk-row, .desk-drop { transition: none; } }

/* The strap editor is a fieldset, which the reset above strips; give it back the form padding. */
.desk .desk-strap { padding: 20px; gap: 14px; }
/* Six tabs do not fit a phone: scroll them in one row instead of wrapping. */
@media (max-width: 600px) {
    .tool .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .tool .tabs button { flex: none; }
}