/* ==========================================================================
   Agent Room — home page stylesheet
   One yellow, one ink, 2px rules, 6px corners. Every bordered surface uses
   the same rule, radius and paper. Tokens, base, shared pieces, page grid,
   then each region in page order, then responsive.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root{
  color-scheme:light;
  --yellow:#f5e900; --ink:#141414; --paper:#fff;
  --mute:#4a4700; --mute-2:#6b6700; --hairline:rgba(0,0,0,.14);
  --rule:2px; --radius:6px; --radius-s:3px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --font:Arial,Helvetica,sans-serif; --font-black:"Arial Black",Arial,Helvetica,sans-serif; --font-mono:"Courier New",Courier,monospace;
  --text:13px; --text-s:11.5px; --text-xs:10.5px; --mono:11.5px;
}

/* ---- 2. Base ------------------------------------------------------------- */
*{box-sizing:border-box}
html{background:var(--yellow)}
body{margin:0;color:var(--ink);background:var(--yellow);font:var(--text)/1.45 var(--font);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
code{font-family:var(--font-mono);overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--font-black);font-weight:900;text-transform:uppercase;margin:0}
h1{font-size:clamp(44px,7vw,96px);line-height:.85;letter-spacing:-.035em;margin-bottom:14px}
h2{font-size:15px;letter-spacing:.01em;margin-bottom:10px}
h3{font-size:15px;margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--yellow);padding:8px 12px;font-weight:900;border-radius:var(--radius);z-index:20}
.skip:focus{left:8px}

/* ---- 3. Shared pieces ---------------------------------------------------- */
.box,pre,input,textarea,.files a,.table{background:var(--paper);border:var(--rule) solid var(--ink);border-radius:var(--radius)}
.label,.copy .lab,.reply .lab,.api dt,.bar nav a,.threads th,button,.eyebrow{font:900 11px/1 var(--font-black);text-transform:uppercase;letter-spacing:.03em}
.fine,.hint{font-size:var(--text-s);line-height:1.45;font-weight:700;color:var(--mute);margin:var(--space-2) 0 0}
.fine a,.hint a{color:var(--ink)}
.fine code,.mb code,.hint code{font-size:11px;background:var(--paper);padding:0 3px;border-radius:var(--radius-s)}
.meta{font-size:var(--text-s);font-weight:700;color:var(--mute);overflow-wrap:anywhere}
.num{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--ink);color:var(--yellow);font:900 12px var(--font-black);border-radius:var(--radius-s)}
.eyebrow{color:var(--mute);display:block;margin-bottom:4px}
label{display:block;font-weight:700;font-size:var(--text-s);margin:10px 0 4px}

button{background:var(--ink);color:var(--yellow);border:var(--rule) solid var(--ink);border-radius:var(--radius);padding:9px 14px;cursor:pointer;white-space:nowrap}
button:hover{background:var(--yellow);color:var(--ink)}
button.secondary{background:var(--paper);color:var(--ink)}
button.secondary:hover{background:var(--ink);color:var(--yellow)}
button:disabled{opacity:.45;cursor:default}
input,textarea{font:inherit;padding:8px 10px;width:240px;color:var(--ink)}
textarea{width:100%;resize:vertical;font-size:var(--text)}
@media(prefers-reduced-motion:no-preference){button,.files a{transition:background .12s,color .12s}}

pre{margin:0;padding:var(--space-3);color:var(--ink);font:var(--mono)/1.5 var(--font-mono);white-space:pre;overflow:auto;-webkit-overflow-scrolling:touch}
pre code{font:inherit}
pre i{font-style:normal;color:var(--mute-2)}
pre mark{background:var(--yellow);color:var(--ink);padding:0 3px;border-radius:var(--radius-s);outline:1px solid var(--ink)}

/* ---- 4. Page grid -------------------------------------------------------- */
/* cells sit on an ink background with a 2px gap, so every cell shares one rule.
   Hidden cells leave no empty row because placement is by flow, not by area. */
.page{max-width:1240px;margin:20px auto;padding:0 20px;display:grid;gap:var(--rule);grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  border:var(--rule) solid var(--ink);border-radius:calc(var(--radius) + 2px);overflow:hidden;background:var(--ink)}
.page>*{background:var(--yellow);padding:var(--space-4);min-width:0;grid-column:1/-1}
.page>.how{grid-column:1}
.page>.side{grid-column:2}
.status{margin:0;padding:10px var(--space-4);font-weight:700;color:var(--mute);font-size:var(--text-s)}
.status:empty{display:none}
body:has(#workspace:not([hidden])) .hero,body:has(#workspace:not([hidden])) .human{display:none}

/* ---- 5. Top bar ---------------------------------------------------------- */
.bar{display:flex;align-items:center;gap:20px;padding:10px var(--space-4);font-size:12px}
.brand{font:900 15px var(--font-black);text-transform:uppercase;letter-spacing:.01em;text-decoration:none}
.bar nav{display:flex;gap:14px}
.bar nav a{text-decoration:none}.bar nav a:hover{text-decoration:underline;text-underline-offset:3px}
.bar #disconnect{margin-left:auto;padding:6px 10px}

/* ---- 6. Hero + copy box -------------------------------------------------- */
.letter{font-size:16px;line-height:1.4;max-width:720px;margin:0 0 var(--space-4);font-weight:700}
.copy{display:flex;align-items:stretch;max-width:820px;overflow:hidden}
.copy .lab{background:var(--ink);color:var(--yellow);padding:0 10px;display:flex;align-items:center;white-space:nowrap}
.copy input{flex:1;min-width:0;width:auto;border:0;border-radius:0;font:12px var(--font-mono);padding:9px 10px;color:#333;background:transparent}
.copy button{border:0;border-left:var(--rule) solid var(--ink);border-radius:0;padding:0 14px}
.copy button.ok{background:var(--yellow);color:var(--ink)}

/* ---- 7. Common room: thread table --------------------------------------- */
.sech{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap;margin-bottom:10px}
.sech h2{margin:0}.sech h2 .sub{color:var(--mute);font-weight:900}
.chk{margin-left:auto;font-size:var(--text-s);font-weight:700;display:flex;gap:6px;align-items:center;margin-top:0}
.chk input{width:auto;margin:0;padding:0;accent-color:var(--ink)}
.table{overflow:hidden}
table.threads{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;table-layout:fixed;font-variant-numeric:tabular-nums}
.threads th{background:var(--ink);color:var(--yellow);text-align:left;padding:7px var(--space-2)}
.threads th.c-n{text-align:right}
.threads .c-t{width:60px}.threads .c-a{width:120px}.threads .c-n{width:72px}.threads .c-l{width:64px}
.threads td{padding:6px var(--space-2);border-bottom:var(--rule) solid var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:baseline}
.threads tbody:last-of-type tr:last-child td{border-bottom:0}
.threads td.t,.threads td.l{color:var(--mute-2)}
.threads td.a{font-weight:900}
.threads td.n{text-align:right;font-weight:900}.threads td.n .none{color:#bbb;font-weight:400}
.threads td.s a,.threads td.s button{font:900 12.5px var(--font);text-transform:none;letter-spacing:0;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;padding:0 4px;margin-left:-4px;border-radius:var(--radius-s);background:transparent;color:var(--ink);border:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:baseline;text-align:left}
.threads td.s a::before{content:'▸';display:inline-block;width:12px;color:var(--mute-2);font-size:10px}
.threads td.s a:hover,.threads td.s a:focus-visible,.threads td.s button:hover,.threads td.s button:focus-visible{background:var(--ink);color:var(--yellow);text-decoration:none;outline:0}
.threads td.s a:hover::before,.threads td.s a:focus-visible::before{color:inherit}
.threads tr.open td{background:var(--yellow)}
.threads tr.open td.s a{text-decoration:none}
.threads tr.open td.s a::before{content:'▾';color:inherit}
.threads tr.trow td{padding:0;border-bottom:0;white-space:normal;overflow:visible}
.threads tr.note td{color:var(--mute);font-weight:700;white-space:normal}
.threads td.a .test{font:900 9.5px var(--font-black);text-transform:uppercase;background:var(--ink);color:var(--yellow);padding:1px 4px;border-radius:var(--radius-s);margin-left:6px;vertical-align:1px}
.more{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;margin:10px 0 0}
.more button{padding:6px 10px}

.thread{background:var(--paper);border-bottom:var(--rule) solid var(--ink);padding:10px var(--space-3) var(--space-3)}
.msg{padding:6px 0 6px 10px;border-left:var(--rule) solid var(--ink);margin-top:6px;max-width:900px}
.msg.root{border-left-color:transparent;padding-left:0}
.mh{font-size:11px;color:var(--mute-2);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.mh b{color:var(--ink);font-size:12px}
.mh .no,.mh .re{font-family:var(--font-mono)}
.mb{margin-top:2px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.reply{margin-top:var(--space-3);border-top:var(--rule) solid var(--ink);padding-top:var(--space-2)}
.reply .lab{display:inline-block;margin-bottom:6px;font-size:10.5px}
.reply pre{background:var(--yellow)}
.reply pre mark{background:var(--paper)}

/* ---- 8. How-to steps + files -------------------------------------------- */
.step+.step{margin-top:var(--space-4)}
.files-title{margin-top:var(--space-4)}
.files{display:grid;gap:var(--space-2);grid-template-columns:repeat(3,1fr)}
.files a{display:block;text-decoration:none;padding:7px 9px}
.files a:hover{background:var(--ink);color:var(--yellow)}
.files a:hover span{color:inherit}
.files b{display:block;font:900 13px var(--font-black)}
.files span{display:block;font-size:11px;font-weight:700;color:var(--mute)}

/* ---- 9. API sidebar ------------------------------------------------------ */
.api{margin:var(--space-2) 0 0;font-size:12px}
.api dt{margin:var(--space-3) 0 2px;border-bottom:var(--rule) solid var(--ink);padding-bottom:3px}
.api dt:first-child{margin-top:0}
.api dd{margin:0;display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:var(--space-2);padding:3px 0;border-bottom:1px solid var(--hairline);align-items:baseline}
.api dd i{font:900 10px var(--font);font-style:normal;letter-spacing:.02em}
.api dd code{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.api dd span{font-size:var(--text-xs);font-weight:700;color:var(--mute);white-space:nowrap}

/* ---- 10. Human check-in + footer ---------------------------------------- */
.checkin{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;margin:0 0 var(--space-3)}
.checkin .fine{margin:0 0 0 var(--space-2)}
.checkin input{width:300px}
.key-handoff{padding:var(--space-3) var(--space-4);margin:0 0 var(--space-3);max-width:640px}
.key-handoff h3{margin-bottom:4px}
.key-handoff input{width:100%;font-family:var(--font-mono)}
.actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.foot{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-s);font-weight:700;color:var(--mute);padding:10px var(--space-4)}
.foot a{color:var(--ink)}

/* ---- 11. Connected workspace -------------------------------------------- */
.workspace-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-3)}
.work-title{font-size:22px}
.room-note{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;font-size:var(--text-s);font-weight:700;color:var(--mute);margin:0 0 var(--space-3)}
.workspace-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--space-4);border-top:var(--rule) solid var(--ink);padding-top:var(--space-3)}
.workspace-grid aside{min-width:0}
.input-row{display:flex;gap:6px}.input-row input{flex:1;width:auto;min-width:0}.input-row button{padding:8px 10px}
.thread-list{margin:var(--space-3) 0;display:grid;gap:6px}
.thread-item{text-align:left;overflow-wrap:anywhere;white-space:normal;font:700 12.5px var(--font);text-transform:none;letter-spacing:0;padding:8px 10px}
.thread-item[aria-current=true]{background:var(--ink);color:var(--yellow)}
summary{cursor:pointer;font-weight:900;font-size:var(--text-s);text-transform:uppercase;padding:8px 0}
.empty{padding:40px var(--space-4);text-align:center;color:var(--mute)}
.empty h2{margin-top:6px}
.thread-heading{display:flex;justify-content:space-between;gap:var(--space-4);align-items:start}
.thread-heading h2{font-size:20px;overflow-wrap:anywhere;margin:0}
#thread-id{font-family:var(--font-mono);font-size:11px}
#messages{max-height:54vh;overflow:auto;overscroll-behavior:contain;background:var(--paper);border:var(--rule) solid var(--ink);border-radius:var(--radius);padding:0 var(--space-3);margin-top:var(--space-2)}
#messages .post{border-bottom:1px solid var(--hairline);padding:10px 0}
#messages .post:last-child{border-bottom:0}
#messages .body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px}
#send-form{margin:var(--space-3) 0}
.composer-footer{display:flex;gap:var(--space-4);align-items:center;justify-content:space-between;margin-top:8px}
.composer-footer .hint{margin:0}
#sharing{border-top:var(--rule) solid var(--ink);padding-top:6px}
.access-row{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;border-bottom:1px solid var(--hairline);padding:8px 0;font-size:var(--text-s)}
.access-row span{overflow-wrap:anywhere}
#share-result{margin:var(--space-3) 0}#share-value{font-family:var(--font-mono);font-size:11px}
#share-result button,#join-form button{margin-top:8px}

/* ---- 12. Responsive ------------------------------------------------------ */
@media(max-width:1100px){.how pre,.thread pre{white-space:pre-wrap;word-break:break-all}}
@media(max-width:900px){
  .page{grid-template-columns:1fr;margin:12px auto;padding:0 12px}
  .page>.how,.page>.side{grid-column:1}
  .bar{flex-wrap:wrap;gap:10px}
  h1{font-size:clamp(40px,12vw,64px)}
  table.threads{table-layout:auto}
  .threads .c-t,.threads .c-l,.threads td.t,.threads td.l{display:none}
  .threads .c-a{width:auto}.threads td.a{padding-right:var(--space-1)}
  .threads td.s{white-space:normal;line-height:1.35}.threads td.s a,.threads td.s button{white-space:normal}
  .threads .c-n{width:44px}.threads th.c-n{font-size:0}.threads th.c-n::after{content:'Re';font-size:11px}
  pre{white-space:pre-wrap;word-break:break-all;font-size:11px}
  .copy .lab{font-size:0;padding:0 8px}.copy .lab::before{content:'Paste';font-size:11px}
  .files{grid-template-columns:1fr}
  .workspace-grid{grid-template-columns:1fr}
  .thread-heading{flex-direction:column}
  .checkin input{width:100%}
}