/* ─────────────────────────────────────────────────────────────────────────
   ekisde.dev — yorha.css
   NieR:Automata-inspired skin for the PUBLIC pages only.
   Loaded by base.html when the page is public (html[data-yorha]); the
   admin, finance, casino, luna and fun apps never see this file.
   Default = dark (burnt umber + bone). [data-theme="light"] = the beige menu.
   ───────────────────────────────────────────────────────────────────────── */

/* Self-hosted (OFL) so the public pages never contact Google. Latin subset:
   covers English and Spanish. */
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("../fonts/jost-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Share Tech Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/share-tech-mono-latin.woff2") format("woff2");
}

html[data-yorha] {
  --bg:          #1c1b17;
  --bg-elevated: #24231e;
  --bg-soft:     #2d2b25;
  --text:        #d3ceb5;
  --text-muted:  #a8a38b;
  --text-faint:  #98947d;
  --border:      #5a5644;
  --border-soft: #3b3930;
  --accent:      #ece7cd;
  --accent-ink:  #c9c4a9;
  --accent-soft: rgb(211 206 181 / 0.12);
  --ok:          #9aab7e;
  --warn:        #cfa85a;
  --bad:         #cf7f6a;
  --yo-ink:      #1c1b17;      /* text on inverted (bone) fills */
  --yo-fill:     #d3ceb5;      /* the bone bar */
  --yo-line:     rgb(211 206 181 / 0.07);
  --yo-glow:     rgb(211 206 181 / 0.05);
  --radius: 0;
  --radius-sm: 0;
  --container-width: 980px;
  --font-serif: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}

html[data-yorha][data-theme="light"] {
  --bg:          #d1cdb7;
  --bg-elevated: #c8c4ac;
  --bg-soft:     #bfbba3;
  --text:        #2b2922;
  --text-muted:  #3d3a30;
  --text-faint:  #4c493e;
  --border:      #8f8b76;
  --border-soft: #aeaa93;
  --accent:      #2a2720;
  --accent-ink:  #3f3b32;
  --ok:          #414d2f;
  --warn:        #5c4513;
  --bad:         #7c3221;
  --yo-ink:      #d1cdb7;
  --yo-fill:     #454138;
  --yo-line:     rgb(69 65 56 / 0.09);
  --yo-glow:     rgb(69 65 56 / 0.07);
  color-scheme: light;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

body.yorha {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  background-image: none;
  transition: background-color 240ms ease, color 240ms ease;
}
body.yorha ::selection { background: var(--yo-fill); color: var(--yo-ink); }
body.yorha .ember-field { display: none; }

/* fixed atmosphere: hatch lines + soft vignette + one slow scan band */
.yo-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.yo-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, var(--yo-line) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 30%, transparent 40%, rgb(0 0 0 / 0.22) 100%);
}
.yo-bg::after {
  content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 18%;
  background: linear-gradient(to bottom, transparent, var(--yo-glow), transparent);
  animation: yo-scan 9s linear infinite;
}
html[data-theme="light"] .yo-bg::before {
  background:
    repeating-linear-gradient(0deg, var(--yo-line) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 30%, transparent 45%, rgb(69 65 56 / 0.16) 100%);
}
@keyframes yo-scan { to { transform: translateY(650%); } }

body.yorha .site-shell { position: relative; z-index: 1; }

/* ── Type ────────────────────────────────────────────────────────────────── */

body.yorha h1, body.yorha h2, body.yorha h3, body.yorha h4 {
  font-family: var(--font-serif);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.2;
  color: var(--text);
}
body.yorha h1 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
body.yorha h1 em, body.yorha h1 .amp { font-style: normal; color: var(--text-faint); }
body.yorha h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
body.yorha h3 { font-size: 1rem; letter-spacing: 0.12em; }
body.yorha h3 a:hover { color: var(--accent); }
body.yorha p { color: var(--text-muted); }
body.yorha a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

body.yorha .kicker,
body.yorha .section-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--text-faint);
}
body.yorha .kicker::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  margin-right: 0.7rem; background: var(--text-faint); vertical-align: 0.05em;
}

/* ── Header / nav ────────────────────────────────────────────────────────── */

body.yorha .site-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  position: relative;
}
body.yorha .site-header::after {              /* second, dashed rule = HUD bar */
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  border-bottom: 1px dashed var(--border-soft);
}
body.yorha .logo { font-family: var(--font-mono); letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.86rem; }
body.yorha .logo-mark { display: none; }
body.yorha .logo::before { display: none; }
body.yorha .logo:hover { color: var(--text); }

