/* ============================================================
   The Pens - "Studio" design system  (refreshed theme)
   Palette : indigo ink, cool white surfaces, coral accent, mint support
   Type    : Fraunces (display) / Karla (body) / Space Mono (data)
   ============================================================ */

:root {
  /* Decent, modern palette with depth.
     Var names (--marigold, --teal, --indigo...) are unchanged so every
     existing .btn-primary and accent restyles from here at once. */
  --paper:      #EEF1FA;   /* app background (soft periwinkle-grey) */
  --paper-deep: #E1E6F5;   /* insets, chips, hover fills */
  --surface:    #FFFFFF;   /* cards, panels, tables */
  --ink:        #191B33;   /* primary text / near-navy */
  --ink-soft:   #565C7E;   /* secondary text */
  --marigold:   #6C4CE0;   /* PRIMARY ACCENT (violet) */
  --marigold-2: #9A6BFF;   /* primary gradient partner (for 3D buttons) */
  --teal:       #12B5A6;   /* teal support + links */
  --amber:      #FFB020;   /* warm highlight */
  --brick:      #E5484D;   /* danger */
  --rule:       #DEE3F1;   /* borders / hairlines */
  --indigo:     #4C58E6;   /* secondary accent for focus, active nav */

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Karla", "Segoe UI", system-ui, sans-serif;
  --font-data:    "Space Mono", ui-monospace, monospace;

  --radius: 16px;
  /* Layered, soft 3D shadow. */
  --shadow: 0 1px 2px rgba(25,27,51,.05),
            0 8px 24px rgba(25,27,51,.10);
  --shadow-lg: 0 6px 12px rgba(25,27,51,.08),
               0 20px 48px rgba(25,27,51,.16);
  /* Gradients that give buttons and hero areas a 3D sheen. */
  --grad-primary: linear-gradient(135deg, var(--marigold-2) 0%, var(--marigold) 100%);
  --grad-hero:    linear-gradient(135deg, #6C4CE0 0%, #4C58E6 45%, #12B5A6 100%);
  --wrap: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(108,76,224,.10), transparent 60%),
    radial-gradient(900px 400px at -10% 10%, rgba(18,181,166,.08), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  /* Soft dot grid instead of the old ruled-notebook lines. */
  background-image: radial-gradient(rgba(76,88,230,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.02em;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Eyebrow label ---------- */
.eyebrow {
  font-family: var(--font-data);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .75rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 28px;
  min-height: 70px;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; display: block; }

/* Real logo image in the header: height-capped, width auto, never distorted. */
.brand-logo {
  display: block; height: 46px; width: auto; max-width: 260px;
  object-fit: contain;
}
@media (max-width: 560px) {
  .brand-logo { height: 38px; max-width: 200px; }
}

/* Wordmark: "The" set small and quiet, "Pens" carrying the weight. */
.brand-words {
  display: inline-flex; align-items: baseline; gap: .22em;
  line-height: 1;
}
.brand-the {
  font-family: var(--font-body);
  font-size: .62em; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.brand-pens {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -.015em;
  /* Ink underline - the mark the pen leaves behind. */
  border-bottom: 3px solid var(--marigold);
  padding-bottom: 1px;
}

.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav a {
  color: var(--ink); font-weight: 600; font-size: .93rem;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--marigold); text-decoration: none; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--rule);
  border-radius: 6px; padding: 7px 9px; cursor: pointer;
  color: var(--ink); line-height: 0;
}
.nav-toggle svg { width: 20px; height: 20px; display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body); font-weight: 700; font-size: .93rem;
  padding: 11px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,107,94,.28); text-decoration: none; }
.btn:active { transform: translateY(0); box-shadow: var(--shadow); }
.btn-primary {
  background: var(--grad-primary); color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(108,76,224,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(108,76,224,.42), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-sm { padding: 6px 12px; font-size: .82rem; box-shadow: var(--shadow); }
.btn-danger { background: var(--brick); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
}
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--marigold) 62% 92%, transparent 92%);
  padding: 0 .1em;
}
.hero p.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* Signature element: a chalkboard slate listing the class ladder. */
.slate {
  background: #22352C;
  border: 8px solid #7A5230;
  border-radius: 8px;
  padding: 26px 24px;
  color: #EDE7DA;
  box-shadow: var(--shadow);
}
.slate h3 {
  font-family: var(--font-display);
  color: #EDE7DA; font-size: 1.1rem;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px dashed rgba(237,231,218,.4);
}
.slate-ladder { display: flex; flex-wrap: wrap; gap: 8px; }
.slate-ladder a {
  font-family: var(--font-data); font-size: .8rem;
  color: #EDE7DA; border: 1px solid rgba(237,231,218,.45);
  border-radius: 20px; padding: 4px 12px;
}
.slate-ladder a:hover { background: var(--marigold); color: #22352C; border-color: var(--marigold); text-decoration: none; }

/* ---------- Sections ---------- */
.section { padding: 64px 0; border-bottom: 1px solid var(--rule); }
.section-head { margin-bottom: 32px; max-width: 60ch; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section-head p { color: var(--ink-soft); margin: 0; }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.card h3 { font-size: 1.15rem; margin-bottom: .35em; }
.card p { color: var(--ink-soft); font-size: .93rem; margin: 0 0 14px; }
.card-meta {
  font-family: var(--font-data); font-size: .74rem;
  color: var(--ink-soft); letter-spacing: .06em;
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--rule);
}
.tag {
  display: inline-block; font-family: var(--font-data);
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,107,94,.14); color: var(--marigold);
  border-radius: 6px; padding: 3px 9px; margin-bottom: 10px;
  align-self: flex-start; font-weight: 700;
}
.tag-teal { background: var(--teal); color: #fff; }

/* ---------- Feature list ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.feature h3 { font-size: 1.05rem; }
.feature p { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.feature-icon {
  width: 40px; height: 40px; margin-bottom: 12px;
  border: 1px solid var(--rule); border-radius: 8px;
  display: grid; place-items: center; background: var(--paper-deep);
  color: var(--ink);
}
/* Inline SVG rather than glyphs: immune to encoding problems. */
.feature-icon svg { width: 21px; height: 21px; display: block; }

/* ---------- Announcements ---------- */
.notice-list { list-style: none; padding: 0; margin: 0; }
.notice-list li {
  padding: 16px 0 16px 20px;
  border-bottom: 1px dashed var(--rule);
  border-left: 4px solid var(--marigold);
  padding-left: 18px; margin-bottom: 4px;
}
.notice-list strong { display: block; }
.notice-list span { color: var(--ink-soft); font-size: .92rem; }
.notice-date { font-family: var(--font-data); font-size: .72rem; color: var(--ink-soft); }

/* ---------- Forms ---------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}
.field { margin-bottom: 18px; }
.field label {
  display: block; font-weight: 700; font-size: .88rem;
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body); font-size: .95rem;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(46,111,106,.18);
}
.field .hint { font-size: .8rem; color: var(--ink-soft); margin-top: 4px; }
.field .err { font-size: .82rem; color: var(--brick); font-weight: 700; margin-top: 4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.radio-row { display: flex; gap: 18px; }
.radio-row label { font-weight: 500; display: flex; align-items: center; gap: 6px; }
.radio-row input { width: auto; }

/* ---------- Alerts ---------- */
.alert {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 22px; font-size: .93rem; font-weight: 600;
}
.alert-success { background: #DCEDE9; border-color: var(--teal); }
.alert-error   { background: #F6E0DB; border-color: var(--brick); }
.alert-info    { background: var(--paper-deep); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th {
  text-align: left; font-family: var(--font-data);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 14px; background: var(--ink); color: var(--paper);
  white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--paper-deep); }
.table-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.table-actions select { padding: 5px 8px; border: 1px solid var(--rule); border-radius: 6px; font-size: .82rem; }

/* ---------- Stats ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin-bottom: 34px; }
.stat {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 18px; background: var(--surface); box-shadow: var(--shadow);
}
.stat .num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.stat .lbl { font-family: var(--font-data); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Filter bar ---------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 28px; }
.chip {
  font-family: var(--font-data); font-size: .78rem;
  border: 1px solid var(--rule); border-radius: 20px;
  padding: 5px 14px; color: var(--ink); background: var(--paper);
}
.chip:hover { background: var(--marigold); text-decoration: none; }
.chip.active { background: var(--ink); color: var(--paper); }
.search-form { display: flex; gap: 8px; margin-left: auto; }
.search-form input { padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px; min-width: 200px; }

/* ---------- Dashboard shell ---------- */
.dash-head {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
  padding: 34px 0;
  margin-bottom: 38px;
}
.dash-head h1 { font-size: 2rem; margin-bottom: .2em; }
.dash-head p { color: var(--ink-soft); margin: 0; }
.panel { margin-bottom: 44px; }
.panel h2 { font-size: 1.35rem; padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }

.empty {
  padding: 32px; text-align: center; color: var(--ink-soft);
  border: 2px dashed var(--rule); border-radius: var(--radius);
}

/* ---------- Testimonials ---------- */
.quote {
  border-left: 4px solid var(--teal);
  padding: 4px 0 4px 20px;
  font-family: var(--font-display); font-size: 1.05rem; font-style: italic;
}
.quote footer { font-family: var(--font-body); font-style: normal; font-size: .85rem; color: var(--ink-soft); margin-top: 10px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink); color: var(--paper-deep);
  padding: 48px 0 28px; margin-top: 0;
}
.site-footer a { color: var(--paper-deep); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h4 { color: var(--paper); font-size: .95rem; margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 7px; font-size: .9rem; }
.footer-bottom {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(251,247,239,.2);
  font-size: .82rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--marigold); color: var(--ink);
  padding: 10px 16px; font-weight: 700; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 12px 24px 18px;
  }
  .nav.open { display: flex; }
  .nav a, .nav .btn { width: 100%; padding: 10px 0; }
  .hero { padding: 48px 0 40px; }
  .section { padding: 46px 0; }
  .search-form { margin-left: 0; width: 100%; }
  .search-form input { flex: 1; min-width: 0; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Footer brand & credit ---------- */
.footer-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-size: 1.25rem;
}
.footer-brand img { display: block; }
.footer-brand .brand-the { color: rgba(251,247,239,.65); }
.footer-brand .brand-pens { color: var(--paper); }

.credit { color: rgba(251,247,239,.75); }
.credit strong { color: var(--paper); font-weight: 700; }

/* ---------- Dismissible alerts (button injected by site.js) ---------- */
.alert { position: relative; padding-right: 44px; }
.alert-close {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: inherit; opacity: .55;
  padding: 2px 6px; border-radius: 4px;
}
.alert-close:hover { opacity: 1; }

/* ============================================================
   Redesign pass 2 - auth flow, courses rail, dashboard polish
   ============================================================ */

/* ---------- Auth shell (login) : dark role-legend aside + form ---------- */
.auth-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--surface);
}
.auth-shell > * { min-width: 0; }
.auth-aside {
  background: var(--ink);
  color: var(--paper-deep);
  padding: 36px 30px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--rule);
}
.auth-aside .brand-words { font-size: 1.15rem; margin-bottom: 22px; }
.auth-aside .footer-brand .brand-the { color: rgba(251,247,239,.6); }
.auth-aside .footer-brand .brand-pens { color: var(--paper); }
.auth-role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.auth-role-list li { display: flex; gap: 12px; align-items: flex-start; }
.auth-role-icon {
  width: 34px; height: 34px; flex: none;
  border: 2px solid rgba(251,247,239,.45); border-radius: 8px;
  display: grid; place-items: center; color: var(--marigold);
}
.auth-role-icon svg { width: 18px; height: 18px; }
.auth-role-list h4 { color: var(--paper); font-size: .95rem; margin: 0 0 2px; font-family: var(--font-body); font-weight: 700; }
.auth-role-list p { margin: 0; font-size: .82rem; color: rgba(251,247,239,.7); line-height: 1.5; }
.auth-form-panel { padding: 40px 36px; }
.auth-form-panel h1 { font-size: 1.7rem; margin-bottom: .3em; }

