/* Терминал. Dark: a green-phosphor CRT — scanlines, glow, a block cursor after the page title, frames drawn like
   box-drawing windows with their titles cut into the line, buttons in [brackets], the player as a status line,
   covers tinted to phosphor. Light: the same session printed out on fan-fold computer paper — green bars, sprocket
   holes down both edges, dot-matrix ink. One face for everything: PT Mono. */
[data-design="terminal"] {
  --bg: #fbfdf6;
  --side: #fbfdf6;
  --card: transparent;
  --card-2: rgb(46 125 50 / 0.07);
  --line: #1f2420;
  --text: #1f2420;
  --muted: #5f6a60;
  --accent: #2e7d32;
  --accent-ink: #fbfdf6;
  --accent-soft: rgb(46 125 50 / 0.1);
  --danger: #b3261e;
  --shadow: none;
  --band: #e1efdb;
  --glow: none;
  --lv1: #8a5a00; --lv2: #1f5f8b; --lv3: #6b3fa0; --lv4: #4b554c; --lv5: #b3261e;
  color-scheme: light;
}
[data-design="terminal"][data-theme="dark"] {
  --bg: #031006;
  --side: #031006;
  --card: transparent;
  --card-2: rgb(57 255 107 / 0.07);
  --line: #1f9e46;
  --text: #39ff6b;
  --muted: #22a64c;
  --accent: #39ff6b;
  --accent-ink: #031006;
  --accent-soft: rgb(57 255 107 / 0.1);
  --danger: #ff5c5c;
  --glow: 0 0 6px rgb(57 255 107 / 0.45);
  --lv1: #ffd54f; --lv2: #7fe7ff; --lv3: #d6a8ff; --lv4: #39ff6b; --lv5: #ff5c5c;
  color-scheme: dark;
}

[data-design="terminal"] body { font: 15px/1.55 "PT Mono", ui-monospace, monospace; text-shadow: var(--glow); }
[data-design="terminal"] h1, [data-design="terminal"] h2, [data-design="terminal"] h3, [data-design="terminal"] .tile-value,
[data-design="terminal"] .btn, [data-design="terminal"] button, [data-design="terminal"] input, [data-design="terminal"] select {
  font-family: "PT Mono", ui-monospace, monospace; letter-spacing: 0; font-weight: 400;
}
[data-design="terminal"] h1, [data-design="terminal"] h2, [data-design="terminal"] h3 { font-weight: 700; }
[data-design="terminal"] *, [data-design="terminal"] *::before { border-radius: 0 !important; }