body.yorha .site-nav a {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-bottom: 0;
  padding: 0.3rem 0.65rem;
  position: relative;
  transition: background-color 120ms ease, color 120ms ease;
}
body.yorha .site-nav a::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  border: 1px solid currentColor; margin-right: 0.5rem; vertical-align: 0.08em;
}
body.yorha .site-nav a:hover,
body.yorha .site-nav a:focus-visible,
body.yorha .site-nav a[aria-current="page"] {
  background: var(--yo-fill); color: var(--yo-ink); border-bottom: 0;
}
body.yorha .site-nav a:hover::before,
body.yorha .site-nav a[aria-current="page"]::before { background: currentColor; }
body.yorha .nav-pakko { opacity: 1; }

/* two-row header: brand + tools on top (tools flush right), nav below */
body.yorha .header-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "logo tools" "nav nav";
  align-items: center; row-gap: 0.85rem; padding: 1rem 0 0.8rem;
}
body.yorha .yo-brand { grid-area: logo; justify-self: start; display: flex; align-items: center; gap: 0.75rem; }
body.yorha .header-tools { grid-area: tools; justify-self: end; display: flex; align-items: center; gap: 0.6rem; }
body.yorha .header-tools .yo-theme, body.yorha .header-tools .yo-sound, body.yorha .header-tools .yo-find, body.yorha .header-tools .yo-skin { margin-left: 0; }
body.yorha .site-nav {
  grid-area: nav; gap: 0.4rem 1.35rem; padding-top: 0.8rem; border-top: 1px dashed var(--border-soft);
}
body.yorha .site-nav a:last-child {            /* "now": drop the old inline divider */
  opacity: 1 !important; border-left: 0 !important; margin-left: 0 !important; padding-left: 0.65rem !important;
}

body.yorha .lang-switch { font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; }
body.yorha .lang-switch span[aria-current="true"] { color: var(--yo-ink); background: var(--yo-fill); padding: 0.1rem 0.4rem; font-weight: 400; }

.yo-hint { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 0.6rem; }

.yo-theme, .yo-sound, .yo-find, .yo-skin {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: transparent; color: var(--text-muted); border: 1px solid var(--text-muted);
  padding: 0.25rem 0.55rem; cursor: pointer; margin-left: 0.85rem;
  transition: background-color 120ms ease, color 120ms ease;
}
.yo-sound { margin-left: 0.6rem; }
.yo-sound[aria-pressed="true"] { color: var(--text); border-color: var(--text); }
.yo-theme:hover, .yo-theme:focus-visible, .yo-sound:hover, .yo-sound:focus-visible, .yo-find:hover, .yo-find:focus-visible,
.yo-skin:hover, .yo-skin:focus-visible { background: var(--yo-fill); color: var(--yo-ink); }

/* ── Sections & hero ─────────────────────────────────────────────────────── */

