/* ==========================================================================
   IRONITT v2 — base
   --------------------------------------------------------------------------
   The from-scratch stylesheet replaces the legacy css/style.css one surface at
   a time. This file is the floor every surface stands on: reset, type,
   controls, focus, the shared glyph classes and the view frame.

   Rules for every v2 file:
   - tokens only (css/variables.css is the authority) — no ad-hoc colours;
   - flat surfaces: a surface is a fill + a 1px hairline, shadows belong to
     things that float (dock, popovers, modals) and nothing else;
   - motion is short (<= 250ms), transform/opacity only, never infinite on
     static UI; prefers-reduced-motion switches it off;
   - pages scroll. Nothing is fit-to-viewport: a layout that refuses to scroll
     clips content on short screens.
   ========================================================================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-body);
  /* md, not sm: the legacy surfaces inherit their body text from here and
     were laid out against it. v2 surfaces set their own size on their root. */
  font-size: var(--font-size-md);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent-color); text-decoration: none; }
a:hover { color: var(--accent-hover); }
/* Links inside running text are underlined: colour alone is not enough to
   mark a link (WCAG 1.4.1), and with 17 user accents some pairs are close. */
p a:not([class]), li a:not([class]), .prose a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

svg { flex-shrink: 0; }
i[class*="fa-"] { line-height: 1; }

/* ---- Controls ---------------------------------------------------------- */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  /* The global :focus-visible rule out-specifies this, so keyboard focus is
     still drawn; this only drops the UA ring for mouse clicks. */
  outline: none;
}
button:disabled { cursor: default; opacity: 0.45; }

input, textarea, select {
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) 12px;
  outline: none;
  transition: border-color var(--transition-fast);
}
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus { border-color: var(--accent-color); }
input::placeholder, textarea::placeholder { color: var(--text-muted); }

/* Double-tap-to-zoom off on everything tappable; pinch zoom stays. */
a, button, label, summary, select,
[role="button"], [role="tab"], [role="link"], [role="menuitem"],
[role="switch"], [role="option"],
input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
}

/* iOS zooms the page into any focused field under 16px and leaves it zoomed.
   Load-order proof on purpose: one 14px field anywhere brings the bug back. */
@media (max-width: 1024px) {
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  textarea,
  select,
  [contenteditable]:not([contenteditable="false"]) {
    font-size: max(16px, 1em) !important;
  }
}

/* ---- Focus ------------------------------------------------------------- */
/* Two-tone ring from the never-themed identity layer, so focus stays visible
   on every accent. The transparent outline under it is what forced-colors
   mode paints when it throws the shadow away. */
:focus-visible {
  outline: var(--focus-ring-w) solid transparent;
  outline-offset: var(--focus-ring-w);
  box-shadow: var(--focus-ring);
}
:focus:not(:focus-visible) { outline: none; }
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* ---- Scrollbars -------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }

/* ---- Accessibility helpers -------------------------------------------- */
.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus, .sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto; margin: 0;
  overflow: visible; clip-path: none; white-space: normal;
}

/* Fixed in both states so appearing on the first Tab press costs no reflow. */
.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: 50%;
  translate: -50% -200%;
  z-index: calc(var(--z-tooltip) + 1);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-comfortable);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  transition: translate var(--transition-fast);
}
.skip-link:focus, .skip-link:focus-visible { translate: -50% 0; }

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

/* ---- Shared glyphs ----------------------------------------------------- */
/* The IRON mark behaves like a glyph: em-sized, nudged to the baseline, and
   currentColor — callers decide gold (a balance) or plain (nav chrome). */
.iron-diamond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--iron-diamond-size, 1.25em);
  height: var(--iron-diamond-size, 1.25em);
  vertical-align: -0.2em;
  flex-shrink: 0;
}
.iron-diamond svg { width: 100%; height: 100%; vector-effect: non-scaling-stroke; }

.aura-emblem {
  display: inline-flex;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
  flex-shrink: 0;
}
.aura-emblem svg { width: 100%; height: 100%; }
.aura-emblem-lg { width: 2.8em; height: 2.8em; }

/* ---- Avatar + presence ------------------------------------------------- */
.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-round);
  background: var(--bg-hover) center / cover;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
img.avatar { object-fit: cover; }
.avatar > .avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.avatar > .status-dot, .avatar > .effect-particles { z-index: 1; }

.status-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  border: 2px solid var(--bg-secondary);
  background: var(--color-offline);
}
.status-dot.online { background: var(--color-online); }
.status-dot.idle { background: var(--color-idle); }
.status-dot.dnd { background: var(--color-dnd); }
.status-dot.offline, .status-dot.invisible { background: var(--color-offline); }

/* ---- App frame + views ------------------------------------------------- */
#app {
  /* Plain 100vh at rest; responsive rules swap in the measured visible height
     only while the on-screen keyboard is up (html.kb-open). */
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.main-content {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  padding: 0 var(--space-md) var(--space-md);
}
/* The skip link moves focus here; a ring round the whole page helps no one. */
.main-content:focus, .main-content:focus-visible { outline: none; box-shadow: none; }

.view {
  display: none;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.view.active {
  display: block;
  animation: v2-view-in 160ms ease-out;
}
@keyframes v2-view-in { from { opacity: 0; } to { opacity: 1; } }

/* Shared surface + section label — the two pieces every view is built from. */
.v2-surface {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

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