/*
 * Fallback font. The real app uses Segoe UI, which only Windows has. On other
 * systems the browser would substitute a wider, larger-looking font (nav labels
 * wrap, everything feels bigger), so we bundle Selawik: Microsoft's open-source
 * stand-in with Segoe UI's metrics (SIL Open Font License, assets/fonts/OFL-Selawik.txt).
 * Windows still uses the real Segoe UI because it comes first in the stack.
 */
@font-face {
  font-family: "LCC Selawik";
  src: url("../assets/fonts/Selawik-Regular.ttf") format("truetype");
  font-weight: 100 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "LCC Selawik";
  src: url("../assets/fonts/Selawik-Bold.ttf") format("truetype");
  font-weight: 600 900;
  font-style: normal;
  font-display: block;
}

/* Reset and base typography. */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* the app manages its own scroll areas, like the real one */
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Inline SVG icons (Fluent UI System Icons) */
svg.i { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
svg.i.i-12 { width: 12px; height: 12px; }
svg.i.i-14 { width: 14px; height: 14px; }
svg.i.i-16 { width: 16px; height: 16px; }
svg.i.i-24 { width: 24px; height: 24px; }

/* Thin scrollbars like the real app (Chromium/Edge) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C8C6C4; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #A19F9D; background-clip: content-box; border: 2px solid transparent; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }
.muted { color: var(--text-secondary); }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }