/* Friday Meet — research theme.
 *
 * The house standard for web work: dark, document-grade, typographic. Blue is the primary
 * accent, gold is used sparingly for emphasis, green for positive status. No neon, no glow,
 * no gradients-as-decoration.
 *
 * FONTS ARE SYSTEM FONTS ON PURPOSE. The spec names Newsreader and Inter, but pulling them
 * from Google would hand every visitor's IP address to Google — on a page whose whole argument
 * is that nobody in the middle gets to watch. Georgia is the spec's own named serif fallback
 * and carries the same document feel with nobody else in the request.
 */
:root{
  --bg:#0E1116;
  --panel:#151A21;
  --panel-2:#1A2029;
  --line:#242C37;
  --line-2:#333D4A;
  --ink:#EDF2F6;
  --body:#C3CCD6;
  --muted:#7E8A97;
  --blue:#5EA0DC;
  --gold:#E9B44C;
  --green:#4CC26E;
  --red:#E06C6C;

  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:600;letter-spacing:-.01em}
a{color:var(--blue)}

.wrap{max-width:60rem;margin:0 auto;padding:0 1.5rem}

/* ---- kicker: small mono label above a section, the research-theme signature ---- */
.kicker{
  font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .7rem;display:flex;align-items:center;gap:.55rem;
}
.kicker::before{content:"";width:1.5rem;height:1px;background:var(--green)}

/* ---- masthead ---- */
.masthead{border-bottom:1px solid var(--line);background:rgba(14,17,22,.9);
          position:sticky;top:0;z-index:10;backdrop-filter:blur(8px)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;
                gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
.wordmark{font-family:var(--serif);font-size:1.1rem;color:var(--ink);font-weight:600}
.wordmark span{color:var(--blue)}
.pill{font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
      padding:.4rem .6rem;border:1px solid var(--line-2);border-radius:2rem;color:var(--muted)}
.pill.live{color:var(--green);border-color:rgba(76,194,110,.4)}
.pill.shut{color:var(--gold);border-color:rgba(233,180,76,.4)}

/* ---- hero ---- */
.hero{padding:4.5rem 0 3.5rem;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}
.hero h1{font-size:2.9rem;line-height:1.12;margin:0 0 1rem}
.hero .lede{font-size:1.12rem;color:var(--body);margin:0 0 1.1rem;max-width:32rem}
.hero .sub{color:var(--muted);margin:0;max-width:32rem;font-size:.97rem}
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero h1{font-size:2.2rem}
}

/* ---- the start card ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:.6rem;padding:1.5rem}
.card h2{font-size:1.05rem;margin:0 0 1.1rem;font-family:var(--sans);font-weight:600;
         letter-spacing:0;color:var(--ink)}
label{display:block;margin:.9rem 0 .35rem;font:500 .7rem/1 var(--mono);
      letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
label:first-of-type{margin-top:0}
input{
  width:100%;padding:.68rem .8rem;background:var(--bg);color:var(--ink);
  border:1px solid var(--line-2);border-radius:.4rem;font:400 .97rem var(--sans);
}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(94,160,220,.14)}
#code{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase}

button{
  padding:.62rem 1.05rem;border:1px solid var(--line-2);border-radius:.4rem;
  background:transparent;color:var(--ink);font:500 .93rem var(--sans);cursor:pointer;
  transition:border-color .12s,background .12s;
}
button:hover{border-color:var(--blue);background:rgba(94,160,220,.07)}
button.off{border-color:var(--gold);color:var(--gold)}
button.leave{border-color:var(--red);color:var(--red)}
/* Restrained, not filled candy: blue outline that fills only on hover. */
#joinBtn{width:100%;margin-top:1.4rem;padding:.78rem;border-color:var(--blue);color:var(--blue);
         font-weight:600}
#joinBtn:hover{background:rgba(94,160,220,.12)}
#joinBtn:disabled{border-color:var(--line-2);color:var(--muted);cursor:not-allowed;background:none}
.hint{margin:.8rem 0 0;font-size:.83rem;color:var(--muted);line-height:1.5}
.closed-note{margin:.9rem 0 0;padding:.7rem .8rem;border-radius:.4rem;
             background:rgba(233,180,76,.07);border:1px solid rgba(233,180,76,.35);
             color:var(--gold);font-size:.85rem;line-height:1.5}

/* ---- sections ---- */
section.band{padding:3.5rem 0;border-bottom:1px solid var(--line)}
.band h2{font-size:1.75rem;margin:0 0 .6rem}
.band-lede{margin:0 0 2rem;color:var(--muted);max-width:44rem}

/* ---- the comparison table: the centrepiece ---- */
.compare{width:100%;border-collapse:collapse;font-size:.94rem}
.compare thead th{
  text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--line-2);
  font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.compare thead th.ours{color:var(--blue)}