@media (max-width: 760px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { border-right: none; border-bottom: 1px solid var(--rule); }
  .auth-role-list { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .auth-role-list li { flex: 1 1 140px; }
}

/* ---------- Admission stepper (register + register-submitted) ---------- */
.step-ticket {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-deep);
  box-shadow: var(--shadow);
  margin-bottom: 32px;
  overflow: hidden;
}
.step-ticket-item {
  flex: 1;
  padding: 16px 14px;
  position: relative;
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem;
}
.step-ticket-item:not(:last-child) {
  border-right: 2px dashed var(--rule);
}
/* Punch holes along each dashed seam */
.step-ticket-item:not(:last-child)::after {
  content: "";
  position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--rule);
  z-index: 2;
}
.step-num {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-data); font-weight: 700; font-size: .78rem;
}
.step-ticket-item.done .step-num { background: var(--teal); border-color: var(--teal); color: #fff; }
.step-ticket-item.active .step-num { background: var(--marigold); border-color: var(--ink); }
.step-ticket-item.active { background: rgba(232,163,23,.14); }
.step-label { font-weight: 700; color: var(--ink); line-height: 1.25; }
.step-ticket-item:not(.active):not(.done) .step-label { color: var(--ink-soft); font-weight: 500; }

@media (max-width: 720px) {
  .step-ticket { flex-wrap: wrap; }
  .step-ticket-item { flex: 1 1 50%; }
  .step-ticket-item:nth-child(2) { border-right: none; }
  .step-ticket-item:nth-child(1), .step-ticket-item:nth-child(2) {
    border-bottom: 2px dashed var(--rule);
  }
  .step-ticket-item:nth-child(1)::after, .step-ticket-item:nth-child(2)::after { display: none; }
}

/* ---------- Ink stamp (registration received) ---------- */
.stamp-wrap { display: flex; justify-content: center; margin: 12px 0 20px; }
.stamp {
  width: 132px; height: 132px; border-radius: 50%;
  border: 3px solid var(--teal);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--teal); transform: rotate(-9deg);
  position: relative;
}
.stamp::before {
  content: "";
  position: absolute; inset: 8px;
  border: 1px dashed var(--teal); border-radius: 50%;
}
.stamp-top { font-family: var(--font-data); font-size: .62rem; letter-spacing: .18em; margin-bottom: 4px; }
.stamp-main { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1; }
.stamp-date { font-family: var(--font-data); font-size: .6rem; margin-top: 4px; letter-spacing: .05em; }

