/* ============================================================
   E-turo — shared design system
   MATATAG-aligned classroom artifacts
   Self-contained: no CDN, no webfonts, works fully offline.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand — Philippine flag palette, desaturated for long screen reading */
  --etu-blue-900: #062b57;
  --etu-blue-700: #0b4f9e;
  --etu-blue-500: #1f6fd0;
  --etu-blue-100: #e3edfb;
  --etu-blue-50:  #f2f7fe;

  --etu-sun-700: #a86400;
  --etu-sun-500: #f0a500;
  --etu-sun-300: #ffc94a;
  --etu-sun-100: #fff3d4;

  --etu-red-700: #a4161a;
  --etu-red-500: #d92d20;
  --etu-red-100: #fde7e6;

  --etu-green-700: #10693f;
  --etu-green-500: #16a34a;
  --etu-green-100: #dcfce7;

  /* Neutrals — warm, easier on the eye than pure grey */
  --etu-ink:      #14181f;
  --etu-ink-soft: #47505f;
  --etu-ink-mute: #6b7484;
  --etu-line:     #dfe3ea;
  --etu-line-soft:#eef1f6;
  --etu-surface:  #ffffff;
  --etu-canvas:   #f7f8fb;

  /* Semantic */
  --etu-accent:   var(--etu-blue-700);
  --etu-accent-fg:#ffffff;

  /* Type scale */
  --etu-font: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --etu-mono: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --etu-radius: 12px;
  --etu-radius-lg: 18px;
  --etu-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  --etu-shadow-lg: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 44px rgba(16, 24, 40, .12);

  --etu-maxw: 76rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --etu-ink:      #eef1f6;
    --etu-ink-soft: #b9c1cf;
    --etu-ink-mute: #8b95a6;
    --etu-line:     #2a3140;
    --etu-line-soft:#212836;
    --etu-surface:  #161b25;
    --etu-canvas:   #0e121a;

    --etu-blue-100: #16294a;
    --etu-blue-50:  #111d33;
    --etu-sun-100:  #3a2c05;
    --etu-green-100:#0d2e1e;
    --etu-red-100:  #3a1413;
    --etu-accent:   var(--etu-blue-500);
  }
}
:root[data-theme="dark"] {
  --etu-ink:      #eef1f6;
  --etu-ink-soft: #b9c1cf;
  --etu-ink-mute: #8b95a6;
  --etu-line:     #2a3140;
  --etu-line-soft:#212836;
  --etu-surface:  #161b25;
  --etu-canvas:   #0e121a;
  --etu-blue-100: #16294a;
  --etu-blue-50:  #111d33;
  --etu-sun-100:  #3a2c05;
  --etu-green-100:#0d2e1e;
  --etu-red-100:  #3a1413;
  --etu-accent:   var(--etu-blue-500);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--etu-font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--etu-ink);
  background: var(--etu-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.011em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }

a { color: var(--etu-accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

code, kbd { font-family: var(--etu-mono); font-size: .9em; }
code {
  background: var(--etu-blue-50);
  border: 1px solid var(--etu-line-soft);
  padding: .1em .35em;
  border-radius: 6px;
}
kbd {
  background: var(--etu-surface);
  border: 1px solid var(--etu-line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: .12em .45em;
  font-size: .85em;
  color: var(--etu-ink-soft);
}

:where(button, a, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--etu-sun-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Layout ---------- */
.etu-wrap { max-width: var(--etu-maxw); margin: 0 auto; padding: 0 1.25rem; }
.etu-narrow { max-width: 52rem; }

.etu-header {
  background: linear-gradient(135deg, var(--etu-blue-900), var(--etu-blue-700) 55%, var(--etu-blue-500));
  color: #fff;
  padding: 2.5rem 0 2.75rem;
}
.etu-header a { color: #cfe1fb; }
.etu-header h1 { color: #fff; margin-bottom: .25rem; }
.etu-header .etu-sub { color: #c5d9f5; font-size: 1.05rem; margin: 0; max-width: 46rem; }

.etu-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem;
  color: #fff; text-decoration: none; margin-bottom: 1.25rem;
}
.etu-brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--etu-sun-500); color: var(--etu-blue-900);
  display: grid; place-items: center; font-size: .95rem; font-weight: 900;
}

main { padding: 2.25rem 0 4rem; }

/* ---------- Cards & grid ---------- */
.etu-grid { display: grid; gap: 1.1rem; }
.etu-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.etu-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }

.etu-card {
  background: var(--etu-surface);
  border: 1px solid var(--etu-line);
  border-radius: var(--etu-radius-lg);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--etu-shadow);
}
a.etu-card {
  display: block; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.etu-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--etu-shadow-lg);
  border-color: var(--etu-blue-500);
}
.etu-card h3 { margin-bottom: .35rem; }
.etu-card p  { margin: 0; color: var(--etu-ink-soft); font-size: .95rem; }
.etu-card-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.25rem;
  background: var(--etu-blue-100); margin-bottom: .8rem;
}