/* the CRT: scanlines and a darker rim over everything (it never takes a click) */
[data-design="terminal"][data-theme="dark"] body::after {
  content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgb(0 0 0 / 0.55) 100%);
}
/* the printout: green bars that scroll with the text, sprocket holes down both edges */
[data-design="terminal"][data-theme="light"] main {
  background: repeating-linear-gradient(180deg, transparent 0 46px, var(--band) 46px 92px); background-attachment: local;
}
[data-design="terminal"][data-theme="light"] body::before, [data-design="terminal"][data-theme="light"] body::after {
  content: ''; position: fixed; top: 0; bottom: 0; width: 22px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 11px 12px, #c9cfc2 0 4.5px, transparent 5px) 0 0 / 22px 24px repeat-y;
}
[data-design="terminal"][data-theme="light"] body::before { left: 0; border-right: 1px dashed #b9c2b3; }
[data-design="terminal"][data-theme="light"] body::after { right: 0; border-left: 1px dashed #b9c2b3; }
[data-design="terminal"][data-theme="light"] .side { margin-left: 22px; }
[data-design="terminal"][data-theme="light"] main { margin-right: 22px; }

/* the menu: plain lines, "> " in front of where you are */
[data-design="terminal"] .side { border-right: 1px solid var(--line); }
[data-design="terminal"][data-theme="dark"] .logo { filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(3.2) brightness(0.95); }
[data-design="terminal"][data-theme="light"] .logo { filter: grayscale(1) contrast(1.3); }
[data-design="terminal"] .nav a { color: var(--text); padding: 6px 10px; font-weight: 400; }
[data-design="terminal"] .nav a .ic { display: none; }
[data-design="terminal"] .nav a::before { content: '  '; white-space: pre; }
[data-design="terminal"] .nav a.on { background: none; color: var(--text); font-weight: 700; }
[data-design="terminal"] .nav a.on::before { content: '> '; }
[data-design="terminal"] .nav a:hover { background: var(--text); color: var(--bg); text-shadow: none; }
[data-design="terminal"] .side-foot, [data-design="terminal"] .ext-link { color: var(--muted); }

/* the page title, with the cursor blinking after it */
[data-design="terminal"] .head h1 { font-size: clamp(20px, 2.4vw, 26px); }
[data-design="terminal"] .head h1::before { content: '$ '; color: var(--muted); }
[data-design="terminal"] .head h1::after { content: '█'; margin-left: 4px; animation: term-blink 1.06s steps(1) infinite; }
@keyframes term-blink { 50% { opacity: 0; } }
[data-design="terminal"] .head-icon { display: none !important; }

/* frames: box-drawing windows, the title cut into the top line */
[data-design="terminal"] .card, [data-design="terminal"] .hint, [data-design="terminal"] .tile, [data-design="terminal"] .faq-item,
[data-design="terminal"] .pl, [data-design="terminal"] .vote, [data-design="terminal"] .design-card, [data-design="terminal"] .me {
  background: none; border: 1px solid var(--line); box-shadow: none;
}
[data-design="terminal"] .card { position: relative; padding-top: 22px; margin-top: 12px; }
[data-design="terminal"] .card > h3:first-child {
  position: absolute; top: -0.85em; left: 14px; margin: 0; padding: 0 8px; background: var(--bg); font-size: 15px; justify-content: flex-start;
}
[data-design="terminal"][data-theme="light"] .card > h3:first-child { background: var(--bg); }
[data-design="terminal"] .card > h3:first-child .t-sub { margin-left: 10px; }
[data-design="terminal"] .hint .ic, [data-design="terminal"] .tile > .ic { color: var(--text); }
[data-design="terminal"] .tile-value { font-size: 22px; }
[data-design="terminal"] .faq-item[open] { border-style: double; border-width: 3px; }
[data-design="terminal"] .faq-item summary .ic, [data-design="terminal"] .faq-item[open] summary .ic { color: var(--text); }
[data-design="terminal"] .faq-item p { color: var(--text); }
[data-design="terminal"] .thank > .ic, [data-design="terminal"] .thank a { color: var(--text); }
[data-design="terminal"] .thank a { text-decoration: underline; }

/* buttons in [brackets]; hovering or focusing turns the line inverse */
[data-design="terminal"] .btn { border: 0; background: none; color: var(--text); padding: 6px 4px; box-shadow: none; }
[data-design="terminal"] .btn:not(.icon)::before { content: '['; margin-right: 2px; }
[data-design="terminal"] .btn:not(.icon)::after { content: ']'; margin-left: 2px; }
[data-design="terminal"] .btn.icon { border: 1px solid var(--line); }
[data-design="terminal"] .btn:hover, [data-design="terminal"] .btn:focus-visible { background: var(--text); color: var(--bg); text-shadow: none; outline: none; }
[data-design="terminal"] .btn:active { transform: none; }
[data-design="terminal"] .btn.primary { background: var(--accent); color: var(--accent-ink); text-shadow: none; padding-inline: 10px; }
[data-design="terminal"] .btn.danger { color: var(--danger); }
[data-design="terminal"] .btn.danger:hover { background: var(--danger); color: var(--bg); }
[data-design="terminal"] .btn:disabled { opacity: 0.4; background: none; color: var(--text); }
[data-design="terminal"] .ic svg { stroke-width: 1.6; }
[data-design="terminal"] .input { border: 0; border-bottom: 1px dashed var(--line); background: none; padding-inline: 2px; caret-color: var(--text); }
[data-design="terminal"] .input:focus { outline: none; border-bottom-style: solid; }
[data-design="terminal"] :focus-visible { outline: 1px dashed var(--text); outline-offset: 2px; }
[data-design="terminal"] .badge { background: none; border: 1px solid currentColor; padding: 0 6px; }
[data-design="terminal"] .seg { background: none; border: 0; padding: 0; gap: 10px; }
[data-design="terminal"] .seg button { padding: 4px 6px; color: var(--text); }
[data-design="terminal"] .seg button::before { content: '['; } [data-design="terminal"] .seg button::after { content: ']'; }
[data-design="terminal"] .seg button.on { background: var(--text); color: var(--bg); text-shadow: none; }

/* pictures tinted like the screen (or printed in grey on paper) */
[data-design="terminal"][data-theme="dark"] .cover, [data-design="terminal"][data-theme="dark"] .thumb,
[data-design="terminal"][data-theme="dark"] .avatar, [data-design="terminal"][data-theme="dark"] .pl-art img {
  filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(3) brightness(0.85) contrast(1.1);
}
[data-design="terminal"][data-theme="light"] .cover, [data-design="terminal"][data-theme="light"] .thumb,
[data-design="terminal"][data-theme="light"] .avatar, [data-design="terminal"][data-theme="light"] .pl-art img { filter: grayscale(1) contrast(1.25); }
[data-design="terminal"] .avatar { box-shadow: 0 0 0 1px var(--line); }
[data-design="terminal"] .pl-art { background: var(--card-2); color: var(--text); border: 1px solid var(--line); }

/* the hero: a double-ruled box, the cover tinted, the title as plain big type */
[data-design="terminal"] .hero { background: none; border: 3px double var(--line); box-shadow: none; grid-template-columns: minmax(130px, 200px) 1fr; }
[data-design="terminal"] .hero-bg { display: none; }
[data-design="terminal"] .hero .cover { border: 1px solid var(--line); box-shadow: none; }
[data-design="terminal"] .eyebrow { color: var(--text); letter-spacing: 0.04em; }
[data-design="terminal"] .eyebrow::before { content: '['; } [data-design="terminal"] .eyebrow::after { content: ']'; }
[data-design="terminal"] .live-dot { background: var(--text); box-shadow: none; animation: term-blink 1.06s steps(1) infinite; }
[data-design="terminal"] .hero h2 { font-size: clamp(22px, 3vw, 34px); }
[data-design="terminal"] .hero .sub, [data-design="terminal"] .hero .time { color: var(--muted); }
[data-design="terminal"] .radio-down { color: var(--danger); }
[data-design="terminal"] .radio-down::before { content: 'ERR: '; }

/* add to air: a prompt */
[data-design="terminal"] .quick-row { background: none; border: 1px solid var(--line); box-shadow: none; padding-left: 12px; }
[data-design="terminal"] .quick-row:focus-within { border-color: var(--text); box-shadow: none; }
[data-design="terminal"] .quick-row > .ic { display: none; }
[data-design="terminal"] .quick-row::before { content: '>'; font-weight: 700; }
[data-design="terminal"] .quick-row .input { border: 0; }
[data-design="terminal"] .menu { background: var(--bg); border: 3px double var(--line); box-shadow: none; }
[data-design="terminal"] .menu-item:hover, [data-design="terminal"] .menu-item:focus-visible { background: var(--text); color: var(--bg); text-shadow: none; }
[data-design="terminal"] .menu-item:hover .t-sub, [data-design="terminal"] .menu-item:hover .time { color: var(--bg); }
[data-design="terminal"] .menu-title { text-transform: none; letter-spacing: 0; color: var(--muted); }
[data-design="terminal"] .row { border-radius: 0; }
[data-design="terminal"] .row:hover { background: var(--card-2); }
[data-design="terminal"] .row.mine { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--text); }
[data-design="terminal"] .row .n::after { content: '.'; }
[data-design="terminal"] .ch, [data-design="terminal"] .person { border: 1px dashed var(--line); background: none; }
[data-design="terminal"] .ch.has-bot { border-style: solid; background: var(--accent-soft); }
[data-design="terminal"] .tr, [data-design="terminal"] .log-row { border-bottom: 1px dashed var(--line); }
[data-design="terminal"] .tr.mine { background: var(--accent-soft); }
[data-design="terminal"] .chip { background: none; border: 1px solid var(--line); }
[data-design="terminal"] .design-card.on { border-style: double; border-width: 3px; background: var(--accent-soft); }
[data-design="terminal"] .release ul { list-style: none; padding-left: 0; color: var(--text); }
[data-design="terminal"] .release li::before { content: '+ '; color: var(--muted); }
[data-design="terminal"] .version::before { content: '-- '; } [data-design="terminal"] .version::after { content: ' --'; }

/* the player: a status line, inverse */
[data-design="terminal"] .bar { background: var(--text); color: var(--bg); border-top: 0; text-shadow: none; }
[data-design="terminal"] .bar .t-sub, [data-design="terminal"] .bar .time, [data-design="terminal"] .bar .right { color: var(--bg); opacity: 0.85; }
[data-design="terminal"] .bar .thumb { filter: grayscale(1) contrast(1.4); border: 1px solid var(--bg); }
[data-design="terminal"] .listen { background: var(--bg); color: var(--text); width: 42px; height: 42px; text-shadow: var(--glow); }
[data-design="terminal"] .right input { accent-color: var(--bg); }
[data-design="terminal"] .toast { background: var(--text); color: var(--bg); border: 0; text-shadow: none; box-shadow: none; }

@media (max-width: 860px) {
  [data-design="terminal"] .hero { grid-template-columns: 100%; }
  [data-design="terminal"] .tabs { background: var(--bg); border-top: 1px solid var(--line); }
  [data-design="terminal"] .tabs a { color: var(--text); }
  [data-design="terminal"] .tabs a.on { background: var(--text); color: var(--bg); text-shadow: none; }
  [data-design="terminal"][data-theme="light"] body::before, [data-design="terminal"][data-theme="light"] body::after { width: 12px; background-size: 12px 20px; background-image: radial-gradient(circle at 6px 10px, #c9cfc2 0 3px, transparent 3.5px); }
  [data-design="terminal"][data-theme="light"] main { margin-right: 12px; margin-left: 12px; }
}