/* Shared control geometry for every screen, including the older utility-based pages. */
body { line-height: 1.5; }
[hidden] { display: none !important; }
.app-shell { min-width: 0; }
.app-shell > main { min-width: 0; width: 100%; }
input, select, textarea, button { box-sizing: border-box; }
input:where(:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"])),
select { min-height: 38px; max-width: 100%; }
textarea { min-height: 88px; max-width: 100%; resize: vertical; line-height: 1.6; }
input[type="checkbox"], input[type="radio"] { flex-shrink: 0; accent-color: rgb(var(--c-accent)); }
select:not([multiple]):not([size]) {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23868b94' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right .75rem center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  text-overflow: ellipsis;
}
select option { color: rgb(var(--c-sl-200)); background: rgb(var(--c-card)); }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 3px;
}
button:disabled { cursor: default; }
.nav-group + .nav-group { margin-top: 20px; }
.nav-group-title { padding: 0 12px 8px; color: rgb(var(--c-muted)); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.nav-group-links { display: flex; flex-direction: column; gap: 4px; }
.nav-link { min-height: 40px; }
/* Keep compact toolbars usable without squeezing their fields or button labels. */
.hc-button { min-height: 36px; }
.hc-filters { align-items: stretch; }
.hc-dialog > * { flex-shrink: 0; }
.hc-dialog > [data-scope] { flex-shrink: 1; }
@media (max-width: 639.98px) {
  .stack-table td { overflow-wrap: anywhere; }
  .stack-table td > :not(input):not(select):not(button) { min-width: 0; }
  .stack-table td.stack-title { flex-wrap: wrap; }
}
@media (forced-colors: active) {
  select:not([multiple]):not([size]) { appearance: auto; background-image: none; }
}