/* ---------- Courses filter rail (reuses the homepage slate motif) ---------- */
.courses-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
.courses-layout > * { min-width: 0; }
.course-rail {
  position: sticky; top: 86px;
  background: #22352C;
  border: 6px solid #7A5230;
  border-radius: 8px;
  padding: 20px 18px;
  color: #EDE7DA;
}
.course-rail h3 {
  font-family: var(--font-display); font-size: .95rem;
  color: #EDE7DA; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px dashed rgba(237,231,218,.35);
}
.course-rail-list { display: flex; flex-direction: column; gap: 4px; }
.course-rail-list a {
  font-family: var(--font-data); font-size: .8rem;
  color: rgba(237,231,218,.85); padding: 5px 8px; border-radius: 5px;
}
.course-rail-list a:hover { background: rgba(237,231,218,.12); text-decoration: none; }
.course-rail-list a.active { background: var(--marigold); color: #22352C; font-weight: 700; }
.course-rail form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(237,231,218,.35); }
.course-rail .search-form { display: flex; flex-direction: column; gap: 8px; margin-left: 0; }
.course-rail input[type="search"] {
  width: 100%; padding: 8px 10px; border-radius: 6px; border: none;
  font-family: var(--font-body); font-size: .85rem; margin-bottom: 0; min-width: 0;
}