body.yorha main section { border-top: 1px dashed var(--border-soft); }
body.yorha .hero { border-bottom: 0; position: relative; }
body.yorha .hero .hero-inner { position: relative; padding-left: 1.6rem; }
body.yorha .hero .hero-inner::before {         /* vertical marker rail */
  content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem;
  width: 3px; background: var(--yo-fill);
}
body.yorha .hero .hero-inner::after {
  content: ""; position: absolute; left: -3px; top: 0.35rem; width: 9px; height: 9px; background: var(--bg);
  border: 1px solid var(--text);
}
body.yorha .hero-subtitle { font-family: var(--font-mono); font-style: normal; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--text-muted); }
body.yorha .hero-description { font-size: 1rem; line-height: 1.75; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

body.yorha .button {
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; font-weight: 400;
  border: 1px solid var(--text-muted); border-radius: 0; color: var(--text);
  position: relative; padding: 0.6rem 1.15rem 0.6rem 1.55rem;
}
body.yorha .button::before {
  content: ""; position: absolute; left: 0.6rem; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; background: currentColor; transition: transform 160ms ease;
}
body.yorha .button:hover, body.yorha .button:focus-visible {
  background: var(--yo-fill); color: var(--yo-ink); border-color: var(--yo-fill);
}
body.yorha .button:hover::before { transform: translateX(3px); }
body.yorha .button-primary { background: var(--yo-fill); color: var(--yo-ink); border-color: var(--yo-fill); }
body.yorha .button-primary:hover, body.yorha .button-primary:focus-visible {
  background: transparent; color: var(--text); border-color: var(--text);
}
body.yorha .button-ghost {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem;
  text-decoration-color: var(--border);
}
body.yorha .text-link { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }

/* ── Lists: the menu-row look ────────────────────────────────────────────── */

body.yorha .log-item,
body.yorha .project-entry, body.yorha .file-entry, body.yorha .doc-entry {
  border: 0; border-top: 1px dashed var(--border);
  padding: 1.1rem 1rem 1.1rem 1.35rem;
  position: relative; background: transparent;
  transition: background-color 120ms ease, color 120ms ease;
}
body.yorha .log-item:last-child,
body.yorha .project-entry:last-child, body.yorha .file-entry:last-child, body.yorha .doc-entry:last-child {
  border-bottom: 1px dashed var(--border);
}
body.yorha .log-item::before {
  content: ""; position: absolute; left: 0.55rem; top: 1.55rem; width: 6px; height: 6px;
  border: 1px solid var(--text-faint);
}
body.yorha .log-item h3, body.yorha .log-item h3 a { font-family: var(--font-serif); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.12em; }
body.yorha .log-item:hover, body.yorha .log-item:focus-within, body.yorha .log-item.is-selected,
body.yorha .project-entry:hover, body.yorha .file-entry:hover, body.yorha .doc-entry:hover,
body.yorha .is-selected {
  background: var(--yo-fill); border-color: var(--yo-fill);
}
body.yorha .log-item:hover::before, body.yorha .log-item.is-selected::before { background: var(--yo-ink); border-color: var(--yo-ink); }
body.yorha .log-item:hover *, body.yorha .log-item:focus-within *, body.yorha .is-selected *,
body.yorha .project-entry:hover *, body.yorha .file-entry:hover *, body.yorha .doc-entry:hover * {
  color: var(--yo-ink) !important; border-color: var(--yo-ink) !important;
}

body.yorha .tag-list li, body.yorha .meta-pill, body.yorha .filter-chip, body.yorha .status-chip,
body.yorha .file-type, body.yorha .doc-type {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem;
}
body.yorha .filter-chip.is-active { color: var(--yo-ink); background: var(--yo-fill); padding: 0.1rem 0.5rem; border-bottom-color: transparent; }
body.yorha .filter-chip.is-active::before { color: var(--yo-ink); }

body.yorha .focus-list dt, body.yorha .about-stack dt, body.yorha .project-meta-label {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--text-faint);
}
body.yorha .focus-list, body.yorha .about-stack { border-top: 1px dashed var(--border); }
body.yorha .focus-list dd, body.yorha .about-stack dd { border-bottom: 1px dashed var(--border-soft); padding-bottom: 0.7rem; }

body.yorha .now-strip { border: 1px solid var(--border); background: transparent; padding: 0.7rem 1rem; }
body.yorha .now-strip .label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; }
body.yorha .now-strip .dot { border-radius: 0; }

body.yorha .prose h3 { font-family: var(--font-serif); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 300; }
body.yorha .prose li::before { content: "■"; font-size: 0.55rem; top: 0.45rem; }
body.yorha .prose p em, body.yorha .prose em { font-family: var(--font-sans); font-style: italic; }
body.yorha .project-content li { list-style: square !important; }

body.yorha .contact-card h2 { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 400; font-size: 0.9rem; }
body.yorha .contact-list li { border-bottom: 1px dashed var(--border-soft); }

body.yorha .flash-message { border: 1px solid var(--border); border-left-width: 4px; background: var(--bg-elevated); font-family: var(--font-mono); }
body.yorha .notfound-art { color: var(--text-muted); }

/* forms (subscribe, search, contact) */
body.yorha input:not([type="checkbox"]):not([type="radio"]), body.yorha textarea, body.yorha select {
  background: transparent; color: var(--text); border: 0; border-bottom: 1px solid var(--text-muted);
  border-radius: 0; font-family: var(--font-mono); padding: 0.6rem 0.2rem;
}
body.yorha input:focus, body.yorha textarea:focus, body.yorha select:focus {
  outline: none; background: var(--bg-elevated); border-bottom-color: var(--accent);
}
body.yorha .form-group label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; }

body.yorha :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Footer & cookie banner ──────────────────────────────────────────────── */

