@layer components, responsive;

@layer components {
  body[data-page="radar"] #main-content { overflow: clip; }
  .radar-hero {
    min-height: calc(100vh - 66px);
    padding: 38px 0 24px;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 72px;
  }
  .radar-hero-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
    align-items: center;
    gap: clamp(38px, 6vw, 86px);
  }
  .radar-portrait {
    position: relative;
    width: min(100%, 382px);
    aspect-ratio: 1;
    justify-self: center;
    isolation: isolate;
  }
  .radar-portrait::before {
    content: "";
    position: absolute;
    inset: 4%;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 86, 63, 0.22), rgba(255, 86, 63, 0.03) 52%, transparent 70%);
    filter: blur(12px);
  }
  .radar-portrait > img {
    position: absolute;
    inset: 16%;
    width: 68%;
    height: 68%;
    border: 2px solid rgba(244, 241, 233, 0.34);
    border-radius: 50%;
    object-fit: cover;
    filter: saturate(0.82) contrast(1.05);
    box-shadow: 0 0 0 12px rgba(9, 10, 12, 0.8), 0 28px 80px rgba(0, 0, 0, 0.52), 0 0 68px rgba(255, 86, 63, 0.19);
  }
  .radar-orbit {
    position: absolute;
    inset: 5%;
    z-index: -1;
    border: 1px solid rgba(244, 241, 233, 0.17);
    border-radius: 50%;
  }
  .radar-orbit::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    width: 9px;
    height: 9px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 18px var(--signal);
  }
  .radar-orbit-one { animation: radar-spin 18s linear infinite; }
  .radar-orbit-two { inset: 11%; border-style: dashed; opacity: 0.62; animation: radar-spin 28s linear infinite reverse; }
  @keyframes radar-spin { to { transform: rotate(360deg); } }
  .radar-source-tag {
    position: absolute;
    right: 2%;
    bottom: 14%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 7px;
    align-items: center;
    min-width: 156px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: rgba(9, 10, 12, 0.9);
    box-shadow: var(--shadow);
  }
  .radar-source-tag .live-dot { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--state); box-shadow: 0 0 12px var(--state); }
  .radar-source-tag span:not(.live-dot) { color: var(--paper-faint); font: 700 0.54rem var(--mono); letter-spacing: 0.08em; }
  .radar-source-tag strong { font: 800 0.7rem var(--mono); }

  .radar-hero-copy { min-width: 0; }
  .radar-hero-copy h1 {
    max-width: 760px;
    margin-top: 11px;
    font-size: clamp(3.8rem, 6.6vw, 6.65rem);
    line-height: 0.9;
    letter-spacing: -0.074em;
    text-wrap: balance;
  }
  .radar-verdict-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
  .radar-verdict-line > span:last-child { color: var(--paper-faint); font: 650 0.68rem var(--mono); }
  .radar-hero-copy > h2 { max-width: 760px; margin-top: 14px; font-size: clamp(1.4rem, 2.25vw, 2.2rem); line-height: 1.05; letter-spacing: -0.04em; }
  .radar-hero-copy > p:not(.eyebrow) { max-width: 760px; margin-top: 9px; color: var(--paper-dim); font-size: 0.88rem; }

  .radar-reset-answer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 18px;
    min-width: 0;
    margin-top: 18px;
    padding: 16px 18px 15px;
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--state);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--state-soft), transparent 56%), rgba(16, 18, 22, 0.78);
  }
  .radar-reset-answer-head { display: contents; }
  .radar-reset-answer-head > span { color: var(--paper-faint); font: 750 0.58rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
  #radar-reset-age { align-self: start; color: var(--state); font: 800 0.72rem/1.4 var(--mono); white-space: nowrap; }
  #radar-latest-time {
    display: block;
    min-width: 0;
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
    color: var(--paper);
    font: 790 clamp(1.2rem, 2.15vw, 1.9rem)/1.12 var(--sans);
    letter-spacing: -0.035em;
  }
  #radar-reset-time-context { grid-column: 1 / -1; color: var(--paper-faint); font: 650 0.62rem/1.45 var(--mono); }
  .radar-reset-answer[data-answer-state="confirmed"] { --state: var(--green); --state-soft: rgba(126, 224, 156, 0.1); }
  .radar-reset-answer[data-answer-state="unconfirmed"],
  .radar-reset-answer[data-answer-state="related"] { --state: var(--amber); --state-soft: rgba(246, 189, 89, 0.1); }
  .radar-reset-answer[data-answer-state="empty"],
  .radar-reset-answer[data-answer-state="unavailable"] { --state: var(--paper-faint); --state-soft: rgba(244, 241, 233, 0.035); }

  .radar-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .radar-facts > div { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .radar-facts dt { color: var(--paper-faint); font: 650 0.55rem/1.35 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
  .radar-facts dd { margin-top: 4px; overflow-wrap: anywhere; color: var(--paper-dim); font: 700 0.66rem/1.4 var(--mono); }
  .radar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 17px; }
  .radar-watch-row { display: flex; align-items: center; gap: 13px; margin-top: 11px; }
  .radar-watch-row p { color: var(--paper-faint); font-size: 0.66rem; }
  .watch-button { display: inline-flex; align-items: center; padding: 7px 0; background: transparent; color: var(--paper-dim); cursor: pointer; font-size: 0.72rem; font-weight: 760; }
  .watch-button:hover { color: var(--paper); }

  .signal-state-panel {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-top: 18px;
    padding: 9px 12px;
    border-block: 1px solid var(--line);
    color: var(--paper-faint);
    font: 650 0.64rem/1.4 var(--mono);
  }
  .signal-state-panel span { display: inline-flex; align-items: center; gap: 9px; }
  .signal-state-panel i { width: 8px; height: 8px; border-radius: 50%; background: var(--state); box-shadow: 0 0 13px var(--state); }
  #signals-loading i { animation: signal-pulse 1.2s ease-in-out infinite; }
  @keyframes signal-pulse { 50% { opacity: 0.35; transform: scale(0.78); } }

  .signal-section, .coverage-section, .radar-support, .signal-method {
    padding: 84px 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 72px;
  }
  .signal-heading strong { color: var(--paper); font-family: var(--mono); }
  .signal-list { display: grid; gap: 12px; margin-top: 34px; }
  .signal-list-announcements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-list-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signal-card {
    display: flex;
    min-width: 0;
    min-height: 244px;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(155deg, rgba(255,255,255,0.028), transparent 56%), rgba(16,18,22,0.7);
  }
  .signal-card-announcement { border-color: rgba(126, 224, 156, 0.3); background: linear-gradient(145deg, rgba(126,224,156,0.07), transparent 48%), rgba(16,18,22,0.78); }
  .signal-card-related { min-height: 220px; }
  .signal-card-reply { border-left: 3px solid var(--amber); }
  .signal-card-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; }
  .signal-card-head img { width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 50%; object-fit: cover; }
  .signal-card-head > div { display: grid; min-width: 0; }
  .signal-card-head > div strong { font-size: 0.82rem; }
  .signal-lane { color: var(--paper-faint); font: 700 0.54rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
  .verification-badge, .signal-kind {
    padding: 4px 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--paper-dim);
    font: 750 0.55rem var(--mono);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .verification-badge { border-color: rgba(126,224,156,0.42); background: rgba(126,224,156,0.08); color: var(--green); }
  .signal-card-head time { color: var(--paper-faint); font: 650 0.62rem var(--mono); white-space: nowrap; }
  .signal-card > p { margin-top: 24px; overflow-wrap: anywhere; color: var(--paper); font-size: 0.86rem; line-height: 1.55; }
  .signal-card footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 26px; }
  .signal-card footer > span { min-width: 0; overflow-wrap: anywhere; color: var(--paper-faint); font: 600 0.59rem/1.45 var(--mono); }
  .signal-card footer a { flex: 0 0 auto; color: var(--paper); font-size: 0.68rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
  .signal-card footer a:hover { color: var(--green); }
  .signal-source-unavailable { color: var(--amber) !important; }
  .lane-empty { margin-top: 24px; padding: 16px; border: 1px dashed var(--line); border-radius: 10px; color: var(--paper-faint); font-size: 0.76rem; }

  .coverage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 36px; border-block: 1px solid var(--line); }
  .coverage-grid article { min-width: 0; padding: 26px 22px 28px 0; }
  .coverage-grid article + article { padding-left: 22px; border-left: 1px solid var(--line); }
  .coverage-grid article > span { color: var(--signal); font: 750 0.62rem var(--mono); }
  .coverage-grid h3 { margin-top: 30px; font-size: 1rem; }
  .coverage-grid p { margin-top: 8px; color: var(--paper-dim); font-size: 0.75rem; }
  .coverage-readout { margin-top: 24px; }
  .coverage-readout dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .coverage-readout dl > div { min-width: 0; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .coverage-readout dt { color: var(--paper-faint); font: 650 0.55rem var(--mono); text-transform: uppercase; }
  .coverage-readout dd { margin-top: 4px; overflow-wrap: anywhere; color: var(--paper-dim); font: 700 0.67rem var(--mono); }

  .radar-support-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 14px; margin-top: 36px; }
  .radar-calculator-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: rgba(16,18,22,0.72); }
  .radar-calculator-card img { width: 88px; height: 88px; border: 1px solid var(--line-strong); border-radius: 50%; object-fit: cover; }
  .radar-calculator-card h3 { margin-top: 7px; font-size: 1.65rem; letter-spacing: -0.04em; }
  .radar-calculator-card p:not(.eyebrow) { max-width: 650px; margin-top: 7px; color: var(--paper-dim); font-size: 0.78rem; }
  .radar-calculator-card .button { margin-top: 16px; }

  .pipeline-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 36px; padding: 0; border-block: 1px solid var(--line); list-style: none; }
  .pipeline-list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; min-width: 0; padding: 25px 20px 27px 0; }
  .pipeline-list li + li { padding-left: 20px; border-left: 1px solid var(--line); }
  .pipeline-list li > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--signal); border-radius: 50%; color: var(--signal); font: 750 0.6rem var(--mono); }
  .pipeline-list h3 { font-size: 0.94rem; }
  .pipeline-list p { margin-top: 6px; color: var(--paper-dim); font-size: 0.72rem; }
}

