/* X-GRID feed: the staff desk, sign-in, setup and the public broadcast page.
   Same look as theblackout.gg (colours, Oswald, hairlines, cut corners), kept in one file because this tool is
   deployed on its own. No inline styles anywhere: the page's security policy only allows this stylesheet. */
:root{--void:#040506;--ink:#e9edf0;--dim:#8d99a2;--red:#e3000f;--green:#3ad17a;--line:rgba(200,215,225,.1);--line2:rgba(225,235,242,.18);
  --ease:cubic-bezier(.7,0,.2,1);--panel:linear-gradient(180deg,#0a0d10,#06080a)}
*{margin:0;padding:0;box-sizing:border-box}
a{color:inherit;text-decoration:none}
body{min-height:100vh;background:var(--void);color:var(--ink);font:300 17px/1.55 'Oswald',sans-serif;
  background-image:radial-gradient(ellipse 60% 40% at 85% 0%,rgba(227,0,15,.09),transparent 70%)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[hidden]{display:none!important}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);background:rgba(4,5,6,.92);backdrop-filter:blur(10px)}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--red),rgba(227,0,15,.15) 30%,transparent 70%)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(1240px,calc(100% - 40px));height:66px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:auto;filter:drop-shadow(0 0 6px rgba(227,0,15,.35))}