.compare td{padding:.95rem .85rem;border-bottom:1px solid var(--line);vertical-align:top}
.compare tbody tr:hover{background:var(--panel)}
.compare td:first-child{color:var(--ink);font-weight:500;width:26%}
.compare td.them{color:var(--muted);width:37%}
.compare td.us{color:var(--body);width:37%}
.compare td.us strong{color:var(--ink);font-weight:600}
.mark{font-family:var(--mono);font-size:.85rem;margin-right:.4rem}
.mark.no{color:var(--red)}
.mark.yes{color:var(--green)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:760px){
  .compare,.compare tbody,.compare tr,.compare td{display:block;width:auto}
  .compare thead{display:none}
  .compare tr{border-bottom:1px solid var(--line-2);padding:.5rem 0}
  .compare td{border:0;padding:.3rem 0}
  .compare td:first-child{width:auto;font-size:1rem;margin-bottom:.2rem}
  .compare td.them::before{content:"Them — ";color:var(--muted);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em}
  .compare td.us::before{content:"Us — ";color:var(--blue);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em}
}

/* ---- three-up ---- */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.three>div{background:var(--panel);border:1px solid var(--line);border-radius:.6rem;padding:1.25rem}
.three h3{font-size:1rem;margin:0 0 .5rem;font-family:var(--sans);font-weight:600}
.three .step{font:500 .7rem/1 var(--mono);color:var(--blue);letter-spacing:.1em;
             display:block;margin-bottom:.6rem}
.three p{margin:0;font-size:.92rem;color:var(--muted)}
@media(max-width:760px){.three{grid-template-columns:1fr}}

/* ---- honest limits ---- */
.limits{margin:0;padding:0;list-style:none;display:grid;gap:.65rem;max-width:46rem}
.limits li{padding-left:1.5rem;position:relative;color:var(--muted)}
.limits li::before{content:"—";position:absolute;left:0;color:var(--gold);font-family:var(--mono)}
.limits strong{color:var(--ink);font-weight:600}

/* ---- footer ---- */
footer.site{padding:2.5rem 0 3.5rem;color:var(--muted);font-size:.88rem}
footer.site p{margin:0 0 .4rem;max-width:44rem}
footer.site .quiet{color:var(--line-2)}

/* ===================== IN A MEETING ===================== */
#room{max-width:76rem;margin:0 auto;padding:1.25rem 1.5rem 2.5rem}
#room header{display:flex;justify-content:space-between;align-items:center;
             gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.label{display:block;font:500 .68rem/1 var(--mono);letter-spacing:.1em;
       text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
#roomCode{font-family:var(--mono);font-size:1.25rem;letter-spacing:.14em;color:var(--blue)}

#grid{display:grid;gap:.75rem;grid-template-columns:1fr}
#grid[data-count="2"]{grid-template-columns:repeat(2,1fr)}
#grid[data-count="3"]{grid-template-columns:repeat(3,1fr)}
/* 4 and 5 wrap to two rows -- a single row of five on a laptop makes every face a stamp. */
#grid[data-count="4"]{grid-template-columns:repeat(2,1fr)}
#grid[data-count="5"]{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){
  #grid,#grid[data-count="2"],#grid[data-count="3"],
  #grid[data-count="4"],#grid[data-count="5"]{grid-template-columns:1fr}
}

.tile{position:relative;background:#000;border:1px solid var(--line-2);
      border-radius:.5rem;overflow:hidden;aspect-ratio:16/9}
.tile video{width:100%;height:100%;object-fit:cover;display:block}
.tile .name{position:absolute;left:.5rem;bottom:.5rem;padding:.18rem .5rem;
            background:rgba(14,17,22,.82);border-radius:.25rem;font-size:.8rem;color:var(--ink)}

.knock{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
       padding:.7rem .9rem;margin-bottom:.6rem;border-radius:.5rem;
       background:var(--panel);border:1px solid rgba(233,180,76,.4)}
.knock span{flex:1;min-width:12rem;color:var(--ink)}
.knock .ok{border-color:var(--green);color:var(--green)}
.knock .no{border-color:var(--red);color:var(--red)}

.status,.privacy{margin:.85rem 0 0;font-size:.88rem;color:var(--muted)}
.status.ok,.privacy.ok{color:var(--green)}
.status.warn,.privacy.warn{color:var(--gold)}
.status.bad{color:var(--red)}

#chat{margin-top:1.25rem;background:var(--panel);border:1px solid var(--line);
      border-radius:.6rem;padding:1rem}
#chat h2{margin:0 0 .7rem;font:500 .7rem/1 var(--mono);letter-spacing:.1em;
         text-transform:uppercase;color:var(--muted)}
#chatLog{max-height:14rem;overflow-y:auto;display:flex;flex-direction:column;gap:.45rem}
.chat-line{font-size:.92rem;word-break:break-word;color:var(--body)}
.chat-line .who{display:inline-block;margin-right:.45rem;color:var(--blue);font-weight:600}
.chat-line.mine .who{color:var(--muted)}
#chatForm{display:flex;gap:.5rem;margin-top:.8rem}
#chatForm input{flex:1}
#chatForm input:disabled{opacity:.5}
.note{margin:.65rem 0 0;font-size:.8rem;color:var(--muted)}

#room footer{display:flex;gap:.55rem;margin-top:1.25rem;flex-wrap:wrap}