/* ==========================================================================
   IST 5930 — Signal Deck (class discussion board)
   Layered on site.css. Follows the house rules from that file: cut corners via
   clip-path, hairline inset edges, module-colored notches. No border-radius,
   no pills — the "anti-bubble" rule applies here too.
   ========================================================================== */

/* site.css gives .btn an explicit `display: inline-block`, which outranks the
   UA stylesheet's [hidden] rule — without this, hiding a .btn does nothing. */
[hidden] { display: none !important; }

:root {
  --rail: 232px;
  --side: 290px;
  --up: #05ffa1;      /* upvote — module 3 green */
  --down: #ff6b6b;
  --plate: color-mix(in srgb, var(--surface) 92%, #000);
}

/* ---------- shell ---------- */
.board-wrap {
  max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 5rem;
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--side);
  gap: 1.5rem; align-items: start;
}
/* Responsive rules live at the very bottom of this file — .board-rail and
   .board-side set `display: flex` further down at equal specificity, so a
   media query placed here would silently lose the cascade. */

.sticky { position: sticky; top: 76px; }

/* mobile channel picker — only shown once the rail collapses */
.mobile-pick { display: none; gap: .5rem; width: 100%; }
.mobile-pick select {
  flex: 1; padding: .5rem .7rem; background: rgba(8,18,33,.7); color: var(--text);
  border: none; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: .82rem;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

/* ---------- plate: the shared HUD container ---------- */
.plate {
  position: relative;
  background: linear-gradient(rgba(148,197,255,.07), rgba(148,197,255,.02)), var(--plate);
  box-shadow: inset 0 0 0 1px var(--line), var(--depth);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: box-shadow .25s, transform .25s;
}
.plate::before {
  content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px;
  background: linear-gradient(to bottom left, color-mix(in srgb, var(--mc, var(--accent)) 70%, transparent) 17px, transparent 17px);
  pointer-events: none;
}

/* ---------- channel rail (Discord-ish) ---------- */
.board-rail { display: flex; flex-direction: column; gap: .5rem; }
.rail-head {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--muted); padding: .3rem .2rem .6rem;
}
.chan {
  display: flex; align-items: baseline; gap: .5rem; width: 100%; text-align: left;
  padding: .6rem .8rem; border: none; cursor: pointer; color: var(--muted);
  background: transparent; font-family: var(--font-mono); font-size: .87rem;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: background .18s, color .18s;
}
.chan:hover { background: rgba(148,197,255,.08); color: var(--text); }
.chan .hash { color: var(--mc, var(--accent)); font-weight: 600; opacity: .75; }
.chan.on {
  background: linear-gradient(90deg, color-mix(in srgb, var(--mc, var(--accent)) 22%, transparent), transparent);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--mc, var(--accent));
}
.chan.on .hash { opacity: 1; }
.chan .n { margin-left: auto; font-size: .72rem; color: var(--muted); }

.rail-blurb { font-size: .74rem; color: var(--muted); line-height: 1.5; padding: .5rem .85rem 0; border-top: 1px solid var(--line); margin-top: .4rem; }

/* week filter */
.wk-filter { display: flex; flex-wrap: wrap; gap: .3rem; padding: .6rem .2rem 0; }
.wk-chip {
  font-family: var(--font-mono); font-size: .7rem; padding: .18rem .42rem;
  background: rgba(148,197,255,.07); color: var(--muted); border: none; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.wk-chip:hover { background: rgba(148,197,255,.16); color: var(--text); }
.wk-chip.on { background: var(--accent); color: #06121f; font-weight: 600; }

/* ---------- toolbar ---------- */
.board-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.sorts { display: flex; gap: .35rem; }
.sort-btn {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .42rem .85rem; background: rgba(148,197,255,.07); color: var(--muted);
  border: none; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.sort-btn:hover { background: rgba(148,197,255,.15); color: var(--text); }
.sort-btn.on { background: linear-gradient(135deg, #2b8fd6, var(--accent)); color: #06121f; font-weight: 700; }
.board-top .spacer { flex: 1; }

/* ---------- post card ---------- */
.post { display: grid; grid-template-columns: 52px minmax(0, 1fr); margin-bottom: 1rem; }
.post:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc, var(--accent)) 40%, var(--line)), var(--depth); }

.votes {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .9rem .2rem; background: rgba(8,18,33,.45);
}
.vote-btn {
  background: none; border: none; cursor: pointer; color: var(--muted);
  line-height: 1; padding: .15rem .3rem; transition: color .15s, transform .15s;
}
.vote-btn svg { width: 19px; height: 19px; display: block; }
.vote-btn:hover { color: var(--text); transform: translateY(-1px); }
.vote-btn.on.up { color: var(--up); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--up) 60%, transparent)); }
.vote-btn.on.down { color: var(--down); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--down) 60%, transparent)); }
.score { font-family: var(--font-mono); font-weight: 600; font-size: .92rem; color: var(--text); }
.score.pos { color: var(--up); }
.score.neg { color: var(--down); }

