/* Reset, typography, focus handling, and the layout utilities the shell uses.
   Component-specific visuals live in components.css. */
*, *::before, *::after {
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark light;
  background: var(--bg);
  color: var(--fg);
  font: var(--text-base)/1.45 var(--font-sans);
}

body {
  min-height: 100vh;
  background: var(--bg);
  overflow: hidden;                 /* the shell owns its own scroll areas */
}

main {
  display: grid;
  min-height: 100vh;
}

/* Our own custom elements: box containers, styled further in components.css. */
app-shell, model-card, vram-meter, metrics-panel, config-editor, toast-panel {
  display: block;
  border: 0;
  color: inherit;
  background: none;
}

h1 { font-size: var(--text-lg); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h1, h2, h3 { font-weight: 650; letter-spacing: -.015em; }
p, dt, dd { font-weight: 400; }
code, kbd, samp, time, .mono { font-family: var(--font-mono); font-size: .95em; }

/* Focus: one visible, non-colour-only signal for every interactive element. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

button, summary, [role="button"] {
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: none;
  border-radius: var(--radius-sm);
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  min-inline-size: var(--touch);
  min-block-size: var(--touch);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
}
button:active, [role="button"]:active { transform: scale(0.98); }
button:disabled, .disabled { color: var(--fg-subtle); cursor: default; }
.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.scroll-x, .scroll-y {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Initial paint before the first metrics frame arrives (CSS only). */
.skeleton {
  display: grid;
  place-content: center;
  min-block-size: var(--card-min-h);
  color: var(--fg-muted);
  font: var(--text-sm) var(--font-mono);
  background: linear-gradient(90deg, transparent, var(--bg-hover) 50%, transparent);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer {
  from { background-position: 0 0; }
  to { background-position: 200% 0; }
}

/* Tab switching: cross-fade + 16px slide, transform/opacity only. */
.tab-view {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.tab-view.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* The shell's three rows. */
.shell {
  display: grid;
  grid-template-areas:
    "top"
    "tabs"
    "body";
  block-size: 100%;
}
.topbar { grid-area: top; }
.tabs { grid-area: tabs; }
.tab-body {
  grid-area: body;
  display: grid;
  min-block-size: 0;                /* grid children need this to shrink */
  overflow: auto;
}

/* Two-column main grid; stacks under 768px (mobile usability). */
.main-grid {
  display: grid;
  grid-template-areas:
    "cards detail"
    "gauge detail";
  gap: var(--space-3);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

@media (max-width: 767px) {
  .main-grid, .grid-2 { grid-template-areas: "cards" "gauge" "detail"; }
  .grid-2 { display: block; }
  :root { --card-min-h: 108px; --gauge-size: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--bg-elevated); }
  .tab-view { transition: opacity 0ms; transform: none; }
  .tab-view.active { transform: none; }
}