@layer responsive {
  @media (max-width: 1080px) {
    .radar-hero-grid { grid-template-columns: minmax(250px, 0.64fr) minmax(0, 1.36fr); gap: 38px; }
    .radar-portrait { width: min(100%, 330px); }
    .signal-list-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coverage-grid, .pipeline-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coverage-grid article:nth-child(3), .pipeline-list li:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
    .coverage-grid article:nth-child(4), .pipeline-list li:nth-child(4) { border-top: 1px solid var(--line); }
  }

  @media (max-width: 800px) {
    .radar-hero { min-height: auto; padding-top: 28px; }
    .radar-hero-grid { grid-template-columns: 1fr; gap: 22px; }
    .radar-portrait { width: 210px; justify-self: start; }
    .radar-source-tag { right: -12px; bottom: 9%; }
    .radar-hero-copy h1 { font-size: clamp(3.7rem, 12vw, 5.3rem); }
    .signal-list-announcements, .signal-list-related { grid-template-columns: 1fr; }
    .radar-support-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 620px) {
    .radar-hero { padding: 16px 0 14px; }
    .radar-hero-grid { gap: 12px; }
    .radar-portrait { width: 112px; }
    .radar-portrait > img { inset: 13%; width: 74%; height: 74%; box-shadow: 0 0 0 6px rgba(9,10,12,0.82), 0 14px 38px rgba(0,0,0,0.48), 0 0 34px rgba(255,86,63,0.18); }
    .radar-source-tag { right: -108px; bottom: 10%; min-width: 136px; padding: 7px 9px; }
    .radar-hero-copy h1 { margin-top: 7px; font-size: clamp(2.85rem, 15vw, 4.1rem); line-height: 0.91; }
    .radar-verdict-line { margin-top: 12px; }
    .radar-hero-copy > h2 { margin-top: 10px; font-size: 1.24rem; }
    .radar-hero-copy > p:not(.eyebrow) { display: -webkit-box; margin-top: 7px; overflow: hidden; font-size: 0.76rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .radar-reset-answer { gap: 5px 12px; margin-top: 12px; padding: 12px 13px 11px; }
    #radar-latest-time { font-size: 1.08rem; }
    #radar-reset-time-context { font-size: 0.57rem; }
    .radar-facts { grid-template-columns: 1fr 1fr; margin-top: 8px; }
    .radar-facts > div { padding: 8px 9px; }
    .radar-actions { align-items: stretch; margin-top: 12px; }
    .radar-actions .button { flex: 1 1 100%; min-height: 42px; }
    .radar-actions .text-button { text-align: left; }
    .radar-watch-row { align-items: flex-start; margin-top: 8px; }
    .radar-watch-row p { display: none; }
    .signal-state-panel { min-height: 34px; margin-top: 12px; padding: 7px 9px; font-size: 0.58rem; }
    .signal-section, .coverage-section, .radar-support, .signal-method { padding: 60px 0; }
    .signal-card { min-height: 0; padding: 16px; }
    .signal-card-head { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .signal-card-head img { width: 42px; height: 42px; }
    .signal-card-head time { grid-column: 2; }
    .signal-card > p { margin-top: 18px; font-size: 0.8rem; }
    .signal-card footer { align-items: flex-start; flex-direction: column; padding-top: 20px; }
    .coverage-grid, .pipeline-list { grid-template-columns: 1fr; }
    .coverage-grid article, .coverage-grid article + article, .pipeline-list li, .pipeline-list li + li { padding: 21px 0; border-left: 0; border-top: 1px solid var(--line); }
    .coverage-grid article:first-child, .pipeline-list li:first-child { border-top: 0; }
    .coverage-grid h3 { margin-top: 18px; }
    .coverage-readout dl { grid-template-columns: 1fr 1fr; }
    .radar-calculator-card { grid-template-columns: 64px 1fr; gap: 15px; padding: 18px; }
    .radar-calculator-card img { width: 64px; height: 64px; }
    .radar-calculator-card h3 { font-size: 1.28rem; }
  }

  @media (max-width: 350px) {
    .radar-hero-grid { gap: 8px; }
    .radar-portrait { width: 78px; }
    .radar-source-tag { right: -132px; bottom: 5%; min-width: 126px; padding: 6px 8px; }
    .radar-hero-copy h1 { font-size: 2.34rem; }
    .radar-hero-copy > h2 { font-size: 1rem; }
    #radar-detail { -webkit-line-clamp: 2; }
    .radar-reset-answer { margin-top: 9px; padding: 10px 11px; }
    .radar-reset-answer-head > span, #radar-reset-age { font-size: 0.54rem; }
    #radar-latest-time { font-size: 0.96rem; }
    #radar-reset-time-context { font-size: 0.52rem; }
    .radar-facts { margin-top: 7px; }
    .radar-facts > div { padding: 7px 8px; }
    .radar-actions { margin-top: 9px; }
    .coverage-readout dl { grid-template-columns: 1fr; }
    .radar-calculator-card { grid-template-columns: 1fr; }
    .radar-calculator-card img { width: 58px; height: 58px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .radar-orbit { animation: none !important; }
  }
}