/* ---------- Pills / badges ---------- */
.etu-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  padding: .22rem .6rem; border-radius: 999px;
  background: var(--etu-blue-100); color: var(--etu-blue-700);
  border: 1px solid transparent;
}
.etu-pill.sun   { background: var(--etu-sun-100);   color: var(--etu-sun-700); }
.etu-pill.green { background: var(--etu-green-100); color: var(--etu-green-700); }
.etu-pill.red   { background: var(--etu-red-100);   color: var(--etu-red-700); }
.etu-pill.ghost { background: transparent; color: var(--etu-ink-mute); border-color: var(--etu-line); }
.etu-pillrow { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }

/* ---------- Buttons ---------- */
.etu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 650;
  padding: .62rem 1.15rem; min-height: 44px;
  border-radius: 10px; border: 1px solid transparent;
  background: var(--etu-accent); color: var(--etu-accent-fg);
  cursor: pointer; text-decoration: none;
  transition: filter .15s ease, transform .05s ease;
}
.etu-btn:hover { filter: brightness(1.08); }
.etu-btn:active { transform: translateY(1px); }
.etu-btn.secondary {
  background: var(--etu-surface); color: var(--etu-ink); border-color: var(--etu-line);
}
.etu-btn.ghost { background: transparent; color: var(--etu-accent); border-color: currentColor; }
.etu-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Tables ---------- */
.etu-tablewrap { overflow-x: auto; border: 1px solid var(--etu-line); border-radius: var(--etu-radius); background: var(--etu-surface); }
table.etu { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 34rem; }
table.etu th, table.etu td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--etu-line-soft); vertical-align: top; }
table.etu thead th {
  background: var(--etu-blue-50); color: var(--etu-blue-700);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  position: sticky; top: 0;
}
table.etu tbody tr:last-child td { border-bottom: 0; }

/* ---------- Callouts ---------- */
.etu-note {
  border-left: 4px solid var(--etu-accent);
  background: var(--etu-blue-50);
  padding: .9rem 1.1rem; border-radius: 0 var(--etu-radius) var(--etu-radius) 0;
  margin: 1.25rem 0;
}
.etu-note.warn  { border-color: var(--etu-sun-500);  background: var(--etu-sun-100); }
.etu-note.good  { border-color: var(--etu-green-500);background: var(--etu-green-100); }
.etu-note strong:first-child { display: block; margin-bottom: .2rem; }

/* ---------- Language switcher ----------
   Shared, because both the generated document pages (tools/render-docs.mjs)
   and the hand-written grade index pages carry one.

   Plain links, never a script: the switcher has to work from a USB stick in
   a classroom with no network, and a page that navigates itself somewhere
   the teacher did not ask for is worse than one extra click. Each variant is
   a whole separate page in a single language — never one page holding two. */
.etu-langsw {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .85rem; margin: 0 0 1.25rem;
}
.etu-langsw-k {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--etu-ink-mute);
}
.etu-langsw a {
  text-decoration: none; color: var(--etu-ink-soft);
  border: 1px solid var(--etu-line); border-radius: 999px; padding: .3rem .8rem;
}
.etu-langsw a:hover { border-color: var(--etu-accent); color: var(--etu-accent); }
.etu-langsw a[aria-current="page"] {
  background: var(--etu-ink); border-color: var(--etu-ink); color: #fff; font-weight: 700;
}

/* ---------- Print ---------- */
/* ---- page footer ----
   Used by every page docShell() renders and by the browsing pages, which had
   the markup and no rules for it at all until the feedback line gave it
   something to say. */
.etu-footer {
  border-top: 1px solid var(--etu-line); margin-top: 3rem; padding: 1.6rem 0 2.4rem;
  font-size: .9rem; color: var(--etu-ink-soft);
}
.etu-footer p { margin: 0 0 .35rem; }
.etu-footer .etu-feedback { margin: 0; }
.etu-footer a { color: var(--etu-accent); }

@media print {
  :root { --etu-canvas: #fff; --etu-surface: #fff; }
  body { font-size: 11pt; }
  .etu-header { background: none !important; color: #000; padding: 0 0 1rem; border-bottom: 2px solid #000; }
  .etu-header h1, .etu-header .etu-sub, .etu-brand { color: #000 !important; }
  .no-print { display: none !important; }
  a.etu-card, .etu-card { box-shadow: none; break-inside: avoid; }
  table.etu thead th { position: static; }
  .etu-langsw { display: none !important; }
}