/* =========================================================================
   ApexityEdu — Base
   Reset, typography defaults, shared primitives.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { 
  -webkit-text-size-adjust: 100%; 
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* v2.23: Remove blue tap highlight on mobile and make interactions native-like */
a, button, [role="button"], .list-row, .chip, .tabs button, .btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
a:active, button:active, [role="button"]:active, .list-row:active {
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01", "tnum";
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

h1 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-family: var(--font-body); font-weight: var(--fw-semibold); letter-spacing: 0; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:active { opacity: 0.85; text-decoration: none; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* v2.23: Native-like touch feedback — no blue flash, subtle opacity */
@media (hover: none) and (pointer: coarse) {
  a, button, .btn, .list-row, .chip, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  a:active, button:active, .btn:active, .list-row:active {
    opacity: 0.7;
    transition: opacity 80ms ease-out;
  }
}

button { font-family: inherit; font-size: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }

input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

strong, b { font-weight: var(--fw-semibold); }

small { font-size: var(--fs-xs); color: var(--ink-mute); }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-6) 0;
}

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
li { margin-bottom: var(--space-1); }

/* Bengali local_name secondary line */
.bn { font-family: var(--font-bengali); font-weight: var(--fw-regular); color: var(--ink-soft); }

/* Tabular figures — IDs, amounts, dates, marks */
.tnum, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.num { font-variant-numeric: tabular-nums; }

/* Visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Page title block — used at the top of every screen */
.page-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline);
}
.page-title h1 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}
.page-title .eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--marigold-deep);
  margin-bottom: var(--space-2);
}
.page-title .subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  margin-top: var(--space-2);
  letter-spacing: 0;
}

/* Eyebrow used outside page-title too */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Loading skeleton */
@keyframes skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.skel {
  background: var(--paper-deep);
  border-radius: var(--radius-sm);
  animation: skel-pulse 1.4s var(--ease-in-out) infinite;
}
.skel-line { height: 12px; margin-bottom: var(--space-2); }
.skel-line:last-child { margin-bottom: 0; width: 70%; }

/* Scrollbar — restrained */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: var(--radius-pill);
  border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }

* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }

/* Focus visibility */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

::selection { background: var(--selection-bg); color: var(--selection-fg); }