/* Neo-Brutalism: a gig poster. Thick ink borders, hard offset shadows, flat bold colours (the brand's cabbage green,
   yellow, pink, blue), chunky Dela Gothic One over plain Golos Text. The masthead runs across the top; the boldness
   goes to the hero, a yellow poster with the cover pinned on at an angle. Light: pale cabbage paper. Dark: a night
   poster, ultramarine with white ink and green shadows. */
[data-design="brutal"] {
  --ink: #000;
  --paper: #eef2e2;
  --card: #fff;
  --card-2: #f4f6ec;
  --text: #000;
  --muted: #3d4237;
  --accent: #8cd44e;
  --accent-ink: #000;
  --accent-soft: #e3f5cf;
  --yellow: #ffd23f;
  --pink: #ff5fa2;
  --blue: #2f5bff;
  --poster-ink: #000;
  --hard: 6px 6px 0 var(--ink);
  --danger: #e0006b;
  --line: #000;
  --bg: var(--paper);
  --side: var(--card);
  --lv1: #c98a00; --lv2: #1d4ed8; --lv3: #7c3aed; --lv4: #4b5544; --lv5: #e0006b;
  color-scheme: light;
}
[data-design="brutal"][data-theme="dark"] {
  --ink: #f4f4f0;
  --paper: #11143b;
  --card: #1c2160;
  --card-2: #262c78;
  --text: #f4f4f0;
  --muted: #b9bde8;
  --accent-soft: #2b3a52;
  --hard: 6px 6px 0 var(--accent);
  --danger: #ff5fa2;
  --line: #f4f4f0;
  --lv1: #ffd23f; --lv2: #7fa2ff; --lv3: #c4a1ff; --lv4: #c8cce8; --lv5: #ff5fa2;
  color-scheme: dark;
}

[data-design="brutal"] body { font-family: "Golos Text", system-ui, sans-serif; grid-template: "side" auto "main" 1fr "bar" auto / 100%; }
[data-design="brutal"] h1, [data-design="brutal"] h2, [data-design="brutal"] h3,
[data-design="brutal"] .tile-value, [data-design="brutal"] .release h3 { font-family: "Dela Gothic One", "Golos Text", sans-serif; font-weight: 400; letter-spacing: 0; }

/* ---------- the masthead (the sidebar, laid across the top) ---------- */
[data-design="brutal"] .side {
  flex-direction: row; align-items: center; gap: 18px; padding: 12px max(20px, calc((100% - 1180px) / 2));
  background: var(--card); border-right: 0; border-bottom: 3px solid var(--ink); overflow: visible;
}
[data-design="brutal"] .brand { padding: 0; flex: none; }
[data-design="brutal"] .logo { width: auto; height: 46px; max-width: none; }
[data-design="brutal"] .nav { display: flex; flex-wrap: wrap; gap: 8px; }
[data-design="brutal"] .nav a {
  padding: 8px 14px; border: 2.5px solid var(--ink); border-radius: 8px; color: var(--text); background: var(--card);
  box-shadow: 3px 3px 0 var(--ink); font-weight: 700; transition: transform 0.08s, box-shadow 0.08s;
}
[data-design="brutal"] .nav a:hover { background: var(--accent-soft); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
[data-design="brutal"] .nav a.on { background: var(--yellow); color: #000; }
[data-design="brutal"] .nav a .ic svg { width: 18px; height: 18px; }
[data-design="brutal"] .side-foot { display: none; }

/* ---------- the page ---------- */
[data-design="brutal"] main { padding: 30px max(20px, calc((100% - 1180px) / 2)) 64px; }
[data-design="brutal"] .head { margin-bottom: 26px; }
[data-design="brutal"] .head h1 { font-size: clamp(28px, 4vw, 46px); line-height: 1; }
[data-design="brutal"] .me { border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); background: var(--card); }

/* buttons press into their shadow */
[data-design="brutal"] .btn {
  border: 2.5px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--text);
  box-shadow: 3px 3px 0 var(--ink); transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}
