/* 18+: the palettes and manners of two sites one doesn't open in company, none of their names, logos or content.
   Light: a pale-green 2000s imageboard, small Arial, blue underlined links, grey form buttons, boxes with a green
   header strip. Dark: black, charcoal cards, the orange, bold white Arial. In both the menu moves to a bar along the
   top, as on those sites, and the logo is a wordmark of our own two words in their manner. */
[data-design="adult"] {
  --bg: #aae5a4;
  --side: #8ccf86;
  --card: #bdeab7;
  --card-2: #d3f2cf;
  --line: rgb(30 80 30 / 0.22);
  --edge: #6fb86a;
  --text: #000;
  --muted: #2f4a2d;
  --link: #0039b3;
  --accent: #1d6b1d;
  --accent-ink: #fff;
  --accent-soft: rgb(29 107 29 / 0.14);
  --danger: #b3000c;
  --shadow: none;
  --lv1: #8a5a00; --lv2: #0039b3; --lv3: #6b2fa0; --lv4: #2f4a2d; --lv5: #b3000c;
  color-scheme: light;
}
[data-design="adult"][data-theme="dark"] {
  --bg: #000;
  --side: #000;
  --card: #1b1b1b;
  --card-2: #2f2f2f;
  --line: #2f2f2f;
  --edge: transparent;
  --text: #fff;
  --muted: #c6c6c6;
  --link: #ff9000;
  --accent: #ff9000;
  --accent-ink: #000;
  --accent-soft: rgb(255 144 0 / 0.15);
  --danger: #ff4d4d;
  --lv1: #ff9000; --lv2: #5cb8ff; --lv3: #c9a0ff; --lv4: #c6c6c6; --lv5: #ff4d4d;
  color-scheme: dark;
}

[data-design="adult"] body { grid-template: "side" auto "main" 1fr "bar" auto / 100%; font: 14px/1.45 Arial, Helvetica, sans-serif; }
[data-design="adult"] h1, [data-design="adult"] h2, [data-design="adult"] h3, [data-design="adult"] .tile-value { font-family: Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: 0; }
[data-design="adult"] .head h1 { font-size: 24px; }
[data-design="adult"] a { color: var(--link); }

