/* ==========================================================================
   Search & Cite — LAYOUT
   The page shell only: hero, the two-column app frame, sidebar and content
   scaffolding. Anything with a hover state or a verdict colour is a component.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------
   It used to be ~300px of centred title restating itself. It is now a band
   that has to earn its height: the name, one sentence that says what comes
   BACK (a verdict, a quote, a citation), and three chips naming the actual
   retrieval sources. Everything below the fold is the product; this is the
   only place allowed to talk about it. */
.hero-section {
    padding: 2.25rem 1rem 1.75rem;
}

.hero-inner {
    max-width: var(--app-max-width);
    margin: 0 auto;
    padding: 0 0.25rem;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--text-3xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--accent-fg);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.85rem;
}

/* Solid ink, not a gradient clip. A gradient on text cannot be contrast-
   checked from CSS (the audit has to skip it), and the one thing the largest
   type on the page must not be is unmeasurable. */
.hero-title {
    font-size: clamp(1.875rem, 4vw, var(--text-4xl));
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-strong);
    margin: 0 0 0.6rem;
}

.hero-subtitle {
    font-size: var(--text-lg);
    line-height: var(--lh-normal);
    color: var(--text-secondary);
    max-width: 62ch;
    margin: 0;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}
.hero-proof li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}
.hero-proof i { color: var(--accent-fg); font-size: 0.9em; }

/* ---- App frame ---------------------------------------------------------
   Two independent panels in a grid, NOT one glass slab with a border rule
   down the middle.

   The old shape was `.app-layout { display: flex; overflow: hidden }` with
   `.sidebar { border-right }`. Flex stretched the sidebar to the height of a
   13,000px results board while its background only covered its content, so
   the panel fill stopped around a fifth of the way down and the tier/usage
   block floated on the page background with a border rule running past it.
   Two panels cannot disagree about where they end. `align-items: start` also
   frees the sidebar to be sticky, which `overflow: hidden` on the old shared
   frame made impossible. */
.app-container {
    max-width: var(--app-max-width);
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
}

/* ---- Sidebar -----------------------------------------------------------
   Sticky and self-scrolling, so the verification policy — the controls a user
   is most likely to change — is reachable at any scroll position instead of
   being stranded below the fold at 1440x900. */
.sidebar {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
    max-height: calc(100vh - var(--nav-h) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 1.1rem 1.15rem 0.9rem;
    border-bottom: 1px solid var(--border-subtle);
}

/* An eyebrow, not a headline. "Verification modes" is a secondary setting;
   typesetting it at the same weight as the primary task inverted the page's
   hierarchy. The primary task is paste-text-and-verify. */
.sidebar-title {
    font-size: var(--text-3xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    margin: 0 0 0.3rem;
    color: var(--text-tertiary);
}

.sidebar-subtitle {
    color: var(--text-muted);
    font-size: var(--text-2xs);
    line-height: var(--lh-snug);
    margin: 0;
}

.sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.15rem;
    border-top: 1px solid var(--border-subtle);
}

/* ---- Main column ------------------------------------------------------- */
.main-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.header-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.content-title {
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    margin: 0;
    color: var(--text-secondary);
}

.header-actions {
    display: flex;
    gap: 0.5rem;
}

/* The page scrolls, not this column. The old `overflow-y: auto` here created
   a second scroll container, which is what made position:sticky inside the
   board resolve against a box the user was not scrolling. */
.content-area {
    flex: 1;
    padding: 1.5rem;
}

/* Every result block shares one card shell. Components override the inside,
   never the frame — that keeps section rhythm consistent as sections are added. */
.panel {
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.panel:last-child { margin-bottom: 0; }

.panel-title {
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    margin: 0;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
    .app-layout { grid-template-columns: minmax(0, 1fr); }

    /* Work first, settings after. In one column the sidebar's natural DOM
       position put ~900px of mode picker and retrieval policy above the worked
       example and the textarea — the same inverted hierarchy the desktop
       layout was criticised for, reintroduced by the stack. The mode in force
       is still visible at the top: it is in the content header, as a badge. */
    .main-content { order: 1; }
    .sidebar { order: 2; }

    /* Sticky is wrong once the sidebar is a full-width band below the work. */
    .sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* The mode picker's and policy block's own responsive behaviour lives in
   components/policy.css, which loads after this file. Restating .mode-list here
   would lose to it on source order at equal specificity — the exact kind of
   silent collision this split exists to prevent. */

@media (max-width: 768px) {
    .hero-section { padding: 1.5rem 1rem 1.25rem; }
    .hero-subtitle { font-size: var(--text-base); }

    .content-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .header-actions { justify-content: flex-start; flex-wrap: wrap; }
    .content-area { padding: 1rem; }
}

@media (max-width: 560px) {
    /* One level of padding, not three. At 390px the old shell nested
       app-container -> content-area -> panel -> card, spending 60px of a
       390px viewport on gutters that carried no visible boundary. */
    .app-container { padding: 0 0.5rem 2rem; }
    .app-layout { gap: 0.75rem; }
    .content-area { padding: 0.75rem; }
    .panel {
        padding: 0.9rem;
        margin-bottom: 1rem;
        border-radius: var(--radius-md);
    }
    .content-header { padding: 0.85rem 0.9rem; }
    .sidebar-header, .sidebar-footer { padding-inline: 0.9rem; }
}