[data-design="brutal"] .btn:hover { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
[data-design="brutal"] .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
[data-design="brutal"] .btn.primary { background: var(--accent); color: #000; border-color: var(--ink); }
[data-design="brutal"] .btn.primary:hover { filter: none; }
[data-design="brutal"] .btn.danger { background: var(--pink); color: #000; }
[data-design="brutal"] .btn:disabled { opacity: 0.5; box-shadow: none; transform: none; border-color: var(--ink); }
[data-design="brutal"] .input { border: 2.5px solid var(--ink); border-radius: 8px; background: var(--card); }
[data-design="brutal"] .input:focus { outline: 3px solid var(--blue); outline-offset: 2px; border-color: var(--ink); }
[data-design="brutal"] :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
[data-design="brutal"] .badge { border: 2px solid var(--ink); background: var(--c, var(--accent)); color: #000; }
[data-design="brutal"] .avatar { box-shadow: 0 0 0 2.5px var(--ink); }

/* cards: one weight of border, one shadow; nothing soft */
[data-design="brutal"] .card, [data-design="brutal"] .tile, [data-design="brutal"] .faq-item, [data-design="brutal"] .pl,
[data-design="brutal"] .hint, [data-design="brutal"] .vote, [data-design="brutal"] .design-card {
  border: 3px solid var(--ink); border-radius: 12px; background: var(--card); box-shadow: var(--hard);
}
[data-design="brutal"] .card h3 { font-size: 18px; }
[data-design="brutal"] .tile:nth-child(1) { background: var(--accent); color: #000; }
[data-design="brutal"] .tile:nth-child(2) { background: var(--yellow); color: #000; }
[data-design="brutal"] .tile:nth-child(3) { background: var(--pink); color: #000; }
[data-design="brutal"] .tile:nth-child(4) { background: #9ec5ff; color: #000; }
[data-design="brutal"] .tile .t-sub, [data-design="brutal"] .tile > .ic { color: #000; }
[data-design="brutal"] .tile-value { font-size: 26px; }
[data-design="brutal"] .hint { color: var(--text); }
[data-design="brutal"] .hint .ic { color: var(--text); }
[data-design="brutal"] .vote { background: var(--blue); color: #fff; }
[data-design="brutal"] .vote .t-sub { color: #dfe6ff; }
[data-design="brutal"] .vote .progress { background: rgb(255 255 255 / 0.3); height: 10px; border: 2px solid #000; }
[data-design="brutal"] .vote .progress i { background: var(--yellow); }
[data-design="brutal"] .pl:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); border-color: var(--ink); }
[data-design="brutal"] .pl-art { border: 3px solid var(--ink); border-radius: 8px; background: var(--blue); color: #fff; }
[data-design="brutal"] .faq-item[open] { border-color: var(--ink); background: var(--accent-soft); }
[data-design="brutal"] .faq-item summary .ic { color: var(--text); }
[data-design="brutal"] .faq-item p { color: var(--text); }
[data-design="brutal"] .thank > .ic { color: var(--pink); }
[data-design="brutal"] .thank a { color: var(--text); text-decoration: underline 3px var(--pink); text-underline-offset: 4px; }

/* the hero: a yellow poster, the cover pinned on at an angle, the title set as big as it goes */
[data-design="brutal"] .hero {
  background: var(--yellow); color: #000; border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 10px 10px 0 var(--ink); grid-template-columns: minmax(150px, 250px) 1fr; overflow: visible;
}
[data-design="brutal"][data-theme="dark"] .hero { box-shadow: 10px 10px 0 var(--pink); }
[data-design="brutal"] .hero-bg { display: none; }
[data-design="brutal"] .cover-wrap { transform: rotate(-3deg); }
[data-design="brutal"] .hero .cover { border: 3px solid #000; border-radius: 6px; box-shadow: 6px 6px 0 #000; background: #fff; }
[data-design="brutal"] .hero h2 { font-family: "Dela Gothic One", sans-serif; font-size: clamp(30px, 4.6vw, 60px); line-height: 1.02; margin: 14px 0 8px; }
[data-design="brutal"] .hero .sub, [data-design="brutal"] .hero .ext-link { color: #000; }
[data-design="brutal"] .hero .time { color: #000; }
[data-design="brutal"] .eyebrow {
  display: inline-flex; width: fit-content; padding: 4px 12px; border-radius: 6px; background: #000; color: var(--yellow);
  letter-spacing: 0.02em; text-transform: none; font-size: 13px; transform: rotate(-1.5deg);
}
[data-design="brutal"] .live-dot { background: var(--pink); }
[data-design="brutal"] .radio-down { color: #000; background: var(--pink); padding: 2px 6px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-design="brutal"] .hero .btn { background: #fff; color: #000; border-color: #000; box-shadow: 3px 3px 0 #000; }
[data-design="brutal"] .hero .btn.primary { background: var(--accent); }
[data-design="brutal"] .hero .btn.danger { background: var(--pink); }

/* add to air, lists, channels */
[data-design="brutal"] .quick-row { border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--hard); background: var(--card); }
[data-design="brutal"] .quick-row:focus-within { border-color: var(--ink); box-shadow: 6px 6px 0 var(--blue); }
[data-design="brutal"] .quick-row > .ic { color: var(--text); }
[data-design="brutal"] .row { border-radius: 8px; border: 2px solid transparent; }
[data-design="brutal"] .row:hover { background: var(--accent-soft); border-color: var(--ink); }
[data-design="brutal"] .row.mine { background: var(--yellow); color: #000; box-shadow: none; border-color: var(--ink); }
[data-design="brutal"] .row.mine .t-sub { color: #000; }
[data-design="brutal"] .thumb { border: 2px solid var(--ink); border-radius: 6px; }
[data-design="brutal"] .ch { border: 2.5px solid var(--ink); border-radius: 10px; }
[data-design="brutal"] .ch.has-bot { background: var(--accent); color: #000; border-color: var(--ink); }
[data-design="brutal"] .ch.has-bot .t-sub, [data-design="brutal"] .ch.has-bot .ch-name .ic { color: #000; }
[data-design="brutal"] .person { border: 2px solid var(--ink); background: var(--card); color: var(--text); }
[data-design="brutal"] .menu { border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--hard); background: var(--card); }
[data-design="brutal"] .menu-item:hover, [data-design="brutal"] .menu-item:focus-visible { background: var(--yellow); color: #000; }
[data-design="brutal"] .menu-title { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); }
[data-design="brutal"] .seg { border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); background: var(--card); }
[data-design="brutal"] .seg button { border-radius: 6px; color: var(--text); }
[data-design="brutal"] .seg button.on { background: var(--ink); color: var(--paper); }
[data-design="brutal"] .tr { border-bottom: 2px solid var(--ink); }
[data-design="brutal"] .tr.th { color: var(--text); }
[data-design="brutal"] .tr.mine { background: var(--yellow); color: #000; }
[data-design="brutal"] .log-row { border-bottom: 2px dashed var(--ink); }
[data-design="brutal"] .chip { border: 2px solid var(--ink); background: var(--card); }
[data-design="brutal"] .design-card { padding: 10px; }
[data-design="brutal"] .design-card.on { background: var(--yellow); color: #000; box-shadow: 6px 6px 0 var(--blue); }
[data-design="brutal"] .design-card.on .t-sub { color: #000; }
[data-design="brutal"] .release li::marker { color: var(--pink); }
[data-design="brutal"] .release h3 .badge { background: var(--pink); }

/* the player bar */
[data-design="brutal"] .bar { background: var(--card); border-top: 3px solid var(--ink); }
[data-design="brutal"] .listen {
  border: 3px solid var(--ink); border-radius: 10px; background: var(--accent); color: #000; box-shadow: 3px 3px 0 var(--ink);
}
[data-design="brutal"] .listen:active { transform: translate(3px, 3px); box-shadow: none; }
[data-design="brutal"] .center .time { color: var(--text); }
[data-design="brutal"] .right input { accent-color: var(--blue); }
[data-design="brutal"] .toast { border: 3px solid var(--ink); border-radius: 10px; box-shadow: var(--hard); background: var(--yellow); color: #000; }

@media (max-width: 860px) {
  [data-design="brutal"] body { grid-template: "main" 1fr "bar" auto "tabs" auto / 100%; }
  [data-design="brutal"] .side { display: none; }
  [data-design="brutal"] main { padding: 20px 16px 40px; }
  [data-design="brutal"] .tabs { background: var(--card); border-top: 3px solid var(--ink); }
  [data-design="brutal"] .tabs a { color: var(--text); border-radius: 8px; }
  [data-design="brutal"] .tabs a.on { background: var(--yellow); color: #000; }
  [data-design="brutal"] .hero { grid-template-columns: 100%; box-shadow: 6px 6px 0 var(--ink); }
  [data-design="brutal"] .cover-wrap { transform: rotate(-2deg); }
}
[data-design="brutal"] .quick-row .input, [data-design="brutal"] .quick-row .input:focus { border: 0; outline: none; background: none; }