/* the bar along the top: the wordmark, the menu as plain links, the radio's link at the end */
[data-design="adult"] .side { flex-direction: row; align-items: center; gap: 20px; padding: 10px clamp(12px, 3vw, 32px); border-right: 0; border-bottom: 1px solid var(--edge); overflow: visible; }
[data-design="adult"] .brand { align-items: baseline; padding: 0; flex: none; text-decoration: none; font: 700 30px/1 Arial, Helvetica, sans-serif; letter-spacing: -0.03em; }
[data-design="adult"] .brand .logo { display: none !important; }
[data-design="adult"] .brand::before { content: 'Kachan'; }
[data-design="adult"] .brand::after { content: 'Radio'; }
[data-design="adult"] .brand::before, [data-design="adult"] .brand::after { color: #2e8b2e; text-shadow: 2px 2px 0 #145214, -1px -1px 0 #e6ffe3; }
[data-design="adult"][data-theme="dark"] .brand::before { color: #fff; text-shadow: none; }
[data-design="adult"][data-theme="dark"] .brand::after { margin-left: 3px; padding: 1px 6px 3px; border-radius: 4px; background: #ff9000; color: #000; text-shadow: none; }
[data-design="adult"] .nav { display: flex; flex-wrap: wrap; gap: 2px 4px; }
[data-design="adult"] .nav .ic { display: none; }
[data-design="adult"] .nav a { padding: 6px 9px; border-radius: 0; color: var(--link); font-weight: 400; text-decoration: underline; }
[data-design="adult"] .nav a:hover { background: none; color: var(--text); }
[data-design="adult"] .nav a.on { background: none; color: var(--text); font-weight: 700; text-decoration: none; }
[data-design="adult"][data-theme="dark"] .nav a { color: #fff; font-weight: 700; text-decoration: none; text-transform: uppercase; font-size: 13px; letter-spacing: 0.02em; box-shadow: inset 0 -3px 0 transparent; }
[data-design="adult"][data-theme="dark"] .nav a:hover { color: #ff9000; }
[data-design="adult"][data-theme="dark"] .nav a.on { color: #ff9000; box-shadow: inset 0 -3px 0 #ff9000; }
[data-design="adult"] .side-foot { margin: 0 0 0 auto; padding: 0; font-size: 12px; }
[data-design="adult"] .side-foot .stat-line { display: none; }
[data-design="adult"] .side-foot .ext-link { margin: 0; color: var(--link); }

/* boxes: on the board, a green header strip over a mint box; at night, charcoal cards */
[data-design="adult"] :is(.card, .tile, .faq-item, .pl, .hint, .quick-row, .me, .seg, .vote, .toast, .menu, .design-card, .hero) {
  background: var(--card); border: 1px solid var(--edge); border-radius: 0; box-shadow: none;
}
[data-design="adult"][data-theme="dark"] :is(.card, .tile, .faq-item, .pl, .hint, .quick-row, .me, .seg, .vote, .toast, .menu, .design-card, .hero) { border-radius: 4px; }
[data-design="adult"] .card > h3:first-child { margin: -18px -18px 12px; padding: 7px 12px; background: var(--side); border-bottom: 1px solid var(--edge); font-size: 14px; }
[data-design="adult"][data-theme="dark"] .card > h3:first-child { background: none; border-bottom: 0; margin: 0 0 12px; padding: 0; font-size: 16px; }
[data-design="adult"] .faq-item p { color: var(--text); }
[data-design="adult"] :is(.hint, .quick-row, .tile) > .ic, [data-design="adult"] .setting-title .ic { color: var(--accent); }
[data-design="adult"] .eyebrow { color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 13px; }

/* buttons: grey form buttons on the board; flat charcoal and orange at night */
[data-design="adult"] .btn {
  border: 1px solid #8a8a8a; border-radius: 3px; background: linear-gradient(#fdfdfd, #d6d6d6); color: #000; font: 13px Arial, Helvetica, sans-serif;
}
[data-design="adult"] .btn:hover { border-color: #4f4f4f; }
[data-design="adult"] .btn.primary { border-color: var(--accent); background: linear-gradient(#3a9a3a, #1d6b1d); color: #fff; font-weight: 700; }
[data-design="adult"][data-theme="dark"] .btn { border: 0; border-radius: 4px; background: #2f2f2f; color: #fff; font-weight: 700; }
[data-design="adult"][data-theme="dark"] .btn:hover { background: #3d3d3d; }
[data-design="adult"][data-theme="dark"] .btn.primary { background: #ff9000; color: #000; }
[data-design="adult"] .input { border: 1px solid var(--edge); border-radius: 0; background: #fff; color: #000; }
[data-design="adult"][data-theme="dark"] .input { border: 0; border-radius: 4px; background: #2f2f2f; color: #fff; }
[data-design="adult"] .seg { border-radius: 0; }
[data-design="adult"] .seg button { border-radius: 0; }
[data-design="adult"] .seg button.on { background: var(--accent); color: var(--accent-ink); }
[data-design="adult"] .badge { border-radius: 3px; }

/* the air */
[data-design="adult"] .hero-bg { display: none; }
[data-design="adult"] .cover { border-radius: 0; border: 1px solid #3f7f3a; box-shadow: none; }
[data-design="adult"][data-theme="dark"] .cover { border: 0; border-radius: 4px; }
[data-design="adult"] .hero h2 { font-size: clamp(22px, 2.8vw, 32px); }

/* lists */
[data-design="adult"] .row { border-radius: 0; }
[data-design="adult"] .row:hover { background: var(--card-2); }
[data-design="adult"] .row.mine { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
[data-design="adult"] .thumb { border-radius: 0; }
[data-design="adult"][data-theme="dark"] .thumb { border-radius: 4px; }
[data-design="adult"] .ch { border-radius: 0; border-color: var(--edge); }
[data-design="adult"] .ch.has-bot { border-color: var(--accent); background: var(--accent-soft); }
[data-design="adult"] .pl-art { border-radius: 0; background: var(--accent); color: var(--accent-ink); }
[data-design="adult"] .design-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
[data-design="adult"] .thank > .ic { color: var(--danger); }
[data-design="adult"] .thank a { color: var(--link); text-decoration: underline; }

/* the player */
[data-design="adult"] .bar { background: var(--side); border-top: 1px solid var(--edge); }
[data-design="adult"][data-theme="dark"] .bar { background: #1b1b1b; border-top: 0; }
[data-design="adult"] .listen { background: var(--accent); color: var(--accent-ink); }
[data-design="adult"] .center .time { color: var(--text); }
[data-design="adult"][data-theme="dark"] .center .time { color: #ff9000; }
[data-design="adult"] .right input { accent-color: var(--accent); }

@media (max-width: 860px) {
  [data-design="adult"] body { grid-template: "main" 1fr "bar" auto "tabs" auto / 100%; } /* the top bar hides on a phone, as the side panel does */
  [data-design="adult"] .tabs { background: var(--side); border-top: 1px solid var(--edge); }
  [data-design="adult"][data-theme="dark"] .tabs { background: #1b1b1b; border-top: 0; }
  [data-design="adult"] .tabs a.on { color: var(--accent); }
}
[data-design="adult"] .quick-row .input, [data-design="adult"] .quick-row .input:focus { border: 0; outline: none; background: none; box-shadow: none; }