/* freakradio: black + #90ee90, sharp edges, lowercase, Bayer-dithered signal.
   The console look (picked 2026-10-19 over feed and booth): a terminal,
   monospace, bracketed headings, prompt labels, the signal as a scope band. */

:root
{
	--g: #90ee90;
	--g2: #5fbf5f;
	--red: #ff4d4d;
	--bg: #000;
	--bg1: #0a0a0a;
	--bg2: #131313;
	--line: #1f2a1f;
	--line2: rgba(144, 238, 144, .28);
	--dim: #8a8a8a;
	--text: #e8e8e8;
	--sans: -apple-system, "Segoe UI", "Helvetica Neue", Roboto, Ubuntu, Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }
a { color: var(--g); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; cursor: pointer; padding: 0; }

.fr-ico { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; flex: 0 0 auto; }

/* ---------------------------------------------------------------- shared bits */

.fr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; border-bottom: 1px solid var(--g); background: #000; }
.fr-logo img { height: 28px; display: block; }
.fr-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--g); letter-spacing: .02em; }
.fr-nav { display: flex; gap: 14px; margin-left: auto; font-size: 14px; }

.fr-h { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: lowercase; color: var(--g); }
.fr-p { margin: 0 0 12px; line-height: 1.55; }
.fr-dim { color: var(--dim); }
.fr-empty { color: var(--dim); margin: 0; }

