/* Universal School Online — hosted Phase 1 (mobile-first)
   Brand: red #c8102e / white. Logo (logo.jpg) is never redrawn or
   recolored — it always sits on a forced-white background. */

:root {
  --red: #c8102e;
  --red-dark: #a50d26;
  --red-deep: #7a0f1e;
  --red-tint: #fff3f3;
  --red-border: #f0b3b3;
  --ink: #1a1a1a;
  --muted: #595959;
  --line: #e5e5e5;
  --input-border: #8a8a8a;
  --bg: #f6f6f6;
  --green: #0a6b2e;
  --green-tint: #e8f5ec;
  --radius: 12px;
  --space: 16px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Thai", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Ethiopic", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--ink);
}

.wrap { max-width: 960px; margin: 0 auto; padding: 16px; }

/* ---------- Accessibility: focus + skip link ---------- */
:focus-visible {
  outline: 3px solid #111;
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- Header / brand ---------- */
.site-header { background: #fff; border-bottom: 3px solid var(--red); }

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1 1 320px;
}

/* Logo: forced-white background, never stretched or recolored. */
.logo {
  max-width: 200px;
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  flex-shrink: 0;
}

.brand-text { min-width: 0; }
.site-header h1 { margin: 0; font-size: 28px; line-height: 1.15; color: var(--red); }
.tagline { margin: 4px 0 0; color: var(--muted); font-size: 15px; }

.lang-switch { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.lang-label { font-size: 20px; margin: 0; line-height: 1; }
.lang-switch select { width: auto; max-width: 220px; min-height: 44px; font-weight: 600; cursor: pointer; }

/* ---------- RTL languages (Arabic, Persian, Hebrew) ---------- */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .warn { border-left: 1px solid var(--red-border); border-right: 5px solid var(--red); }
[dir="rtl"] .skip-link { left: auto; right: 16px; }
[dir="rtl"] ul, [dir="rtl"] .lesson-list { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .lesson-list button { text-align: right; }
[dir="rtl"] .lesson-list button:disabled::before { content: "  \1F512"; }
[dir="rtl"] .lang-switch { margin-inline-start: 0; }

/* ---------- Navigation ---------- */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 0;
  padding-bottom: 16px;
}

.nav-btn {
  background: #fff;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: auto;
  margin-top: 0;
  min-height: 44px;
}
.nav-btn:hover { background: var(--red-tint); }
.nav-btn.active { background: var(--red); color: #fff; }
.nav-btn.active:hover { background: var(--red-dark); }

/* ---------- Hero ---------- */
.hero { background: var(--red); color: #fff; border-color: var(--red); }
.hero h2 { color: #fff; }
.hero p { margin: 8px 0; }
.hero .hint { color: #fff; font-size: 14px; font-weight: 600; }

/* ---------- Banners, notices, feedback ---------- */
.banner {
  background: var(--red);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
  font-weight: 600;
  line-height: 1.5;
}

.warn {
  background: var(--red-tint);
  border: 1px solid var(--red-border);
  border-left: 5px solid var(--red);
  color: var(--red-deep);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.55;
  margin-top: 12px;
}
.warn::before {
  content: "\26A0\FE0F  ";
  font-weight: 700;
}
.noscript-note { margin: 14px 0 0; }
.noscript-note::before { content: ""; }

/* Stripe-pending notice on paid courses: the most prominent callout
   on the course page. No checkout UI is added here — payment opens
   only after Stripe Live activation. */
.stripe-notice { font-weight: 600; }

/* ---------- Cards & sections ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 14px 0;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; }
h3 { margin: 16px 0 6px; font-size: 18px; line-height: 1.3; }
h3:first-child { margin-top: 0; }
p { margin: 8px 0; }
ul { margin: 8px 0; padding-left: 22px; }
ul li { margin: 6px 0; }

.section-head { margin-bottom: 4px; }
.course-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 12px;
  color: var(--red);
  margin: 0 0 4px;
}
.course-desc { font-size: 16px; }
.course-meta { font-size: 15px; margin: 10px 0 0; }
.course-meta strong { color: var(--red); font-size: 18px; }

/* ---------- Forms & filters ---------- */
label { display: block; font-weight: 600; margin: 14px 0 6px; }
label:first-child { margin-top: 0; }

input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  min-height: 44px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--red);
  outline: 3px solid #111;
  outline-offset: 1px;
}

.filters { display: grid; gap: 4px; }
.filters label { margin-top: 8px; }
.filters input, .filters select { margin-bottom: 8px; }
.filter-field { min-width: 0; }

.hint { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ---------- Buttons ---------- */
button {
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  margin-top: 14px;
  min-height: 48px;
  transition: background 0.15s ease;
}
button:hover { background: var(--red-dark); }
button:active { background: var(--red-deep); }
button.secondary { background: #fff; color: var(--red); border: 2px solid var(--red); }
button.secondary:hover { background: var(--red-tint); }
button.small { width: auto; padding: 9px 14px; font-size: 14px; min-height: 44px; }
button:disabled { opacity: 0.55; cursor: default; }
button:disabled:hover { background: var(--red); }
button.secondary:disabled:hover { background: #fff; }

.error {
  color: #a00;
  font-weight: 600;
  margin-top: 10px;
  white-space: pre-wrap;
}
.success {
  color: var(--green);
  font-weight: 600;
  background: var(--green-tint);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 12px;
}
.hidden { display: none !important; }

/* ---------- Loading & empty states ---------- */
.loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 16px;
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
}
.spinner {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 3px solid var(--red-border);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  background: #fff;
  border: 1px dashed var(--input-border);
  border-radius: var(--radius);
  padding: 28px 16px;
  margin: 14px 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

/* My Courses: the dynamic "no enrollments yet" hint renders as a
   plain .hint paragraph — present it as an empty-state box. Same for
   the Library "My Books" empty hint. */
#myList > .hint,
#myBooksList > .hint {
  background: #fff;
  border: 1px dashed var(--input-border);
  border-radius: var(--radius);
  padding: 28px 16px;
  margin: 14px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Course catalog ---------- */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

.course-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.course-card:hover {
  border-color: var(--red-border);
  box-shadow: 0 4px 16px rgba(200, 16, 46, 0.10);
}
.course-card h3 { margin: 0 0 6px; font-size: 18px; }
.course-card p { flex: 1; margin: 6px 0; }
/* Category eyebrow on each card. */
.course-card .meta:first-child {
  flex: 0 0 auto;
  margin: 0 0 8px;
  color: var(--red);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.course-card .price {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 800;
  color: var(--red);
  margin: 10px 0 4px;
}
.course-card .meta { color: var(--muted); font-size: 13px; }
.course-card button { flex: 0 0 auto; margin-top: 12px; }

/* ---------- Lessons ---------- */
.lesson-list { margin: 8px 0; padding-left: 22px; }
.lesson-list li { margin: 4px 0; border-bottom: 1px solid var(--line); }
.lesson-list li:last-child { border-bottom: 0; }
.lesson-list button {
  background: none;
  border: 0;
  color: var(--red);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  padding: 10px 4px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
  border-radius: 6px;
}
.lesson-list button:hover { background: var(--red-tint); }
/* Locked lessons (disabled until payment is confirmed) read as
   locked rows, not as broken links. */
.lesson-list button:disabled {
  color: var(--muted);
  cursor: default;
  font-weight: 500;
}
.lesson-list button:disabled::before { content: "\1F512  "; }
.lesson-list button:disabled:hover { background: none; }

.lesson-body { white-space: pre-wrap; line-height: 1.65; }
.lesson-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.lesson-nav button { margin-top: 0; flex: 1 1 auto; }
.lesson-nav button.small { padding: 9px 12px; }

/* ---------- My Courses & AI Team rows ---------- */
.agent { border-top: 1px solid var(--line); padding: 14px 0; }
.agent:first-child { border-top: 0; padding-top: 6px; }
.agent h3 { margin: 0 0 2px; }
.agent p { margin: 4px 0; }
.agent .role { color: var(--red); font-weight: 700; font-size: 14px; }
/* Enrollment status line in My Courses. */
#myList .agent p strong {
  display: inline-block;
  background: var(--red-tint);
  color: var(--red-deep);
  border: 1px solid var(--red-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
}

/* ---------- Library (Libreri) ---------- */
/* Cover placeholder: no cover image exists yet (the author uploads one
   in a later phase), so books show a red-tinted placeholder tile. */
.book-cover {
  width: 120px;
  height: 160px;
  background: var(--red-tint);
  border: 2px solid var(--red-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  margin: 4px 0 12px;
  flex: 0 0 auto;
}
.book-cover-large { width: 150px; height: 200px; font-size: 72px; }
.book-card .book-cover { margin-bottom: 12px; }
.book-formats { flex: 0 0 auto; margin: 6px 0; }
.format-badge {
  display: inline-block;
  background: var(--red-tint);
  color: var(--red-deep);
  border: 1px solid var(--red-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  margin: 2px 4px 2px 0;
}
.format-checks { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 14px 0 6px; }
.format-checks legend { font-weight: 700; padding: 0 6px; }
.format-checks label { display: flex; gap: 8px; align-items: center; font-weight: 500; margin: 8px 0; }
.format-checks input { width: auto; min-height: 20px; margin: 0; }
.audio-player { margin-top: 12px; }
.audio-player audio { width: 100%; }

/* ---------- Course PDF download ($0.99 per document, flat) ---------- */
/* Red/white like the rest of the site. The PDF block sits below the
   enrollment area on every course page. */
.pdf-area { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.pdf-price { color: var(--red); font-size: 17px; margin: 4px 0; }
.pdf-area .hint { font-size: 14px; }
.pdf-btn { background: var(--red); color: #fff; }

/* Print fallback area: hidden on screen; shown only while printing the
   course PDF (body.printing-pdf). The visibility trick keeps the page
   layout intact while only the course document prints. */
.pdf-print-area { display: none; }
body.printing-pdf .pdf-print-area { display: block; }
.pdf-print-area .pp-logo { max-width: 200px; height: auto; background: #fff; }
.pdf-print-area h1 { color: var(--red); font-size: 22px; }
.pdf-print-area h2 { color: var(--red); font-size: 17px; margin-top: 18px; }
.pdf-print-area .pp-body { white-space: pre-wrap; line-height: 1.6; }
.pdf-print-area .pp-footer { margin-top: 24px; color: var(--muted); font-size: 13px; }
@media print {
  body.printing-pdf * { visibility: hidden; }
  body.printing-pdf #pdfPrintArea,
  body.printing-pdf #pdfPrintArea * { visibility: visible; }
  body.printing-pdf #pdfPrintArea { position: absolute; left: 0; top: 0; width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer { text-align: center; color: var(--muted); font-size: 13px; padding: 18px 16px 30px; }
.site-footer p { margin: 4px 0; }

/* ---------- Larger screens ---------- */
@media (min-width: 640px) {
  .filters { grid-template-columns: 2fr 1fr; gap: 16px; }
  .filters label { margin-top: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .lesson-nav { flex-wrap: nowrap; }
  .lesson-nav button { flex: 0 1 auto; }
  .agent-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .agent-list .agent { border-top: 1px solid var(--line); padding: 14px 0; }
  .agent-list .agent:nth-child(-n+2) { border-top: 0; }
}

@media (min-width: 960px) {
  .wrap { padding: 20px; }
  .card { padding: 20px; }
  .site-header h1 { font-size: 32px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  .wrap { padding: 10px; }
  .site-header h1 { font-size: 23px; }
  .logo { max-width: 160px; }
  .header-inner { gap: 10px; }
  .lang-switch { margin-inline-start: 0; }
  .nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
  .nav-btn { flex-shrink: 0; }
  h2 { font-size: 20px; }
  .lesson-nav button { flex: 1 1 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--red-border); }
  * { transition: none !important; }
}

/* ---------- Workshop / Espas Atelye (added 2026-11-07) ---------- */
/* Red/white like the rest of the site. The agent's guiding-question box
   is a tinted card; a revealed solution outline is a green-tinted box;
   debate replies are indented under the solution they answer. */
.ws-agent { background: var(--red-tint); border-color: var(--red-border); }
.ws-solution { background: var(--green-tint); border: 1px solid #bfe3c8; border-radius: 8px; padding: 10px 12px; margin-top: 12px; }
.ws-post { border-top: 1px solid var(--line); padding: 12px 0; }
.ws-post:first-child { border-top: 0; }
.ws-reply { margin: 8px 0 8px 18px; padding: 8px 10px; background: var(--bg); border-radius: 8px; border-left: 3px solid var(--red); }
[dir="rtl"] .ws-reply { margin-left: 0; margin-right: 18px; border-left: 0; border-right: 3px solid var(--red); }

/* ---------- Author Space / Espas Otè + verification (added 2026-11-07) ---------- */
/* Verification status badges in My Books (Author Space). */
.status-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
}
.status-pending { background: #fff8e1; color: #8a5a00; border: 1px solid #e6c87a; }
.status-approved { background: var(--green-tint); color: var(--green); border: 1px solid #bfe3c8; }
.status-rejected { background: #fdecea; color: #a00; border: 1px solid #f0b3b3; }

/* Verification steps, shown one by one while Ajan Verifikasyon Liv checks. */
.verify-steps { margin: 8px 0; padding-left: 22px; }
.verify-steps li { margin: 8px 0; }
.verify-state { font-weight: 700; }
.verify-pass { color: var(--green); }
.verify-fail { color: #a00; }
.verify-reason { color: var(--red-deep); font-size: 14px; margin: 4px 0 0; }

/* Author's-rights box on the submit form (must be read + accepted). */
.rights-box { border: 2px solid var(--red-border); border-radius: 8px; padding: 10px 14px; margin: 14px 0 6px; background: var(--red-tint); }
.rights-box legend { font-weight: 700; padding: 0 6px; color: var(--red-deep); }
.rights-box ul { margin: 6px 0; }
.rights-box li { margin: 6px 0; }
.rights-accept { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; margin: 10px 0 4px; }
.rights-accept input { width: auto; min-height: 20px; margin: 2px 0 0; flex-shrink: 0; }

/* Cover upload preview (before submit) and cover shown on cards. */
.cover-preview { max-width: 200px; height: auto; display: block; border: 2px solid var(--red-border); border-radius: 8px; margin: 8px 0; }
.book-cover-img { width: 120px; height: 160px; object-fit: cover; border: 2px solid var(--red-border); border-radius: 8px; margin: 4px 0 12px; flex: 0 0 auto; }

/* Rating line on book cards / book page. */
.rating-line { font-weight: 700; color: var(--red-deep); font-size: 14px; }

/* Author dashboard (per book, in My Books): views, sales math, comments. */
.dash-stats { background: var(--red-tint); border: 1px solid var(--red-border); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.dash-stats p { margin: 4px 0; font-size: 14px; }
.dash-comments { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 4px; }
.dash-comments p { font-size: 14px; }
.author-reply { background: var(--green-tint); border-radius: 8px; padding: 8px 10px; font-size: 14px; }

/* Author profile card on the book page + rights-report card. */
.author-profile { margin-top: 12px; }
.report-card { border-color: var(--red-border); }
#topAuthorsList > .hint {
  background: #fff;
  border: 1px dashed var(--input-border);
  border-radius: var(--radius);
  padding: 28px 16px;
  margin: 14px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Jessie (Workshop) ---------- */
.ws-jessie { background: var(--red-tint); border-color: var(--red-border); }
.ws-jessie textarea:disabled { background: var(--bg); color: var(--muted); }
.ws-quiz-item { border-top: 1px solid var(--line); padding: 12px 0; }
.ws-quiz-item:first-child { border-top: 0; }
.ws-quiz-choice { display: block; width: 100%; text-align: left; margin: 6px 0; }
.ws-choice-correct { background: var(--green-tint); border-color: var(--green); }
.ws-choice-wrong { background: var(--red-tint); border-color: var(--red); }
.ws-scoreboard { margin: 8px 0; padding-left: 20px; }
.ws-scoreboard li { padding: 2px 0; }