/* App-shell base: reset, typography, links, scrollbars.
   Loaded after fonts.css + tokens.css (templates/app_base.html). */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

a {
  color: var(--accent-text);
  text-decoration: none;
}
a:hover { color: var(--accent-text); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font-family: inherit;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
}

svg { display: block; }

.mono { font-family: var(--font-mono); }

:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

/* Keyboard skip-to-content: off-canvas until focused (app_base.html). */
.skip-link {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 80;
  padding: 8px 14px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow);
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 10px;
  border: 3px solid var(--surface);
}
::-webkit-scrollbar-track { background: transparent; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}