.fr-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--g); color: var(--g); padding: 8px 14px; font-weight: 700; white-space: nowrap; }
.fr-btn:hover { background: var(--g); color: #000; text-decoration: none; }
.fr-btn--go { background: var(--g); color: #000; }
.fr-btn--go:hover { background: #b6f7b6; }
.fr-btn--big { display: flex; width: 100%; justify-content: center; padding: 12px; font-size: 16px; margin-top: 20px; }
.fr-btn[disabled] { opacity: .5; cursor: default; }

.fr-err { border: 1px solid var(--red); color: var(--red); padding: 8px 12px; margin-bottom: 10px; }
.fr-ok { border: 1px solid var(--g); padding: 12px 14px; margin-bottom: 12px; line-height: 1.55; }
.fr-ok b { color: var(--g); }
.fr-mini { margin: 8px 0 0; padding-left: 18px; color: var(--dim); }
.fr-rename { margin: 0 0 12px; }
.fr-rename-row { display: flex; gap: 8px; margin-top: 4px; }
.fr-rename-row .fr-in { flex: 1 1 auto; min-width: 0; }

/* on air */
.fr-air { position: relative; overflow: hidden; background: #000; min-height: 260px; display: flex; align-items: flex-end; }
.fr-dither { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.fr-air-in { position: relative; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
.fr-air-in > :not(.fr-btn) { background: #000; }
.fr-air-state { display: inline-flex; align-items: center; gap: 8px; padding: 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--dim); }
.fr-dot { width: 8px; height: 8px; background: var(--dim); }
.fr.is-live .fr-air-state { color: #000; background: var(--g); }
.fr.is-live .fr-dot { background: #000; animation: fr-blink 1s steps(2) infinite; }
@keyframes fr-blink { 50% { opacity: 0; } }
.fr-air-name { font-size: clamp(26px, 6vw, 44px); font-weight: 800; line-height: 1.1; padding: 2px 8px; color: var(--text); overflow-wrap: anywhere; }
.fr.is-live .fr-air-name { color: var(--g); }
.fr-air-sub { padding: 2px 8px; color: var(--dim); font-size: 14px; }
.fr-air-sub b { color: var(--text); font-weight: 600; }
.fr-listen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; background: none !important; }
.fr-play-btn[disabled] { background: #000; color: var(--dim); border-color: var(--line2); opacity: 1; }
.fr-play-btn[aria-pressed="true"] { background: #000; color: var(--g); }

/* schedule */
.fr-list { list-style: none; margin: 0; padding: 0; }
.fr-set { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "when mode" "name mode"; gap: 0 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.fr-set:first-child { border-top: 0; padding-top: 0; }
.fr-set-when { grid-area: when; color: var(--dim); font-size: 13px; }
.fr-set-name { grid-area: name; font-weight: 700; overflow-wrap: anywhere; }
.fr-set-mode { grid-area: mode; align-self: center; color: var(--g2); }
.fr-set.is-live .fr-set-name { color: var(--g); }
.fr-live-tag { background: var(--g); color: #000; padding: 0 5px; margin-right: 6px; font-size: 11px; letter-spacing: .1em; }

/* form */
.fr-label { display: block; margin: 16px 0 6px; font-size: 13px; color: var(--text); }
.fr-label i { color: var(--dim); font-style: normal; }
.fr-form > input[type=hidden] + .fr-label { margin-top: 0; }
.fr-in { width: 100%; min-width: 0; background: #000; color: var(--text); border: 1px solid var(--line2); border-radius: 0; font: inherit; padding: 8px 10px; }
.fr-in:focus { outline: none; border-color: var(--g); }
textarea.fr-in { min-height: 80px; resize: vertical; }
input[type=date].fr-in, input[type=time].fr-in { color-scheme: dark; }
.fr-air-count { padding-left: 8px; border-left: 1px solid currentColor; font-weight: 400; letter-spacing: .04em; }
.fr-ext { padding: 2px 8px; margin-top: 4px; color: var(--dim); font-size: 12px; }
.fr-ext a { color: var(--g); text-decoration: underline; text-decoration-style: dotted; }
.fr-hint { color: var(--dim); font-size: 12px; margin-top: 5px; }
.fr-hint--top { margin: -2px 0 10px; }
.fr-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fr-slot { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1.6fr); grid-template-areas: "rank day time" ". yours yours"; gap: 2px 8px; align-items: center; }
.fr-rank { grid-area: rank; color: var(--g); font-weight: 700; text-align: right; }
.fr-slot select:first-of-type { grid-area: day; }
.fr-slot select:last-of-type { grid-area: time; }
.fr-yours { grid-area: yours; color: var(--dim); font-size: 12px; }
.fr-yours:empty { display: none; }
.fr-tzline { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--dim); }
.fr-tzline .fr-in { flex: 1; font-size: 13px; }
select.fr-in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--g) 50%), linear-gradient(135deg, var(--g) 50%, transparent 50%); background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
.fr-mode { display: grid; grid-template-columns: 1fr 1fr; }
.fr-mode label { cursor: pointer; }
.fr-mode label + label { margin-left: -1px; }
.fr-mode input { position: absolute; opacity: 0; pointer-events: none; }
.fr-mode span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid var(--line2); color: var(--dim); }
.fr-mode input:checked + span { background: var(--g); color: #000; border-color: var(--g); font-weight: 700; }
.fr-weekly { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; border: 1px solid var(--line2); padding: 12px; cursor: pointer; line-height: 1.45; }
.fr-weekly input { appearance: none; width: 20px; height: 20px; border: 2px solid var(--g); border-radius: 0; margin: 1px 0 0; flex: 0 0 auto; cursor: pointer; display: grid; place-content: center; }
.fr-weekly input:checked { background: var(--g); }
.fr-weekly input:checked::after { content: ""; width: 5px; height: 10px; border: solid #000; border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); }
.fr-weekly input:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.fr-weekly b { color: var(--g); }
.fr-weekly .fr-dim { font-size: 13px; }
.fr-mode input:focus-visible + span { outline: 2px solid var(--g); outline-offset: 2px; }

.fr-steps { margin: 0; padding-left: 20px; line-height: 1.6; }
.fr-steps li + li { margin-top: 6px; }

@media (max-width: 520px)
{
	.fr-nav { gap: 10px; }
	.fr-title { font-size: 15px; }
	.fr-logo img { height: 24px; }
}



/* ===================================================================== console */
/* a terminal: monospace everything, bracketed headings, prompt-style labels,
   the dithered signal as a scope band across the top. */

[data-fr-style="console"] body { font-family: var(--mono); font-size: 14px; }
[data-fr-style="console"] .fr { max-width: 820px; margin: 0 auto; padding-bottom: 60px; }
[data-fr-style="console"] .fr-top { border: 0; border-bottom: 1px dashed var(--line2); }
[data-fr-style="console"] .fr-title::before { content: "~/"; color: var(--dim); font-weight: 400; }
[data-fr-style="console"] .fr-air { min-height: 290px; border-bottom: 1px dashed var(--line2); }
[data-fr-style="console"] .fr-air-name { font-family: var(--mono); letter-spacing: -.02em; }
[data-fr-style="console"] .fr-air-name::after { content: "_"; color: var(--g); animation: fr-blink 1s steps(2) infinite; }
[data-fr-style="console"] .fr-sched,
[data-fr-style="console"] .fr-play,
[data-fr-style="console"] .fr-how { padding: 22px 16px 0; }
[data-fr-style="console"] .fr-h::before { content: "[ "; color: var(--dim); }
[data-fr-style="console"] .fr-h::after { content: " ]"; color: var(--dim); }
[data-fr-style="console"] .fr-h { font-size: 13px; letter-spacing: .04em; }
[data-fr-style="console"] .fr-set { grid-template-columns: 210px 1fr auto; grid-template-areas: "when name mode"; border-top: 1px dashed var(--line); }
[data-fr-style="console"] .fr-label::before { content: "> "; color: var(--g); }
[data-fr-style="console"] .fr-in { border-color: transparent; border-bottom-color: var(--line2); padding-left: 2px; }
[data-fr-style="console"] .fr-in:focus { border-bottom-color: var(--g); }
[data-fr-style="console"] .fr-steps { list-style: none; padding: 0; counter-reset: s; }
[data-fr-style="console"] .fr-steps li { counter-increment: s; }
[data-fr-style="console"] .fr-steps li::before { content: "0" counter(s) "  "; color: var(--g); }
@media (max-width: 620px)
{
	[data-fr-style="console"] .fr-set { grid-template-columns: 1fr auto; grid-template-areas: "when mode" "name mode"; }
}