@media (max-width: 900px) {
  .courses-layout { grid-template-columns: 1fr; }
  .course-rail { position: static; }
  .course-rail-list { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Dashboard polish: tabbed stat tiles ---------- */
.stat { position: relative; padding-top: 22px; }
.stat::before {
  content: ""; position: absolute; top: -2px; left: 16px;
  width: 34px; height: 8px; background: var(--marigold);
  border: 1px solid var(--rule); border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.stat:nth-child(2)::before { background: var(--teal); }
.stat:nth-child(3)::before { background: var(--brick); }
.stat:nth-child(4)::before { background: var(--ink); }

/* Section header with a small marker + rule, echoing eyebrow language */
.panel h2 {
  display: flex; align-items: center; gap: 10px;
}
.panel h2::before {
  content: ""; width: 8px; height: 8px; background: var(--marigold);
  border: 1px solid var(--rule); border-radius: 50%; flex: none;
}

/* Name + initials chip used in tables and lists */
.person { display: flex; align-items: center; gap: 10px; }
.person-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--paper-deep); border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-family: var(--font-data); font-weight: 700; font-size: .72rem; color: var(--ink);
}
.person-meta strong { display: block; line-height: 1.3; }
.person-meta span { font-size: .78rem; color: var(--ink-soft); }

/* Empty state icon */
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty svg { width: 30px; height: 30px; color: var(--ink-soft); opacity: .6; }

/* Small role/subject tag inline with headings */
.subject-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data); font-size: .72rem; letter-spacing: .06em;
  background: var(--paper-deep); border: 1px solid var(--rule);
  border-radius: 20px; padding: 3px 10px; color: var(--ink-soft);
}