.post-main { padding: .9rem 1.1rem 1rem; min-width: 0; }
.post-meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .74rem; color: var(--muted); margin-bottom: .45rem;
}
.post-meta .chan-tag { color: var(--mc, var(--accent)); font-weight: 600; }
.post-meta .dot { opacity: .4; }
.who { color: var(--text); }
.who.staff { color: var(--m4); font-weight: 600; }
.wk-tag {
  background: rgba(148,197,255,.12); color: var(--muted); padding: .1rem .4rem; font-size: .7rem;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.pin-tag { color: var(--m4); }

.post-title { font-family: var(--font-display); font-size: 1.12rem; margin: 0 0 .4rem; line-height: 1.3; }
.post-title a { color: var(--text); }
.post-title a:hover { color: var(--accent); text-decoration: none; }
.post-body { font-size: .93rem; line-height: 1.6; color: #cbdaea; overflow-wrap: anywhere; white-space: pre-wrap; margin: 0; }
.post-body.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- media ---------- */
.media-grid { display: grid; gap: .5rem; margin-top: .75rem; }
.media-grid.n1 { grid-template-columns: 1fr; }
.media-grid.n2, .media-grid.n4 { grid-template-columns: 1fr 1fr; }
.media-grid.n3 { grid-template-columns: 1fr 1fr 1fr; }
.shot {
  display: block; overflow: hidden; background: var(--bg-deep); cursor: zoom-in;
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}
.shot img { width: 100%; max-height: 420px; object-fit: cover; transition: transform .35s; }
.shot:hover img { transform: scale(1.03); }

.link-card {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0; margin-top: .75rem;
  background: rgba(8,18,33,.5); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: box-shadow .2s;
}
.link-card:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--line)); text-decoration: none; }
.link-card.noimg { grid-template-columns: minmax(0, 1fr); }
.link-thumb { background: var(--bg-deep) center/cover no-repeat; min-height: 96px; }
.link-copy { padding: .65rem .85rem; min-width: 0; }
.link-dom { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.link-title { font-family: var(--font-display); font-size: .93rem; color: var(--text); margin: .18rem 0 .2rem; line-height: 1.3; }
.link-desc { font-size: .78rem; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- actions ---------- */
.post-foot { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; }
.act {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-family: var(--font-mono); font-size: .76rem; padding: .2rem 0;
  display: inline-flex; align-items: center; gap: .35rem; transition: color .15s;
}
.act:hover { color: var(--accent); }
.act.danger:hover { color: var(--down); }
.act.mod { color: var(--m4); }
.act.mod:hover { color: #ffc078; }

/* held-for-review badge on a composer thumbnail */
.thumb .held {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(255,159,67,.9); color: #2a1600; font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; text-align: center;
}

/* role badge in the you-bar */
.role-badge {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .1rem .4rem; background: var(--m4); color: #2a1600; margin-left: .4rem;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}

/* ---------- thread view ---------- */
.reply { margin-top: .9rem; padding-left: 1rem; border-left: 2px solid var(--line); }
.reply:hover { border-left-color: color-mix(in srgb, var(--mc, var(--accent)) 50%, var(--line)); }
.reply-head { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .74rem; color: var(--muted); margin-bottom: .3rem; }
.reply-body { font-size: .9rem; line-height: 1.6; color: #cbdaea; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-votes { display: inline-flex; align-items: center; gap: .25rem; }
.reply-votes .vote-btn svg { width: 15px; height: 15px; }
.reply-votes .score { font-size: .78rem; }
.collapsed > .reply-kids { display: none; }
.toggle-kids { background: none; border: none; color: var(--muted); cursor: pointer; font-family: var(--font-mono); font-size: .72rem; padding: 0; }
.toggle-kids:hover { color: var(--accent); }

/* ---------- composer + modals ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(4,10,20,.78); backdrop-filter: blur(6px);
  padding: 1.5rem; overflow-y: auto;
}
.overlay.open { display: grid; place-items: start center; }
.sheet { width: min(720px, 100%); margin-top: 5vh; padding: 1.6rem; --mc: var(--m2); }
.sheet h2 { margin: 0 0 .3rem; font-size: 1.35rem; }
.sheet .lede { color: var(--muted); font-size: .88rem; margin: 0 0 1.2rem; }

.field { margin-bottom: .95rem; }
.field label {
  display: block; font-family: var(--font-mono); font-size: .73rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .35rem;
}
.field input, .field textarea, .field select {
  width: 100%; padding: .65rem .8rem; background: rgba(8,18,33,.7); color: var(--text);
  border: none; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-body); font-size: .92rem;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field .hint { font-size: .74rem; color: var(--muted); margin-top: .3rem; }
.row { display: flex; gap: .8rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 150px; }

.dropzone {
  padding: 1rem; text-align: center; color: var(--muted); font-size: .84rem; cursor: pointer;
  background: rgba(8,18,33,.5); box-shadow: inset 0 0 0 1px dashed var(--line);
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
  transition: background .18s, border-color .18s;
}
.dropzone:hover, .dropzone.hot { background: rgba(5,217,232,.09); border-color: var(--accent); color: var(--text); }
.thumbs { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.thumb { position: relative; width: 84px; height: 84px; background: var(--bg-deep) center/cover; box-shadow: inset 0 0 0 1px var(--line); }
.thumb button {
  position: absolute; top: 0; right: 0; width: 20px; height: 20px; line-height: 18px;
  background: rgba(4,10,20,.85); color: var(--text); border: none; cursor: pointer; font-size: .8rem;
}
.thumb.busy::after {
  content: ""; position: absolute; inset: 0; background: rgba(4,10,20,.6);
  border-top: 2px solid var(--accent); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.sheet-foot { display: flex; gap: .7rem; align-items: center; margin-top: 1.2rem; }
.sheet-foot .spacer { flex: 1; }

.notice { font-size: .84rem; padding: .6rem .8rem; margin-bottom: .9rem; }
.notice.err { background: rgba(255,107,107,.12); color: #ffb3b3; box-shadow: inset 0 0 0 1px rgba(255,107,107,.3); }
.notice.ok  { background: rgba(5,255,161,.1); color: #97ffd5; box-shadow: inset 0 0 0 1px rgba(5,255,161,.28); }

.code-out {
  font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: .12em; text-align: center;
  padding: .9rem; margin: .6rem 0; color: var(--m3);
  background: rgba(5,255,161,.08); box-shadow: inset 0 0 0 1px rgba(5,255,161,.3);
}

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; background: rgba(3,7,14,.94); padding: 2rem; cursor: zoom-out; }
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 92vh; object-fit: contain; box-shadow: var(--depth); }

/* ---------- sidebar ---------- */
.board-side { display: flex; flex-direction: column; gap: 1rem; }
.side-card { padding: 1rem 1.1rem; --mc: var(--m3); }
.side-card h3 { font-size: .95rem; margin: 0 0 .6rem; }
.side-card p { font-size: .82rem; color: var(--muted); line-height: 1.55; margin: 0 0 .6rem; }
.lb { display: flex; align-items: center; gap: .5rem; font-size: .84rem; padding: .3rem 0; border-top: 1px solid var(--line); }
.lb:first-of-type { border-top: none; }
.lb .rank { font-family: var(--font-mono); color: var(--muted); font-size: .76rem; width: 1.4rem; }
.lb .karma { margin-left: auto; font-family: var(--font-mono); color: var(--up); font-size: .8rem; }

/* ---------- states ---------- */
.empty { text-align: center; padding: 3.5rem 1rem; color: var(--muted); }
.empty .big { font-size: 2.4rem; margin-bottom: .5rem; }
.skel { height: 96px; margin-bottom: 1rem; background: linear-gradient(90deg, rgba(148,197,255,.05), rgba(148,197,255,.11), rgba(148,197,255,.05)); background-size: 200% 100%; animation: sweep 1.3s ease-in-out infinite; }
@keyframes sweep { to { background-position: -200% 0; } }

.you-bar {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: .8rem; --mc: var(--m1);
}
.you-bar .tag { color: var(--m1); font-weight: 600; }
.you-bar .spacer { flex: 1; }
.linkish { background: none; border: none; color: var(--muted); cursor: pointer; font-family: var(--font-mono); font-size: .76rem; }
.linkish:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .shot img, .plate, .vote-btn, .skel { transition: none; animation: none; }
}

/* ==========================================================================
   Responsive — must stay last so these win over the base display rules above.
   ========================================================================== */
@media (max-width: 1180px) {
  .board-wrap { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .board-side { display: none; }
}

@media (max-width: 860px) {
  .board-wrap { grid-template-columns: minmax(0, 1fr); padding-top: 1rem; }
  .board-rail { display: none; }
  .mobile-pick { display: flex; }
  .board-top { gap: .55rem; }
  .board-top #new-post { width: 100%; text-align: center; }
  .post { grid-template-columns: 42px minmax(0, 1fr); }
  .media-grid.n3, .media-grid.n4 { grid-template-columns: 1fr 1fr; }
  .link-card { grid-template-columns: 92px minmax(0, 1fr); }
  .sheet { margin-top: 0; padding: 1.1rem; }
  .overlay { padding: .75rem; }
  .reply { padding-left: .65rem; }
}

@media (max-width: 420px) {
  .link-card { grid-template-columns: minmax(0, 1fr); }
  .link-thumb { min-height: 132px; }
  .media-grid.n2, .media-grid.n3, .media-grid.n4 { grid-template-columns: 1fr; }
}