/* ============================================================
   curriculum.css  ✦  the personal academy
   tabs, schedules, readings — all very serious, a little precious
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --ink:         #343c64;
  --ink-light:   #5a6490;
  --ink-faint:   #8a93b8;
  --gold:        #FCB033;
  --gold-pale:   #FFD89B;
  --gold-tint:   rgba(252, 176, 51, 0.10);
  --cream:       #fffdf7;
  --white-glass: rgba(255, 255, 255, 0.45);
  --white-hover: rgba(255, 255, 255, 0.68);
  --white-solid: rgba(255, 255, 255, 0.94);
  --border:      2px double white;
  --border-ink:  1px dashed var(--gold-pale);
  --shadow:      3px 5px 28px rgba(52, 60, 100, 0.14);
  --tab-h:       42px;

  /* status colours */
  --status-todo:    #8a93b8;
  --status-doing:   #FCB033;
  --status-done:    #6b8f5e;
  --status-overdue: #b07c50;
}

body {

background-image: linear-gradient(#FCB033, #FFD89B, #FFFFFF);
background-size: cover;
background-position: center;
background-attachment: fixed;
margin: 0;
height: 100vh;
color: #343c64;
column-rule: 2px double white;
font-family: monospace;
font-size: 20px;
}

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

/* grain overlay */
.curriculum-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.28;
}

.curriculum-page > * { position: relative; z-index: 1; }

.curriculum-page {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ink);
  min-height: 100vh;
}

/* ============================================================
   MAIN CURRICULUM PAGE — header
   ============================================================ */

.curriculum-header {
  text-align: center;
  padding: 44px 20px 0;
}

.curriculum-header h1 {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 2.5rem;
  color: white;
  text-shadow: 1px 3px 14px rgba(52,60,100,0.22);
  margin: 0 0 0.15em;
  letter-spacing: 0.03em;
}

.curriculum-header h1::after {
  content: "✦  ✦  ✦";
  display: block;
  font-style: normal;
  font-size: 0.62rem;
  color: var(--gold-pale);
  letter-spacing: 0.6em;
  margin-top: 0.4em;
}

.curriculum-header .curriculum-subtitle {
  font-style: italic;
  color: rgba(255,255,255,0.82);
  font-size: 0.98rem;
  margin: 0 0 2em;
}

/* ============================================================
   TAB BAR
   ============================================================ */

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 0 5%;
  margin-bottom: 0;
  list-style: none;
}

.tab-bar li { margin: 0; }

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.45em;
  height: var(--tab-h);
  padding: 0 1.2em;
  background: var(--white-glass);
  border: var(--border);
  border-bottom: none;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-light);
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: background 0.18s, color 0.18s, transform 0.12s;
  position: relative;
  bottom: 0;
  user-select: none;
  /* no native button look */
  -webkit-appearance: none;
  appearance: none;
}

.tab-btn:hover {
  background: var(--white-hover);
  color: var(--ink);
  transform: translateY(-2px);
}

.tab-btn.active {
  background: var(--white-solid);
  color: var(--ink);
  transform: translateY(0);
  border-bottom: 2px solid var(--white-solid); /* hides bottom border */
  z-index: 2;
}

/* little coloured dot per tab — set via inline style="--dot:#hexcode" */
.tab-btn .tab-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, var(--gold));
  flex-shrink: 0;
}

/* ============================================================
   TAB PANELS WRAPPER
   ============================================================ */

.tab-panels {
  max-width: 960px;
  width: 92%;
  margin: 0 auto 50px;
  background: var(--white-solid);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 36px 44px 44px;
  animation: fadein 0.38s ease both;
  position: relative;
  z-index: 1;
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* individual panel */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: panelin 0.3s ease both;
}

@keyframes panelin {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── course title inside panel ── */
.panel-course-title {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1.9rem;
  color: var(--ink);
  margin: 0 0 0.1em;
  letter-spacing: 0.02em;
}

.panel-course-meta {
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.9rem;
  margin-bottom: 1.8em;
}

.panel-course-meta .course-tag {
  display: inline-block;
  font-family: monospace;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: 1px solid currentColor;
  border-radius: 20px;
  padding: 0.1em 0.55em;
  margin-left: 0.6em;
  color: var(--gold);
  vertical-align: middle;
}

/* ── section headings within a panel ── */
.panel-section-heading {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-light);
  letter-spacing: 0.1em;
  margin: 2em 0 0.7em;
  display: flex;
  align-items: center;
  gap: 0.65em;
}

.panel-section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gold-pale), transparent);
}

/* ── learning goals ── */
.goals-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}

.goals-list li {
  padding: 0.45em 0.75em;
  background: var(--gold-tint);
  border-left: 3px solid var(--gold);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 0 2px 2px 0;
}

.goals-list li::before { content: none; } /* override style.css ul bullets */

/* ── schedule table ── */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
  margin: 0;
}

.schedule-table thead tr {
  background: rgba(252,176,51,0.13);
}

.schedule-table th {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1rem;
  text-align: left;
  padding: 0.5em 0.9em;
  border: var(--border);
  color: var(--ink);
  letter-spacing: 0.03em;
}

.schedule-table td {
  padding: 0.45em 0.9em;
  border: 1px solid rgba(255,255,255,0.7);
  vertical-align: top;
  background: transparent;
  transition: background 0.15s;
}

.schedule-table tr:hover td {
  background: rgba(255,255,255,0.45);
}

