/*
 * 02-base.css — reset and element defaults
 * ---------------------------------------------------------------------------
 * Replaces the reset that Tailwind's Preflight used to provide. Deliberately
 * conservative: it reproduces Preflight's behaviour so removing the CDN does
 * not shift existing layouts.
 * ---------------------------------------------------------------------------
 */

*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--aura-content-border); }

html { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--aura-font-sans);
  line-height: inherit;
  color: var(--aura-text);
  background-color: var(--aura-content-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings inherit by default (Preflight behaviour) — component and utility
   classes set their own size/weight. */
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
p, figure, blockquote, dl, dd { margin: 0; }
ol, ul, menu { margin: 0; padding: 0; list-style: none; }

hr { height: 0; color: inherit; border-top-width: 1px; }
a  { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
code, kbd, samp, pre { font-family: var(--aura-font-mono); font-size: 1em; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }

table { text-indent: 0; border-color: inherit; border-collapse: collapse; }

button, input, optgroup, select, textarea {
  font-family: inherit; font-size: 100%; font-weight: inherit;
  line-height: inherit; color: inherit; margin: 0; padding: 0;
}
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button; background-color: transparent; background-image: none; cursor: pointer;
}
:-moz-focusring { outline: auto; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }
textarea { resize: vertical; }

input::placeholder, textarea::placeholder { opacity: 1; color: var(--aura-text-subtle); }

img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }

[hidden] { display: none; }

/* Alpine.js: hide x-cloak elements until Alpine initialises */
[x-cloak] { display: none !important; }

/* ── Focus ─────────────────────────────────────────────────────────────────
   Brand-coloured focus ring. Keyboard users get a visible indicator on every
   interactive element; :focus-visible keeps it off mouse clicks. */
*:focus-visible {
  outline: 2px solid var(--aura-primary);
  outline-offset: 2px;
}

/* ── Thin scrollbar for the sidebar ──────────────────────────────────────────
   Light-on-dark: the sidebar is dark chrome, so a purple thumb was invisible. */
aside::-webkit-scrollbar          { width: 3px; }
aside::-webkit-scrollbar-track    { background: transparent; }
aside::-webkit-scrollbar-thumb    { background: rgba(255, 255, 255, 0.14); border-radius: var(--aura-radius-full); }
aside::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); }

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