@layer components {
  /* Intel Feed hero — subheading carries the page's real initial status
     copy ("connecting to intelligence server") rather than invented text,
     since production populates this line at runtime via API. */
  .feed-hero__status {
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-2);
    margin-block-start: var(--space-2);
  }

  /* Toolbar: search + sort, sits above the feed list */
  .feed-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-block-end: var(--space-4);
  }

  .feed-search {
    flex: 1;
    min-width: 220px;
    position: relative;
  }

  .feed-search::before {
    content: '⌕';
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-2);
    font-size: var(--font-size-1);
    pointer-events: none;
  }

  .feed-search__input {
    width: 100%;
    background: var(--surface-1);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-1);
    padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) * 2 + 6px);
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
    color: var(--text-0);
    outline: none;
    transition: border-color var(--duration-short) var(--ease-standard);
  }

  .feed-search__input::placeholder { color: var(--text-2); }
  .feed-search__input:focus { border-color: var(--secondary-500); }
  .feed-search__input:disabled,
  .feed-sort:disabled { opacity: 0.72; cursor: not-allowed; }

  .feed-sort {
    background: var(--surface-1);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-1);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    color: var(--text-1);
    outline: none;
    cursor: pointer;
  }

  .feed-sort:focus-visible { border-color: var(--secondary-500); }

  /* Two-column layout: feed list + sidebar (mirrors radar-layout's
     sticky-column pattern, but the wide column comes first here) */
  .feed-layout {
    display: grid;
    gap: var(--space-6);
    align-items: start;
  }

  @media (min-width: 900px) {
    .feed-layout {
      grid-template-columns: minmax(0, 1fr) 280px;
    }
  }

  .feed-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .feed-item {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-2);
    background: var(--surface-1);
    box-shadow: var(--shadow-inset-highlight);
  }

  .feed-item__meta {
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    letter-spacing: var(--tracking-wide);
    color: var(--secondary-500);
  }

  .feed-item__title {
    font-size: var(--font-size-2);
    letter-spacing: 0;
  }

  .feed-item a {
    color: var(--secondary-500);
    font-weight: 600;
  }

  .feed-item a:hover { color: var(--text-0); }

  .hn-item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  @media (min-width: 700px) {
    .hn-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  }

  .hn-item__rank {
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
    color: var(--secondary-500);
    padding-block-start: 0.2rem;
  }

  .hn-item__body { min-width: 0; }

  .hn-item__category {
    display: inline-flex;
    margin-block-start: var(--space-2);
    border: 1px solid color-mix(in srgb, var(--cat-color, var(--secondary-500)) 45%, transparent);
    border-radius: var(--radius-1);
    color: var(--cat-color, var(--secondary-500));
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    padding: 0.25rem 0.5rem;
  }

  .hn-item__links {
    display: flex;
    gap: var(--space-1);
    grid-column: 2;
  }

  @media (min-width: 700px) {
    .hn-item__links {
      grid-column: auto;
      justify-self: end;
    }
  }

  .hn-item__links a,
  .feed-page-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-1);
    padding: 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    color: var(--secondary-500);
    background: transparent;
    cursor: pointer;
  }

  .hn-item__links a:hover,
  .feed-page-btn:hover,
  .feed-page-btn.is-active {
    border-color: var(--secondary-500);
    color: var(--text-0);
  }

  .feed-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .feed-page-gap {
    align-self: center;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
  }

  .feed-msg {
    padding: var(--space-8) 0;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
    text-align: center;
  }

  .feed-skeleton {
    height: 4.5rem;
    border-radius: var(--radius-1);
    background: var(--surface-1);
    border: 1px solid var(--line-subtle);
    animation: feed-pulse 1.6s var(--ease-standard) infinite;
  }

  .feed-skeleton:nth-child(2) { animation-delay: 0.1s; }
  .feed-skeleton:nth-child(3) { animation-delay: 0.2s; }
  .feed-skeleton:nth-child(4) { animation-delay: 0.3s; }
  .feed-skeleton:nth-child(5) { animation-delay: 0.15s; }
  .feed-skeleton:nth-child(6) { animation-delay: 0.25s; }

  @keyframes feed-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
  }

  @media (prefers-reduced-motion: reduce) {
    .feed-skeleton { animation: none; }
  }

  .feed-pagination {
    display: none;
    justify-content: center;
    gap: var(--space-1);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--line-subtle);
  }

  /* Sidebar cards — same tactile surface language as radar-summary__box */
  .feed-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  @media (min-width: 900px) {
    .feed-sidebar {
      position: sticky;
      top: var(--space-10);
    }
  }

  .feed-card {
    background: var(--surface-1);
    border-radius: var(--radius-2);
    padding: var(--space-4);
    box-shadow: var(--shadow-inset-highlight);
  }

  .feed-card__label {
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--secondary-500);
    margin-block-end: var(--space-3);
  }

  .feed-cat-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .feed-cat-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-1);
    background: transparent;
    border: 1px solid transparent;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-short) var(--ease-standard),
                background-color var(--duration-short) var(--ease-standard);
  }

  .feed-cat-btn:hover,
  .feed-cat-btn.is-active {
    background: var(--surface-2);
    border-color: var(--line-subtle);
  }

  .feed-cat-inner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .feed-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary-500);
    flex-shrink: 0;
  }

  .feed-cat-name {
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    letter-spacing: var(--tracking-wide);
    color: var(--text-0);
  }

  .feed-cat-count {
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    color: var(--text-2);
  }

  .feed-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .feed-stat {
    padding: var(--space-2);
    border-radius: var(--radius-1);
    background: var(--surface-2);
    text-align: center;
  }

  .feed-stat__value {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-size-2);
    color: var(--text-0);
  }

  .feed-stat__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    letter-spacing: var(--tracking-wide);
    color: var(--text-2);
    margin-block-start: 0.2em;
  }

  .feed-rss-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    letter-spacing: var(--tracking-wide);
    color: var(--secondary-500);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-1);
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--duration-short) var(--ease-standard),
                color var(--duration-short) var(--ease-standard);
  }

  .feed-rss-link:hover {
    border-color: var(--secondary-500);
    color: var(--text-0);
  }
}