/* #435 tranche-1 web surface — supplements dashboards.css. Dark, mobile-first. */
:root { --bg:#0f1419; --panel:#161c24; --line:#26303b; --txt:#e6edf3; --muted:#8b98a5; --accent:#c9a86a; --ok:#2ea043; --warn:#d29922; --err:#f85149; }
.nav-group { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:14px 0 4px; padding-left:4px; }
.nav-muted { opacity:.62; }
.soon { font-size:9px; background:var(--line); color:var(--muted); border-radius:6px; padding:1px 5px; margin-left:4px; }
.rt-dot { color:var(--ok); font-size:9px; }
.linkbtn { background:none; border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:6px 12px; font-size:12px; cursor:pointer; width:100%; }
.logout-form { margin-top:6px; }

/* views */
.view-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.badge { font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:2px 8px; }
.rt-badge { font-size:11px; color:var(--ok); } .rt-badge.flash { color:#fff; }
.poll-badge { font-size:11px; color:var(--muted); }
.banner { border-radius:10px; padding:10px 14px; margin:10px 0; font-size:13px; border:1px solid var(--line); }
.banner.warn { background:rgba(210,153,34,.10); border-color:var(--warn); color:#e3c07a; }
.banner.error { background:rgba(248,81,73,.10); border-color:var(--err); color:#ff9a92; }
.banner.ok { background:rgba(46,160,67,.10); border-color:var(--ok); color:#7ee2a0; }
.summary { display:flex; gap:12px; flex-wrap:wrap; margin:10px 0; }
.kv { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 14px; min-width:120px; }
.kv span { display:block; font-size:11px; color:var(--muted); } .kv b { font-size:16px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; margin:12px 0; }
.panel h3 { margin:0 0 6px; font-size:14px; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin-top:8px; -webkit-overflow-scrolling:touch; }
.datatable { width:100%; border-collapse:collapse; font-size:13px; }
.datatable th { text-align:left; padding:10px 12px; background:var(--panel); color:var(--muted); position:sticky; top:0; white-space:nowrap; }
.datatable td { padding:9px 12px; border-top:1px solid var(--line); max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.empty { padding:28px; text-align:center; color:var(--muted); }
.placeholder { max-width:620px; } .placeholder h2 { margin:10px 0 6px; }
.muted { color:var(--muted); font-size:13px; }

/* auth pages */
.auth-body { background:var(--bg); color:var(--txt); font-family:Inter,system-ui,sans-serif; display:flex; min-height:100vh; align-items:center; justify-content:center; margin:0; padding:20px; }
.auth-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px; max-width:380px; width:100%; }
.auth-card .brand { font-size:20px; font-weight:700; } .auth-card .brand-sub { color:var(--muted); font-size:12px; margin-bottom:16px; }
.auth-form { display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.auth-form label { font-size:12px; color:var(--muted); }
.auth-form input { background:var(--bg); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:11px 12px; font-size:15px; }
.btn { background:var(--accent); color:#101418; border:none; border-radius:10px; padding:11px 16px; font-weight:600; font-size:14px; cursor:pointer; }
.btn:disabled { opacity:.5; cursor:default; }
.qr { text-align:center; margin:10px 0; } .qr img { background:#fff; padding:8px; border-radius:10px; }
.secret { font-size:12px; color:var(--muted); margin:8px 0; word-break:break-all; } .secret code { color:var(--accent); }

/* chat */
.chat { display:flex; flex-direction:column; height:calc(100vh - 120px); }
.chat-log { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:10px; }
.msg { padding:10px 14px; border-radius:12px; max-width:80%; white-space:pre-wrap; font-size:14px; }
.msg.user { align-self:flex-end; background:var(--accent); color:#101418; }
.msg.assistant { align-self:flex-start; background:var(--panel); border:1px solid var(--line); }
.msg.error { align-self:flex-start; background:rgba(248,81,73,.12); border:1px solid var(--err); color:#ff9a92; }
.chat-input { display:flex; gap:8px; padding:8px; border-top:1px solid var(--line); }
.chat-input textarea { flex:1; background:var(--bg); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:10px; resize:none; font-family:inherit; }
@media (max-width:640px){ .summary{flex-direction:column;} .kv{min-width:auto;} .datatable td{max-width:180px;} }

/* #445 Trust-Matrix Editor */
.tm-toolbar { display:flex; align-items:center; gap:12px; margin:8px 0 4px; flex-wrap:wrap; }
.tm-form { border:1px solid var(--line); border-radius:10px; padding:12px; margin:10px 0; background:rgba(255,255,255,.01); }
.tm-row { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.tm-cellname { font-size:13px; font-weight:600; min-width:200px; }
.tm-field { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted); }
.tm-grid { display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:8px 14px; margin:8px 0; }
.tm-form select, .tm-form input[type=number] { background:var(--bg); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:7px 9px; font-size:13px; max-width:320px; }
.tm-badges { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; min-height:0; }
.tm-badge { font-size:10px; border-radius:6px; padding:2px 7px; border:1px solid var(--line); }
.tm-badge.warn { background:rgba(210,153,34,.12); border-color:var(--warn); color:#e3c07a; }
.tm-badge.err { background:rgba(248,81,73,.12); border-color:var(--err); color:#ff9a92; }
.tm-adv { margin:8px 0; border:1px dashed var(--line); border-radius:8px; padding:8px 10px; }
.tm-adv summary { cursor:pointer; font-size:12px; color:var(--muted); }
.tm-knobs { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px 14px; margin-top:10px; }
.tm-knobs .knob { font-size:12px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tm-knobs .knob.locked { opacity:.45; }
.tm-knobs .knob.needs-degr { color:var(--warn); }
.tm-knobs .knob.locked { font-weight:600; } /* enabled-but-unsupported: flagged, NOT disabled */
.tm-hint { margin:8px 0 0; font-size:11px; }
.tm-actions { display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
.tm-actions .btn { padding:7px 16px; font-size:13px; }
.tm-actions .btn:disabled { opacity:.5; cursor:not-allowed; }
.tm-warn { font-size:12px; color:var(--warn); }
.tm-status { font-size:12px; }
.tm-status.ok { color:var(--ok); } .tm-status.err { color:var(--err); }
.tm-foot { margin-top:14px; }

/* fix/trust-matrix-labels — legibility. dashboards.css sets html,body{color:var(--navy)}
   (#0E1932) for the LIGHT dashboards theme; the trust-matrix surface paints dark .panel
   islands (--panel:#161c24) on that body, but web.css never re-asserted a light foreground
   here. So every element that did NOT set its own color (panel <h3>, .tm-cellname, the knob
   labels) inherited dark navy text → navy-on-#161c24 ≈ 1.1:1 = invisible. Re-assert the dark
   surface's light foreground: cream (--txt #e6edf3) on #161c24 ≈ 14:1 (WCAG AAA). Scoped to
   #tm-body + two trust-matrix-only classes, so no other surface is touched. */
#tm-body { color:var(--txt); }
#tm-body .panel h3 { color:var(--txt); }
#tm-body .tm-cellname { color:var(--txt); }
#tm-body .tm-adv summary { color:var(--txt); }            /* the Advanced-profile expander control */
.tm-label { display:block; color:var(--txt); font-size:11px; font-weight:500; letter-spacing:.02em; margin-bottom:1px; }
.tm-tier { color:var(--accent); font-weight:600; }        /* trust tier in cell header — brass #c9a86a on #161c24 ≈ 7.7:1 */

@media (max-width:640px){ .tm-grid{grid-template-columns:1fr;} .tm-cellname{min-width:auto;} }