/* App shell and shared components for the web screens; tokens come from tokens.css */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.nav{background:var(--surface);border-right:1px solid var(--border);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s1);position:sticky;top:0;height:100vh}
.brand{font-size:var(--fs-md);font-weight:var(--fw-semibold);margin-bottom:var(--s4)}
.brand small{display:block;font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--muted)}
.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:var(--radius-sm)}
.nav a:hover{background:var(--row-hover);color:var(--text)}
.nav a[aria-current="page"]{background:var(--accent-bg);color:var(--text);font-weight:var(--fw-medium)}
.acct{margin-top:auto;border-top:1px solid var(--border);padding-top:var(--s3);font-size:var(--fs-sm)}
.acct span{display:block;color:var(--muted);font-size:var(--fs-xs)}
.main{padding:var(--s5) var(--s5) var(--s7);min-width:0}
.menu-btn{display:none}
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .nav{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s2);border-right:0;border-bottom:1px solid var(--border)}
  .brand{margin:0 auto 0 0}
  .nav a{padding:6px 10px;font-size:var(--fs-sm)}
  .acct{display:none}
  .main{padding:var(--s4) var(--gutter) var(--s6)}
}
.head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-bottom:var(--s4)}
.head h1{font-size:var(--fs-xl);line-height:var(--lh-tight);margin:0 auto 0 0;font-weight:var(--fw-semibold)}
h2{font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3)}
h3{font-size:var(--fs-md);margin:0 0 var(--s2);font-weight:var(--fw-semibold)}
.chip{border:1px solid var(--border);background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-sm);padding:5px 12px;border-radius:var(--radius-pill);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:var(--fs-sm)}
.pill i{width:10px;height:10px;border-radius:50%;background:var(--status-green)}
.pill.amber i{background:var(--status-amber)}.pill.red i{background:var(--status-red)}
.btn{font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:7px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:transparent;color:var(--text);cursor:pointer}
.btn:hover{background:var(--row-hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.sm{padding:3px 10px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s4);min-width:0}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3)}
.c8{grid-column:span 8}.c4{grid-column:span 4}.c6{grid-column:span 6}.c12{grid-column:span 12}
@media (max-width:1100px){.c8,.c4,.c6{grid-column:span 12}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin-bottom:var(--s3)}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .l{font-size:var(--fs-sm);color:var(--muted)}
.kpi .v{font-size:var(--fs-xl);font-weight:var(--fw-medium)}
.kpi .s{font-size:var(--fs-sm);color:var(--muted)}
.note{font-size:var(--fs-sm);color:var(--muted);margin:var(--s2) 0 0}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--s2)}
.legend span{display:flex;align-items:center;gap:6px}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--border);vertical-align:middle}
th{color:var(--muted);font-weight:var(--fw-medium);white-space:nowrap}
td.r,th.r{text-align:right}
.field{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm);color:var(--muted)}
input[type=text],input[type=number],select,textarea{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 10px;min-width:0}
input[type=number]{width:5.5em}
textarea,pre.code{font-family:var(--mono);font-size:var(--fs-xs);width:100%}
pre.code{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--s3);overflow:auto;margin:var(--s2) 0;max-height:240px}
.switch{position:relative;display:inline-block;width:38px;height:22px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;background:var(--border-strong);border-radius:var(--radius-pill);transition:background .15s;pointer-events:none}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--bg);transition:transform .15s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(16px);background:var(--on-accent)}
.switch input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.tag{display:inline-block;font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);color:var(--muted);white-space:nowrap}
.tag.ok{color:var(--good);background:var(--good-bg);border-color:transparent}
.tag.warn{color:var(--warning);background:var(--warning-bg);border-color:transparent}
.tag.bad{color:var(--error);background:var(--error-bg);border-color:transparent}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.rowflex{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.bar{height:8px;border-radius:2px;background:var(--border);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.state{border:1px dashed var(--border-strong);border-radius:var(--radius);padding:var(--s4);color:var(--muted);font-size:var(--fs-sm)}