/* SLOP TELEVISION — broadcast pages (posts, comments, polls, admin) */

.bcast { max-width: 760px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); font-family: "JetBrains Mono", monospace; color: var(--white); }
.bcast a { color: var(--toxic); }
.bcast-h1 { font-family: "Archivo Black", sans-serif; font-size: var(--fs-2xl); letter-spacing: .04em; margin: var(--sp-5) 0; text-shadow: 2px 2px 0 var(--magenta); }
.bcast-empty { color: #888; padding: var(--sp-5) 0; }

.ch-nav { margin-left: var(--sp-4); }
.ch-nav a, a.ch-name { color: var(--white); text-decoration: none; }
.ch-nav a:hover { color: var(--toxic); }
.ch-user { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: var(--sp-3); font-size: var(--fs-xs); color: var(--toxic); }
.ch-user img { border-radius: 50%; border: 1px solid var(--line); }

/* feed cards */
.bcast-card { display: block; border: 1px solid var(--line); background: var(--tube); padding: var(--sp-5); margin-bottom: var(--sp-4); text-decoration: none; color: var(--white); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.bcast-card:hover { box-shadow: var(--glow-toxic); transform: translateY(-2px); }
.bcast-card h2 { font-family: "Archivo Black", sans-serif; font-size: var(--fs-xl); margin: var(--sp-2) 0; }
.bcast-card p { color: #bbb; font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.bc-date { font-size: var(--fs-xs); color: var(--magenta); letter-spacing: .08em; }
.bc-meta { font-size: var(--fs-xs); color: var(--toxic); letter-spacing: .06em; }

/* post body */
.bcast-post h1 { font-family: "Archivo Black", sans-serif; font-size: var(--fs-2xl); line-height: 1.1; margin: var(--sp-2) 0 var(--sp-5); text-shadow: 2px 2px 0 var(--magenta); }
.bc-body { font-size: var(--fs-base); line-height: 1.7; }
.bc-body p { margin: 0 0 var(--sp-4); }
.bc-body h3 { font-family: "Archivo Black", sans-serif; color: var(--toxic); margin: var(--sp-5) 0 var(--sp-3); }
.bc-body code { background: var(--tube); border: 1px solid var(--line); padding: 1px 5px; font-size: .9em; }

/* link preview cards + embeds */
.linkcard { display: flex; border: 1px solid var(--line); background: var(--tube); margin: 0 0 var(--sp-4); text-decoration: none; overflow: hidden; }
.linkcard:hover { box-shadow: var(--glow-mag); }
.lc-img { flex: 0 0 140px; min-height: 96px; background-size: cover; background-position: center; border-right: 1px solid var(--line); }
.lc-body { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lc-host { font-size: var(--fs-xs); color: var(--magenta); letter-spacing: .06em; text-transform: uppercase; }
.lc-title { color: var(--white); font-weight: 700; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.lc-desc { color: #999; font-size: var(--fs-xs); }
.embed.yt { position: relative; padding-top: 56.25%; margin: 0 0 var(--sp-4); border: 1px solid var(--line); }
.embed.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* reactions */
.react-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: var(--sp-5) 0; }
.react { font-family: inherit; font-size: var(--fs-base); background: var(--tube); color: var(--white); border: 1px solid var(--line); padding: 6px 12px; cursor: pointer; transition: box-shadow .15s var(--ease); }
.react:hover { box-shadow: var(--glow-toxic); }
.react.on { border-color: var(--toxic); box-shadow: var(--glow-toxic); }
.react .rc { margin-left: 6px; font-size: var(--fs-xs); color: var(--toxic); }
.react-hint { font-size: var(--fs-xs); color: #777; }

/* poll */
.poll { border: 1px solid var(--line); background: var(--tube); padding: var(--sp-4); margin: var(--sp-5) 0; }
.poll-q { font-family: "Archivo Black", sans-serif; font-size: var(--fs-lg); margin: 0 0 var(--sp-3); color: var(--toxic); }
.poll-opt { position: relative; display: flex; justify-content: space-between; gap: var(--sp-3); width: 100%; text-align: left; font-family: inherit; font-size: var(--fs-sm); background: var(--void); color: var(--white); border: 1px solid var(--line); padding: 8px 12px; margin-bottom: var(--sp-2); cursor: pointer; overflow: hidden; }
.poll-opt:hover { border-color: var(--magenta); }
.poll-opt.mine { border-color: var(--toxic); }
.po-bar { position: absolute; inset: 0 auto 0 0; background: rgba(212, 230, 57, .13); transition: width .4s var(--ease); }
.po-label, .po-pct { position: relative; z-index: 1; }
.po-pct { color: var(--magenta); font-size: var(--fs-xs); white-space: nowrap; }
.poll-total { font-size: var(--fs-xs); color: #888; margin: var(--sp-2) 0 0; }

/* comments */
.comments { margin-top: var(--sp-7); border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.cm-h { font-family: "Archivo Black", sans-serif; font-size: var(--fs-lg); letter-spacing: .05em; margin: 0 0 var(--sp-4); }
.cm-count { color: var(--magenta); }
.comment { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.cm-av { border-radius: 50%; border: 1px solid var(--line); flex: 0 0 32px; height: 32px; }
.cm-main { min-width: 0; }
.cm-user { font-weight: 700; font-size: var(--fs-sm); }
.cm-badge { font-size: 10px; color: var(--toxic); border: 1px solid var(--toxic); padding: 0 4px; letter-spacing: .06em; vertical-align: 1px; }
.cm-date { font-size: var(--fs-xs); color: #777; margin-left: var(--sp-2); }
.cm-body { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); line-height: 1.6; overflow-wrap: anywhere; }
.cm-mod { font-size: var(--fs-xs); }
.cm-mod button, .del-post { background: none; border: 1px solid var(--line); color: var(--magenta); font-family: inherit; font-size: var(--fs-xs); cursor: pointer; padding: 1px 6px; }
.cm-mod button:hover, .del-post:hover { box-shadow: var(--glow-mag); }

/* comment form + auth */
.cm-form { margin-top: var(--sp-4); }
.cm-form textarea, .admin-form input, .admin-form textarea, .admin-form select { width: 100%; box-sizing: border-box; background: var(--void); color: var(--white); border: 1px solid var(--line); font-family: inherit; font-size: var(--fs-sm); padding: var(--sp-3); }
.cm-form textarea:focus, .admin-form input:focus, .admin-form textarea:focus { outline: none; border-color: var(--toxic); box-shadow: var(--glow-toxic); }
.cm-form-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.cm-as { font-size: var(--fs-xs); color: #999; }
.cm-form button[type=submit], .admin-form button[type=submit] { font-family: "Archivo Black", sans-serif; background: var(--toxic); color: var(--void); border: 0; padding: 8px 18px; cursor: pointer; letter-spacing: .05em; }
.cm-form button[type=submit]:hover, .admin-form button[type=submit]:hover { box-shadow: var(--glow-toxic); }
.cm-logout { font-size: var(--fs-xs); color: #777 !important; margin-left: auto; }
.discord-login { display: inline-flex; align-items: center; gap: 8px; background: #5865F2; color: #fff; text-decoration: none; font-weight: 700; font-size: var(--fs-sm); padding: 10px 16px; margin-top: var(--sp-4); }
.discord-login:hover { box-shadow: 0 0 0 1px #5865F2, 0 0 18px -2px #5865F2; }
.auth-note { font-size: var(--fs-xs); color: #777; margin-top: var(--sp-2); }

/* admin */
.admin-form { border: 1px solid var(--line); background: var(--tube); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.admin-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); letter-spacing: .08em; color: var(--magenta); }
.admin-form .hint { color: #777; letter-spacing: 0; }
.admin-row { display: flex; align-items: end; gap: var(--sp-4); }
.admin-row label { flex: 0 0 auto; }
#saveMsg { font-size: var(--fs-xs); color: var(--toxic); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--line); text-align: left; padding: var(--sp-2) var(--sp-3); }
.admin-table th { font-size: var(--fs-xs); color: var(--magenta); letter-spacing: .08em; }

@media (max-width: 560px) {
  .lc-img { flex-basis: 96px; }
  .admin-row { flex-wrap: wrap; }
}