@layer reset, tokens, base, layout, objects, components, states, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-height: 100%;
  }

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }

  img {
    display: block;
    max-width: 100%;
  }

  button,
  input {
    font: inherit;
    letter-spacing: 0;
  }
}

@layer tokens {
  :root {
    color-scheme: light;
    --grv-surface-0: #f1f4f2;
    --grv-surface-1: #f8fbf8;
    --grv-surface-2: #e6ece8;
    --grv-surface-3: #dce6e0;
    --grv-surface-raised: #ffffff;
    --grv-surface-inset: #ccd8d1;
    --grv-ink: #17241f;
    --grv-ink-soft: #2a332e;
    --grv-muted: #62736b;
    --grv-muted-2: #82928a;
    --grv-signal: #2d9a5e;
    --grv-signal-bright: #4ade80;
    --grv-signal-ghost: #e8f8ee;
    --grv-teal: #20a99a;
    --grv-gold: #b48a36;
    --grv-coral: #c66f63;
    --grv-line: rgba(42, 51, 46, 0.14);
    --grv-line-strong: rgba(45, 154, 94, 0.30);
    --radius-card: 18px;
    --radius-frame: 14px;
    --radius-soft: 28px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --shadow-raised:
      -4px -4px 10px rgba(255, 255, 255, 0.72),
      4px 4px 12px rgba(107, 125, 116, 0.16);
    --shadow-raised-sm:
      -2px -2px 6px rgba(255, 255, 255, 0.78),
      2px 2px 7px rgba(107, 125, 116, 0.13);
    --shadow-inset:
      inset -3px -3px 7px rgba(255, 255, 255, 0.68),
      inset 3px 3px 9px rgba(107, 125, 116, 0.18);
    --shadow-focus:
      0 0 0 2px var(--grv-surface-0),
      0 0 0 4px rgba(45, 154, 94, 0.72);
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 140ms;
    --dur-base: 240ms;
    --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
}

@layer base {
  html {
    background: var(--grv-surface-0);
  }

  body {
    min-height: 100%;
    color: var(--grv-ink);
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.80), transparent 34%),
      radial-gradient(circle at 84% 7%, rgba(74, 222, 128, 0.08), transparent 30%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.70), rgba(211, 219, 215, 0.52)),
      var(--grv-surface-0);
    font-family: var(--font-ui);
    letter-spacing: 0;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 32%, rgba(45, 154, 94, 0.035) 66%, transparent);
    pointer-events: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    color: inherit;
    cursor: pointer;
  }

  h1,
  h2,
  h3 {
    line-height: 1.06;
    letter-spacing: 0;
  }

  h1 {
    max-width: 920px;
    font-size: clamp(2.2rem, 7vw, 5.8rem);
  }

  h2 {
    font-size: clamp(1.25rem, 2.5vw, 2.1rem);
  }

  p {
    line-height: 1.55;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
  }
}

@layer layout {
  .app-shell {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 18px;
  }

  .topbar {
    position: sticky;
    top: 12px;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: var(--radius-soft);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.90), rgba(229, 237, 232, 0.90)),
      var(--grv-surface-1);
    box-shadow: var(--shadow-raised);
    backdrop-filter: blur(14px);
  }

  .route-host {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-8) 0 var(--space-12);
  }

  .feed-band,
  .carousel-page,
  .frame-page,
  .atom-page {
    display: grid;
    gap: var(--space-6);
  }

  .feed-lead,
  .carousel-page__header,
  .section-heading {
    display: flex;
    gap: var(--space-4);
    align-items: end;
    justify-content: space-between;
  }

  .split-band,
  .records-band,
  .frame-stage,
  .module-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.75fr);
    gap: var(--space-5);
    align-items: start;
  }
}

@layer objects {
  .feed-grid,
  .library-grid,
  .frame-sequence,
  .adapter-grid,
  .proof-list {
    display: grid;
    gap: var(--space-5);
  }

  .feed-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    list-style: none;
  }

  .feed-item {
    display: block;
    min-width: 0;
    grid-column: span 2;
    list-style: none;
  }

  .library-grid,
  .adapter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
  }

  .frame-sequence {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    list-style-position: inside;
  }

  .atom-rail {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 4px 2px 12px;
    list-style: none;
    scroll-snap-type: x mandatory;
  }

  .atom-rail > li {
    flex: 0 0 min(260px, 78vw);
    scroll-snap-align: start;
  }

  .aspect-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: var(--radius-frame);
    background:
      linear-gradient(145deg, rgba(212, 224, 217, 0.96), rgba(255, 255, 255, 0.80));
    box-shadow: var(--shadow-inset);
  }

  .aspect-frame--45 {
    aspect-ratio: 4 / 5;
  }

  .aspect-frame--square {
    aspect-ratio: 1 / 1;
  }

  .aspect-frame > img,
  .frame-viewer__media > img,
  .compact-image > img,
  .atom-stage > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .compact-ledger,
  .hash-row,
  .proof-blockers,
  .primary-nav,
  .status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
}