.brand b{display:block;color:#fff;font:600 20px/1 'Oswald';letter-spacing:2px}
.brand small{display:block;margin-top:3px;color:var(--dim);font-size:13px}
.bar-actions{display:flex;align-items:center;gap:24px}
.bar-actions a{color:#aeb9c0;font:500 14px 'Oswald';letter-spacing:2px;text-transform:uppercase;transition:color .2s}
.bar-actions a:hover{color:#fff}

/* ---------- page + type ---------- */
.page{width:min(1240px,calc(100% - 40px));margin:0 auto;padding:44px 0 90px}
.title{color:#fff;font:600 clamp(40px,5vw,66px)/.95 'Oswald';text-transform:uppercase}
.title span{display:block;position:relative;padding-left:1.1em}
.title span::before{content:"";position:absolute;left:0;top:50%;width:.8em;height:.09em;background:var(--red);box-shadow:0 0 14px rgba(227,0,15,.6)}
.lead{max-width:62ch;margin-top:14px;color:#c3ccd2;font-size:18px}
.card{padding:24px 26px;border:1px solid var(--line);background:var(--panel)}
.card h2{margin-bottom:16px;color:#fff;font:600 21px 'Oswald';text-transform:uppercase}
.hint{color:var(--dim);font-size:15px;line-height:1.5}
.empty{padding:26px;border:1px solid var(--line);color:var(--dim)}

/* notes: success / problem */
.note{margin:22px 0 0;padding:12px 16px;border:1px solid var(--line);border-left:2px solid var(--c,var(--dim));background:color-mix(in srgb,var(--c,#888) 7%,#06080a);color:#fff;font-size:16px}
.note.good{--c:var(--green)}.note.bad{--c:var(--red)}
.note ul{margin:6px 0 0 18px;color:#d5dce1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,#e2000f 0%,#b0000b 55%,#78000a 100%);box-shadow:inset 0 1px rgba(255,140,140,.4);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  font:600 15px 'Oswald';letter-spacing:2px;text-transform:uppercase}
.btn:hover{background:linear-gradient(180deg,#f5101c 0%,#c4000c 55%,#88000a 100%)}
.link{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;cursor:pointer;color:#c3ccd2;font:500 14px 'Oswald';letter-spacing:1.5px;text-transform:uppercase;transition:color .2s}
.link::after{content:"";width:14px;height:1px;background:var(--red);transition:width .25s var(--ease)}
.link:hover{color:#fff}.link:hover::after{width:24px}
.link.bad{color:#ff6a72}.link.bad::after{display:none}.link.bad:hover{color:#fff}

/* ---------- forms ---------- */
.form{display:grid;gap:16px}
.form label{display:grid;gap:6px}
.form label>span{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:#d5dce1;font-size:15px}
.form label>span em{color:var(--dim);font:13px 'Share Tech Mono',monospace;font-style:normal}
.form input:not([type=checkbox]):not([type=file]),.form textarea{width:100%;padding:12px 14px;border:1px solid var(--line2);border-radius:0;background:#05070a;color:#fff;
  font:300 17px/1.5 'Oswald',sans-serif;transition:border-color .2s,box-shadow .2s}
.form textarea{resize:vertical;min-height:180px}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 18px rgba(227,0,15,.15)}
.form ::placeholder{color:#5f6b74}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.drop{position:relative;padding:16px 18px;border:1px dashed var(--line2);background:#05070a;cursor:pointer;transition:border-color .2s}
.drop:hover{border-color:rgba(227,0,15,.6)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop b{color:#fff;font-weight:400}
.drop small{color:var(--dim);font-size:14px}
.form .tick{display:flex;align-items:center;gap:10px;color:#c3ccd2;font-size:15px}
.tick input{accent-color:var(--red)}
.form-do{display:flex;align-items:center;gap:24px;margin-top:4px}

/* ---------- sign-in + setup ---------- */
.login,.setup,.missing{max-width:560px;margin:40px auto 0}
.setup{max-width:720px}
.login .form,.setup .form{margin-top:22px}
.login .btn,.setup .btn{justify-self:start}
.missing .link{margin-top:20px}

/* ---------- desk ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.handle{display:grid;gap:4px;min-width:280px;padding:16px 18px;border:1px solid var(--line);border-left:2px solid var(--red);background:var(--panel)}
.handle>span{color:var(--dim);font-size:14px}
.handle>code{color:#fff;font:17px 'Share Tech Mono',monospace;overflow-wrap:anywhere}
.handle small{color:var(--dim);font-size:13px}
.handle small code{color:#c3ccd2;font-family:'Share Tech Mono',monospace}
.desk{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start;margin-top:30px}
.side{display:grid;gap:20px;position:sticky;top:86px}
.checks a{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);color:#c3ccd2;font-size:16px;transition:color .2s}
.checks a::after{content:"\2197";color:var(--red);font-size:13px}
.checks a:hover{color:#fff}
.checks .hint{margin-bottom:10px}
.preview .hint{margin-top:12px}

/* a post as the server feed shows it (also the public page's cards) */
.fv{border:1px solid var(--line2);background:#0b0e12;border-radius:8px;overflow:hidden}
.fv header{display:flex;align-items:center;gap:11px;padding:12px 14px}
.fv header img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#151a1f}
.fv header b{display:block;color:#fff;font:500 16px/1.2 'Oswald'}
.fv header small{display:block;color:var(--dim);font-size:13px}
.fv header div{flex:1;min-width:0}
.fv-link{color:var(--dim);font-size:13px;letter-spacing:1px;text-transform:uppercase}
.fv-link:hover{color:#fff}
.fv-body{padding:0 14px 14px;color:#d5dce1;font-size:16px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.fv-body strong{display:block;margin-bottom:6px;color:#fff;font-weight:500;white-space:normal}
.fv-body strong:empty,.fv-body p:empty{display:none}
.fv-img{display:block;max-width:100%;margin:0 auto}

/* the post list */
.posts{margin-top:46px}
.posts-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;color:#fff;font:600 26px 'Oswald';text-transform:uppercase}
.posts-h span{color:var(--dim);font:400 16px 'Oswald'}
.post{display:grid;grid-template-columns:170px minmax(0,1fr) 120px auto;gap:22px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.post:last-child{border-bottom:1px solid var(--line)}
.post.on{background:linear-gradient(90deg,rgba(227,0,15,.07),transparent)}
.post time{align-self:start;color:var(--dim);font:14px 'Share Tech Mono',monospace;line-height:1.5}
.post time i{display:block;color:#c3ccd2;font-style:normal}
.post h3{color:#fff;font:600 19px/1.2 'Oswald';text-transform:uppercase}
.post p{display:-webkit-box;margin-top:4px;overflow:hidden;color:var(--dim);font-size:15px;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.post img,.post .no-img{width:120px;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line)}
.post .no-img{border-style:dashed}
.post-do{display:flex;align-items:center;gap:18px}

/* ---------- public page ---------- */
.stream{display:grid;gap:16px;max-width:680px;margin-top:34px}
.single{margin:10px auto 0}

@media(max-width:1000px){
  .desk{grid-template-columns:minmax(0,1fr)}
  .side{position:static;grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .bar-in{height:58px}.bar-actions{gap:16px}.bar-actions a{font-size:13px;letter-spacing:1px}
  .brand small{display:none}
  .page{padding-top:30px}
  .side{grid-template-columns:minmax(0,1fr)}
  .card{padding:18px 16px}
  .form .two{grid-template-columns:minmax(0,1fr)}
  .post{grid-template-columns:minmax(0,1fr);gap:8px}
  .post img,.post .no-img{display:none}
  .handle{min-width:0;width:100%}
}