/* Portal chrome. Pattern rendering uses the library's styles.css, loaded from /lib/styles.css.
   Tokens fall back to the library's light values so the sign-in pages (served before sign-in) still look right. */
:root{
  --paper:#EDF1F0; --surface:#FFFFFF; --ink:#1D2830; --muted:#56636B; --rule:#C6CFD2;
  --teal:#0D7672; --teal-soft:#D5EBE9; --amber:#A86D08; --amber-soft:#F5E6C6; --coral:#B9492F; --coral-soft:#F6DED7;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F161A; --surface:#162027; --ink:#E2E9EB; --muted:#9BA8AF; --rule:#2B3941;
    --teal:#55C3BC; --teal-soft:#12322F; --amber:#E4AC45; --amber-soft:#382A0F; --coral:#EB8C74; --coral-soft:#3A1C15;
  }
}
body{background:var(--paper); color:var(--ink)}
[hidden]{display:none !important}

button, .btn{font:inherit; font-size:.88rem; font-weight:650; padding:.38rem .85rem; border-radius:6px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block}
button.primary, .btn.primary{background:var(--ink); color:var(--paper)}
button.danger{border-color:var(--coral); color:var(--coral)}
button:disabled{opacity:.5; cursor:default}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid var(--teal); outline-offset:2px}
.linkbtn{border:0; padding:0; background:none; color:var(--teal); font-weight:650; text-decoration:underline}
input, select, textarea{font:inherit; font-size:.92rem; padding:.4rem .6rem; border:1.5px solid var(--rule); border-radius:6px; background:var(--paper); color:var(--ink); max-width:100%}
textarea{width:100%; resize:vertical}
label{font-size:.88rem; font-weight:650; display:grid; gap:.25rem}
.who{margin-left:auto; font-size:.88rem; color:var(--muted); display:flex; gap:.8rem; align-items:baseline}
.loading{color:var(--muted)}
.msg{font-size:.9rem; padding:.55rem .8rem; border-radius:8px; background:var(--teal-soft); margin-top:.8rem}
.msg.err{background:var(--coral-soft)}

/* Sign-in */
.login{max-width:28rem; margin:10vh auto 0}
.login h1{font-size:2.4rem}
.login form{display:grid; gap:.8rem; margin-top:1.4rem}
.authpage{font-family:system-ui,sans-serif; display:grid; place-items:center; min-height:100vh; margin:0; padding:1rem}
.authcard{background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:2rem; max-width:26rem; width:100%}
.authcard h1{font-size:1.5rem; margin:0 0 1rem}
.authcard a{color:var(--teal)}

/* Document list */
.queue{margin-top:2.4rem}
.queue > h2 small{font-size:.9rem; color:var(--muted); font-weight:500}
.vcard .threads{color:var(--teal); font-weight:650}
@media (max-width:900px){ .cards{grid-template-columns:1fr} }

/* Document view with comments */
.docgrid{display:grid; grid-template-columns:minmax(0,1fr) 22rem; gap:1.6rem; align-items:start}
@media (max-width:1100px){ .docgrid{grid-template-columns:1fr} }
.note{background:var(--surface); border-left:5px solid var(--teal); border-radius:8px; padding:.6rem .9rem; margin:-1rem 0 1.6rem; font-size:.94rem}
.comp, .step, .wstep{position:relative}
.cbtn{position:absolute; top:.35rem; right:.35rem; font-size:.74rem; padding:.1rem .45rem; border-width:1px; border-color:var(--rule); background:var(--surface); color:var(--muted); line-height:1.4; opacity:.75}
.cbtn:hover, .cbtn:focus-visible, .cbtn.has{opacity:1; border-color:var(--teal); color:var(--teal)}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,40%{box-shadow:0 0 0 4px var(--teal)} 100%{box-shadow:0 0 0 0 transparent}}

.cpanel{position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow:auto; background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:1rem}
@media (max-width:1100px){ .cpanel{position:static; max-height:none} }
.cpanel h2{font-size:1.3rem}
.chead{display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.chead label{display:flex; gap:.35rem; align-items:center; font-weight:500; color:var(--muted)}
.cfilter{font-size:.86rem; background:var(--teal-soft); border-radius:6px; padding:.4rem .6rem; margin-top:.6rem}
.compose{display:grid; gap:.5rem; margin-top:.8rem; padding-bottom:1rem; border-bottom:1px solid var(--rule)}
.threads{list-style:none; margin:0; padding:0}
.thread{padding:.9rem 0; border-bottom:1px solid var(--rule)}
.thread.resolved{opacity:.65}
.cmeta{font-size:.8rem; color:var(--muted); display:flex; gap:.4rem; flex-wrap:wrap; align-items:baseline}
.cmeta b{color:var(--ink)}
.badge{font-size:.7rem; font-weight:700; border-radius:999px; padding:0 .45rem; border:1.5px solid var(--teal); color:var(--teal)}
.alink{font-size:.8rem; margin-top:.2rem}
.cbody{white-space:pre-wrap; overflow-wrap:anywhere; font-size:.92rem; margin:.3rem 0 0}
.replies{list-style:none; margin:.6rem 0 0; padding:0 0 0 .8rem; border-left:3px solid var(--rule); display:grid; gap:.6rem}
.cactions{display:flex; gap:.9rem; margin-top:.5rem; font-size:.84rem}
.replyform{display:grid; gap:.4rem; margin-top:.5rem}

/* Manage */
.admin section{margin-top:2.4rem}
.panelbox{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:1rem; margin-top:.8rem}
.formrow{display:flex; flex-wrap:wrap; gap:.8rem; align-items:end}
.checks{display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-weight:500}
.checks label{display:flex; gap:.35rem; align-items:center; font-weight:500}
.qcard h3{font-size:1.3rem}
.qcard h3 small{font-size:.9rem; color:var(--muted); font-weight:500}
.qcols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:1.4rem; margin-top:.8rem}
@media (max-width:900px){ .qcols{grid-template-columns:1fr} }
.qcols h4{font-size:.95rem; margin-bottom:.4rem}
.rows{list-style:none; margin:0 0 .8rem; padding:0; display:grid; gap:.45rem; font-size:.9rem}
.rows li{display:flex; flex-wrap:wrap; gap:.3rem .8rem; align-items:baseline; padding:.4rem .5rem; border:1px solid var(--rule); border-radius:6px}
.rows .grow{flex:1; min-width:10rem}
.rows .sub{color:var(--muted); font-size:.82rem}
.rows button{font-size:.78rem; padding:.15rem .5rem}
.tablewrap.people{overflow-x:auto}
table.people{width:100%; border-collapse:collapse; font-size:.9rem}
table.people th, table.people td{text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--rule)}
dialog{border:1px solid var(--rule); border-radius:12px; background:var(--surface); color:var(--ink); max-width:min(34rem, calc(100vw - 2rem))}
dialog::backdrop{background:rgb(0 0 0 / .35)}
dialog form{display:grid; gap:.8rem}
.urlbox{display:flex; gap:.5rem}
.urlbox input{flex:1; min-width:0}

/* Headless snapshot rendering: no portal chrome */
body.render .libbar, body.render .cbtn{display:none !important}
.snapstamp{font-size:.82rem; color:var(--muted); margin:.4rem 0 1.4rem}
@media print{ .cpanel, .cbtn, .docactions{display:none !important} .docgrid{display:block} }
.sub{color:var(--muted); font-size:.86rem}