@layer components {
  .brand-mark {
    display: inline-flex;
    min-width: 0;
    gap: 12px;
    align-items: center;
  }

  .brand-glyph {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: var(--radius-frame);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(216, 226, 220, 0.94));
    color: var(--grv-signal);
    font-size: 13px;
    font-weight: 860;
    box-shadow: var(--shadow-raised-sm);
  }

  .brand-mark strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 21px;
  }

  .eyebrow,
  .feed-card-kicker {
    margin: 0 0 6px;
    color: var(--grv-muted);
    font-size: 11px;
    font-weight: 820;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .primary-nav {
    justify-content: flex-end;
  }

  .primary-nav a,
  .status-strip span,
  .compact-ledger span,
  .mode-toggle button,
  .state-filter button,
  .reuse-badge,
  .proof-status,
  .proof-blockers span {
    min-height: 32px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 999px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(221, 232, 226, 0.78));
    color: var(--grv-ink-soft);
    font-size: 12px;
    font-weight: 760;
    box-shadow: var(--shadow-raised-sm);
  }

  .primary-nav a.active,
  .mode-toggle button.active,
  .state-filter button.active {
    color: var(--grv-signal);
    box-shadow: var(--shadow-inset);
  }

  .status-strip {
    grid-column: 1 / -1;
  }

  .browse-toolbar {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
  }

  .search-shell {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: 8px 12px;
    border-radius: var(--radius-card);
    background: var(--grv-surface-1);
    box-shadow: var(--shadow-inset);
  }

  .search-shell span {
    color: var(--grv-muted);
    font-size: 12px;
    font-weight: 780;
    text-transform: uppercase;
  }

  .search-shell input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--grv-ink);
  }

  .result-line {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    color: var(--grv-muted);
    font-size: 13px;
  }

  .carousel-card,
  .atom-tile,
  .frame-object,
  .soft-panel,
  .record-panel,
  .adapter-card,
  .proof-item,
  .module-record,
  .frame-record,
  .frame-viewer {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--radius-card);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(226, 235, 229, 0.90));
    box-shadow: var(--shadow-raised);
  }

  .carousel-card {
    container-type: inline-size;
    transition:
      transform var(--dur-base) var(--ease-premium),
      box-shadow var(--dur-base) var(--ease-premium),
      border-color var(--dur-base) var(--ease-premium);
  }

  .carousel-card--accent {
    grid-column: span 4;
  }

  .carousel-card__link,
  .atom-tile__link,
  .frame-sequence__link {
    display: grid;
    height: 100%;
    color: inherit;
  }

  .carousel-card__thumb {
    margin: 12px;
  }

  .carousel-card__count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(248, 251, 248, 0.88);
    color: var(--grv-signal);
    font-size: 12px;
    font-weight: 820;
    box-shadow: var(--shadow-raised-sm);
  }

  .carousel-card__meta,
  .atom-tile__meta,
  .frame-object__body,
  .module-record,
  .frame-record,
  .soft-panel,
  .record-panel,
  .adapter-card,
  .proof-item,
  .frame-viewer__caption {
    display: grid;
    gap: 9px;
    padding: var(--space-4);
  }

  .carousel-card__title,
  .atom-tile__title,
  .frame-object__body strong {
    overflow-wrap: anywhere;
  }

  .carousel-card__meta p,
  .atom-tile__meta p,
  .quiet-copy,
  .caption-copy {
    color: var(--grv-muted);
  }

  .atom-route {
    color: var(--grv-muted-2);
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .carousel-page__header {
    padding: var(--space-2) 0 var(--space-4);
  }

  .frame-sequence__item {
    min-width: 0;
  }

  .frame-object {
    height: 100%;
  }

  .frame-object__media {
    margin: 10px;
  }

  .frame-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3);
    align-items: center;
  }

  .frame-nav a,
  .frame-nav__counter,
  .text-link {
    display: inline-flex;
    width: fit-content;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--grv-surface-1);
    color: var(--grv-signal);
    font-size: 13px;
    font-weight: 760;
    box-shadow: var(--shadow-raised-sm);
  }

  .frame-nav__next {
    justify-self: end;
  }

  .frame-nav__counter {
    color: var(--grv-ink-soft);
  }

  .frame-viewer {
    padding: var(--space-4);
  }

  .frame-viewer__media,
  .atom-stage,
  .compact-image {
    overflow: hidden;
    border-radius: var(--radius-frame);
    background: var(--grv-surface-2);
    box-shadow: var(--shadow-inset);
  }

  .frame-viewer__media {
    max-width: min(620px, 100%);
    margin: 0 auto;
  }

  .atom-tile {
    height: 100%;
  }

  .atom-tile__thumb {
    margin: 10px;
  }

  .reuse-badge--internal-only,
  .reuse-badge--restricted,
  .reuse-badge--blocked {
    color: var(--grv-muted);
  }

  .reuse-badge--cc0-pending {
    color: var(--grv-signal);
    background: var(--grv-signal-ghost);
  }

  .reuse-badge--cc0-cleared {
    color: white;
    background: var(--grv-signal);
  }

  .meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .meta-cell {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 11px;
    border-radius: var(--radius-frame);
    background: rgba(255, 255, 255, 0.48);
    box-shadow: var(--shadow-inset);
  }

  .meta-cell span,
  .key-values dt {
    color: var(--grv-muted);
    font-size: 11px;
    font-weight: 790;
    text-transform: uppercase;
  }

  .meta-cell strong,
  .key-values dd {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--grv-ink-soft);
    font-size: 13px;
  }

  .key-values {
    display: grid;
    gap: 10px;
  }

  .key-values div {
    display: grid;
    gap: 3px;
  }

  .compact-atom {
    display: grid;
    grid-template-columns: minmax(120px, 0.36fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
  }

  .download-block {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-frame);
    background: var(--grv-signal-ghost);
  }

  .block-link {
    margin: 0 8px 8px 0;
  }

  .empty-state,
  .empty-inline {
    display: grid;
    gap: var(--space-3);
    align-content: center;
    min-height: 280px;
    padding: var(--space-6);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.56);
    box-shadow: var(--shadow-inset);
  }
}

