/* ============================================================
   LawScroll Pulse — responsive shell & modern polish
   ============================================================
   Loaded AFTER style.css and layered on top of it. style.css still
   defines the phone layout; this file only (a) adds some global
   polish that applies at every size and (b) turns the phone column
   into a real tablet/desktop layout:

     < 768px     phone     unchanged: header, chip bar, bottom tab bar
     768-1023    tablet    slim icon rail on the left + wider feed
     1024-1279   laptop    full sidebar (search, nav, topics) + feed
     >= 1400     desktop   sidebar + feed + right-hand discover rail

   To go back to the old look entirely: remove this file's <link>
   from the page <head>s. Nothing else depends on it.
   ============================================================ */

:root {
    --shell-max: 1360px;
    --sidebar-w: 264px;
    --rail-w: 320px;
    --radius-lg: 18px;
    --shadow-1: 0 1px 2px rgba(27, 36, 48, 0.06), 0 1px 3px rgba(27, 36, 48, 0.05);
    --shadow-2: 0 10px 30px rgba(27, 36, 48, 0.10), 0 2px 6px rgba(27, 36, 48, 0.06);
    --focus-ring: 0 0 0 3px rgba(53, 94, 102, 0.28);
}

/* ---------------------------------------------------------------
   Polish that applies at every size
--------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
::selection { background: rgba(184, 147, 75, 0.28); }
html { scroll-behavior: smooth; }

button,
.chip,
.card__follow-btn,
.card__action,
.card {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* The shell pieces only exist for tablet/desktop; on a phone the
   header + tab bar already do their job. */
.app-shell { display: block; }
.sidebar,
.rail,
.app-topbar { display: none; }