/* ---------- 403 page ---------- */
.error-icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border: 1px solid var(--rule); border-radius: 12px;
  display: grid; place-items: center; background: var(--paper-deep); color: var(--brick);
}
.error-icon svg { width: 30px; height: 30px; }

/* ---------- Admin: Teachers section layout (was an inline style that
   overflowed on mobile because inline styles can't take a media query) ---------- */
.teachers-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
.teachers-layout > * { min-width: 0; }
@media (max-width: 800px) {
  .teachers-layout { grid-template-columns: 1fr; }
}

/* ---------- Course status pill (admin course table) ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-data); font-size: .7rem; letter-spacing: .05em;
  padding: 3px 10px; border-radius: 20px; border: 1px solid transparent;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.status-published { background: rgba(46,111,106,.12); color: var(--teal); border-color: rgba(46,111,106,.3); }
.status-published::before { background: var(--teal); }
.status-draft { background: var(--paper-deep); color: var(--ink-soft); border-color: var(--rule); }
.status-draft::before { background: var(--ink-soft); }

/* ============================================================
   Dashboard left-side navigation (admin / teacher / student)
   ============================================================ */
.dash-shell { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.dash-shell > * { min-width: 0; }

.dash-sidenav {
  position: sticky; top: 86px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 14px;
}
.dash-sidenav h3 {
  font-family: var(--font-data); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px 8px;
}
.dash-sidenav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-sidenav-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: .87rem; font-weight: 600; color: var(--ink);
  border-left: 3px solid transparent;
}
.dash-sidenav-list a:hover { background: var(--paper-deep); text-decoration: none; }
.dash-sidenav-list a.active { background: rgba(232,163,23,.14); border-left-color: var(--marigold); }
.dash-sidenav-list svg { width: 17px; height: 17px; flex: none; color: var(--ink-soft); }
.dash-sidenav-list a.active svg { color: var(--marigold); }

@media (max-width: 900px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-sidenav { position: static; padding: 10px 10px; }
  .dash-sidenav h3 { display: none; }
  .dash-sidenav-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .dash-sidenav-list a { border-left: none; border-bottom: 3px solid transparent; padding: 7px 11px; }
  .dash-sidenav-list a.active { border-bottom-color: var(--marigold); }
}