@layer states {
  .carousel-card:hover,
  .atom-tile:hover,
  .frame-sequence__link:hover .frame-object {
    border-color: rgba(45, 154, 94, 0.36);
    box-shadow:
      var(--shadow-raised),
      0 0 28px rgba(74, 222, 128, 0.08);
    transform: translateY(-2px);
  }

  .atom-tile--internal-only .atom-tile__thumb img,
  .atom-tile--cc0-pending .atom-tile__thumb img {
    filter: saturate(0.82);
    opacity: 0.86;
  }

  .feed-band.is-searcher .feed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feed-band.is-searcher .feed-item {
    grid-column: span 1;
  }

  .feed-band.is-searcher .carousel-card__link {
    grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  }

  .feed-band.is-searcher .carousel-card__thumb {
    height: calc(100% - 24px);
  }

  @container (max-width: 260px) {
    .carousel-card__meta p:not(.feed-card-kicker),
    .atom-route {
      display: none;
    }
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media (max-width: 1120px) {
    .feed-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .carousel-card--accent,
    .feed-item {
      grid-column: span 2;
    }

    .frame-sequence,
    .library-grid,
    .adapter-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 820px) {
    .topbar,
    .split-band,
    .records-band,
    .frame-stage,
    .module-hero,
    .browse-toolbar {
      grid-template-columns: 1fr;
    }

    .feed-lead,
    .carousel-page__header,
    .section-heading {
      display: grid;
      align-items: start;
    }

    .primary-nav,
    .compact-ledger {
      justify-content: flex-start;
    }

    .feed-band.is-searcher .feed-grid,
    .feed-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feed-band.is-searcher .carousel-card__link {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 560px) {
    :root {
      --radius-card: 14px;
      --radius-frame: 10px;
      --radius-soft: 18px;
    }

    .app-shell {
      padding: 10px;
    }

    .topbar {
      top: 6px;
      gap: 8px;
      padding: 9px;
    }

    .status-strip {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    h1 {
      font-size: 2.45rem;
    }

    .feed-band.is-searcher .feed-grid,
    .feed-grid,
    .frame-sequence,
    .library-grid,
    .adapter-grid,
    .meta-grid,
    .compact-atom {
      grid-template-columns: 1fr;
    }

    .feed-item,
    .carousel-card--accent {
      grid-column: auto;
    }

    .frame-nav {
      grid-template-columns: 1fr;
    }

    .frame-nav__next {
      justify-self: start;
    }
  }
}