/* ═══════════════════════════════════════════════════════════════
   bevels.css — Win98 / Aqua / PS2 hybrid bevel layer
   Layered ON TOP of components.css; targets specific elements.
   ═══════════════════════════════════════════════════════════════ */

@layer components {

  /* ── shared bevel mixin variables ─────────────────────── */
  :root {
    --bevel-light: rgba(255, 255, 255, 0.45);
    --bevel-light-2: rgba(255, 255, 255, 0.18);
    --bevel-dark: rgba(0, 0, 0, 0.55);
    --bevel-dark-2: rgba(0, 0, 0, 0.28);
  }
  [data-mode="light"] {
    --bevel-light: rgba(255, 255, 255, 0.85);
    --bevel-light-2: rgba(255, 255, 255, 0.5);
    --bevel-dark: rgba(60, 40, 20, 0.4);
    --bevel-dark-2: rgba(60, 40, 20, 0.18);
  }

  /* ── BUTTONS — Aqua-gel + PS2 chamfer ─────────────────── */
  .btn {
    border-radius: 6px;  /* slight chamfer */
    padding: 9px 18px;
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--bg-pane) 30%, rgba(255,255,255,0.18)) 0%,
        var(--bg-pane) 48%,
        color-mix(in oklch, var(--bg-pane) 70%, rgba(0,0,0,0.25)) 100%);
    border: 1px solid var(--line-edge);
    box-shadow:
      inset 0 1px 0 var(--bevel-light),
      inset 0 -1px 0 var(--bevel-dark-2),
      inset 1px 0 0 var(--bevel-light-2),
      inset -1px 0 0 var(--bevel-dark-2),
      0 1px 0 rgba(0,0,0,0.4),
      0 2px 6px rgba(0,0,0,0.35);
    position: relative;
  }
  /* glossy aqua highlight */
  .btn::before {
    content: "";
    position: absolute;
    left: 1px; right: 1px; top: 1px;
    height: 45%;
    border-radius: 5px 5px 50% 50% / 5px 5px 100% 100%;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.32) 0%,
      rgba(255,255,255,0.08) 70%,
      transparent 100%);
    pointer-events: none;
  }
  .btn:active {
    box-shadow:
      inset 0 1px 0 var(--bevel-dark-2),
      inset 0 -1px 0 var(--bevel-light-2),
      inset 1px 0 0 var(--bevel-dark-2),
      inset -1px 0 0 var(--bevel-light-2),
      0 0 0 rgba(0,0,0,0);
    transform: translateY(1px);
  }

  .btn-primary {
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--accent-hot) 90%, white) 0%,
        var(--accent) 50%,
        color-mix(in oklch, var(--accent) 60%, black) 100%);
    border-color: color-mix(in oklch, var(--accent) 50%, black);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -1px 0 rgba(0,0,0,0.35),
      0 0 18px var(--accent-glow),
      0 2px 6px rgba(0,0,0,0.45);
  }

  /* ── PILLS → beveled rectangles (the AI tell-killer) ───── */
  .pill {
    border-radius: 4px;
    padding: 6px 12px;
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0.10) 0%,
        var(--bg-pane) 50%,
        rgba(0,0,0,0.18) 100%);
    border: 1px solid var(--line-edge);
    box-shadow:
      inset 0 1px 0 var(--bevel-light),
      inset 0 -1px 0 var(--bevel-dark-2),
      inset 1px 0 0 var(--bevel-light-2),
      inset -1px 0 0 var(--bevel-dark-2),
      0 1px 0 rgba(0,0,0,0.35);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .pill .pill-bullet { border-radius: 1px; width: 5px; height: 5px; }
  .pill:hover { transform: translateY(-1px); border-color: var(--accent); }
  .pill:active {
    transform: translateY(1px);
    box-shadow:
      inset 0 1px 2px rgba(0,0,0,0.4),
      0 0 0 rgba(0,0,0,0);
  }

  /* ── INPUTS — Win98 sunken ──────────────────────────────── */
  .capsule-form {
    border-radius: 4px;
    padding: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
    border: 1px solid;
    border-color: var(--bevel-dark) var(--bevel-light-2) var(--bevel-light-2) var(--bevel-dark);
    box-shadow:
      inset 1px 1px 0 rgba(0,0,0,0.35),
      inset -1px -1px 0 rgba(255,255,255,0.06);
  }
  .capsule-form input {
    padding: 10px 12px;
    color: var(--text-primary);
  }
  .capsule-form button {
    border-radius: 0 3px 3px 0;
    margin: 2px;
    padding: 8px 16px;
    background: linear-gradient(180deg,
      color-mix(in oklch, var(--accent-hot) 85%, white),
      var(--accent),
      color-mix(in oklch, var(--accent) 65%, black));
    border: 1px solid color-mix(in oklch, var(--accent) 40%, black);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -1px 0 rgba(0,0,0,0.4);
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  }

  /* ── HUD chip → chamfered metal ─────────────────────────── */
  .hud {
    border-radius: 6px;
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--bg-pane) 30%, rgba(255,255,255,0.10)) 0%,
        var(--bg-pane) 60%,
        color-mix(in oklch, var(--bg-pane) 80%, rgba(0,0,0,0.3)) 100%);
    box-shadow:
      inset 0 1px 0 var(--bevel-light),
      inset 0 -1px 0 var(--bevel-dark-2),
      0 1px 0 rgba(0,0,0,0.35),
      0 8px 28px rgba(0,0,0,0.4);
    border: 1px solid var(--line-edge);
  }

  /* ── CAPSULE (email slide-in) ──────────────────────────── */
  .capsule {
    border-radius: 8px;
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--bg-pane-strong) 60%, rgba(255,255,255,0.10)),
        var(--bg-pane-strong));
    box-shadow:
      inset 0 1px 0 var(--bevel-light),
      inset 0 -1px 0 var(--bevel-dark-2),
      0 1px 0 rgba(0,0,0,0.4),
      0 16px 48px rgba(0,0,0,0.5);
    border: 1px solid var(--line-edge);
  }
  .capsule-close {
    border-radius: 3px;
    width: 22px; height: 22px;
    border: 1px solid;
    border-color: var(--bevel-light-2) var(--bevel-dark) var(--bevel-dark) var(--bevel-light-2);
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.2));
  }
  .capsule-close:active {
    border-color: var(--bevel-dark) var(--bevel-light-2) var(--bevel-light-2) var(--bevel-dark);
  }

  /* ── CARDS (signal grid + featured release) ─────────────── */
  .signal, .featured-card {
    border-radius: 8px;
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--bg-pane) 55%, rgba(255,255,255,0.06)) 0%,
        var(--bg-pane) 30%,
        color-mix(in oklch, var(--bg-pane) 80%, rgba(0,0,0,0.18)) 100%);
    box-shadow:
      inset 0 1px 0 var(--bevel-light),
      inset 0 -1px 0 var(--bevel-dark-2),
      inset 1px 0 0 var(--bevel-light-2),
      inset -1px 0 0 var(--bevel-dark-2),
      0 1px 0 rgba(0,0,0,0.35),
      0 12px 32px rgba(0,0,0,0.4);
  }
  /* horizontal "screw" detail at corners — PS2 vibe */
  .signal::after {
    content: "";
    position: absolute;
    top: 8px; right: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.5), rgba(0,0,0,0.6) 70%);
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.5);
    pointer-events: none;
    opacity: 0.4;
  }

  /* ── SCHEDULE ROWS — embossed dividers ──────────────────── */
  .schedule-row {
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg,
      transparent,
      var(--bevel-dark) 20%,
      var(--bevel-dark) 80%,
      transparent) 1;
    box-shadow: 0 1px 0 var(--bevel-light-2);
    padding: 10px 6px;
  }
  .schedule-row:last-child { border-bottom: 0; box-shadow: none; }

  /* ── GLOSSARY CARDS — chamfered ─────────────────────────── */
  .glossary-row {
    border-radius: 6px;
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--bg-pane) 40%, rgba(255,255,255,0.08)),
        var(--bg-pane) 50%,
        color-mix(in oklch, var(--bg-pane) 80%, rgba(0,0,0,0.18)));
    box-shadow:
      inset 0 1px 0 var(--bevel-light),
      inset 0 -1px 0 var(--bevel-dark-2),
      0 1px 0 rgba(0,0,0,0.3);
  }

  /* ── STATUS TICKER ─────────────────────────────────────── */
  .ticker {
    margin: var(--s-7) 0 var(--s-3);
    height: 30px;
    overflow: hidden;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
    border: 1px solid;
    border-color: var(--bevel-dark) var(--bevel-light-2) var(--bevel-light-2) var(--bevel-dark);
    box-shadow:
      inset 1px 1px 0 rgba(0,0,0,0.35),
      inset -1px -1px 0 rgba(255,255,255,0.05);
    position: relative;
    display: flex;
    align-items: center;
  }
  .ticker::before {
    content: "● Saß";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    padding: 0 10px;
    display: flex; align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--accent);
    /* Opaque so the scrolling track passes BEHIND, not through, the
       TX label. Was a 0.6/0.4-alpha gradient — text bled through. */
    background: #04050a;
    border-right: 1px solid var(--line-edge);
    box-shadow: 1px 0 0 rgba(255,255,255,0.05);
    z-index: 2;
    text-shadow: 0 0 8px var(--accent-glow);
  }
  .ticker-track {
    display: flex;
    /* width: max-content lets the track grow as wide as its contents
       need, instead of being clamped to the parent's width (which would
       leave gaps when scrolled). */
    width: max-content;
    gap: 48px;
    white-space: nowrap;
    /* 180s = 3× the original 60s because we now repeat content 6× and
       still translate(-50%) per cycle. Net visual speed is the same. */
    animation: ticker-scroll 180s linear infinite;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    will-change: transform;
  }
  .ticker-track span {
    display: inline-flex; align-items: center; gap: 8px;
  }
  .ticker-track span::before {
    content: "▸";
    color: var(--accent);
    font-size: 9px;
  }
  [data-motion="still"] .ticker-track { animation: none; }

  /* Light-mode ticker — invert the bezel so it reads against a sky-blue
     backdrop. Background goes opaque-pale; text and TX label go dark.
     Same shape and animation, just inverted contrast. */
  [data-mode="light"] .ticker {
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
    border-color: rgba(0,0,0,0.20) rgba(0,0,0,0.10) rgba(0,0,0,0.10) rgba(0,0,0,0.20);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,0.6),
      inset -1px -1px 0 rgba(0,0,0,0.06),
      0 1px 3px rgba(0,0,0,0.08);
  }
  [data-mode="light"] .ticker::before {
    background: rgba(255,255,255,0.95);
    border-right-color: rgba(0,0,0,0.18);
    box-shadow: 1px 0 0 rgba(0,0,0,0.04);
  }
  [data-mode="light"] .ticker-track {
    color: rgba(20,28,42,0.85);
  }
  @keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ── PAGE HEADER timestamp ─────────────────────────────── */
  .page-stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--s-3);
    padding: 4px 10px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
    border: 1px solid;
    border-color: var(--bevel-dark) var(--bevel-light-2) var(--bevel-light-2) var(--bevel-dark);
    box-shadow:
      inset 1px 1px 0 rgba(0,0,0,0.3),
      inset -1px -1px 0 rgba(255,255,255,0.06);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .page-stamp::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
  }
}