/* ─── Base styles — Hover app ────────────────────────────────────────────────
 *
 * Depends on tokens.css being loaded first.
 *
 * Includes:
 *   - Box-model reset
 *   - Scrollbar styling
 *   - Body base
 *   - Core layout primitives
 *   - Utility classes
 * ────────────────────────────────────────────────────────────────────────── */

/* ─── Reset ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */

/* Firefox */
* {
  scrollbar-color: var(--background-colour--thumb-track)
    var(--background-colour--panel);
  scrollbar-width: thin;
}

/* WebKit / Blink */
::-webkit-scrollbar {
  width: var(--size--scrollbar);
  height: var(--size--scrollbar);
}

::-webkit-scrollbar-track {
  background: var(--background-colour--panel);
}

::-webkit-scrollbar-thumb {
  background: var(--background-colour--thumb-track);
  border-radius: var(--radius--small);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--background-colour--thumb-hover);
}

/* ─── Body ───────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  font-family: var(--font-family--primary);
  font-size: var(--font-size--body);
  font-weight: 400;
  line-height: var(--line-height--body);
  color: var(--text-colour--primary);
  background: var(--background-colour--canvas);
  min-height: 100vh;
}

/* ─── Core layout ────────────────────────────────────────────────────────── */

.app-shell {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.section {
  padding: var(--section-padding) var(--section-gutter);
  border-bottom: var(--section-border);
}

.content-scroll {
  flex: 1;
  background-color: var(--background-colour--panel);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing--3xl);
  border-radius: var(--radius--control);
  padding-right: var(--size--scrollbar);
}

/* ─── Utilities ──────────────────────────────────────────────────────────── */

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}