/* Degen Brands AI News Desk
   Tokens from brand/BRAND.md v1.1 (Glacial & Ethereal). YAML wins. */

:root {
    /* Brand palette 001-006 */
    --glacial-mist: #d9f0f6;
    --arctic-air: #d5e3f0;
    --frostbite: #c9d9f0;
    --cool-steel: #c1d5f0;
    --horizon-blue: #b3cbef;
    --royal-ether: #a8b5e1;

    /* Neutrals: never pure white or pure black */
    --ivory-vapor: #fdfbf7;
    --deep-charcoal: #0f172a;
    --slate-500: #64748b;
    --slate-600: #475569;

    --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --glass: rgba(253, 251, 247, 0.72);          /* Ivory Vapor 72% */
    --glass-strong: rgba(253, 251, 247, 0.9);
    --glow: 0 4px 24px rgba(168, 181, 225, 0.35); /* Royal Ether glow */
    --glow-soft: 0 2px 14px rgba(179, 203, 239, 0.3);
    --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html { scroll-padding-top: 92px; scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--deep-charcoal);
    background: var(--arctic-air);
    line-height: 1.5;
    min-height: 100vh;
}

/* Fixed gradient wash on its own layer: background-attachment fixed
   misbehaves with backdrop-filter, a fixed pseudo-element does not. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(168, 181, 225, 0.28), transparent 60%),
        radial-gradient(900px 480px at -10% 30%, rgba(217, 240, 246, 0.9), transparent 65%),
        linear-gradient(180deg, var(--glacial-mist), var(--arctic-air));
}

.mono { font-family: var(--font-mono); }

/* ------------------------------------------------------------------ topbar */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--frostbite);
}

.topbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.skip-link {
    position: absolute;
    top: -52px;
    left: 16px;
    z-index: 60;
    background: var(--deep-charcoal);
    color: var(--ivory-vapor);
    padding: 10px 18px;
    border-radius: 0 0 10px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip-link:focus { top: 0; }

.wordmark { display: flex; flex-direction: column; line-height: 1.15; font-size: 1rem; }
.wordmark-brand { font-weight: 700; letter-spacing: 0.06em; font-size: 1.02rem; }
.wordmark-sub { font-weight: 300; letter-spacing: 0.34em; font-size: 0.68rem; color: var(--slate-600); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-right: auto; }

.chip {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--deep-charcoal);
    text-decoration: none;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--cool-steel);
    background: var(--glass-strong);
    transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.chip:hover, .chip:focus-visible {
    background: linear-gradient(120deg, var(--royal-ether), var(--horizon-blue));
    box-shadow: var(--glow-soft);
    transform: translateY(-1px);
}

.chip.chip-breaking { border-color: var(--royal-ether); box-shadow: var(--glow-soft); }

.topbar-status { display: flex; align-items: center; gap: 12px; }

.updated { font-size: 0.72rem; color: var(--slate-600); }

.btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--deep-charcoal);
    background: linear-gradient(120deg, var(--royal-ether), var(--horizon-blue));
    border: 1px solid var(--royal-ether);
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    box-shadow: var(--glow-soft);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.btn-refresh:hover { box-shadow: var(--glow); transform: translateY(-1px); }
.btn-refresh:disabled { opacity: 0.6; cursor: wait; transform: none; }
.btn-refresh svg { width: 15px; height: 15px; }
.btn-refresh.spinning svg { animation: spin 0.9s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------- page */

.page { max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; }

.section, .breaking { margin-bottom: 44px; }

.section-head { margin-bottom: 16px; }

.section-head h2 {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-note { font-size: 0.82rem; color: var(--slate-600); font-weight: 400; margin-top: 3px; }

.org-tag {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--slate-600);
    background: var(--glass-strong);
    border: 1px solid var(--frostbite);
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
}

.count-tag {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--slate-600);
}

.updated.stale {
    color: var(--deep-charcoal);
    background: var(--horizon-blue);
    border-radius: 999px;
    padding: 3px 10px;
}

/* ---------------------------------------------------------------- breaking */

.breaking-title { color: var(--deep-charcoal); }

.bolt { width: 20px; height: 20px; color: var(--royal-ether); }

.breaking .card {
    border: 1px solid var(--royal-ether);
    box-shadow: 0 0 0 3px rgba(168, 181, 225, 0.22), var(--glow);
}

.badge-breaking {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--deep-charcoal);
    background: linear-gradient(120deg, var(--royal-ether), var(--horizon-blue));
    border-radius: 999px;
    padding: 3px 10px;
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 181, 225, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(168, 181, 225, 0); }
}

/* ---------------------------------------------------------- company panels */

.company-panel {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--frostbite);
    border-radius: calc(var(--radius) + 6px);
    padding: 24px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.company-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--royal-ether), var(--horizon-blue));
}

.company-panel .section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------- cards */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--ivory-vapor);
    border: 1px solid var(--frostbite);
    border-radius: var(--radius);
    padding: 18px;
    text-decoration: none;
    color: var(--deep-charcoal);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.card:hover, .card:focus-visible {
    box-shadow: var(--glow);
    border-color: var(--cool-steel);
    transform: translateY(-2px);
}

