/* ── Summary page ─────────────────────────────────────────── */

/* Override the nearby.css desktop lock that sets
   html,body { height:100%; overflow:hidden } — the summary
   page needs normal document scrolling. */
html.summary-page,
html.summary-page body {
    height: auto;
    overflow: visible;
}

.summary-home-link {
    text-decoration: none;
    color: inherit;
}

/* ── Result section ──────────────────────────────────────── */

.summary-result {
    min-height: 100vh;
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(24px, 5vh, 64px) 20px 60px;
}

.summary-result-shell {
    position: relative;
}

/* ── Header ──────────────────────────────────────────────── */

.summary-header {
    margin-bottom: 40px;
}

.summary-logo {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-2);
    margin: 0 0 24px;
}

.summary-logo-dot {
    color: var(--field-accent);
}

.summary-area-name {
    font-family: var(--field-display);
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--ink-0);
    margin: 0;
}

/* ── Loading bar ─────────────────────────────────────────── */

.summary-loading {
    margin-bottom: 32px;
}

.summary-loading-bar {
    height: 2px;
    background: var(--bg-1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.summary-loading-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: var(--ink-2);
    border-radius: 2px;
    animation: summary-shimmer 1.8s ease-in-out infinite;
}

@keyframes summary-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Thinking-style text that cycles through venue names */
.summary-thinking {
    font-family: var(--field-display);
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
    color: var(--ink-2);
    margin: 10px auto 0;
    opacity: 1;
    min-height: 4.2em;
    max-height: 4.2em;
    overflow: hidden;
    white-space: normal;
    width: min(360px, calc(100vw - 56px));
    text-align: center;
    line-height: 1.4;
}

.summary-thinking.think-in {
    opacity: 1;
}

/* ── Body typography ─────────────────────────────────────── */

.summary-body {
    font-family: var(--field-display);
    font-size: clamp(17px, 2.4vw, 20px);
    line-height: 1.72;
    color: var(--ink-0);
    letter-spacing: 0.003em;
    -webkit-font-smoothing: antialiased;
}

.summary-body p {
    margin: 0 0 1.4em;
}

.summary-body p:last-child {
    margin-bottom: 0;
}

/* ── Section headers (distance bands) ───────────────────── */

.summary-section-header {
    font-family: var(--field-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.summary-section-header:first-child {
    margin-top: 0;
}

/* Highlighted venue/feature references */
.summary-highlight {
    color: var(--ink-0);
    font-style: italic;
    border-bottom: 1.5px solid var(--field-accent);
    padding-bottom: 0.5px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.summary-highlight:hover {
    color: var(--field-accent);
}


/* ── Error ───────────────────────────────────────────────── */

.summary-error {
    font-family: var(--field-body);
    font-size: 14px;
    color: var(--err);
    background: rgba(180, 73, 73, 0.06);
    border: 1px solid rgba(180, 73, 73, 0.15);
    border-radius: 8px;
    padding: 14px 18px;
}

/* ── Footer / back button ────────────────────────────────── */

.summary-footer {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.summary-back-btn {
    font-size: 13px;
}

/* ── Responsive ──────────────────────────────────────────── */


@media (max-width: 600px) {
    .summary-result {
        padding: 20px 16px 40px;
    }

    .summary-header {
        margin-bottom: 28px;
    }
}

/* ── List-embedded summary (for /new) ─────────────────────── */

body.with-summary .list-search-bar {
    display: none !important;
}

body.with-summary .pane-meta {
    display: none !important;
}

body.with-summary .pane-head-main {
    align-items: center;
}

body.with-summary .nearby-list > .place-item .tag-row--compact {
    display: none;
}

.list-summary {
    padding: 12px 8px 28px 2px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    box-sizing: border-box;
}

.list-summary.is-hidden {
    display: none;
}

.nearby-list.is-plaque-sub-list .list-summary {
    display: none;
}

/* While the summary is still being written, hold at least one viewport
   of vertical space so the results list stays below the fold and doesn't
   reflow upward as prose streams in. Removed once all sections finish. */
.list-summary.is-writing {
    min-height: 100vh;
}

.list-summary-loading {
    margin-bottom: 20px;
    min-height: min(100svh, 720px);
}

.summary-radar-interstitial {
    min-height: min(78svh, 680px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    padding: 24px 20px;
}

.summary-radar-interstitial .radar-sweep {
    width: 220px;
    height: 220px;
}

.list-summary-body {
    font-size: clamp(21px, 2.7vw, 25px);
    line-height: 1.5;
}

@media (max-width: 980px) {
    .list-summary-body {
        font-size: clamp(23px, 3vw, 25px);
    }
}

@media (max-width: 980px) {
    .summary-logo,
    .summary-section-header,
    .summary-back-btn {
        font-size: 15.6px;
    }

    .summary-area-name {
        font-size: clamp(34px, 6vw, 50px);
    }

    .summary-thinking {
        font-size: 28.8px;
    }

    .summary-body {
        font-size: clamp(20.4px, 2.9vw, 24px);
    }

    .summary-error {
        font-size: 16.8px;
    }

    .list-summary-body .summary-section-header {
        font-size: clamp(36px, 4.8vw, 46px);
    }

    body.with-summary .list-summary-body {
        font-size: clamp(23px, 3vw, 25px);
    }

    body.with-summary .list-summary-body .summary-section-header {
        font-size: clamp(36px, 4.8vw, 46px);
    }
}

.list-summary-body p {
    margin: 0 0 1.18em;
}

.list-summary-body .summary-section-header {
    margin: 20px 0 12px;
    color: var(--field-ink);
    font-family: var(--field-display);
    font-size: clamp(30px, 4vw, 38px);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.04;
    text-transform: none;
    border-bottom: none;
}

/* ── Per-section placeholder (lazy-loaded sections) ──────── */

.summary-section {
    margin-bottom: 12px;
}

/* Section headers stay hidden until the section starts streaming actual
   content; then they fade in. */
.summary-section > .summary-section-header {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.summary-section[data-state="loading"] > .summary-section-header,
.summary-section[data-state="streaming"] > .summary-section-header,
.summary-section[data-state="done"] > .summary-section-header,
.summary-section[data-state="error"] > .summary-section-header {
    opacity: 1;
}

.summary-section[data-state="error"] .summary-section-content {
    margin-top: 6px;
}

.summary-section-content:empty {
    display: none;
}

.summary-section-ghost {
    margin: 4px 0 18px;
}

.summary-low-content {
    margin-top: 18px;
    color: var(--ink-2);
    font-style: italic;
    font-size: 0.95em;
}

/* ── Ghost loader (skeleton while a section streams) ───── */

.summary-ghost {
    margin-top: 22px;
}

body.with-summary.summary-awaiting-write .nearby-app {
    background: var(--field-paper);
    border-color: transparent;
    box-shadow: none;
}

body.with-summary.summary-awaiting-write .content-grid,
body.with-summary.summary-awaiting-write .list-pane,
body.with-summary.summary-awaiting-write .nearby-list-wrap {
    min-height: calc(100svh - 44px);
}

body.with-summary.summary-awaiting-write .nearby-list {
    padding: 0;
    min-height: calc(100svh - 44px);
    flex: 1 1 auto;
    background: var(--field-paper);
}

body.with-summary.summary-awaiting-write .nearby-list > :not(#list-summary) {
    display: none !important;
}

body.with-summary.summary-awaiting-write .list-summary {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 44px);
    margin: 0;
    padding: 0;
    border-bottom: none;
    flex: 1 1 auto;
}

body.with-summary.summary-awaiting-write .list-summary-body,
body.with-summary.summary-awaiting-write .summary-ghost {
    display: none !important;
}

body.with-summary.summary-awaiting-write .list-summary-loading {
    min-height: calc(100svh - 44px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    flex: 1 1 auto;
    box-sizing: border-box;
    padding-top: max(64px, calc(40svh - 186px));
    background: var(--field-paper);
}

body.with-summary.summary-awaiting-write .summary-radar-interstitial {
    min-height: 0;
    flex: 0 0 auto;
    padding-top: 0;
    padding-bottom: 0;
    background: var(--field-paper);
}

@media (max-width: 980px) {
    body.with-summary.summary-awaiting-write .content-grid,
    body.with-summary.summary-awaiting-write .list-pane,
    body.with-summary.summary-awaiting-write .nearby-list-wrap,
    body.with-summary.summary-awaiting-write .nearby-list,
    body.with-summary.summary-awaiting-write .list-summary,
    body.with-summary.summary-awaiting-write .list-summary-loading {
        min-height: 100svh;
    }
}

@media (min-width: 981px) {
    body.with-summary.summary-awaiting-write .list-summary-loading {
        padding-top: max(88px, calc(40svh - 208px));
    }
}

.summary-ghost-header {
    height: 12px;
    width: 32%;
    margin: 26px 0 14px;
    border-radius: 4px;
}

.summary-ghost-header:first-child {
    margin-top: 0;
}

.summary-ghost-line {
    height: 11px;
    margin-bottom: 11px;
    border-radius: 4px;
}

.summary-ghost-line--short {
    width: 68%;
}

/* ── /new uses the single-column "mobile" layout at every viewport ── */
/* Mirrors the @media (max-width: 980px) block in nearby.css so the
   detail pane swaps in over the list (rather than sitting in a 2nd
   grid column) regardless of window width. */

body.with-summary .nearby-app {
    max-width: var(--nearby-readable-shell-width);
}

body.with-summary .content-grid {
    grid-template-columns: 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

body.with-summary .list-pane {
    border-right: none;
    padding: 18px 0 0 14px;
}

body.with-summary .pane-head {
    margin-right: 14px;
}

body.with-summary .nearby-list {
    padding-right: 14px;
}

body.with-summary .card-pane {
    padding: 12px 14px 14px;
    border-top: none;
}

body.with-summary.mobile-list-only .card-pane {
    display: none;
}

body.with-summary.mobile-detail-only .list-pane {
    display: none;
}

@media (min-width: 981px) {
    body.with-summary.mobile-detail-only .nearby-app,
    body.with-summary.mobile-detail-only .card-pane {
        background: var(--field-paper);
    }

    body.with-summary.mobile-detail-only .nearby-app {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.with-summary.mobile-detail-only .card-pane {
        border-top: none;
    }

    body.with-summary.mobile-detail-only .detail-sticky-header {
        background: var(--field-paper);
    }
}

/* Fullscreen-overlay treatment for the detail pane is mobile-only. On
   desktop the rounded 960px card already constrains the layout, so let
   the detail flow normally inside it instead of pinning to the viewport
   (which would otherwise stretch the card-pane to 1920px and leave a
   big dead zone to the right of writeups capped at 52ch). */
@media (max-width: 980px) {
    body.with-summary .nearby-app {
        width: 100%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    body.with-summary.mobile-detail-only .content-grid {
        min-height: 100vh;
        height: 100vh;
    }

    body.with-summary.mobile-detail-only .card-pane {
        position: fixed;
        inset: 0;
        z-index: 40;
        padding: 0;
        border-top: none;
        background: var(--bg-0);
    }

    body.with-summary.mobile-detail-only .card-pane .panel-card {
        height: auto;
        min-height: 100vh;
        border-radius: 0;
        border: none;
        box-shadow: none;
        background: var(--bg-0);
        padding: 16px 16px 14px;
    }

    body.with-summary.mobile-detail-only #detail-card {
        padding-bottom: max(76px, calc(62px + env(safe-area-inset-bottom)));
        min-height: calc(100vh - max(14px, env(safe-area-inset-bottom)));
    }

    body.with-summary.mobile-detail-only .panel-placeholder {
        align-items: stretch;
        justify-content: flex-start;
    }

    body.with-summary.mobile-detail-only .detail-placeholder-mobile-head {
        display: flex;
    }
}

@media (min-width: 700px) and (max-width: 980px) {
    body.with-summary .nearby-app {
        width: calc(100% - 100px);
    }

    body.with-summary.mobile-detail-only .card-pane {
        left: 50px;
        right: 50px;
    }
}