@layer reset, base, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ol, ul { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  button, input { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  a { color: inherit; }
}

@layer base {
  :root {
    --canvas: #14171d;
    --canvas-raised: #1b1f27;
    --panel: #222833;
    --panel-deep: #191e26;
    --ink: #edf1f7;
    --ink-strong: #ffffff;
    --muted: #a6aebb;
    --faint: #737d8c;
    --line: #353d4a;
    --news: #3975df;
    --news-soft: #263d64;
    --social: #e4655d;
    --social-soft: #5c3234;
    --technology: #42bad0;
    --technology-soft: #234b57;
    --shopping: #e6b34d;
    --shopping-soft: #58482d;
    --success: #55c58b;
    --focus: #76d6e7;
    --max: 1760px;
    color-scheme: dark;
  }

  body {
    min-width: 320px;
    background: var(--canvas);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
  }

  button, input { color: inherit; }
  button { cursor: pointer; }
  a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  .skip-link {
    position: fixed;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 100;
    transform: translateY(-160%);
    padding: 10px 14px;
    background: var(--ink-strong);
    color: var(--canvas);
    font-weight: 800;
  }
  .skip-link:focus { transform: translateY(0); }
}

@layer components {
  .masthead {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 78px;
    padding: 14px max(24px, calc((100vw - var(--max)) / 2));
    background: rgba(20, 23, 29, 0.96);
    border-bottom: 1px solid var(--line);
  }

  .brand {
    display: grid;
    grid-template-columns: 42px auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    text-decoration: none;
  }
  .brand__mark {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    background: var(--ink-strong);
    color: var(--canvas);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: -0.06em;
  }
  .brand__name {
    font-size: 1.17rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.05;
  }
  .brand__name span { color: var(--social); }
  .brand__product {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.38em;
  }

  .masthead__tools { display: flex; align-items: center; gap: 20px; }
  .search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(330px, 24vw);
    min-height: 44px;
    padding-inline: 13px;
    border: 1px solid var(--line);
    background: var(--canvas-raised);
  }
  .search span { color: var(--technology); font-size: 1.35rem; line-height: 1; }
  .search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
  }
  .search input::placeholder { color: var(--faint); }

  .locale-switch { display: flex; align-items: center; border: 1px solid var(--line); }
  .locale-switch button {
    min-width: 44px;
    min-height: 42px;
    border: 0;
    border-inline-end: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
  }
  .locale-switch button:last-child { border-inline-end: 0; }
  .locale-switch button:hover { color: var(--ink-strong); background: var(--panel); }
  .locale-switch button.is-active { color: var(--canvas); background: var(--ink-strong); }

  main { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }

  .radar-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 48px;
    padding-block: 52px 36px;
    border-bottom: 1px solid var(--line);
  }
  .eyebrow {
    margin-bottom: 10px;
    color: var(--social);
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.22em;
  }
  .radar-intro h1 {
    max-width: 760px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.15rem, 4vw, 4.6rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.98;
  }
  .radar-status {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 9px;
    min-width: 260px;
    padding-block: 10px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.78rem;
  }
  .radar-status strong { color: var(--ink); font-variant-numeric: tabular-nums; }
  .radar-status > span:last-child { grid-column: 2; }
  .status-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; }

  .lane-filters {
    position: sticky;
    inset-block-start: 78px;
    z-index: 30;
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: rgba(20, 23, 29, 0.97);
    scrollbar-width: none;
  }
  .lane-filters::-webkit-scrollbar { display: none; }
  .lane-filters button {
    position: relative;
    min-height: 50px;
    padding-inline: 24px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .lane-filters button::after {
    content: "";
    position: absolute;
    inset-inline: 24px;
    inset-block-end: -1px;
    height: 3px;
    background: transparent;
  }
  .lane-filters button:hover { color: var(--ink); }
  .lane-filters button.is-active { color: var(--ink-strong); }
  .lane-filters button[data-lane="all"].is-active::after { background: var(--ink-strong); }
  .lane-filters button[data-lane="news"].is-active::after { background: var(--news); }
  .lane-filters button[data-lane="social"].is-active::after { background: var(--social); }
  .lane-filters button[data-lane="technology"].is-active::after { background: var(--technology); }
  .lane-filters button[data-lane="shopping"].is-active::after { background: var(--shopping); }
  .topic-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 58px;
    overflow-x: auto;
    padding: 11px max(20px, calc((100vw - 1500px) / 2));
    background: var(--canvas-raised);
    border-block-end: 1px solid var(--line);
    scrollbar-width: none;
  }
  .topic-filters::-webkit-scrollbar { display: none; }
  .topic-filters button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
  }
  .topic-filters button:hover { color: var(--ink-strong); background: var(--canvas); }
  .topic-filters button.is-active { color: var(--ink-strong); border-color: var(--news); background: var(--news-soft); box-shadow: inset 0 0 0 1px rgb(124 202 255 / 12%); }
  [dir="rtl"] .topic-filters { direction: rtl; }
  [dir="rtl"] .topic-filters button { letter-spacing: 0; text-transform: none; }
  @media (max-width: 760px) { .topic-filters { justify-content: flex-start; padding-inline: 16px; } }

  .now-section { padding-block: 32px 18px; }
  .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
  }
  .section-heading > div { display: flex; align-items: baseline; gap: 13px; }
  .section-heading h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.45rem, 2.3vw, 2.45rem);
    font-weight: 600;
    letter-spacing: -0.025em;
  }
  .section-heading p { max-width: 440px; color: var(--muted); font-size: 0.78rem; text-align: end; }
  .section-index { color: var(--faint); font-size: 0.68rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .section-heading--compact { align-items: center; margin-bottom: 14px; }
  .section-heading--compact h2 { font-family: inherit; font-size: 0.8rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
  .section-rule { flex: 1; height: 1px; background: var(--line); }

  .now-rail {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .now-item { min-width: 0; border-inline-end: 1px solid var(--line); }
  .now-item:last-child { border-inline-end: 0; }
  .now-item a {
    display: block;
    min-height: 122px;
    padding: 15px;
    text-decoration: none;
  }
  .now-item a:hover { background: var(--canvas-raised); }
  .now-item__meta { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: var(--muted); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; }
  .now-item__dot { width: 6px; height: 6px; background: var(--lane-color, var(--news)); }
  .now-item[data-lane="news"] { --lane-color: var(--news); }
  .now-item[data-lane="social"] { --lane-color: var(--social); }
  .now-item[data-lane="technology"] { --lane-color: var(--technology); }
  .now-item[data-lane="shopping"] { --lane-color: var(--shopping); }
  .now-item h3 {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink-strong);
    font-size: 0.83rem;
    font-weight: 650;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .radar-section { padding-block: 42px 58px; border-top: 1px solid var(--line); }
  .card-grid { display: grid; align-items: start; gap: 22px; }
  .card-grid--news, .card-grid--mixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .radar-card {
    --lane-color: var(--news);
    --lane-soft: var(--news-soft);
    min-width: 0;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--lane-color) 48%, var(--line));
    border-radius: 18px;
    background: var(--lane-soft);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
    transition: transform 180ms cubic-bezier(.16, 1, .3, 1), border-color 180ms ease;
  }
  .radar-card:hover { transform: translateY(-2px); border-color: var(--lane-color); }
  .radar-card[data-lane="social"] { --lane-color: var(--social); --lane-soft: var(--social-soft); }
  .radar-card[data-lane="technology"] { --lane-color: var(--technology); --lane-soft: var(--technology-soft); }
  .radar-card[data-lane="shopping"] { --lane-color: var(--shopping); --lane-soft: var(--shopping-soft); }

  .card__header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
  }
  .card__mark {
    display: grid;
    place-items: center;
    width: 40px;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--lane-color) 70%, white);
    border-radius: 10px;
    background: var(--lane-color);
    color: #10151c;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: -0.04em;
  }
  .card__identity { min-width: 0; }
  .card__identity h3 {
    overflow: hidden;
    color: var(--ink-strong);
    font-size: 1.03rem;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card__meta { display: flex; flex-wrap: wrap; gap: 6px 9px; margin-top: 4px; color: rgba(255,255,255,.67); font-size: 0.67rem; }
  .card__lane { color: var(--lane-color); font-weight: 850; text-transform: uppercase; letter-spacing: 0.07em; }
  .card__count { color: rgba(255,255,255,.65); font-size: 0.68rem; font-variant-numeric: tabular-nums; }

  .ranked-list {
    max-height: 640px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    background: var(--panel-deep);
    scrollbar-color: var(--lane-color) var(--panel-deep);
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }
  .ranked-list:focus-visible { outline: 2px solid var(--lane-color); outline-offset: 2px; }
  .ranked-item + .ranked-item { border-top: 1px solid rgba(255,255,255,.065); }
  .ranked-item a,
  .story-detail > summary {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    align-items: start;
    gap: 9px;
    min-height: 48px;
    padding: 9px 11px 9px 9px;
    text-decoration: none;
  }
  .ranked-item--signal a { grid-template-columns: 29px minmax(0, 1fr); }
  .story-detail > summary { cursor: pointer; list-style: none; }
  .story-detail > summary::-webkit-details-marker { display: none; }
  .ranked-item a:hover,
  .story-detail > summary:hover,
  .story-detail[open] > summary { background: var(--panel); }
  .ranked-item__rank {
    display: grid;
    place-items: center;
    width: 29px;
    min-height: 25px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .ranked-item:nth-child(-n+3) .ranked-item__rank { border-color: var(--lane-color); background: var(--lane-color); color: #10151c; }
  .ranked-item__content { min-width: 0; }
  .ranked-item__title {
    display: block;
    padding-top: 2px;
    color: #dfe5ed;
    font-size: 0.81rem;
    font-weight: 570;
    line-height: 1.4;
  }
  .ranked-item__time { display: block; margin-top: 5px; color: var(--muted); font-size: 0.64rem; line-height: 1.35; }
  .ranked-item__time strong { color: var(--ink); }
  .ranked-item:first-child .ranked-item__title { color: var(--ink-strong); font-weight: 720; }
  .story-detail__toggle { align-self: center; color: var(--lane-color); font-size: 0.62rem; font-weight: 850; white-space: nowrap; }
  .story-detail__toggle::before { content: "+ "; }
  .story-detail[open] .story-detail__toggle::before { content: "− "; }
  .story-data { display: grid; gap: 14px; padding: 14px; border-top: 1px solid rgba(255,255,255,.08); background: #151a22; }
  .story-data__image { margin: 0; }
  .story-data__image img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 9px; }
  .story-data__image figcaption { margin-top: 5px; color: var(--faint); font-size: .62rem; }
  .story-data__meta { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--muted); font-size: .68rem; }
  .story-data__meta strong { color: var(--ink); }
  .story-data section { display: grid; gap: 5px; }
  .story-data h4 { color: var(--lane-color); font-size: .67rem; letter-spacing: .07em; text-transform: uppercase; }
  .story-data p,
  .story-data__text { color: #d8dee7; font-size: .76rem; line-height: 1.55; white-space: pre-wrap; }
  .story-data__text,
  .story-data__json { max-height: 260px; overflow: auto; padding-inline-end: 8px; scrollbar-width: thin; }
  .story-data__json { margin: 0; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: #0f1319; color: #cfd7e2; font-size: .68rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  .story-data__loading { color: var(--muted); font-size: .72rem; }
  .story-data__links { display: flex; flex-wrap: wrap; gap: 8px; }
  .story-data__links a { display: inline-flex; min-height: 34px; padding: 8px 11px; border: 1px solid var(--lane-color); border-radius: 8px; color: var(--ink-strong); font-size: .7rem; font-weight: 800; }
  .story-data__links a:hover { background: var(--lane-color); color: #10151c; }

  .card__footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 3px 0;
    color: rgba(255,255,255,.62);
    font-size: 0.65rem;
  }

  .empty-state { padding: 80px 20px; border-top: 1px solid var(--line); text-align: center; }
  .empty-state span { display: block; margin-bottom: 12px; color: var(--social); font-size: 3rem; }
  .empty-state h2 { font-family: Georgia, serif; font-weight: 500; }

  .site-footer {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    width: min(calc(100% - 48px), var(--max));
    margin-inline: auto;
    padding-block: 34px 48px;
    border-top: 1px solid var(--line);
    color: var(--faint);
    font-size: 0.68rem;
  }
  .site-footer span { color: var(--ink); font-weight: 900; letter-spacing: 0.13em; }

  [hidden] { display: none !important; }
}

@layer responsive {
  @media (max-width: 1280px) {
    .card-grid--news, .card-grid--mixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .now-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .now-item:nth-child(3) { border-inline-end: 0; }
    .now-item:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  }

  @media (max-width: 920px) {
    .masthead { align-items: flex-start; padding-inline: 20px; }
    .masthead__tools { flex-direction: column-reverse; align-items: end; gap: 8px; }
    .search { width: min(420px, 55vw); }
    .radar-intro { align-items: flex-start; flex-direction: column; gap: 24px; }
    .radar-status { width: 100%; }
    .card-grid--signals { grid-template-columns: 1fr; }
  }

  @media (max-width: 680px) {
    .masthead { position: static; flex-direction: column; gap: 14px; padding-block: 14px; }
    .masthead__tools { width: 100%; align-items: stretch; }
    .search { width: 100%; }
    .locale-switch { width: 100%; }
    .locale-switch button { flex: 1; min-width: 40px; }
    main, .site-footer { width: min(calc(100% - 28px), var(--max)); }
    .radar-intro { padding-block: 34px 26px; }
    .radar-intro h1 { font-size: clamp(2rem, 12vw, 3.25rem); }
    .lane-filters { inset-block-start: 0; margin-inline: -14px; padding-inline: 2px; }
    .lane-filters button { min-height: 48px; padding-inline: 17px; }
    .lane-filters button::after { inset-inline: 17px; }
    .now-rail { grid-template-columns: 1fr 1fr; }
    .now-item:nth-child(3) { border-inline-end: 1px solid var(--line); }
    .now-item:nth-child(even) { border-inline-end: 0; }
    .now-item:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
    .now-item a { min-height: 112px; padding: 13px; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
    .section-heading p { text-align: start; }
    .section-heading--compact { flex-direction: row; align-items: center; }
    .card-grid--news, .card-grid--mixed { grid-template-columns: 1fr; }
    .radar-section { padding-block: 34px 44px; }
    .radar-card { padding: 13px; border-radius: 15px; }
    .site-footer { flex-direction: column; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .radar-card { transition: none; }
  }

  html[dir="rtl"] .eyebrow { letter-spacing: 0; }
  html[dir="rtl"] .brand { grid-template-columns: auto 42px; }
  html[dir="rtl"] .brand__mark { grid-column: 2; }
  html[dir="rtl"] .brand__name,
  html[dir="rtl"] .brand__product { grid-column: 1; }
  html[dir="rtl"] .ranked-item a { padding: 9px 9px 9px 11px; }
}