/* Shared chrome for every page: view tabs, filter pills, the TETCO
   overview strip and the small badges. Page files keep their own layout. */

/* ---------- view tabs ---------- */
.views{display:flex;border:1px solid var(--border,#1e2d45);border-radius:4px;overflow:hidden;flex-wrap:wrap}
.views a,.views button{background:transparent;border:0;border-right:1px solid var(--border,#1e2d45);
  color:var(--text2,#94a3b8);font:inherit;font-size:12px;padding:5px 11px;cursor:pointer;display:block;
  text-decoration:none;white-space:nowrap}
.views a:last-child,.views button:last-child{border-right:0}
.views a:hover,.views button:hover{color:var(--text,#e2e8f0);background:#16203a;text-decoration:none}
.views .on,.views .on:hover{background:var(--accent,#1d6fa4);color:#fff}
.views .vsep{width:1px;background:var(--border,#1e2d45);margin:0 2px}

/* ---------- filter pills ----------
   Off: neutral outline with a colour swatch. On: filled. The old style gave
   every pill a coloured border, so nothing looked clearly selected. */
.pill{border:1px solid var(--border,#1e2d45);border-radius:4px;background:transparent;font:inherit;
  font-size:12px;padding:3px 9px;cursor:pointer;color:var(--text2,#94a3b8);line-height:1.3;
  display:inline-flex;align-items:center;gap:6px}
.pill::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--swatch,#334155)}
.pill:hover{color:var(--text,#e2e8f0);border-color:var(--swatch,#334155)}
.pill.on{color:#fff;border-color:var(--swatch,#334155);background:var(--swatch,#334155)}
.pill.on::before{background:#fff;opacity:.85}
.plabel{font-size:11px;color:var(--text2,#94a3b8);margin-right:2px;text-transform:uppercase;letter-spacing:.04em}
.clearf{background:transparent;border:0;color:var(--accent-hi,#2589c7);font:inherit;font-size:12px;
  cursor:pointer;padding:3px 4px}
.clearf:hover{text-decoration:underline}
.clearf[hidden]{display:none}
.search{display:flex;align-items:center;gap:6px;background:var(--surface,#111827);
  border:1px solid var(--border,#1e2d45);border-radius:4px;padding:0 8px}
.search i{color:var(--text2,#94a3b8);font-size:11px}
.search input{background:transparent;border:0;color:var(--text,#e2e8f0);font:inherit;font-size:12px;
  padding:5px 0;min-width:290px;outline:none}
.search:focus-within{border-color:var(--accent,#1d6fa4)}

/* ---------- TETCO overview strip ---------- */
.ostrip{font-size:12px;line-height:1.5;padding:6px 12px;background:#1a1f2e;color:#cbd5e1;
  border-bottom:1px solid var(--border,#1e2d45)}
.ostrip.warn{background:#3a2a06;color:#fde68a}
.ostrip.bad{background:#7f1d1d;color:#fff}
.ostrip details summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ostrip details summary::-webkit-details-marker{display:none}
.ostrip details summary::after{content:'Details \25B8';color:var(--accent-hi,#2589c7);margin-left:4px}
.ostrip details[open] summary::after{content:'Hide \25BE'}
.ostrip .omore{margin-top:4px;opacity:.85;max-width:90em}
.ostrip .oflag{color:#fbbf24}

/* ---------- badges ---------- */
.newtag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.04em;color:#fff;
  background:var(--new,#7c3aed);border-radius:3px;padding:0 5px;margin-right:6px;vertical-align:1px}