/* Everything on top of Pico.css. No inline styles anywhere (CSP). */
:root { --pico-font-size: 95%; }
body > nav.top { padding: 0.5rem 1rem; border-bottom: 1px solid var(--pico-muted-border-color); }
nav.top ul { margin: 0; }
nav.top .brand { font-weight: 700; }
nav.top a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
main.container { padding-top: 1.5rem; padding-bottom: 3rem; }
.boot { text-align: center; margin-top: 4rem; }

.error { color: var(--pico-del-color); }
.notice { color: var(--pico-ins-color); }
.muted { color: var(--pico-muted-color); }
button.small, [role="button"].small { padding: 0.15rem 0.6rem; font-size: 0.85rem; margin: 0; width: auto; }
.confirm { display: inline-flex; gap: 0.3rem; align-items: center; }
.confirm button { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.actions > * { margin: 0; width: auto; }
.row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
.row > * { flex: 1 1 10rem; margin-bottom: 0; }
.row > .grow-2 { flex: 2 1 16rem; }
.row > .shrink { flex: 0 0 auto; }
.table-wrap { overflow-x: auto; }
table td, table th { vertical-align: middle; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.nowrap { white-space: nowrap; }
td .actions { flex-wrap: nowrap; }
.tag { display: inline-block; padding: 0 0.5rem; margin: 0 0.25rem 0.1rem 0; border-radius: 1rem; font-size: 0.8rem; background: var(--pico-muted-border-color); }
.badge { display: inline-block; padding: 0 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; border: 1px solid var(--pico-muted-border-color); }
.badge.warn { border-color: var(--pico-del-color); color: var(--pico-del-color); }
.secret { border: 2px solid var(--pico-primary); }
.secret input { font-family: var(--pico-font-family-monospace); }
pre.preview, pre.meta { max-height: 32rem; overflow: auto; white-space: pre-wrap; word-break: break-word; }
iframe.preview { color-scheme: light; width: 100%; height: 32rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: #fff; }
details.panel { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.75rem 1rem; margin-bottom: 1rem; }
details.panel > summary { font-weight: 600; margin-bottom: 0; }
details.panel[open] > summary { margin-bottom: 0.75rem; }
.signin { max-width: 32rem; margin: 3rem auto; }
.signin article { margin-bottom: 1rem; }
.gsi-slot { min-height: 44px; }
h1 { --pico-font-size: 1.8rem; }
.crumbs { margin-bottom: 0.5rem; }
td.mono, .mono { font-family: var(--pico-font-family-monospace); font-size: 0.85rem; }

/* theme switcher in the top nav */
.theme-switch {
  width: auto;
  margin: 0;
  padding: 0.25rem 2rem 0.25rem 0.5rem;
  font-size: 0.875rem;
  height: auto;
}

/* admin: Runtime card (Unit stats) */
article.runtime > header small { font-weight: normal; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.tile { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); min-width: 0; }
.tile-label { color: var(--pico-muted-color); }
.tile-value { font-size: 1.4rem; line-height: 1.2; overflow-wrap: anywhere; }
.tile-sub { color: var(--pico-muted-color); overflow-wrap: anywhere; }