/* ---------- File upload field (test series question paper) ---------- */
.field input[type="file"] {
  padding: 8px; border-style: dashed; background: var(--paper-deep);
  font-size: .85rem;
}

/* ---------- Admin module picker (landing dashboard) ---------- */
.module-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.module-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; color: var(--ink); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.module-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,31,59,.10); text-decoration: none; }
.module-ico {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(76,88,230,.10); color: var(--indigo);
}
.module-ico svg { width: 22px; height: 22px; }
.module-meta h3 { margin: 0 0 2px; font-size: 1.1rem; }
.module-meta p { margin: 0; font-size: .85rem; color: var(--ink-soft); }

/* ---------- Attendance sheet ---------- */
.attendance-list { list-style: none; margin: 0 0 20px; padding: 0; }
.attendance-list li {
  padding: 10px 4px; border-bottom: 1px dashed var(--rule);
}
.attendance-list li:last-child { border-bottom: none; }

/* ---------- Chat ---------- */
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.chat-window {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; height: 420px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-empty { color: var(--ink-soft); text-align: center; margin: auto; }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-msg.theirs { justify-content: flex-start; }
.chat-bubble {
  max-width: 74%; padding: 8px 12px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 2px; word-break: break-word;
}
.chat-msg.mine .chat-bubble { background: var(--marigold); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.theirs .chat-bubble { background: var(--paper); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.chat-sender { font-size: .7rem; font-weight: 600; opacity: .8; }
.chat-body { font-size: .95rem; white-space: pre-wrap; }
.chat-composer { display: flex; gap: 8px; margin-top: 12px; }
.chat-composer input[type="text"] { flex: 1; }

.chat-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chat-people a {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 16px; transition: transform .12s ease;
}
.chat-people a:hover { transform: translateY(-1px); text-decoration: none; }
.chat-people .chat-open { margin-left: auto; color: var(--indigo); font-size: .9rem; font-weight: 600; }

/* ==================== Home: banner carousel ==================== */
.banner {
  position: relative; overflow: hidden; border-radius: 20px;
  box-shadow: var(--shadow-lg); margin: 22px 0 8px;
  background: var(--ink);
}
.banner-track { display: flex; transition: transform .85s cubic-bezier(.65,.02,.25,1); will-change: transform; }
.banner-slide { position: relative; min-width: 100%; overflow: hidden; }
.banner-slide img {
  display: block; width: 100%; height: auto;
}
/* Image is shown in full (never cropped) and scales with the screen width, so
   it stays responsive on phones and tablets. Ken Burns zoom was removed here
   because zooming an uncropped image would push its edges out of view. */
.banner-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 36px 34px;
  background: linear-gradient(transparent, rgba(20,22,45,.88));
  color: #fff;
}
.banner-caption h2, .banner-caption p {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.banner-slide.is-active .banner-caption h2 { opacity: 1; transform: none; transition-delay: .25s; }
.banner-slide.is-active .banner-caption p  { opacity: .92; transform: none; transition-delay: .4s; }
.banner-caption h2 { font-family: var(--font-display); font-size: 2.1rem; margin: 0 0 6px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.banner-caption p { margin: 0; max-width: 640px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }

/* thin progress bar that fills over each slide's dwell time */
.banner-progress { position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: rgba(255,255,255,.18); z-index: 3; }
.banner-progress-fill { height: 100%; width: 0; background: var(--amber); box-shadow: 0 0 12px rgba(255,176,32,.8); }
.banner-progress-fill.run { transition: width linear; }

.banner-dots { position: absolute; bottom: 14px; right: 20px; display: flex; gap: 8px; z-index: 3; }
.banner-dot {
  width: 10px; height: 10px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.5);
}
.banner-dot.active { background: #fff; transform: scale(1.15); }
.banner-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.85); color: var(--ink); font-size: 1.3rem;
  display: grid; place-items: center; box-shadow: var(--shadow);
  transition: background .2s ease, transform .2s ease;
}
.banner-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.banner-arrow.prev { left: 16px; }
.banner-arrow.next { right: 16px; }
@media (max-width: 640px) {
  .banner-caption h2 { font-size: 1.4rem; }
}

/* ==================== Home: class -> board -> course flow ==================== */
.flow-section { margin: 40px 0 24px; }
.flow-step-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-data); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--marigold); font-weight: 700; margin-bottom: 14px;
}
.flow-step-label .num {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-primary); color: #fff; font-size: .72rem;
}