body.yorha .site-footer { border-top: 1px solid var(--border); position: relative; }
body.yorha .site-footer::before {
  content: "END OF TRANSMISSION"; position: absolute; left: 50%; top: -0.62rem; transform: translateX(-50%);
  background: var(--bg); padding: 0 0.7rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.3em; color: var(--text-faint);
}
body.yorha .footer-title { text-transform: uppercase; letter-spacing: 0.22em; }
body.yorha .footer-links a { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }
body.yorha .footer-links a:hover { color: var(--yo-ink); background: var(--yo-fill); border-bottom-color: transparent; }
body.yorha .footer-sig p { font-family: var(--font-mono); font-style: normal; letter-spacing: 0.14em; }

body.yorha .cookie-banner { background: var(--bg-elevated); border-top: 1px solid var(--text-muted); border-radius: 0; }

/* ── About: the transmission feed ("video", drawn live in canvas) ─────────── */

.yo-about-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.25rem; align-items: center; }
.yo-feed { margin: 0; position: relative; border: 1px solid var(--text-muted); background: var(--bg-elevated); }
.yo-feed-head, .yo-feed-foot {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted); padding: 0.4rem 0.7rem;
}
.yo-feed-head { border-bottom: 1px dashed var(--border); }
.yo-feed-foot { border-top: 1px dashed var(--border); }
.yo-rec { display: inline-flex; align-items: center; gap: 0.45rem; }
.yo-rec::before { content: ""; width: 7px; height: 7px; background: var(--bad); animation: yo-blink 1.2s steps(2, jump-none) infinite; }
@keyframes yo-blink { 50% { opacity: 0.15; } }
.yo-feed-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
.yo-feed-screen canvas { display: block; width: 100%; height: 100%; }
.yo-feed-screen::after {                         /* CRT lines over the picture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.16) 0 1px, transparent 1px 3px);
}
.yo-corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--text); z-index: 2; pointer-events: none; }
.yo-corner.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.yo-corner.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.yo-corner.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.yo-corner.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.yo-feed:not(.is-live) .yo-feed-screen::before {
  content: "NO SIGNAL"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-mono); letter-spacing: 0.4em; font-size: 0.8rem; color: var(--text-faint);
}

/* ── Boot overlay (home, first visit of the session) ─────────────────────── */

.yo-boot {
  position: fixed; inset: 0; z-index: 999; background: var(--bg); color: var(--text);
  display: grid; place-content: center; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.18em;
  text-transform: uppercase; cursor: pointer; transition: opacity 420ms ease, visibility 420ms;
}
.yo-boot.is-done { opacity: 0; visibility: hidden; }
.yo-boot pre { margin: 0; font: inherit; line-height: 2; color: var(--text-muted); }
.yo-boot .ok { color: var(--text); }
.yo-boot-bar { margin-top: 1.4rem; height: 6px; width: min(70vw, 340px); border: 1px solid var(--text-muted); }
.yo-boot-bar i { display: block; height: 100%; width: 0; background: var(--yo-fill); }
.yo-boot-skip { margin-top: 1rem; color: var(--text-faint); font-size: 0.62rem; }
html:not(.yo-booting) .yo-boot { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .yo-about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body.yorha .site-header { position: static; }
  /* five header controls (with the look button) must wrap instead of running over the logo */
  body.yorha .header-inner { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; }
  body.yorha .header-tools { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.4rem; }
  body.yorha .site-nav { gap: 0.3rem 0.9rem; }
  body.yorha .site-nav a { padding: 0.25rem 0.5rem; }
  body.yorha .site-footer::before { display: none; }
}

/* ── Arrival flicker + leaving wipe ──────────────────────────────────────── */

body.yorha .site-shell { animation: yo-in 320ms steps(5, end) both; }
@keyframes yo-in { from { opacity: 0; } to { opacity: 1; } }

.yo-wipe { position: fixed; inset: 0; z-index: 998; pointer-events: none; display: flex; flex-direction: column; }
.yo-wipe i { flex: 1; background: var(--yo-fill); transform: scaleX(0); transform-origin: left; transition: transform 140ms cubic-bezier(.7, 0, .3, 1); }
html.yo-leaving .yo-wipe { pointer-events: auto; }
html.yo-leaving .yo-wipe i { transform: scaleX(1); }

/* ── 404: signal lost ────────────────────────────────────────────────────── */

.yo-glitch { position: relative; display: inline-block; }
.yo-glitch::before, .yo-glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none;
}
.yo-glitch::before { color: var(--bad); animation: yo-glitch-a 2.6s steps(1, end) infinite; }
.yo-glitch::after  { color: var(--text-muted); animation: yo-glitch-b 3.1s steps(1, end) infinite; }
@keyframes yo-glitch-a {
  0%, 88%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  90% { clip-path: inset(18% 0 55% 0); transform: translateX(-5px); }
  94% { clip-path: inset(62% 0 8% 0);  transform: translateX(4px); }
}
@keyframes yo-glitch-b {
  0%, 80%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  82% { clip-path: inset(40% 0 30% 0); transform: translateX(6px); }
  86% { clip-path: inset(8% 0 78% 0);  transform: translateX(-3px); }
}
.yo-404-code { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 1.2rem; }
.yo-404 .notfound-art { border: 1px dashed var(--border); padding: 0.9rem 1.1rem; margin: 1.2rem 0; overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  body.yorha .site-shell { animation: none; }
  .yo-glitch::before, .yo-glitch::after { animation: none; display: none; }
  .yo-bg::after, .yo-rec::before { animation: none; }
  body.yorha * { transition-duration: 0.01ms !important; }
}