/* Keyboard users get an explicit ring on top of the hover treatment */
.chip:focus-visible, .card:focus-visible, .btn-refresh:focus-visible,
.btn-ghost:focus-visible, .skip-link:focus-visible {
    outline: 2px solid var(--deep-charcoal);
    outline-offset: 2px;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--slate-600);
}

.card-source { font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.card-time::before { content: "· "; }

.card-title { font-size: 0.98rem; font-weight: 500; line-height: 1.35; }
.card.card-lead .card-title { font-weight: 700; font-size: 1.05rem; }

.card-summary {
    font-size: 0.83rem;
    font-weight: 400;
    color: var(--slate-600);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }

.tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--deep-charcoal);
    background: var(--arctic-air);
    border: 1px solid var(--cool-steel);
    border-radius: 999px;
    padding: 2px 8px;
}

/* ------------------------------------------------------------------ states */

.skeleton {
    height: 130px;
    border-radius: var(--radius);
    background: linear-gradient(100deg, var(--arctic-air) 40%, var(--glacial-mist) 50%, var(--arctic-air) 60%);
    background-size: 220% 100%;
    animation: shimmer 1.4s linear infinite;
    border: 1px solid var(--frostbite);
}

#company-sections > .skeleton {
    height: 210px;
    border-radius: calc(var(--radius) + 6px);
    margin-bottom: 32px;
}


@keyframes shimmer { to { background-position: -120% 0; } }

.empty-note {
    font-size: 0.85rem;
    color: var(--slate-600);
    background: var(--glass-strong);
    border: 1px dashed var(--cool-steel);
    border-radius: var(--radius);
    padding: 18px;
}

.error-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--glass-strong);
    backdrop-filter: blur(12px);
    border: 1px solid var(--royal-ether);
    border-radius: var(--radius);
    box-shadow: var(--glow-soft);
    padding: 14px 18px;
    margin-bottom: 28px;
    font-size: 0.88rem;
    font-weight: 500;
}

.btn-ghost {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--deep-charcoal);
    background: none;
    border: 1px solid var(--cool-steel);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    transition: box-shadow 0.18s ease;
}

.btn-ghost:hover { box-shadow: var(--glow-soft); }

/* ------------------------------------------------------------------ footer */

.footer {
    border-top: 1px solid var(--frostbite);
    padding: 22px 24px 34px;
    text-align: center;
    font-size: 0.68rem;
    color: var(--slate-600);
}

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

/* Tablet and below: chips collapse to one horizontally scrollable row so the
   sticky header stays shallow instead of stacking three rows of wrapped nav. */
@media (max-width: 1023px) {
    html { scroll-padding-top: 128px; }

    .chips {
        order: 3;
        width: 100%;
        margin-right: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px;
    }

    .chips::-webkit-scrollbar { display: none; }

    .chip { flex: 0 0 auto; }
}

@media (max-width: 720px) {
    html { scroll-padding-top: 168px; }
    .topbar-inner { gap: 10px; row-gap: 8px; padding: 10px 16px; }
    /* #updated-at starts as "loading" and becomes a longer timestamp. On a
       wrapping flex row that re-wraps the status block onto its own line once
       the data lands, growing the sticky bar 34px -> 76px and pushing the whole
       document down 39px. That single reflow was the entire 0.97 CLS on mobile.
       Giving the block its own row up front makes the before and after layouts
       identical, so the text can change length without moving anything. */
    .topbar-status {
        flex-basis: 100%;
        margin-left: 0;
        gap: 10px;
        justify-content: space-between;
    }
    .updated { font-size: 0.66rem; }
    .page { padding: 20px 16px 48px; }
    .card-grid { grid-template-columns: 1fr; }
    .company-panel { padding: 18px; }
}

/* Comfortable touch targets on touch-first devices */
@media (pointer: coarse) {
    .chip { padding: 10px 16px; }
    .btn-refresh { padding: 11px 18px; }
    .btn-ghost { padding: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .badge-breaking, .skeleton, .btn-refresh.spinning svg { animation: none; }
    html { scroll-behavior: auto; }
    .card:hover, .chip:hover, .btn-refresh:hover { transform: none; }
    .skip-link { transition: none; }
}

/* Short viewports (landscape phones). The bar stacks into three rows here
   (wordmark, status, chip nav) and measured 152px, which is 41% of a 375px
   landscape fold. Sticking it there costs more than it gives, so on a short
   screen it scrolls away with the page and the reader gets the height back. */
@media (max-height: 520px) {
    .topbar { position: static; }
    .topbar-inner { padding-block: 8px; row-gap: 6px; }
    .chips { padding-bottom: 2px; }
}

/* The footer's home link is a standalone target, not a link inside a sentence,
   so the 2.5.8 inline exception does not cover it and it measured 170x14 with
   another target inside the 24px spacing circle. */
.footer-home a {
    display: inline-block;
    min-height: 24px;
    padding-block: 5px;
}