/* ---------------------------------------------------------------
   Tablet and up (>= 768px)
--------------------------------------------------------------- */
@media (min-width: 768px) {
    :root { --max-width: 760px; }

    /* Only when the shell is actually there — if its partial ever fails to
       load (see include_shell_part()), the page falls back to the phone
       header + tab bar, so these must stay visible in that case. */
    body:has(.app-shell) { padding-bottom: 0; }
    .app-shell ~ .tabbar { display: none; }

    .app-shell {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        max-width: var(--shell-max);
        margin: 0 auto;
        min-height: 100vh;
    }
    .app-main { min-width: 0; }

    /* ---- Sidebar (slim icon rail on tablet) ---- */
    .sidebar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        position: sticky;
        top: 0;
        height: 100vh;
        padding: 18px 8px;
        border-right: 1px solid var(--line);
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .sidebar__brand,
    .sidebar__search,
    .sidebar__topics { display: none; }
    /* Tablet keeps the header's own language icon, so hide the sidebar
       duplicate. .sidebar prefix: the later .side-link { display:flex }
       rule has equal specificity and would otherwise win. */
    .sidebar .side-link--language { display: none; }

    .sidebar__nav { display: flex; flex-direction: column; gap: 4px; }

    .side-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        padding: 10px 4px;
        border: none;
        border-radius: 12px;
        background: none;
        color: var(--muted);
        font-family: inherit;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
    }
    .side-link i { display: inline-flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1; }
    .side-link:hover { background: rgba(53, 94, 102, 0.07); color: var(--brand-dark); }
    .side-link.is-active { background: var(--color-primary-container); color: var(--brand-dark); }
    .side-link.is-active i { color: var(--brand); }

    .sidebar__account { margin-top: auto; padding-top: 12px; }
    .account-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        cursor: pointer;
    }
    .account-chip__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
    .account-chip__name,
    .account-chip .bi-three-dots { display: none; }

    .account-signin {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 4px;
        border-radius: 12px;
        background: var(--brand);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
    }
    .account-signin i { font-size: 19px; line-height: 1; }

    /* ---- Main column: roomier gutters ---- */
    .site-header__top { padding: 18px 24px 6px; }
    .category-bar { padding: 12px 24px; }
    .search-bar { padding: 14px 24px 16px; }
    .category-intro { padding-left: 24px; padding-right: 24px; }
    .feed {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 22px 24px 64px;
    }
    .feed-sentinel { margin-top: 4px; }

    /* ---- Cards: a tidy, scannable list instead of a stretched phone card ---- */
    .card {
        margin-bottom: 0;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-1);
    }
    .card__top { padding: 16px 20px 0; }
    .card__body { padding: 12px 20px 4px; }
    .card__title { font-size: 21px; line-height: 1.28; letter-spacing: -0.005em; }
    .card__summary { font-size: 15px; line-height: 1.55; }
    .card__tag { font-size: 10.5px; }

    .card__actions {
        border-top: none;
        margin-top: 4px;
        padding: 4px 12px 12px;
        gap: 2px;
        justify-content: flex-start;
    }
    .card__action {
        flex: 0 0 auto;
        padding: 8px 14px;
        border-radius: 999px;
    }
    .card__action:not(:last-child) { border-right: none; }
    .card__action:hover { background: rgba(53, 94, 102, 0.08); color: var(--brand-dark); }

    /* Image-left layout. :has() is supported by every current browser;
       an older one simply ignores these rules and keeps the vertical card. */
    .card:has(.card__media) {
        display: grid;
        grid-template-columns: 232px minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "media top"
            "media body"
            "media actions";
    }
    .card:has(.card__media) .card__media {
        grid-area: media;
        position: relative;
        margin-top: 0;
        aspect-ratio: auto;
        min-height: 188px;
    }
    .card:has(.card__media) .card__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .card:has(.card__media) .card__top { grid-area: top; }
    .card:has(.card__media) .card__body { grid-area: body; }
    .card:has(.card__media) .card__actions { grid-area: actions; }

    /* The newest story leads: image on top, bigger headline. */
    .feed > .card:first-child:has(.card__media) { display: block; }
    .feed > .card:first-child:has(.card__media) .card__media {
        position: static;
        aspect-ratio: 16 / 8;
        min-height: 0;
        margin-top: 14px;
    }
    .feed > .card:first-child:has(.card__media) .card__media img { position: static; }
    .feed > .card:first-child:has(.card__media) .card__title { font-size: 28px; line-height: 1.2; }
    .feed > .card:first-child:has(.card__media) .card__body { padding-top: 16px; }

    /* ---- Sources / categories page ---- */
    .sources-page { padding: 28px 24px 64px; }
    .sources-page__title { font-size: 30px; }
    .source-row { border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 14px 16px; }
    .source-row .card__avatar { width: 40px; height: 40px; }

    /* ---- Source page hero ---- */
    .source-hero { padding: 32px 24px 18px; }
    .source-hero__description { padding-left: 24px; padding-right: 24px; }

    /* ---- Popovers (opened from the sidebar are positioned by app.js) ---- */
    .account-popover,
    .language-popover { box-shadow: var(--shadow-2); }
}

/* Reading drawer. When closed it is parked just off-screen (below the
   screen on a phone, past the right edge from 760px up), but its 30px
   shadow used to bleed back into view — a faint grey smudge along the
   bottom edge of phones, a grey strip down the right edge on tablet and
   desktop. Only draw the shadow while it's actually open. */
.drawer:not(.is-open) { box-shadow: none; }
@media (min-width: 760px) {
    .drawer.is-open { box-shadow: -14px 0 44px rgba(27, 36, 48, 0.22); }
}
@media (min-width: 1100px) {
    .drawer { width: min(680px, 56vw); }
}

/* Onboarding and sign-in: these were phone-width forms parked at the top of
   a big empty screen. On a tablet/desktop they become a centred card. */
