/* ==========================================================================
   Arknights: Endfield — theme

   Talos-II, the frontier: an industrial field interface. Same network core
   as THE FINALS (ui.css), a different skin — Endfield yellow on near-black,
   technical mono labels, chamfered panels, hazard-stripe accents, square
   (not leaning) headings, and operator art in the yellow duotone behind the
   top of every page.
   ========================================================================== */
@layer tokens {
  :root {
    --bg: #08090a;
    --bg-2: #0c0d0e;
    --s1: #111214;
    --s2: #16181a;
    --s3: #1e2023;
    --s4: #282b2f;
    --s5: #33373c;

    --acc: #f5d400;
    --acc-hi: #ffe43d;
    --acc-lo: #c9ae00;
    --acc-ink: #141100;
    --acc-rgb: 245 212 0;
    --hi: #4fd8e8;
    --hi-ink: #031416;

    --display-stretch: 100%;
    --num-stretch: 75%;
    --cut: 10px;

    --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    --lean: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    --cut-tr: var(--chamfer);
    --cut-bl: var(--chamfer);
    --hazard: repeating-linear-gradient(-45deg, var(--acc) 0 6px, #0000 6px 12px);
    --stripes: repeating-linear-gradient(90deg, transparent 0 39px, #ffffff05 39px 40px);
  }
}

@layer components {
  /* Panels and tiles are chamfered on two corners, like Endfield's terminals. */
  .panel, .kpi { --panel-shape: var(--chamfer); }
  .kpi { clip-path: var(--chamfer); }
  .panel.is-round, .modal-panel .panel { --panel-shape: none; }

  /* Primary actions: solid yellow plates with dark ink. */
  .btn-primary { clip-path: var(--chamfer); border-radius: 2px; box-shadow: 0 8px 24px -12px rgb(var(--acc-rgb) / .9); }
  .btn-primary.btn-sm { --cut: 7px; }
  .btn-hi { clip-path: var(--chamfer); }

  /* Headings stand square: uppercase, tight, no lean. */
  .phead-title, .phead h1:not(.phead-title), .hero-title, .pf-name, .ph-name { transform: none; letter-spacing: .01em; }
  .lt-title::before { width: 10px; height: 10px; border-radius: 0; background: var(--acc); box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% 100%); }
  .eyebrow { color: var(--acc); }
  .eyebrow::before { width: 16px; height: 4px; background: var(--hazard); }

  /* Labels read like terminal readouts. */
  .kpi-l, .lt-title small, .crumbs, .panel-h .meta { letter-spacing: .14em; }

  .tag-new, .tag-pro, .live { border-radius: 0; clip-path: var(--lean); padding-inline: 8px; }
  .tag-new { background: rgb(var(--acc-rgb) / .16); color: var(--acc); }

  /* Podium: gold stays gold, the rest in Endfield tones. */
  .pos.p1, .pos.is-1 { background: linear-gradient(160deg, #fff6b0, var(--acc) 55%, #b39300); color: var(--acc-ink); box-shadow: 0 0 18px -4px var(--acc); }

  /* Tile accent: a short hazard strip on the top edge. */
  .kpi::after { content: ''; position: absolute; top: 0; left: 0; width: 46px; height: 3px; background: var(--hazard); opacity: .9; }
  .kpi.no-cut::after { display: none; }

  /* Active nav link: yellow rule with a soft glow. */
  .hdr-link.is-active::after { box-shadow: 0 0 14px rgb(var(--acc-rgb) / .6); }

  /* Selection and focus in the brand yellow read too bright on text. */
  ::selection { background: rgb(var(--acc-rgb) / .3); color: #fff; }

  /* Head lights: a cool yellow wash from the top right. */
  body > main::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 480px; z-index: -1; pointer-events: none;
    background:
      radial-gradient(42% 80% at 86% -12%, rgb(var(--acc-rgb) / .14), transparent 70%),
      radial-gradient(28% 60% at 58% -20%, color-mix(in srgb, var(--hi) 7%, transparent), transparent 70%),
      radial-gradient(32% 60% at 0% -10%, rgb(var(--acc-rgb) / .06), transparent 70%),
      var(--stripes);
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent);
  }

  /* Page art: an operator mosaic, yellow duotone, melted into the page from
     the left and from below. One per page (set on .page-<name> below). */
  body > main::after {
    content: ""; position: absolute; inset: 0 0 auto; height: 380px; z-index: -2; pointer-events: none;
    background: var(--page-art, none) var(--art-x, 100%) 0 / auto 400px repeat-x;
    opacity: .38;
    -webkit-mask-image: linear-gradient(180deg, #000 15%, #0008 50%, transparent 92%), linear-gradient(90deg, transparent 15%, #0005 45%, #000 78%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 15%, #0008 50%, transparent 92%), linear-gradient(90deg, transparent 15%, #0005 45%, #000 78%);
    mask-composite: intersect;
    animation: art-in 1.2s var(--ease-out) both;
  }
  @keyframes art-in { from { opacity: 0; } }
  .page-player > main::after, body:has(.ef-banner.has-art) > main::after { display: none; }
  @media (max-width: 720px) { body > main::after { height: 260px; background-size: auto 280px; opacity: .32; } }
}