/* if yorha.js never loads, don't leave the boot screen up */
html.yo-booting .yo-boot { animation: yo-boot-timeout 0.01s 4s forwards; }
@keyframes yo-boot-timeout { to { opacity: 0; visibility: hidden; } }

/* ── Login card (admin/login) ────────────────────────────────────────────── */

body.yorha .card {
  position: relative; background: var(--bg-elevated); border: 1px solid var(--text-muted);
  border-radius: 0; padding: 2rem 1.75rem; box-shadow: none;
}
body.yorha .card:hover, body.yorha .card:focus-within { border-color: var(--text); box-shadow: none; }
body.yorha .card::before, body.yorha .card::after {           /* HUD corner brackets */
  content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--text); pointer-events: none;
}
body.yorha .card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
body.yorha .card::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
body.yorha .card h1 { font-size: clamp(1.5rem, 4vw, 2rem) !important; }
body.yorha .card .hero-actions { gap: 0.6rem 1.2rem; }

/* ── Live status readout (home) ──────────────────────────────────────────── */

.yo-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--border); }
.yo-gauge { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.95rem 1rem; border-right: 1px dashed var(--border-soft); border-bottom: 1px dashed var(--border-soft); margin: 0 -1px -1px 0; min-width: 0; }
.yo-g-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); }
.yo-g-val { font-family: var(--font-sans); font-weight: 300; font-size: 1.5rem; letter-spacing: 0.08em; color: var(--text); font-variant-numeric: tabular-nums; }
.yo-g-sub { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.yo-bar { display: block; height: 10px; border: 1px solid var(--text-muted); padding: 2px; }
.yo-bar i { display: block; height: 100%; width: var(--p, 0%); transition: width 700ms steps(14, end);
  background: repeating-linear-gradient(90deg, var(--yo-fill) 0 5px, transparent 5px 8px); }
.yo-bar.is-hot i { background: repeating-linear-gradient(90deg, var(--bad) 0 5px, transparent 5px 8px); }
.yo-status-note { margin: 0.7rem 0 0; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
.yo-status.is-lost .yo-g-val[data-yo="ping"] { color: var(--bad); }

/* ── Mobile menu (pause-menu style) ──────────────────────────────────────── */

.yo-menu { display: none; }
@media (max-width: 720px) {
  .yo-menu {
    display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
    background: var(--yo-fill); color: var(--yo-ink); border: 1px solid var(--yo-fill); padding: 0.25rem 0.7rem; cursor: pointer;
  }
  .yo-menu[aria-expanded="true"] { background: transparent; color: var(--text); border-color: var(--text); }
  body.yorha .yo-sound { display: none; }                  /* no hover on touch; save the room */

  html.yo-js body.yorha .site-nav { display: none; }
  html.yo-js.yo-menu-open body.yorha .site-nav {
    display: flex; flex-direction: column; gap: 0; padding-top: 0.4rem; counter-reset: yo-n;
  }
  body.yorha .site-nav a {
    display: flex; align-items: center; padding: 0.85rem 0.6rem; border-bottom: 1px dashed var(--border-soft);
    font-size: 0.82rem; letter-spacing: 0.2em;
  }
  body.yorha .site-nav a::before {
    content: counter(yo-n, decimal-leading-zero); counter-increment: yo-n;
    width: auto; height: auto; border: 0; margin-right: 1rem; color: var(--text-faint); font-size: 0.7rem; vertical-align: 0;
  }
  body.yorha .site-nav a:hover::before, body.yorha .site-nav a[aria-current="page"]::before { background: none; color: inherit; }
  body.yorha .site-nav a:last-child { padding-left: 0.6rem !important; }
}

/* ── Fun toys + Mundial ──────────────────────────────────────────────────── */
/* (the two party games, Wavelength and Un 10 pero, keep their own look) */

body.yorha .fun-yesno-answer, body.yorha .fun-excuse-text, body.yorha .fun-compliment-text {
  font-style: normal; font-weight: 300; text-transform: uppercase; letter-spacing: 0.1em;
}
body.yorha .fun-score { font-weight: 300; letter-spacing: 0.06em; }
body.yorha .fun-card-icon, body.yorha .fun-result-card .fun-card-icon { filter: grayscale(1); }
body.yorha .fun-card h3 { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.95rem; }
body.yorha .fun-score-bar, body.yorha .fun-sus-meter { border: 1px solid var(--text-muted); background: transparent; height: 12px; }
body.yorha .fun-score-fill { background: repeating-linear-gradient(90deg, var(--yo-fill) 0 5px, transparent 5px 8px); }
body.yorha .fun-yes { color: var(--ok); }
body.yorha .fun-no  { color: var(--bad); }

body.yorha .mundial-score { font-family: var(--font-sans); font-weight: 300; letter-spacing: 0.1em; }
body.yorha .mundial-split { border: 1px solid var(--text-muted); border-radius: 0; height: 34px; }
body.yorha .mundial-split div { color: var(--yo-ink); }
body.yorha .mundial-split .a { background: var(--yo-fill); }
body.yorha .mundial-split .d { background: var(--bg-soft); color: var(--text); }
body.yorha .mundial-split .b { background: var(--bad); color: var(--yo-ink); }

/* ── Find button + search overlay ────────────────────────────────────────── */

.yo-find kbd { font: inherit; border: 1px solid currentColor; padding: 0 0.3rem; margin-left: 0.45rem; opacity: 0.8; }
html.yo-search-open { overflow: hidden; }
.yo-search { position: fixed; inset: 0; z-index: 990; background: rgb(0 0 0 / 0.62); display: flex; align-items: flex-start; justify-content: center; padding: 9vh 1rem 1rem; }
.yo-search[hidden] { display: none; }
.yo-search-panel { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 12vh); display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--text-muted); animation: yo-in 220ms steps(4, end) both; }
.yo-search-panel .yo-corner { z-index: 1; }
.yo-search-head { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.9rem; border-bottom: 1px dashed var(--border);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.yo-search-close { font: inherit; letter-spacing: inherit; text-transform: inherit; background: transparent; color: var(--text-muted); border: 1px solid var(--text-muted); padding: 0.1rem 0.5rem; cursor: pointer; }
.yo-search-close:hover { background: var(--yo-fill); color: var(--yo-ink); }
.yo-search-input { width: 100%; box-sizing: border-box; padding: 1rem 0.9rem; font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.06em;
  background: transparent; color: var(--text); border: 0; border-bottom: 1px solid var(--text-muted); border-radius: 0; outline: none; }
.yo-search-input::placeholder { color: var(--text-faint); }
.yo-search-input:focus { background: var(--bg-elevated); border-bottom-color: var(--text); }
.yo-search-list { list-style: none; margin: 0; padding: 0.3rem 0; overflow-y: auto; min-height: 3rem; }
.yo-search-group { padding: 0.7rem 0.9rem 0.3rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); }
.yo-search-item a { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.9rem 0.6rem 1.6rem; text-decoration: none; border-top: 1px dashed transparent; position: relative; }
.yo-search-item a::before { content: ""; position: absolute; left: 0.75rem; top: 1.05rem; width: 6px; height: 6px; border: 1px solid var(--text-faint); }
.yo-search-item.is-selected a::before { background: var(--yo-ink); border-color: var(--yo-ink); }
.yo-s-title { font-family: var(--font-sans); font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.yo-s-hint { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yo-search-all .yo-s-title { text-transform: none; letter-spacing: 0.06em; font-family: var(--font-mono); font-size: 0.8rem; }
.yo-search-none { padding: 1rem 0.9rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
.yo-search-foot { padding: 0.5rem 0.9rem; border-top: 1px dashed var(--border); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 720px) {
  .yo-find kbd { display: none; }
  .yo-search { padding-top: 4vh; }
  .yo-search-panel { max-height: calc(100dvh - 8vh); }
}

/* ── Docs: rendered markdown, TOC, code, progress ────────────────────────── */

.yo-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.yo-progress i { display: block; height: 100%; width: 0; background: var(--yo-fill); }
.yo-readtime { margin: 0.6rem 0 0; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); }

.yo-doc-layout > aside { position: sticky; top: 8.5rem; max-height: calc(100dvh - 10rem); overflow-y: auto; }
.yo-toc { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.yo-toc summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.6rem; }
.yo-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.yo-toc li.lvl-3 { padding-left: 0.9rem; }
.yo-toc a { display: block; padding: 0.25rem 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-muted); text-decoration: none; border-left: 2px solid var(--border-soft); }
.yo-toc a:hover { color: var(--text); border-left-color: var(--text-muted); }
.yo-toc a.is-active { color: var(--yo-ink); background: var(--yo-fill); border-left-color: var(--yo-fill); }

.yo-doc { line-height: 1.75; }
.yo-doc > *:first-child { margin-top: 0; }
.yo-doc h2 { margin: 2.2rem 0 0.8rem; padding-top: 0.4rem; scroll-margin-top: 9rem; }
.yo-doc h2::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--text-faint); margin-right: 0.7rem; vertical-align: 0.05em; }
.yo-doc h3 { margin: 1.8rem 0 0.6rem; scroll-margin-top: 9rem; }
.yo-doc p { color: var(--text); margin: 0 0 1rem; }
.yo-doc hr { border: 0; border-top: 1px dashed var(--border); margin: 2rem 0; }
.yo-doc a { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-faint); }
.yo-doc a:hover { background: var(--yo-fill); color: var(--yo-ink); text-decoration: none; }
.yo-doc strong { font-weight: 500; letter-spacing: 0.04em; }
.yo-doc code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-soft); padding: 0.05rem 0.35rem; }
.yo-doc blockquote { margin: 0 0 1rem; padding: 0.2rem 1rem; border-left: 3px solid var(--text-muted); }
.yo-doc ul, .yo-doc ol { margin: 0 0 1rem; padding-left: 1.4rem !important; }
.yo-doc ol li { list-style: decimal !important; }
.yo-doc li { color: var(--text); margin-bottom: 0.3rem; }