@media (min-width: 768px) {
    .onboarding-body,
    .auth-body {
        display: flex;
        min-height: 100vh;
        padding: 32px 20px;
        background:
            radial-gradient(900px 420px at 50% -10%, rgba(53, 94, 102, 0.09), transparent 70%),
            var(--paper);
    }
    .onboarding,
    .auth-page {
        margin: auto;
        width: 100%;
        padding: 56px 56px 48px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 28px;
        box-shadow: var(--shadow-2);
    }
    .onboarding { max-width: 640px; }
    .auth-page { max-width: 480px; }

    .onboarding__logo,
    .auth-page__logo { height: 34px; margin-bottom: 34px; }
    .onboarding h1 { font-size: 36px; letter-spacing: -0.015em; margin-bottom: 12px; }
    .auth-page h1 { font-size: 30px; letter-spacing: -0.01em; }
    .onboarding__sub { max-width: 460px; margin: 0 auto 32px; font-size: 16px; line-height: 1.55; }
    .auth-page__sub { font-size: 15.5px; }

    .onboarding__grid { gap: 12px; margin-bottom: 36px; }
    .onboarding__pill span { padding: 12px 20px; font-size: 15px; }
    .onboarding__pill span:hover { border-color: var(--brand); }
    .onboarding__pill input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
    .onboarding__continue { display: block; max-width: 340px; margin: 0 auto; padding: 16px; font-size: 16px; }
    .onboarding__continue:hover { background: var(--brand-dark); }
    .onboarding__skip:hover { color: var(--brand-dark); }
}

/* Tablet only: the language popover still hangs off the header icon. */
@media (min-width: 768px) and (max-width: 1023px) {
    .language-popover {
        right: max(12px, calc((100vw - 88px - var(--max-width)) / 2 + 12px));
    }
}

