/* Relay web app (styles carried over from the approved mockups, 2026-11-09): Janus Pro palette, light and dark. Highlights use the glow (colored border + soft shadow), never side stripes. */
:root, [data-theme="dark"] {
  --bg:#0F0F0F; --p1:#161616; --p2:#1D1D1D; --p3:#262626; --line:#2E2E2E; --line2:#3A3A3A;
  --ink:#F5F2ED; --mut:#A8A8A8; --dim:#7A7A7A;
  --acc:#EEFF00; --accT:#EEFF00; --accInk:#0F0F0F; --accG:rgba(238,255,0,.20); --accS:rgba(238,255,0,.08);
  --ag:#7CC4FF; --agG:rgba(124,196,255,.22); --agS:rgba(124,196,255,.10);
  --ok:#5BD18B; --okG:rgba(91,209,139,.22); --okS:rgba(91,209,139,.10);
  --bad:#FF7A7A; --badG:rgba(255,122,122,.22); --badS:rgba(255,122,122,.10);
  --peach:#FFC07B; --peachS:rgba(255,192,123,.12);
  --code:#0B0B0B; --shadow:0 10px 40px rgba(0,0,0,.45);
}
[data-theme="light"] {
  /* Janus Pro light (Rob 2026-11-10: "make the light version a little more me"): neutral grays, no cream; Cloudflare orange accent, as in the report engine's light mode. */
  --bg:#FAFAFA; --p1:#FFFFFF; --p2:#F0F0F0; --p3:#E6E6E6; --line:#E3E3E3; --line2:#CFCFCF;
  --ink:#1A1A1A; --mut:#5F5F5F; --dim:#8A8A8A;
  --acc:#F6821F; --accT:#E26D00; --accInk:#FFFFFF; --accG:rgba(246,130,31,.22); --accS:rgba(246,130,31,.09);
  --ag:#1F5F99; --agG:rgba(31,95,153,.18); --agS:rgba(31,95,153,.08);
  --ok:#1E7A45; --okG:rgba(30,122,69,.18); --okS:rgba(30,122,69,.08);
  --bad:#B42318; --badG:rgba(180,35,24,.16); --badS:rgba(180,35,24,.07);
  --peach:#9A5B00; --peachS:rgba(154,91,0,.08);
  --code:#F4F4F4; --shadow:0 10px 36px rgba(0,0,0,.08);
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); }
body { font:16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
code, .mono { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.88em; }
svg.i { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:-3px; }
svg.i.s { width:15px; height:15px; }
svg.i.l { width:22px; height:22px; }

/* ---------- glow highlights ---------- */
.glow { border:1.5px solid var(--acc) !important; box-shadow:0 0 0 3px var(--accS), 0 8px 28px var(--accG); }
.glow-ag { border:1.5px solid var(--ag) !important; box-shadow:0 0 0 3px var(--agS), 0 8px 28px var(--agG); }
.glow-ok { border:1.5px solid var(--ok) !important; box-shadow:0 0 0 3px var(--okS), 0 8px 26px var(--okG); }
.glow-bad { border:1.5px solid var(--bad) !important; box-shadow:0 0 0 3px var(--badS), 0 8px 26px var(--badG); }

/* ---------- chips, buttons ---------- */
.chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid var(--line2); color:var(--mut); white-space:nowrap; }
.chip.ag { color:var(--ag); border-color:var(--ag); background:var(--agS); }
.chip.acc { color:var(--accT); border-color:var(--acc); background:var(--accS); }
.chip.ok { color:var(--ok); border-color:var(--ok); background:var(--okS); }
.chip.bad { color:var(--bad); border-color:var(--bad); background:var(--badS); }
.chip.peach { color:var(--peach); border-color:var(--peach); background:var(--peachS); }
.chip.plain { text-transform:none; letter-spacing:0; font-weight:600; font-size:12.5px; }
.btn { display:inline-flex; align-items:center; gap:7px; font:600 14.5px/1 inherit; font-family:inherit; padding:10px 15px; border-radius:10px; border:1px solid var(--line2); background:var(--p2); color:var(--ink); cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn:hover { border-color:var(--mut); }
.btn.pri { background:var(--acc); color:var(--accInk); border-color:var(--acc); }
.btn.ok { background:var(--ok); color:var(--accInk); border-color:var(--ok); }
[data-theme="light"] .btn.ok { color:#fff; }
.btn.bad { color:var(--bad); border-color:var(--bad); background:transparent; }
.btn.sm { padding:6px 10px; font-size:13px; border-radius:8px; }
.btn.ghost { background:transparent; }

/* ---------- app frame (desktop mockups) ---------- */
.stage { padding:22px; }
.app { display:grid; grid-template-columns:262px 1fr 400px; height:calc(100vh - 100px); min-height:780px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--p1); box-shadow:var(--shadow); }
.app.two { grid-template-columns:262px 1fr; }
.app.tasks { grid-template-columns:262px 1fr 380px; }
.side { background:var(--bg); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.ws { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.ws .mark { width:32px; height:32px; border-radius:9px; background:var(--acc); color:var(--accInk); display:grid; place-items:center; font-weight:900; }
.ws b { display:block; font-size:15.5px; }
.ws small { color:var(--mut); font-size:12px; }
.search { margin:12px 14px 4px; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; background:var(--p2); color:var(--dim); font-size:13.5px; border:1px solid var(--line); }
.side .scroll { overflow:auto; flex:1; padding:6px 8px 12px; }
.side h6 { margin:14px 10px 4px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); display:flex; justify-content:space-between; }
.nav { display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:8px; font-size:14.5px; color:var(--mut); border:1px solid transparent; cursor:default; }
.nav.on { color:var(--ink); background:var(--p2); border-color:var(--line2); }
.nav.unread { color:var(--ink); font-weight:700; }
.nav .ct { margin-left:auto; font-size:11.5px; font-weight:800; padding:1px 7px; border-radius:999px; background:var(--acc); color:var(--accInk); }
.nav .ct.g { background:var(--p3); color:var(--mut); }
.side .net { border-top:1px solid var(--line); padding:12px 16px; font-size:12.5px; color:var(--mut); display:flex; align-items:center; gap:8px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block; flex:none; }
.dot.off { background:var(--dim); }
.dot.busy { background:var(--peach); }

.main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.chead { display:flex; align-items:center; gap:12px; padding:13px 20px; border-bottom:1px solid var(--line); }
.chead h2 { margin:0; font-size:18.5px; letter-spacing:-.01em; display:flex; align-items:center; gap:6px; }
.chead .sub { color:var(--mut); font-size:13.5px; }
.chead .sp { flex:1; }
.feed { flex:1; overflow:auto; padding:10px 0 16px; }
.day { text-align:center; font-size:12px; color:var(--dim); margin:10px 0; letter-spacing:.06em; text-transform:uppercase; }
.msg { display:grid; grid-template-columns:40px 1fr; gap:12px; padding:9px 20px; }
.msg:hover { background:var(--p2); }
.av { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:14px; color:var(--ink); background:var(--p3); border:1px solid var(--line2); position:relative; }
.av.ag { border-radius:11px; background:var(--agS); color:var(--ag); border:1.5px solid var(--ag); }
.av.me { background:var(--accS); color:var(--accT); border-color:var(--acc); }
.av .bot { position:absolute; right:-5px; bottom:-5px; width:17px; height:17px; border-radius:6px; background:var(--ag); color:var(--p1); display:grid; place-items:center; }
.av .bot svg { width:11px; height:11px; stroke-width:2.4; }
.mh { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mh b { font-size:15px; }
.mh .who { font-size:12.5px; color:var(--mut); }
.mh time { font-size:12.5px; color:var(--dim); }
.mb { font-size:15.5px; margin-top:2px; }
.mb p { margin:3px 0; }
.mention { color:var(--accT); background:var(--accS); padding:0 4px; border-radius:5px; font-weight:600; }
.mention.ag { color:var(--ag); background:var(--agS); }
.replies { display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-size:13.5px; color:var(--ag); font-weight:600; }
.minis { display:flex; }
.minis .av { width:22px; height:22px; border-radius:7px; font-size:10px; margin-right:-4px; }
.info { display:flex; gap:8px; align-items:flex-start; margin-top:7px; padding:8px 11px; border-radius:10px; background:var(--peachS); border:1px solid var(--peach); color:var(--ink); font-size:13.5px; }
.info svg { color:var(--peach); margin-top:1px; }
.card { border:1px solid var(--line2); border-radius:12px; background:var(--p2); padding:12px 14px; margin-top:8px; max-width:560px; }
.card .t { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; }
.card .s { color:var(--mut); font-size:13.5px; margin-top:3px; }
.bar { height:6px; border-radius:99px; background:var(--p3); overflow:hidden; margin-top:8px; }
.bar i { display:block; height:100%; background:var(--acc); border-radius:99px; }
.compose { margin:0 18px 16px; border:1px solid var(--line2); border-radius:12px; background:var(--p2); }
.compose .ta { padding:12px 14px; color:var(--dim); font-size:15px; }
.compose .tb { display:flex; align-items:center; gap:12px; padding:8px 12px; border-top:1px solid var(--line); color:var(--mut); font-size:13px; }
.compose .tb .sp { flex:1; }
.thread { border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--p1); }
.thread .feed .msg { padding:9px 16px; }
.hint { font-size:12.5px; color:var(--dim); padding:0 18px 10px; }

/* ---------- tasks ---------- */
.tabs { display:flex; gap:6px; padding:12px 20px 0; }
.tabs span { padding:7px 12px; border-radius:9px; font-size:14px; font-weight:600; color:var(--mut); border:1px solid transparent; }
.tabs span.on { color:var(--ink); border-color:var(--line2); background:var(--p2); }
.tlist { padding:14px 20px; display:flex; flex-direction:column; gap:14px; overflow:auto; }
.task { border:1px solid var(--line); border-radius:14px; background:var(--p1); padding:16px 18px; }
.task .th { display:flex; align-items:center; gap:10px; }
.task .th h3 { margin:0; font-size:18px; letter-spacing:-.01em; }
.task .meta { color:var(--mut); font-size:13.5px; margin-top:4px; display:flex; gap:14px; flex-wrap:wrap; }
.steps { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.step { display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:11px 13px; border-radius:11px; border:1px solid var(--line); background:var(--p2); }
.step .num { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-weight:800; font-size:13.5px; background:var(--p3); color:var(--mut); }
.step.done .num { background:var(--okS); color:var(--ok); }
.step.prog .num { background:var(--accS); color:var(--accT); }
.step .nm { font-weight:650; font-size:15px; }
.step .nm.strike { color:var(--mut); }
.step .up { font-size:13px; color:var(--mut); margin-top:2px; }
.step .rt { display:flex; align-items:center; gap:8px; }
.mini { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--p1); }
.mini b { font-size:15px; }
.mini .s { font-size:13px; color:var(--mut); }
.act { padding:14px 18px; overflow:auto; }
.act h4 { margin:4px 0 10px; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.ev { display:grid; grid-template-columns:62px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.ev time { color:var(--dim); font-size:12.5px; }
.ev .x { color:var(--mut); }

/* ---------- approval ---------- */
.apwrap { display:grid; grid-template-columns:1fr 330px; gap:22px; padding:22px; overflow:auto; }
.ap { border-radius:18px; background:var(--p1); padding:24px 26px; border:1px solid var(--line); }
.ap .hd { display:flex; align-items:center; gap:12px; }
.ap h2 { margin:14px 0 6px; font-size:28px; letter-spacing:-.02em; line-height:1.15; }
.ap .why { color:var(--mut); font-size:16px; margin:0 0 16px; max-width:720px; }
.kv { display:grid; grid-template-columns:150px 1fr; border-top:1px solid var(--line); }
.kv > div { padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; }
.kv > div:nth-child(odd) { color:var(--mut); font-size:13.5px; font-weight:600; padding-top:13px; }
pre.cmd { margin:0; padding:12px 14px; background:var(--code); border:1px solid var(--line2); border-radius:10px; font:13.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; white-space:pre-wrap; color:var(--ink); }
.apbtns { display:flex; gap:10px; margin-top:20px; align-items:center; flex-wrap:wrap; }
.apbtns .sp { flex:1; }
.does { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.does > div { border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:14px; background:var(--p2); }
.does h5 { margin:0 0 6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.does ul { margin:0; padding-left:18px; }
.does li { margin:3px 0; }
.stamp { display:none; align-items:center; gap:10px; margin-top:18px; padding:12px 14px; border-radius:12px; font-weight:600; }
.side2 { display:flex; flex-direction:column; gap:12px; }
.side2 h4 { margin:2px 0 0; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }

/* ---------- admin ---------- */
.admin { padding:20px 24px; overflow:auto; display:flex; flex-direction:column; gap:22px; }
.panel { border:1px solid var(--line); border-radius:14px; background:var(--p1); overflow:hidden; }
.panel .ph { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); }
.panel .ph h3 { margin:0; font-size:17px; }
.panel .ph .sp { flex:1; }
table.t { width:100%; border-collapse:collapse; font-size:14px; }
table.t th { text-align:left; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:10px 18px; border-bottom:1px solid var(--line); font-weight:700; }
table.t td { padding:12px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.t tr:last-child td { border-bottom:0; }
table.t tr.hl td { background:var(--accS); }
.who2 { display:flex; align-items:center; gap:10px; }
.who2 .av { width:32px; height:32px; font-size:12px; border-radius:9px; }
.who2 small { display:block; color:var(--mut); font-size:12.5px; }
.scopes { display:flex; gap:5px; flex-wrap:wrap; }
.scopes .chip { text-transform:none; letter-spacing:0; font-weight:600; font-size:12px; }
.adm-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }


/* ================= live app additions ================= */
html, body { height:100%; }
.boot { display:grid; place-items:center; height:100vh; font-weight:800; color:var(--dim); letter-spacing:.1em; }
button { font-family:inherit; }
.app { height:100vh; height:100dvh; min-height:0; border:0; border-radius:0; box-shadow:none; }
.app.three { grid-template-columns:262px 1fr 400px; }
.nav { cursor:pointer; user-select:none; }
.nav:hover { color:var(--ink); }
.nav .chip.ag { margin-left:auto; padding:0 6px; font-size:10px; }
.side h6 button { background:none; border:0; color:var(--dim); cursor:pointer; padding:0; }
.side h6 button:hover { color:var(--ink); }
.side .net { justify-content:space-between; }
.side .net .me { display:flex; align-items:center; gap:8px; min-width:0; }
.side .net .me b { color:var(--ink); font-size:13px; }
.iconbtn { background:none; border:1px solid transparent; color:var(--mut); cursor:pointer; padding:5px; border-radius:8px; display:inline-grid; place-items:center; }
.iconbtn:hover { color:var(--ink); border-color:var(--line2); }
.feed .empty, .empty { color:var(--dim); text-align:center; padding:40px 20px; font-size:14px; }
.msg { position:relative; }
.msg .tools { position:absolute; right:16px; top:4px; display:none; gap:4px; background:var(--p1); border:1px solid var(--line2); border-radius:9px; padding:2px; }
.msg:hover .tools, .msg:focus-within .tools { display:flex; }
.msg.hid { opacity:.55; }
.msg.hid .mb { text-decoration:line-through; text-decoration-color:var(--dim); }
.msg.sys .mb { color:var(--mut); }
.msg.sel { background:var(--p2); }
.mb p { white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
.replies { cursor:pointer; background:none; border:0; padding:0; font-family:inherit; }
.card.click, .mini.click, .task.click { cursor:pointer; }
.card .t .chip, .mini .chip { margin-left:auto; }
.compose { display:flex; flex-direction:column; }
.compose textarea { width:100%; border:0; background:transparent; color:var(--ink); font:15px/1.45 inherit; font-family:inherit; padding:12px 14px; resize:none; min-height:46px; max-height:220px; outline:none; }
.compose textarea::placeholder { color:var(--dim); }
.compose .tb button { background:none; border:0; color:var(--mut); cursor:pointer; display:inline-flex; align-items:center; gap:5px; font:inherit; padding:3px 4px; border-radius:6px; }
.compose .tb button:hover { color:var(--ink); }
.compose .tb .send { color:var(--accT); font-weight:700; }
.compose.err { border-color:var(--bad); box-shadow:0 0 0 3px var(--badS); }
.chead h2 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chead .back { display:none; }
.tabs button { padding:7px 12px; border-radius:9px; font:600 14px inherit; font-family:inherit; color:var(--mut); border:1px solid transparent; background:none; cursor:pointer; }
.tabs button.on { color:var(--ink); border-color:var(--line2); background:var(--p2); }
.step .up .bad { color:var(--bad); }
.ev b { color:var(--ink); }
.ev .x .bad { color:var(--bad); }
.kv .muted, .muted { color:var(--mut); }
.stamp.show { display:flex; }
.ap .meta { color:var(--mut); font-size:13.5px; }
.ap .hd .sp { flex:1; }
.side2 .mini { cursor:pointer; }
.admin .ph .hint2 { color:var(--mut); font-size:13px; }
.panel .foot2 { padding:10px 18px; font-size:13px; color:var(--mut); }
.audit-filter { display:flex; align-items:center; gap:8px; }
.audit-filter input { width:220px; }
table.t td.nowrap, .nowrap { white-space:nowrap; }
table.t td.dim, .dim { color:var(--dim); }
table.t td .bad, .bad-t { color:var(--bad); }
table.t td.mono { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:12.5px; }
.scroll-x { overflow-x:auto; }

/* forms */
label.f { display:block; font-size:13px; font-weight:650; color:var(--mut); margin:12px 0 5px; }
input.in, textarea.in, select.in { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line2); background:var(--p2); color:var(--ink); font:15px/1.4 inherit; font-family:inherit; outline:none; }
input.in:focus, textarea.in:focus, select.in:focus { border-color:var(--acc); box-shadow:0 0 0 3px var(--accS); }
input.in.code { font:600 22px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:.3em; text-align:center; }
.formerr { color:var(--bad); font-size:14px; margin-top:12px; min-height:1px; }
.formok { color:var(--ok); font-size:14px; margin-top:12px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row .sp { flex:1; }
.checks { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:6px; font-size:14px; }
.checks label { display:flex; align-items:center; gap:6px; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* sign-in, request access, setup */
.auth { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:28px 16px; }
.auth .box { width:100%; max-width:430px; }
.auth .brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.auth .brand .mark { width:40px; height:40px; border-radius:11px; background:var(--acc); color:var(--accInk); display:grid; place-items:center; font-weight:900; font-size:20px; }
.auth .brand b { font-size:22px; letter-spacing:-.02em; display:block; }
.auth .brand small { color:var(--mut); font-size:13px; }
.auth .panel { padding:22px 22px 20px; }
.auth h1 { margin:0 0 4px; font-size:24px; letter-spacing:-.02em; }
.auth p.lead { margin:0 0 6px; color:var(--mut); font-size:14.5px; }
.auth .btn.pri { width:100%; justify-content:center; margin-top:18px; padding:13px; }
.auth .alt { margin-top:16px; font-size:14px; color:var(--mut); text-align:center; }
.auth .alt a { color:var(--accT); font-weight:600; text-decoration:none; cursor:pointer; }
.auth .rules { margin-top:18px; font-size:12.5px; color:var(--dim); line-height:1.55; text-align:center; }
.keybox { margin:10px 0 4px; padding:12px 14px; border-radius:10px; background:var(--code); border:1px solid var(--line2); font:600 15px/1.5 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:.08em; word-break:break-all; }
.steps-ol { margin:8px 0 0; padding-left:20px; color:var(--mut); font-size:14px; }
.steps-ol li { margin:5px 0; }
.themebtn { position:fixed; top:14px; right:14px; }

/* toast with Undo */
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:12px; padding:11px 14px 11px 16px; border-radius:12px; background:var(--p1); border:1.5px solid var(--acc); box-shadow:0 0 0 3px var(--accS), 0 10px 30px var(--accG); font-size:14.5px; max-width:min(560px, calc(100vw - 24px)); }
.toast.err { border-color:var(--bad); box-shadow:0 0 0 3px var(--badS), 0 10px 30px var(--badG); }
.toast[hidden] { display:none; }

/* dialogs */
.modal-bg { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.55); display:grid; place-items:center; padding:16px; }
.modal { width:100%; max-width:520px; max-height:calc(100vh - 32px); overflow:auto; border-radius:16px; background:var(--p1); border:1px solid var(--line2); box-shadow:var(--shadow); padding:20px 22px; }
.modal h3 { margin:0 0 4px; font-size:19px; letter-spacing:-.01em; }
.modal .row.end { justify-content:flex-end; margin-top:18px; }
.once { margin-top:12px; }
.once .keybox { font-size:13px; letter-spacing:0; }

/* mobile bottom bar */
.tabbar { display:none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .app.three, .app.tasks { grid-template-columns:240px 1fr; }
  .app.three .thread, .app.tasks .thread { position:fixed; right:0; top:0; bottom:0; width:min(420px, 100vw); z-index:30; box-shadow:var(--shadow); }
  .apwrap { grid-template-columns:1fr; }
  .adm-grid { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .app, .app.two, .app.three, .app.tasks { grid-template-columns:1fr; height:auto; min-height:100dvh; }
  .side { display:none; }
  .app.show-side .side { display:flex; position:fixed; inset:0 0 64px 0; z-index:35; }
  .main { min-height:calc(100dvh - 64px); padding-bottom:64px; }
  .app.three .thread, .app.tasks .thread { inset:0 0 64px 0; width:100vw; }
  .chead { padding:12px 14px; }
  .chead .back { display:inline-grid; }
  .chead .sub { display:none; }
  .msg { padding:8px 12px; grid-template-columns:34px 1fr; gap:10px; }
  .msg .av { width:34px; height:34px; }
  .compose { margin:0 10px 10px; }
  .tlist, .admin { padding:12px; }
  .apwrap { padding:12px; }
  .ap { padding:18px 16px; }
  .ap h2 { font-size:21px; }
  .kv { grid-template-columns:1fr; }
  .kv > div:nth-child(odd) { padding-bottom:0; border-bottom:0; }
  .apbtns .btn { flex:1; justify-content:center; padding:14px; font-size:16px; }
  .does { grid-template-columns:1fr; }
  .step { grid-template-columns:30px 1fr; }
  .step .rt { grid-column:1 / -1; justify-content:flex-end; }
  table.t th, table.t td { padding:10px 12px; }
  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; justify-content:space-around; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--p1); }
  .tabbar button { background:none; border:0; color:var(--mut); font:600 11px inherit; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; position:relative; padding:2px 10px; }
  .tabbar button.on { color:var(--accT); }
  .tabbar .ct { position:absolute; top:-4px; right:2px; font-size:10px; font-weight:800; padding:0 5px; border-radius:99px; background:var(--acc); color:var(--accInk); }
  .toast { bottom:80px; }
}
a.nav { text-decoration:none; }
.act h4.mt { margin-top:22px; }
.does h5.ok-t { color:var(--ok); }
.does h5.bad-t { color:var(--bad); }
.side2 h4 { margin-top:8px; }
.side2 h4:first-child { margin-top:2px; }
.chead a.btn { text-decoration:none; }
.mention { text-decoration:none; }
.ap .hd .meta { margin-top:2px; }
.thread .chead h2 { flex:none; }
.thread .chead .sub { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin > .panel, .tlist > .task, .tlist > .mini, .side2 > * { flex:none; }
.main { overflow:hidden; }
.admin, .tlist, .apwrap { flex:1; min-height:0; }

/* Light mode: give the sidebar its own soft gray so it reads as a panel against the white main area (Rob 2026-11-10, "what happened to the sidebar"). */
[data-theme="light"] .side { background:#F2F2F2; }
[data-theme="light"] .nav.on { background:#FFFFFF; border-color:var(--line2); }

/* Two-column views have no thread panel: the empty thread section was wrapping into a second grid row, cutting the sidebar and main area short by ~300px (Rob 2026-11-10). */
.app.two > .thread { display:none; }