/* alternating row tint */
.schedule-table tbody tr:nth-child(even) td {
  background: rgba(252,176,51,0.04);
}
.schedule-table tbody tr:nth-child(even):hover td {
  background: rgba(255,255,255,0.45);
}

/* status badges in schedule */
.status {
  display: inline-block;
  font-family: monospace;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-radius: 20px;
  padding: 0.15em 0.6em;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.status.todo     { color: var(--status-todo);    border-color: var(--status-todo); }
.status.doing    { color: var(--status-doing);   border-color: var(--status-doing);  background: rgba(252,176,51,0.1); }
.status.done     { color: var(--status-done);    border-color: var(--status-done);   background: rgba(107,143,94,0.09); }
.status.overdue  { color: var(--status-overdue); border-color: var(--status-overdue);background: rgba(176,124,80,0.09); }

/* ── readings list ── */
.readings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.readings-list li {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.4em 0.65em;
  border-radius: 2px;
  transition: background 0.16s, transform 0.13s;
  position: relative;
}

.readings-list li::before { content: none; } /* override ul bullets */

.readings-list li:hover {
  background: var(--white-hover);
  transform: translateX(4px);
}

.readings-list li::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
  border-radius: 2px 0 0 2px;
  opacity: 0;
  transition: opacity 0.16s;
}
.readings-list li:hover::after { opacity: 1; }

.reading-icon { font-size: 1em; flex-shrink: 0; }

.reading-title {
  font-weight: 600;
  color: var(--ink);
}

.reading-author {
  font-style: italic;
  color: var(--ink-light);
  font-size: 0.93em;
}
.reading-author::before { content: "— "; }

.reading-note {
  display: block;
  font-style: italic;
  font-size: 0.82em;
  color: var(--ink-faint);
  margin-left: 1.7em;
  margin-top: 0.05em;
}

/* ── notes area ── */
.notes-area {
  margin-top: 0.5em;
}

.notes-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1.2em;
  border: var(--border);
  background: var(--white-glass);
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  border-radius: 2px;
  transition: background 0.18s, color 0.15s, transform 0.13s;
  box-shadow: var(--shadow);
}

.notes-link:hover {
  background: var(--white-hover);
  color: var(--gold);
  transform: translateY(-2px);
}

.notes-link .notes-icon { font-size: 1.1em; }

/* notes textarea (optional inline notes) */
.notes-textarea {
  width: 100%;
  min-height: 130px;
  margin-top: 0.75em;
  padding: 0.8em 1em;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: rgba(255,253,247,0.85);
  border: var(--border);
  resize: vertical;
  outline: none;
  transition: background 0.2s;
}

.notes-textarea:focus {
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--gold-pale);
}

.notes-textarea::placeholder {
  font-style: italic;
  color: var(--ink-faint);
}

/* ── link to full course page ── */
.course-page-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-light);
  text-decoration: none;
  margin-top: 2em;
  transition: color 0.15s;
}
.course-page-link:hover { color: var(--gold); }
.course-page-link::after { content: " →"; }

/* ============================================================
   INDIVIDUAL COURSE PAGE
   ============================================================ */

.course-page-wrapper {
  max-width: 820px;
  width: 92%;
  margin: 50px auto 40px;
  background: var(--white-solid);
  border: var(--border);
  box-shadow: var(--shadow);
  animation: fadein 0.42s ease both;
}

.course-page-cover {
  background: linear-gradient(135deg,
    rgba(252,176,51,0.32) 0%,
    rgba(255,216,155,0.15) 100%);
  border-bottom: var(--border);
  padding: 36px 48px 28px;
}

.course-page-cover h1 {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 2.2rem;
  color: white;
  text-shadow: 1px 3px 12px rgba(52,60,100,0.2);
  margin: 0 0 0.2em;
  letter-spacing: 0.02em;
}

.course-page-cover h1::after { content: none; }

.course-page-cover .course-meta-row {
  font-style: italic;
  color: rgba(255,255,255,0.82);
  font-size: 0.92rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.course-page-body {
  padding: 36px 48px 48px;
}

/* reuse .panel-section-heading, .goals-list, .schedule-table,
   .readings-list, .notes-area — they all work here too */

/* progress bar (optional, shown at top of course page) */
.progress-bar-wrap {
  margin: 1.2em 0 2em;
}

.progress-label {
  font-family: monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 0.3em;
}

.progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--gold), var(--gold-pale));
  border-radius: 10px;
  transition: width 0.6s ease;
  /* set width via inline style: style="width: 60%" */
}

/* ============================================================
   RETURN / NAV
   ============================================================ */

.return-curriculum {
  width: min(90%, 380px);
  margin: 20px auto 50px;
  padding: 10px 20px;
  border: var(--border);
  background: var(--white-glass);
  text-align: center;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  box-shadow: var(--shadow);
  transition: background 0.2s;
}
.return-curriculum:hover { background: var(--white-hover); }
.return-curriculum a {
  color: var(--ink);
  text-decoration: none;
}
.return-curriculum a:hover { color: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 680px) {
  .tab-panels         { padding: 22px 18px 28px; }
  .course-page-cover  { padding: 24px 22px 20px; }
  .course-page-body   { padding: 22px 20px 28px; }
  .course-page-cover h1 { font-size: 1.6rem; }
  .panel-course-title { font-size: 1.5rem; }
  .tab-btn            { font-size: 0.85rem; padding: 0 0.85em; }
  .schedule-table th,
  .schedule-table td  { padding: 0.35em 0.5em; font-size: 0.88rem; }
}