/* Private host dashboard (login, session shell). Reuses app.css's tokens
and card language (--panel/--night/--phosphor, the hard offset shadow
from .radio/.display on the homepage) rather than introducing a new
visual style for this one small area. */
.login-page { min-height: calc(100vh - 86px - 78px); display: flex; align-items: center; justify-content: center; padding: 8vh 5vw; }
.login-card { width: 100%; max-width: 380px; border: 1px solid #4b5149; background: var(--panel); padding: 32px; box-shadow: 22px 22px 0 #0a0b0a; }
.login-card h1 { font: 500 32px/1 Georgia, serif; margin: 10px 0 24px; }
.login-error { margin: 0 0 20px; padding: 10px 14px; border: 1px solid var(--orange); color: var(--orange); font: 700 11px/1.5 monospace; }
.login-success { margin: 0 0 20px; padding: 10px 14px; border: 1px solid var(--phosphor); color: var(--phosphor); font: 700 11px/1.5 monospace; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form label { color: var(--muted); font: 700 9px monospace; letter-spacing: .12em; }
.login-form input, .login-form textarea { background: var(--night); border: 1px solid #4b5149; color: var(--paper); padding: 12px 14px; font: 15px Arial, sans-serif; }
.login-form textarea { resize: vertical; font-family: Georgia, serif; }
.login-form input:focus-visible, .login-form textarea:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
.login-form .primary-action { justify-content: center; margin-top: 6px; border: none; cursor: pointer; font-size: 11px; width: 100%; }
/* Drag-and-drop .md/.txt upload wrapped around the "paste raw notes"
textarea (see issue #38, PR B) — client-side only, the file's text just
populates the textarea underneath. */
.dropzone { position: relative; border: 1px dashed #4b5149; padding: 4px; transition: border-color .15s ease, background-color .15s ease; }
.dropzone.dropzone-active { border-color: var(--phosphor); background-color: rgba(255, 255, 255, .03); }
.dropzone textarea { width: 100%; box-sizing: border-box; border: none; }
.dropzone-hint { margin: 8px 4px 0; color: var(--muted); font: 11px monospace; letter-spacing: .02em; }
.dropzone-status { margin: 6px 4px 0; min-height: 1.2em; color: var(--phosphor); font: 11px monospace; }
.dropzone-status.dropzone-status-error { color: var(--orange); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* The wider, multi-section net edit/import/preview pages — same card
language as .login-card, just not capped to a narrow login-form width. */
.net-card { border: 1px solid #4b5149; background: var(--panel); padding: 32px; box-shadow: 22px 22px 0 #0a0b0a; }
.net-card h1 { font: 500 32px/1 Georgia, serif; margin: 10px 0 24px; }
.net-card h2 { font: 500 22px/1 Georgia, serif; margin: 10px 0 20px; }
/* Shared by the edit-net and import-preview pages: a full-width row of
three columns — check-ins, movies/TV, summary — up top so they're
immediately scannable, then the editing controls below (instead of a
narrow sidebar, to use the horizontal space wide screens otherwise
leave empty). */
.net-edit-layout { max-width: 1320px; margin: 0 auto; padding: 8vh 5vw; display: flex; flex-direction: column; gap: 28px; }
.net-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.net-column { min-width: 0; }
/* CSS-only tabs (radio + label, no JS) toggling between the "details"
(date/question) and "import notes" cards on the edit-net page, so those
editing controls take up one card's worth of space instead of two
full-width cards stacked below the columns. */
.net-tabs { position: relative; }
.net-tab-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.net-tab-buttons { display: flex; gap: 4px; }
.net-tab-button { display: inline-block; cursor: pointer; padding: 12px 22px; border: 1px solid #4b5149; border-bottom: none; background: var(--night); color: var(--muted); font: 700 9px monospace; letter-spacing: .12em; }
.net-tab-panel { display: none; }
#tab-details:checked ~ .net-tab-panel-details,
#tab-import:checked ~ .net-tab-panel-import { display: block; }
#tab-details:checked ~ .net-tab-buttons label[for="tab-details"],
#tab-import:checked ~ .net-tab-buttons label[for="tab-import"] { position: relative; z-index: 1; margin-bottom: -1px; background: var(--panel); color: var(--phosphor); border-bottom: 1px solid var(--panel); }
.net-tab-input:focus-visible ~ .net-tab-buttons { outline: 2px solid var(--phosphor); outline-offset: 2px; }
.dashboard-page { max-width: 720px; margin: 0 auto; padding: 8vh 5vw; }
.dashboard-page h1 { font: 500 clamp(32px, 4vw, 48px)/1.1 Georgia, serif; margin: 10px 0 20px; }
.dashboard-page p { color: #aab0a6; font: 16px/1.5 Georgia, serif; }
.dashboard-page .primary-action { display: inline-flex; margin: 0 0 28px; border: none; cursor: pointer; font-size: 11px; }
.sign-out, .text-link { background: none; border: none; padding: 0; cursor: pointer; color: var(--phosphor); text-decoration: underline; text-underline-offset: 4px; font: 700 9px monospace; letter-spacing: .12em; }
.sign-out:focus-visible, .text-link:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 5px; }
/* One grid on the itself, with the row-link's children (date/question/
status) pulled into it via `display: contents` — NOT a flex wrapping
a separately-gridded , which briefly caused PREVIEW and the status
badge to overlap: a flex child with `min-width: 0` can be shrunk by its
flex-sibling (the PREVIEW link) below the sum of its own grid's fixed
column widths, so the grid overflows/collapses unpredictably instead of
the two links just sitting side by side. One grid avoids that entirely. */
.net-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.net-list li { border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 160px 1fr auto 110px; gap: 20px; align-items: center; padding: 16px 0; }
.net-list li > a:first-child { display: contents; }
.net-list li > a:first-child:hover .net-question { text-decoration: underline; }
.net-date { font: 700 13px monospace; color: var(--muted); }
.net-question { font: 17px Georgia, serif; }
.net-preview-link { justify-self: start; }
.net-status { justify-self: end; font: 700 9px monospace; letter-spacing: .12em; padding: 6px 10px; border: 1px solid; }
.net-status.draft { color: var(--muted); border-color: #4b5149; }
.net-status.published { color: var(--phosphor); border-color: var(--phosphor); }
.empty-state { color: #aab0a6; font: 16px/1.5 Georgia, serif; }
/* The public archive list (net-list.leaf) has no PREVIEW link or
draft/published status to show — every net there is already published,
and there's no separate preview page for it — so it only needs two
columns instead of the dashboard list's four. */
.public-net-list li { grid-template-columns: 160px 1fr; }
.checkin-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.checkin-list li { border-bottom: 1px solid var(--line); padding: 16px 0; }
.checkin-header { display: flex; align-items: center; gap: 10px; }
.checkin-callsign { font: 700 15px monospace; color: var(--phosphor); }
.checkin-flag { font: 700 9px monospace; letter-spacing: .1em; color: var(--orange); border: 1px solid var(--orange); padding: 2px 6px; }
.checkin-meta { margin: 6px 0 0; color: #aab0a6; font: 14px Georgia, serif; }
/* white-space: pre-line so a blank-line-separated summary (see
NetMarkdownParser's system prompt) actually shows as separate
paragraphs, instead of collapsing to one run-on line like normal HTML
whitespace handling would. */
.checkin-notes { margin: 6px 0 0; color: var(--paper); font: 15px/1.5 Georgia, serif; white-space: pre-line; }
/* Flattened, attributed movies/TV list — its own column instead of nested
under each check-in (see #10's dashboard layout feedback). */
.mention-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mention-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding: 12px 0; font: 14px Georgia, serif; color: #aab0a6; }
.mention-title { min-width: 0; }
.mention-kind { color: var(--muted); font: 700 9px monospace; letter-spacing: .08em; margin-right: 6px; }
.mention-callsign { flex-shrink: 0; font: 700 11px monospace; color: var(--phosphor); }
@media (max-width: 1100px) {
.net-columns { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
.login-page { padding: 40px 20px; }
.login-card { padding: 24px; box-shadow: 14px 14px 0 #0a0b0a; }
.dashboard-page { padding: 40px 20px; }
.net-card { padding: 24px; box-shadow: 14px 14px 0 #0a0b0a; }
.net-list li { grid-template-columns: 1fr; gap: 4px; padding: 14px 0 10px; }
.net-status { justify-self: start; }
.net-preview-link { margin-top: 8px; }
.net-edit-layout { padding: 40px 20px; gap: 20px; }
.net-tab-button { padding: 10px 14px; font-size: 8px; }
}