.yo-doc pre.yo-code { position: relative; margin: 0 0 1.2rem; padding: 2rem 1rem 0.9rem; overflow-x: auto; background: var(--bg-elevated); border: 1px solid var(--text-muted); }
.yo-doc pre.yo-code::before { content: attr(data-lang); position: absolute; top: 0.45rem; left: 1rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); }
.yo-doc pre.yo-code code { background: none; padding: 0; font-size: 0.82rem; line-height: 1.6; color: var(--text); white-space: pre; }
.yo-copy { position: absolute; top: 0.3rem; right: 0.4rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  background: transparent; color: var(--text-muted); border: 1px solid var(--text-muted); padding: 0.1rem 0.5rem; cursor: pointer; }
.yo-copy:hover, .yo-copy:focus-visible { background: var(--yo-fill); color: var(--yo-ink); }
.tk-com { color: var(--text-faint); font-style: italic; }
.tk-str { color: var(--ok); }
.tk-num { color: var(--warn); }
.tk-kw, .tk-flag { color: var(--warn); }
.tk-key { color: var(--text); font-weight: 500; }
.tk-fn { color: var(--accent-ink); }
.tk-var { color: var(--text-muted); text-decoration: underline dotted; }

.yo-table-wrap { overflow-x: auto; margin: 0 0 1.2rem; }
.yo-doc table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
.yo-doc th { text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--text-muted); padding: 0.5rem 0.7rem; }
.yo-doc td { padding: 0.5rem 0.7rem; border-bottom: 1px dashed var(--border-soft); color: var(--text); vertical-align: top; }