.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.pick-card {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow); padding: 22px 16px; text-align: center; cursor: pointer;
  font-weight: 700; color: var(--ink); transition: transform .14s ease, box-shadow .14s ease;
  min-width: 0;
}
.pick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pick-card.active {
  background: var(--grad-primary); color: #fff; border-color: transparent;
  box-shadow: 0 8px 22px rgba(108,76,224,.4);
}
.pick-card .pick-sub { display: block; font-weight: 500; font-size: .78rem; opacity: .7; margin-top: 4px; }
.pick-card.active .pick-sub { opacity: .85; }

.flow-hint { color: var(--ink-soft); font-size: .92rem; margin: 6px 0 0; }

.course-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.course-card-3d {
  position: relative; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); padding: 20px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  transition: transform .14s ease, box-shadow .14s ease;
}
.course-card-3d:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.course-card-3d .subject-chip { align-self: flex-start; }
.course-card-3d h3 { margin: 2px 0; font-size: 1.12rem; }
.course-card-3d .cc-desc { color: var(--ink-soft); font-size: .9rem; flex: 1; }
.course-card-3d .cc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.course-card-3d .cc-teacher { font-size: .82rem; color: var(--ink-soft); }

.flow-loading { color: var(--ink-soft); font-size: .92rem; padding: 8px 0; }
.flow-empty {
  border: 1px dashed var(--rule); border-radius: var(--radius); padding: 24px;
  text-align: center; color: var(--ink-soft); background: var(--surface);
}

/* ==================== Full-width banner ==================== */
.banner-full {
  position: relative;
  width: 100vw;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  border-radius: 0;
  margin-top: 0; margin-bottom: 0;
  box-shadow: var(--shadow);
}
/* Full-bleed banner: image spans the viewport width and keeps its own
   aspect ratio at every size, so nothing is cropped. */

/* Respect users who ask for less motion: no slide animation, instant captions. */
@media (prefers-reduced-motion: reduce) {
  .banner-track { transition: none; }
  .banner-caption h2, .banner-caption p { opacity: 1; transform: none; transition: none; }
  .banner-progress-fill.run { transition: none; }
}

/* ==================== Green school board (class picker) ==================== */
.chalkboard {
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.05), transparent 40%),
    linear-gradient(160deg, #1f5e3a 0%, #17492e 100%);
  border: 14px solid #7a4a22;                 /* wooden frame */
  border-radius: 16px;
  box-shadow: var(--shadow-lg), inset 0 0 60px rgba(0,0,0,.35);
  padding: 30px 26px 34px;
  margin: 26px 0 10px;
}
.chalkboard::after {                          /* chalk tray */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -20px; height: 10px;
  background: #6b3f1d; border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,.3);
}
.chalkboard h2 {
  color: #eafff2; font-family: var(--font-display); text-align: center;
  margin: 0 0 4px; font-size: 1.7rem; text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.chalkboard .chalk-sub {
  color: #bfe6ce; text-align: center; margin: 0 0 22px; font-size: .95rem;
}
.chalk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px;
}
.chalk-card {
  border: 2px solid rgba(255,255,255,.35); border-radius: 12px;
  background: rgba(255,255,255,.06); color: #f0fff6;
  padding: 18px 12px; text-align: center; cursor: pointer; font-weight: 700;
  font-family: var(--font-display); letter-spacing: .3px;
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
  min-width: 0;
}
.chalk-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.14); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.chalk-card.active {
  background: var(--amber); color: #3a2600; border-color: transparent;
  box-shadow: 0 8px 20px rgba(255,176,32,.5);
}

