@layer base, utils, components, app;

@layer app {
  :root {
    --font-size: 15px;
    --line-height: 1.45;
    --font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  }

  html,
  body {
    background: var(--background0);
    color: var(--foreground0);
  }

  body {
    margin: 0;
    padding: 1lh 2ch 4lh;
  }

  .wrap {
    max-width: 144ch;
    margin: 0 auto;
  }

  /* ──────────── Topbar ──────────── */

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2ch;
    padding: 0 1ch;
    margin-bottom: 2lh;
    flex-wrap: wrap;
  }

  .brand {
    color: var(--foreground0);
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
  }

  .brand::before {
    content: "> ";
    color: var(--foreground2);
  }

  .topnav {
    display: flex;
    gap: 1ch;
    align-items: center;
    flex-wrap: wrap;
  }

  .topnav a {
    color: var(--foreground1);
    text-decoration: none;
    padding: 0 1ch;
  }

  .topnav a:hover {
    color: var(--foreground0);
  }

  .topnav a.active {
    color: var(--foreground0);
    text-decoration: underline;
  }

  /* ──────────── Box headers (badges on box rails) ──────────── */

  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1ch;
    flex-wrap: wrap;
  }

  .row > :only-child {
    margin-right: auto;
  }

  /* ──────────── Hero ──────────── */

  .hero h1 {
    margin: 0.5lh 0;
    font-size: 2.4rem;
    line-height: 1.15;
  }

  .hero h1 strong {
    color: var(--peach, var(--red, var(--foreground0)));
    font-weight: 700;
  }

  .hero .kicker {
    color: var(--foreground2);
    margin: 0 0 0.5lh;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.85rem;
  }

  .hero .kicker::before {
    content: "> ";
  }

  .hero p.lead {
    color: var(--foreground1);
    margin: 1lh 0;
  }

  .hero pre.cmd {
    color: var(--foreground1);
    margin: 1lh 0 0;
  }

  .hero pre.cmd::before {
    content: "$ ";
    color: var(--foreground2);
  }

  /* ──────────── Section helpers ──────────── */

  section {
    margin-bottom: 2lh;
  }

  .body {
    padding: 1lh 2ch;
  }

  /* Neutralize Catppuccin per-heading auto-colors */
  h1, h2, h3, h4, h5, h6 {
    color: var(--foreground0);
  }
  p code, li code, blockquote code, [is-~="typography-block"] code {
    color: var(--foreground0);
  }

  .body h2,
  .body h3 {
    margin: 0 0 0.5lh;
  }

  .body p {
    color: var(--foreground1);
  }

  .body p + p,
  .body p + ul,
  .body p + ol,
  .body p + table,
  .body p + pre {
    margin-top: 1lh;
  }

  .text-muted {
    color: var(--foreground2);
  }

  .text-accent {
    color: var(--foreground0);
  }

  .text-warn {
    color: var(--foreground0);
  }

  .text-ok {
    color: var(--foreground0);
  }

  .small {
    font-size: 0.85rem;
  }

  /* ──────────── Tabs (radio + label CSS-only) ──────────── */

  .tabwrap > input[type="radio"] {
    display: none;
  }

  .tabwrap > .tablabels {
    display: flex;
    gap: 1ch;
    margin: 0.5lh 0 1lh;
    flex-wrap: wrap;
  }

  .tabwrap > .tablabels label {
    cursor: pointer;
    padding: 0 1ch;
    color: var(--foreground2);
    border-bottom: 2px solid transparent;
  }

  .tabwrap > .panel {
    display: none;
  }

  .tabwrap > #tab-sqlite:checked ~ .panel[data-panel="sqlite"],
  .tabwrap > #tab-ccompiler:checked ~ .panel[data-panel="ccompiler"],
  .tabwrap > #tab-gameboy:checked ~ .panel[data-panel="gameboy"] {
    display: block;
  }

  .tabwrap > #tab-sqlite:checked ~ .tablabels label[for="tab-sqlite"],
  .tabwrap > #tab-ccompiler:checked ~ .tablabels label[for="tab-ccompiler"],
  .tabwrap > #tab-gameboy:checked ~ .tablabels label[for="tab-gameboy"] {
    color: var(--foreground0);
    border-bottom-color: var(--foreground0);
  }

  .tablabels .count {
    color: var(--foreground2);
    margin-left: 0.5ch;
  }

  /* ──────────── Tables ──────────── */

  .tablewrap {
    overflow-x: auto;
    margin: 1lh 0;
  }

  table {
    width: 100%;
  }

  th {
    text-align: left;
    color: var(--foreground2);
    font-weight: 600;
  }

  td.num,
  th.num {
    text-align: right;
    white-space: nowrap;
  }

  td.rank {
    color: var(--foreground2);
    text-align: right;
    padding-right: 1ch;
  }

  td.model .reasoning {
    color: var(--foreground2);
  }

  td.harness {
    color: var(--foreground2);
  }

  td.env {
    color: var(--foreground0);
  }

  td.pct strong {
    color: var(--foreground0);
    font-weight: 600;
  }

  .pct-note {
    color: var(--yellow, var(--foreground2));
    font-size: 0.8rem;
    margin-left: 1ch;
  }

  /* ──────────── Cards grid ──────────── */

  .cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2lh;
  }

  .card {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .card h3 {
    margin: 0.5lh 0;
  }

  .card p {
    color: var(--foreground1);
    margin: 0.5lh 0 1lh;
  }

  .card-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5lh 2ch;
    margin-top: 1lh;
  }

  @media (min-width: 720px) {
    .card-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .card-stats dt {
    color: var(--foreground2);
    font-size: 0.85rem;
  }

  .card-stats dd {
    margin: 0;
    color: var(--foreground0);
  }

  .card-cta {
    color: var(--foreground0);
    margin-top: 1lh;
  }

  .card:hover .card-cta {
    text-decoration: underline;
  }

  /* ──────────── Big stats row ──────────── */

  .bigstats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1lh;
    margin-bottom: 2lh;
  }

  @media (min-width: 720px) {
    .bigstats {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .bigstat-value {
    font-size: 1.6rem;
    color: var(--foreground0);
    margin: 0.5lh 0 0.25lh;
  }

  .bigstat-label {
    color: var(--foreground2);
    font-size: 0.85rem;
  }

  /* ──────────── Task hero meta dl ──────────── */

  .meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25lh 2ch;
    margin: 1lh 0 0;
  }

  .meta dt {
    color: var(--foreground2);
  }

  .meta dd {
    margin: 0;
    color: var(--foreground0);
  }

  /* ──────────── Inline command/code ──────────── */

  pre {
    margin: 1lh 0;
    overflow-x: auto;
  }

  code {
    color: var(--red, var(--foreground0));
  }

  /* ──────────── Status pills ──────────── */

  .status {
    color: var(--green, var(--foreground0));
    font-size: 0.85rem;
  }

  .status.err {
    color: var(--red, var(--foreground0));
  }

  .status.warn {
    color: var(--yellow, var(--foreground0));
  }

  /* ──────────── Back link ──────────── */

  .back {
    color: var(--foreground2);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 1lh;
  }

  .back:hover {
    color: var(--sky, var(--foreground0));
  }

  /* ──────────── Footer ──────────── */

  .footer {
    margin-top: 4lh;
    padding: 1lh 1ch 0;
    border-top: 1px dashed var(--foreground2);
    color: var(--foreground2);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1ch;
    font-size: 0.85rem;
  }

  /* ──────────── Callout (e.g. cheating-incident block) ──────────── */

  .callout {
    border-left: 2px solid var(--red, var(--foreground2));
    padding-left: 2ch;
    margin: 1lh 0;
    color: var(--foreground1);
  }

  .callout strong {
    color: var(--red, var(--foreground0));
  }

  /* ──────────── Layered list (anti-cheat, etc) ──────────── */

  ol.layered,
  ul.layered {
    margin: 1lh 0;
    padding-left: 3ch;
  }

  ol.layered li,
  ul.layered li {
    margin-bottom: 1lh;
    color: var(--foreground1);
  }

  ol.layered li strong,
  ul.layered li strong {
    color: var(--foreground0);
  }

  /* Cheating marker — small red asterisk used on result cells.
     Pairs with a footnote below the table. */
  .cheat-mark {
    color: var(--red, var(--foreground0));
    font-size: 0.85em;
    margin-left: 0.2ch;
    font-weight: 600;
  }
}