@media (max-width: 820px) {
  .yo-doc-layout > aside { position: static; max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .yo-search-panel { animation: none; }
}

/* ── Home background animation (canvas) + preview switcher ───────────────── */

.yo-bgfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.yo-bgbtn { position: fixed; left: 0.8rem; bottom: var(--yo-bg-bottom, 0.8rem); z-index: 985; padding: 0.3rem 0.65rem; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--text-muted); }
.yo-bgbtn:hover, .yo-bgbtn:focus-visible, .yo-bgbtn[aria-expanded="true"] { background: var(--yo-fill); color: var(--yo-ink); border-color: var(--yo-fill); }
.yo-bgmenu { position: fixed; left: 0.8rem; bottom: calc(var(--yo-bg-bottom, 0.8rem) + 2.4rem); z-index: 985; min-width: 9.5rem; display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--text-muted); animation: yo-in 180ms steps(4, end) both; }
.yo-bgmenu[hidden] { display: none; }
.yo-bgmenu button { display: flex; align-items: center; gap: 0.6rem; text-align: left; padding: 0.5rem 0.8rem; cursor: pointer; background: transparent; color: var(--text);
  border: 0; border-bottom: 1px dashed var(--border-soft); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }
.yo-bgmenu button:last-child { border-bottom: 0; }
.yo-bgmenu button::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; flex: none; }
.yo-bgmenu button.is-on::before { background: currentColor; }
.yo-bgmenu button:hover, .yo-bgmenu button:focus-visible { background: var(--yo-fill); color: var(--yo-ink); }
@media (prefers-reduced-motion: reduce) { .yo-bgmenu { animation: none; } }