/* ==================== Online test editor ==================== */
.q-block {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); padding: 16px; margin-bottom: 14px;
}
.q-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.q-num { font-family: var(--font-data); font-weight: 700; color: var(--marigold); }
.q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.q-opt { display: flex; align-items: center; gap: 8px; }
.q-opt input[type="radio"] { width: auto; flex: none; }
.q-opt input[type="text"], .q-opt input:not([type]) { flex: 1; min-width: 0; }
@media (max-width: 560px) { .q-opts { grid-template-columns: 1fr; } }

/* ==================== Taking a test ==================== */
.take-q {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  padding: 18px 20px; margin: 14px 0;
}
.take-q-title { font-size: 1.05rem; margin: 0 0 12px; line-height: 1.5; }
.take-q-num { color: var(--marigold); font-weight: 700; }
.take-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: 10px; margin-bottom: 8px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.take-opt:hover { background: var(--paper-deep); }
.take-opt input[type="radio"] { width: auto; flex: none; }

/* ==================== Result / review ==================== */
.result-score {
  display: flex; align-items: baseline; gap: 16px;
  background: var(--grad-hero); color: #fff; border-radius: var(--radius);
  padding: 22px 26px; box-shadow: var(--shadow-lg); margin-top: 16px;
}
.result-score-big { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.result-score-big span { font-size: 1.4rem; opacity: .85; }
.result-score-pct { font-size: 1.05rem; opacity: .95; }

.review-q {
  border: 1px solid var(--rule); border-left-width: 4px; border-radius: var(--radius);
  background: var(--surface); padding: 16px 18px; margin: 12px 0; box-shadow: var(--shadow);
}
.review-q.is-right { border-left-color: var(--teal); }
.review-q.is-wrong { border-left-color: var(--brick); }
.review-tag {
  font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 8px;
  vertical-align: middle;
}
.is-right .review-tag { background: rgba(18,181,166,.15); color: #0c7f74; }
.is-wrong .review-tag { background: rgba(229,72,77,.15); color: #b3373b; }
.review-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--rule); border-radius: 10px; margin-top: 6px; font-size: .95rem;
}
.review-opt .opt-key {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper-deep); font-weight: 700; font-size: .8rem; flex: none;
}
.review-opt.opt-correct { border-color: var(--teal); background: rgba(18,181,166,.08); }
.review-opt.opt-correct .opt-key { background: var(--teal); color: #fff; }
.review-opt.opt-chosen-wrong { border-color: var(--brick); background: rgba(229,72,77,.07); }
.review-opt.opt-chosen-wrong .opt-key { background: var(--brick); color: #fff; }
.opt-note { margin-left: auto; font-size: .76rem; font-weight: 700; color: var(--ink-soft); }

/* ==================== Syllabus (public courses page) ==================== */
.syllabus-section { margin-top: 40px; padding-top: 28px; border-top: 2px solid var(--rule); }
.syllabus-title { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 14px; }
.board-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.board-chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  font-size: .9rem; text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.board-chip:hover { border-color: var(--marigold); }
.board-chip.active { background: var(--grad-primary); color: #fff; border-color: transparent; }
.syllabus-table th { white-space: nowrap; }
.syllabus-table td { vertical-align: top; }

/* small secondary text used in admin syllabus table */
.muted-line { color: var(--ink-soft); font-size: .86rem; margin-top: 3px; }

/* ==================== Board/School master admin forms ==================== */
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inline-form input[type="text"] { flex: 1; min-width: 200px; }
.row-form { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-right: 8px; }
.row-form input[type="text"] { min-width: 220px; }
@media (max-width: 560px) {
  .inline-form, .row-form { flex-direction: column; align-items: stretch; }
  .row-form input[type="text"] { min-width: 0; }
}