/* Element defaults, accessibility affordances and shared text utilities. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #efeaf6;
  font-family: 'Outfit', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Components below set an explicit `display`, which beats the user-agent rule
 * for [hidden]. Without this, hiding a node by setting `.hidden = true` does
 * nothing at all. */
[hidden] { display: none !important; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent-deep); }
::placeholder { color: #a7a3ae; opacity: 1; }
input, select, button, textarea { font-family: inherit; color: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #e0dbe8; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* The mockup draws no focus states. Every interactive control gets one, at
 * 2px and 3:1 against both the white cards and the dark rail. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.rail :focus-visible,
.tabbar :focus-visible { outline-color: #d9bcff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

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

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--dark); color: #fff;
  padding: 10px 16px; border-radius: var(--r-btn);
  font-size: 14px; font-weight: 500;
}
.skip:focus { transform: translateY(0); color: #fff; }

/* Text utilities */
.h2 { margin: 0; font-size: var(--t-h2); font-weight: 600; line-height: 1.2; }
.h3 { margin: 0; font-size: var(--t-lg); font-weight: 600; }
.sub { font-size: var(--t-small); color: var(--muted); }
.micro { font-size: var(--t-micro); color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tnum { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: var(--t-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* Prefer ellipsis over reflow in dense rows; callers pair this with a title
 * attribute so the full value stays reachable. */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* URLs, folder names and ids reflow rather than overflow their card. */
.wrap-any { overflow-wrap: anywhere; }

/* A repaint target that sits directly in a grid or flex parent. Without this
 * the wrapper is a plain block, and the card inside it cannot stretch to the
 * cell — it stops at its own content height. */
.cell { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }

.stack { display: flex; flex-direction: column; }
.row-x { display: flex; align-items: center; }
.grow { margin-top: auto; }
.fill { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.scroll-y { overflow-y: auto; overscroll-behavior: contain; }