/* ── About: unit designation ─────────────────────────────────────────────── */

.yo-unit { margin: 0.9rem 0 0; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); }
.yo-unit::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--ok); margin-right: 0.7rem; vertical-align: 0.05em; }

/* ── Erase-local-data dialog ─────────────────────────────────────────────── */

.yo-dialog { position: fixed; inset: 0; z-index: 990; background: rgb(0 0 0 / 0.62); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.yo-dialog-panel { position: relative; width: min(440px, 100%); padding: 1.6rem 1.5rem 1.3rem; background: var(--bg); border: 1px solid var(--text-muted); animation: yo-in 220ms steps(4, end) both; }
.yo-dialog-panel h2 { margin: 0 0 0.7rem; font-size: 1rem; }
.yo-dialog-panel p { margin: 0 0 1.3rem; color: var(--text-muted); font-size: 0.92rem; line-height: 1.65; }
.yo-dialog-actions { display: flex; gap: 0.7rem; justify-content: flex-end; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .yo-dialog-panel { animation: none; } }

/* ── Logo: the E is its own control (hover/tap = local-data menu); "/Ekisde" is the home link ── */

.yo-markbox { position: relative; display: inline-flex; }
.yo-mark { width: 28px; height: 28px; padding: 0; border: 0; cursor: pointer; background: url("../img/logo-mark.svg") center / contain no-repeat;
  transition: transform 260ms steps(4, end); }
.yo-markbox:hover .yo-mark, .yo-markbox:focus-within .yo-mark, .yo-mark[aria-expanded="true"] { transform: rotate(90deg); }   /* the E "looks down" */
.yo-mark-menu { display: none; position: absolute; left: 0; top: 100%; padding-top: 10px; z-index: 70; }
.yo-markbox:hover .yo-mark-menu, .yo-markbox:focus-within .yo-mark-menu, .yo-mark[aria-expanded="true"] + .yo-mark-menu { display: block; animation: yo-in 200ms steps(4, end) both; }
.yo-mark-menu button { white-space: nowrap; display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--bg-elevated); color: var(--text); border: 1px solid var(--text-muted); padding: 0.55rem 0.9rem; cursor: pointer; }
.yo-mark-menu button::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; }
.yo-mark-menu button:hover, .yo-mark-menu button:focus-visible { background: var(--yo-fill); color: var(--yo-ink); border-color: var(--yo-fill); }
@media (prefers-reduced-motion: reduce) { .yo-mark { transition: none; } .yo-mark-menu { animation: none !important; } }

/* ── Project cover image ─────────────────────────────────────────────────── */

.yo-cover { position: relative; margin: 0 0 1.6rem; border: 1px solid var(--text-muted); background: var(--bg-elevated); }
.yo-cover img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.yo-cover::before, .yo-cover::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--text); pointer-events: none; }
.yo-cover::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.yo-cover::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.yo-admin-thumb { display: block; max-width: 260px; max-height: 160px; margin-bottom: 0.6rem; border: 1px solid var(--text-muted); }