/*!
 * TimeTales · world-scp.css
 * SCP:RP: Akte, Terminal, Beton. Aktiv mit <html data-world="scp">.
 * Nur Token-Überschreibungen und der Welt-Look gemeinsamer Bausteine. Seitenlayouts gehören
 * in page-<seite>.css.
 *
 * Schrift: Archivo schmal (Breite um 68%), sehr fett, Versalien. Meta und Leiste in IBM Plex Mono.
 * Graus ohne Blaustich. Alles ist scharfkantig: --radius und --radius-pill sind 0.
 * Text auf Alarmrot ist dunkel (--accent-ink), nur so erreicht kleine Schrift Kontrast AA.
 */

html[data-world="scp"] {
  /* Flächen: neutral */
  --ink-0: #070707;
  --ink-1: #0d0d0d;
  --ink-2: #151515;
  --ink-3: #202020;

  --line: rgb(255 255 255 / .1);
  --line-strong: rgb(255 255 255 / .22);

  --text: #ededed;
  --text-2: #acacac;
  --text-3: #858585;

  /* Akzent: Alarmrot */
  --accent: #e23b3b;
  --accent-ink: #0b0505;

  --radius: 0px;
  --radius-pill: 0px;

  /* Überschriften */
  --display-weight: 850;
  --display-stretch: 68%;
  --display-tracking: -.004em;
  --display-leading: .9;
  --display-case: uppercase;
  --display-scale: 1.14;
  --display-cap: 17vw;
  --display-pad: 0em;

  --heading-weight: 820;
  --heading-stretch: 72%;
  --heading-tracking: .002em;
  --heading-leading: .98;

  --em-style: normal;

  /* Meta: Mono */
  --meta-family: var(--font-mono);
  --meta-weight: 500;
  --meta-size: .75rem;
  --meta-tracking: .06em;
  --meta-case: uppercase;

  /* Leiste: Terminal-Zeile */
  --navlink-family: var(--font-mono);
  --navlink-weight: 500;
  --navlink-size: .75rem;
  --navlink-tracking: .06em;
  --navlink-case: uppercase;

  /* Buttons: Schild */
  --btn-family: var(--font-display);
  --btn-weight: 800;
  --btn-size: 1rem;
  --btn-stretch: 82%;
  --btn-tracking: .055em;
  --btn-case: uppercase;
}

/* Weltname in der Leiste */
html[data-world="scp"] .tt-nav__world {
  font-size: 1.125rem;
  font-stretch: 75%;
  font-weight: 850;
  letter-spacing: .02em;
}

/* Buttons: Eckklammern statt Rahmen. Acht kleine Farbflächen zeichnen vier Winkel. */
html[data-world="scp"] .tt-btn:not(.tt-btn--text) {
  --bracket: 9px;
}

html[data-world="scp"] .tt-btn:not(.tt-btn--text)::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Der Button schneidet am Innenrand ab (overflow: hidden). Die Klammern liegen deshalb innen,
     dank background-origin exakt auf der eigenen 1px-Linie dieses Pseudo-Elements. */
  border: 1px solid transparent;
  background-origin: border-box;
  pointer-events: none;
  background:
    linear-gradient(currentColor, currentColor) left top / var(--bracket) 1px,
    linear-gradient(currentColor, currentColor) left top / 1px var(--bracket),
    linear-gradient(currentColor, currentColor) right top / var(--bracket) 1px,
    linear-gradient(currentColor, currentColor) right top / 1px var(--bracket),
    linear-gradient(currentColor, currentColor) left bottom / var(--bracket) 1px,
    linear-gradient(currentColor, currentColor) left bottom / 1px var(--bracket),
    linear-gradient(currentColor, currentColor) right bottom / var(--bracket) 1px,
    linear-gradient(currentColor, currentColor) right bottom / 1px var(--bracket);
  background-repeat: no-repeat;
}

html[data-world="scp"] .tt-btn--ghost {
  --btn-border: transparent;
  --btn-bg: color-mix(in srgb, var(--ink-0) 55%, transparent);
}

html[data-world="scp"] .tt-btn--ghost::after {
  border-color: var(--line);
}

/* Primär: roter Block, Klammern sitzen innen */
html[data-world="scp"] .tt-btn--primary:not(.tt-btn--text)::after {
  inset: 4px;
  opacity: .7;
}

html[data-world="scp"] .tt-btn--primary {
  --btn-fill: var(--text);
  --btn-fill-fg: var(--accent-ink);
}

html[data-world="scp"] .tt-btn--sm {
  --bracket: 7px;
  font-size: .875rem;
}

html[data-world="scp"] .tt-btn--sm.tt-btn--primary:not(.tt-btn--text)::after {
  inset: 3px;
}

html[data-world="scp"] .tt-btn.is-disabled::after,
html[data-world="scp"] .tt-btn[aria-disabled="true"]::after,
html[data-world="scp"] .tt-btn:disabled::after {
  opacity: .45;
  border-color: transparent;
}

/* Schmale Schnitte haben einen sehr engen Wortabstand: in Versalien etwas öffnen */
html[data-world="scp"] :is(.tt-btn, .tt-nav__world, .tt-display, .tt-h1, .tt-h2, .tt-h3, .tt-h4, .tt-footer__claim) {
  word-spacing: .1em;
}

/* Fokus: kantig, ohne Abstand nach außen verschwimmt nichts */
html[data-world="scp"] :focus-visible {
  outline-offset: 4px;
}

/* Chips: Etiketten statt Pillen */
html[data-world="scp"] .tt-chip {
  height: 26px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--ink-0) 60%, transparent);
}

/* Leiste: harte Linie, kein weicher Verlauf darunter */
html[data-world="scp"] .tt-nav::before {
  background: color-mix(in srgb, var(--ink-0) 88%, transparent);
  border-bottom-color: var(--line-strong);
}

@media (max-width: 899.98px) {
  html[data-world="scp"].js .tt-nav__link {
    font-size: clamp(2.75rem, 15vw, 5rem);
    line-height: .96;
    letter-spacing: 0;
  }

  html[data-world="scp"].js .tt-nav__list > li {
    padding-block: .05em;
  }
}