/* ==========================================================================
   PAGE: /view  — public feed
   --------------------------------------------------------------------------
   Linear-style landing rhythm: a quiet top bar, an oversized left-aligned
   headline, a figure card, then the record list (one hairline card) with a
   sticky search/filter rail on the right. Natural document scroll.
   The admin rail stays in the DOM (JS contract) and only materialises when
   a token is present — guests never see a chrome column at all.
   ========================================================================== */

.app-container {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    min-height: 100vh;
}
.app-container.guest-mode { grid-template-columns: minmax(0, 1fr); }
.app-container.guest-mode .sidebar { display: none; }

/* --- admin rail (authenticated only) ---------------------------------- */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-4);
    background: var(--color-carbon);
    border-right: 1px solid var(--color-line);
}
.sidebar-header { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-line); }
.sidebar-section .form-control + .d-flex,
.sidebar-section .btn-quiet { margin-top: var(--space-2); }
.sidebar-section .btn-quiet,
.sidebar-section .btn-danger { width: 100%; }
.sidebar-footer { margin-top: auto; }

.main-content { min-width: 0; }

/* --- top bar + hero ---------------------------------------------------- */

.masthead { border-bottom: 1px solid var(--color-line); }

.masthead-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: var(--content-max);
    min-height: 60px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-6);
}
.masthead-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-fog);
}
#mastheadClock {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}
.masthead-meta > span[aria-hidden="true"] { display: none; }

/* The login route is the page's one nav CTA: a white pill (lime is kept
   for real primary actions such as the login submit). */
#loginBtnArea .btn-text {
    min-height: 32px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-paper);
    color: var(--color-void);
    font-weight: var(--weight-medium);
}
#loginBtnArea .btn-text:hover { background: #e5e5e6; text-decoration: none; }

.masthead-title {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-24) var(--space-6) var(--space-12);
}
.masthead-title h1 {
    font-size: clamp(36px, 5.6vw, var(--text-5xl));
    font-weight: var(--weight-medium);
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: var(--color-fog);
    max-width: 16ch;
}
/* Key phrase in white, the rest of the headline stepped back to grey. */
.masthead-title h1 em {
    font-style: normal;
    color: var(--color-paper);
}
.masthead-title .lede {
    margin-top: var(--space-6);
    max-width: 52ch;
}

/* --- figure card ------------------------------------------------------- */

.figure-strip {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-6) var(--space-12);
}
.figure-strip .stats-grid { grid-template-columns: repeat(4, 1fr); }
.figure-strip .stat-card { padding: var(--space-5) var(--space-6); }
.figure-strip .stat-value {
    font-size: var(--text-3xl);
    letter-spacing: -0.022em;
    line-height: 1.13;
}
.figure-strip .stat-label { margin-top: var(--space-1); font-size: var(--text-sm); }

/* --- body: records left, index right -----------------------------------
   Source order is index-then-records so that on a narrow screen filtering
   comes first; on desktop the columns are placed explicitly, which keeps
   the wide measure on the left without a second DOM order. */

.view-body {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-12) var(--space-6) var(--space-24);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: var(--space-12);
    align-items: start;
}

.view-index { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-6); }
.records    { grid-column: 1; grid-row: 1; }

.view-index .search-bar { margin-bottom: var(--space-6); }
.view-index .section-title { padding: 0 10px; }
.view-index .filters {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 0;
}
.view-index .filter-btn {
    justify-content: flex-start;
    padding: 6px 10px;
    border-radius: var(--radius-button);
}

/* The record list is a single card; rows are separated by hairlines. */
#threatsContainer {
    background: var(--color-carbon);
    border-radius: var(--radius-card);
    box-shadow: var(--edge);
    overflow: hidden;
}
#threatsContainer:empty { display: none; }

#paginationContainer { margin-top: var(--space-6); }

/* --- responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
    .app-container { grid-template-columns: minmax(0, 1fr); }
    .sidebar { border-right: 0; border-bottom: 1px solid var(--color-line); }
    /* Index moves above the records: on a narrow screen filtering precedes
       reading. The sticky rail would otherwise strand the search field. */
    .view-body {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
        padding-top: var(--space-8);
    }
    .view-index { grid-column: 1; grid-row: auto; position: static; }
    .records    { grid-column: 1; grid-row: auto; }
    .view-index .search-bar { margin-bottom: var(--space-3); }
    .view-index .section-title { display: none; }
    .view-index .filters { flex-direction: row; flex-wrap: wrap; gap: var(--space-1); }
    .view-index .filter-btn { border-radius: var(--radius-pill); padding: 4px 12px; }
    .masthead-title { padding-top: var(--space-16); }
}

@media (max-width: 720px) {
    /* At phone width the clock and the status readout are noise; only the
       wordmark and the login route survive in the top bar. */
    .masthead-strip { padding: var(--space-2) var(--space-4); min-height: 56px; }
    .masthead-strip .logo-mark,
    .masthead-meta > #mastheadClock,
    .masthead-meta > .status-badge { display: none; }

    .masthead-title { padding: var(--space-12) var(--space-4) var(--space-8); }
    .masthead-title .lede { font-size: var(--text-base); margin-top: var(--space-4); }
    .figure-strip { padding: 0 var(--space-4) var(--space-8); }
    .figure-strip .stats-grid { grid-template-columns: 1fr 1fr; }
    .figure-strip .stat-card { padding: var(--space-4); }
    .figure-strip .stat-value { font-size: var(--text-2xl); }
    .view-body { padding: var(--space-6) var(--space-4) var(--space-16); }
    .threat-card { padding: var(--space-4); }
    .threat-header { flex-wrap: wrap; row-gap: var(--space-2); }
}