/* ---------------------------------------------------------------
   Laptop and up (>= 1024px): full sidebar
--------------------------------------------------------------- */
@media (min-width: 1024px) {
    .app-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }

    /* Brand, search and main links stay put; only the Topics list scrolls
       (when the window is short) and the account button stays pinned at
       the bottom, always reachable. */
    .sidebar { padding: 26px 18px 20px; gap: 0; overflow: hidden; }

    .sidebar__brand {
        display: block;
        padding: 4px 10px 22px;
    }
    .sidebar__brand .logo-img { height: 28px; }

    .sidebar__search {
        display: block;
        position: relative;
        margin: 0 2px 18px;
    }
    .sidebar__search i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        font-size: 14px;
        pointer-events: none;
    }
    .sidebar__search input {
        width: 100%;
        height: 42px;
        padding: 0 14px 0 40px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--ink);
        font-family: inherit;
        font-size: 14px;
    }
    .sidebar__search input::placeholder { color: #9AA0A8; }
    .sidebar__search input:focus {
        outline: none;
        border-color: var(--brand);
        box-shadow: var(--focus-ring);
    }

    .side-link,
    .sidebar .side-link--language {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        padding: 11px 14px;
        font-size: 15px;
        text-align: left;
        color: var(--ink);
    }
    .side-link i { width: 22px; font-size: 19px; color: var(--muted); }

    .sidebar__topics {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid var(--line);
        overflow-y: auto;
        scrollbar-width: thin;
    }
    /* The Search page has its own full search form; a second box here
       would just be confusing. */
    .app-shell:has(.search-bar) .sidebar__search { display: none; }
    .sidebar__heading {
        margin: 0 0 8px 14px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
    }
    .sidebar__topic-list { display: flex; flex-direction: column; gap: 1px; }
    .topic-link {
        padding: 8px 14px;
        border-radius: 10px;
        color: #3A424D;
        font-size: 14px;
        font-weight: 500;
    }
    .topic-link:hover { background: rgba(53, 94, 102, 0.07); }
    .topic-link.is-active { background: var(--brand); color: #fff; }

    .sidebar__account { flex: 0 0 auto; padding-top: 14px; }
    .account-chip {
        gap: 10px;
        justify-content: flex-start;
        padding: 8px 10px;
        color: var(--ink);
        font-family: inherit;
    }
    .account-chip__avatar { width: 34px; height: 34px; }
    .account-chip__name {
        display: block;
        flex: 1;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
    }
    .account-chip .bi-three-dots { display: block; color: var(--muted); }
    .account-signin {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        border-radius: 999px;
        font-size: 14px;
    }

    /* The sidebar now carries the logo, search, language and topics, so
       the phone header's top row and chip bar are redundant here. */
    .app-shell .site-header__top,
    .app-shell .category-bar { display: none; }
    .app-shell .site-header {
        position: static;
        background: none;
        backdrop-filter: none;
        border-bottom: none;
    }
    .app-shell .site-header:not(:has(.search-bar)):not(:has(.category-intro)) { display: none; }
    .search-bar { padding-top: 6px; }

    .app-topbar {
        display: block;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 30px 24px 0;
    }
    .app-topbar__title {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 32px;
        font-weight: 700;
        letter-spacing: -0.015em;
    }
    .category-intro { padding-top: 6px; }

    .feed { padding-top: 20px; }
}

/* ---------------------------------------------------------------
   Wide desktop (>= 1400px): right-hand discover rail
   (sidebar 264 + feed 740 + rail 320 + gaps/padding is ~1430px, so
   this only switches on when all three genuinely fit; narrower
   screens keep two comfortable columns instead of a squeezed three)
--------------------------------------------------------------- */
@media (min-width: 1400px) {
    :root { --shell-max: 1440px; }
    .app-shell {
        grid-template-columns: var(--sidebar-w) minmax(0, 740px) var(--rail-w);
        column-gap: 28px;
        padding: 0 24px;
        justify-content: center;
    }

    .rail {
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: sticky;
        top: 0;
        align-self: start;
        max-height: 100vh;
        padding: 30px 0 24px;
        overflow-y: auto;
        scrollbar-width: none;
    }
    .rail-card {
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        box-shadow: var(--shadow-1);
    }
    .rail-card--cta {
        background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
        border-color: transparent;
        color: #fff;
    }
    .rail-card__title {
        margin: 0 0 8px;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 18px;
        font-weight: 700;
    }
    .rail-card__text {
        margin: 0 0 14px;
        color: rgba(255, 255, 255, 0.86);
        font-size: 14px;
        line-height: 1.5;
    }
    .rail-cta {
        display: inline-block;
        padding: 9px 20px;
        border-radius: 999px;
        background: #fff;
        color: var(--brand-dark);
        font-size: 14px;
        font-weight: 700;
    }
    .rail-cta:hover { background: var(--color-primary-container); }

    .rail-list { margin: 0 0 8px; padding: 0; list-style: none; }
    .rail-source {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 8px;
        margin: 0 -8px;
        border-radius: 12px;
        font-size: 14.5px;
        font-weight: 600;
    }
    .rail-source .card__avatar { width: 32px; height: 32px; font-size: 13px; }
    .rail-source__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rail-source .bi-chevron-right { color: var(--muted); font-size: 12px; }
    .rail-source:hover { background: rgba(53, 94, 102, 0.07); }
    .rail-card__more { color: var(--brand); font-size: 13.5px; font-weight: 700; }
    .rail-card__more:hover { text-decoration: underline; }
    .rail-footer { margin: 4px 4px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
}

/* ---------------------------------------------------------------
   Pointer devices only: hover feedback (never on touch screens,
   where :hover sticks after a tap)
--------------------------------------------------------------- */
@media (min-width: 768px) and (hover: hover) {
    .card:hover {
        box-shadow: var(--shadow-2);
        border-color: #DAD5C8;
        transform: translateY(-1px);
    }
    .card__title { transition: color 0.15s ease; }
    .card__body:hover .card__title { color: var(--brand-dark); }
    .source-row:hover { box-shadow: var(--shadow-2); }
}