/* LiSpeak theme — the final visual layer. Loaded last in base.html, so it defines
   the look of every page on top of the earlier stylesheets (style, academy, lispeak,
   soft-violet, classroom, interactions), which now provide layout only. */

:root{
  --ls-ink:#21173a;--ls-muted:#6b6184;--ls-soft:#8d84a3;
  --ls-brand:#6d3ce0;--ls-brand-2:#8b5cf6;--ls-brand-deep:#2a1b45;--ls-night:#1a1030;
  --ls-mint:#3fd39a;--ls-mint-soft:#e3faf0;--ls-peach:#ffb48a;
  --ls-bg:#f6f5fd;--ls-sky:#4f8cff;--ls-table-deep:#2a1b5e;--ls-table-brand:#4526a3;--ls-surface:rgba(255,255,255,.82);--ls-surface-solid:#fff;
  --ls-line:rgba(94,64,150,.14);--ls-line-strong:rgba(94,64,150,.24);
  --ls-radius:22px;--ls-radius-sm:14px;
  --ls-shadow:0 1px 2px rgba(33,23,58,.05),0 18px 40px -22px rgba(64,34,120,.35);
  --ls-shadow-hover:0 2px 4px rgba(33,23,58,.06),0 26px 50px -24px rgba(64,34,120,.45);
  --ls-display:'Fraunces',Georgia,'Times New Roman',serif;
  --ls-sans:'Manrope',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}

/* ---------- Background: airy lavender-to-sky wash with a whisper of dot grid ---------- */
html{background:var(--ls-bg)}
body.academy,body.classroom-app{
  font-family:var(--ls-sans);color:var(--ls-ink);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1000px 560px at 92% -10%,rgba(124,92,255,.15),transparent 62%),
    radial-gradient(800px 560px at -6% 104%,rgba(79,140,255,.15),transparent 60%),
    radial-gradient(620px 420px at 62% 58%,rgba(63,211,154,.07),transparent 66%),
    linear-gradient(180deg,#faf9ff 0%,#f3f4fd 100%);
  background-attachment:fixed;
}
body.academy::before,body.classroom-app::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(69,38,163,.09) 1px,transparent 1.2px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);
}
body.academy>main,body.classroom-app>main,body.classroom-app>header,body.academy>aside{position:relative;z-index:1}
body.academy>aside.academy-sidebar{position:fixed;z-index:40}
body.classroom-app>header.class-header{position:fixed;z-index:80}
input,textarea,select,button{font-family:inherit}

/* ---------- Typography ---------- */
.home-welcome h1,.page-heading h1,.library-heading h1,.catalog-heading h1,.error-panel h1,
.auth-story h1,.auth-form h2,.home-feature h2,.business-copy h2{
  font-family:var(--ls-display);font-weight:600;letter-spacing:-.02em;color:var(--ls-ink)
}
.home-welcome h1,.page-heading h1,.library-heading h1,.catalog-heading h1{font-size:clamp(32px,3.6vw,46px);line-height:1.08;margin:6px 0 10px}
.section-heading h2,.level-heading h2{font-family:var(--ls-display);font-weight:600;letter-spacing:-.01em;font-size:22px}
.eyebrow,.tiny-label{letter-spacing:.14em;font-weight:800;color:var(--ls-brand)}
.muted,.home-welcome p,.library-heading p,.catalog-heading p{color:var(--ls-muted)}

/* ---------- Sidebar ---------- */
.academy .academy-sidebar{
  background:
    radial-gradient(420px 260px at 0% 0%,rgba(139,92,246,.35),transparent 70%),
    radial-gradient(300px 260px at 100% 100%,rgba(63,211,154,.14),transparent 70%),
    linear-gradient(180deg,#2c1c4a,#1a1030);
  color:#ece5f8;border-right:1px solid rgba(255,255,255,.06);
  box-shadow:12px 0 40px -28px rgba(26,16,48,.8);
}
.academy .academy-logo{font-family:var(--ls-display);font-weight:600;letter-spacing:-.02em;color:#fff}
.academy .academy-logo span{color:#c4a4ff}
.academy .academy-logo small{font-family:var(--ls-sans);letter-spacing:.2em;color:#b9a9d8}
/* Slogan: "Speak more. Understand more. Be more." — sentences never split across lines */
.slogan>span{display:inline-block;white-space:nowrap}
.academy .academy-logo small.slogan{
  font-family:var(--ls-sans);font-size:10.5px;font-weight:600;letter-spacing:.01em;line-height:1.45;
  text-transform:none;margin-top:8px;color:#cfc4ea;
}
.academy .academy-logo small.slogan span{color:inherit}
.academy .academy-logo small.slogan>span{display:block}
.academy .academy-logo small.slogan .slogan-hl,.slogan-hl{color:#7fe8bd}
body.auth-page .auth-story .eyebrow.slogan{font-size:14px;font-weight:600;letter-spacing:.01em;text-transform:none;color:#eee6ff}
.academy .academy-sidebar-bottom>.nav-label{letter-spacing:.14em;font-size:9.5px}
.academy .academy-account{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:16px}
.academy .academy-account .avatar,.library-profile .avatar{background:linear-gradient(135deg,#8b5cf6,#3fd39a);color:#fff;font-weight:800}
.academy .academy-sidebar nav>a{color:#d9cfee;border-radius:14px;border-left:0;transition:background .18s,color .18s,transform .18s}
.academy .academy-sidebar nav>a:hover{background:rgba(255,255,255,.08);color:#fff;box-shadow:none;transform:translateX(2px)}
.academy .academy-sidebar nav>a.active{
  background:linear-gradient(90deg,rgba(139,92,246,.55),rgba(139,92,246,.18));color:#fff;
  box-shadow:inset 3px 0 0 var(--ls-mint),0 8px 24px -14px rgba(139,92,246,.9);
}
.academy .academy-sidebar .ui-icon{filter:brightness(0) invert(1);opacity:.9}
.academy .sidebar-signout{color:#d9cfee;border-radius:12px}
.academy .sidebar-signout:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- Surfaces ---------- */
.academy .panel,.academy .catalog-group,.business-feature,.home-shortcuts>a,.programme-summary,
.classroom-app .exercise-card,.classroom-app .context-card,.classroom-app .lesson-sidebar{
  background:var(--ls-surface);border:1px solid rgba(255,255,255,.75);
  outline:1px solid var(--ls-line);outline-offset:-1px;
  border-radius:var(--ls-radius);box-shadow:var(--ls-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
}
.classroom-app .context-card{border-style:solid}
.home-shortcuts>a,.lesson-row,.level-row,.programme-row{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.home-shortcuts>a:hover,.academy .panel.appointment:hover{transform:translateY(-3px);box-shadow:var(--ls-shadow-hover);background:#fff}
.home-shortcuts>a .ui-icon{width:40px;height:40px;padding:9px;border-radius:12px;background:linear-gradient(135deg,#efe7ff,#e3faf0)}
.level-row:hover,.programme-row:hover,.lesson-row:hover{background:rgba(255,255,255,.95);box-shadow:inset 0 0 0 1px var(--ls-line-strong),0 14px 30px -20px rgba(64,34,120,.45);transform:translateY(-1px)}
.lesson-row{border-radius:16px;padding-left:12px;padding-right:12px}
.lesson-number,.programme-number{background:linear-gradient(135deg,#efe7ff,#f7f2ff);color:var(--ls-brand);border-radius:12px;font-weight:800}

/* ---------- Home hero ---------- */
.home-feature{
  position:relative;isolation:isolate;border-radius:28px;overflow:hidden;
  background:
    radial-gradient(520px 300px at 0% 0%,rgba(139,92,246,.55),transparent 70%),
    radial-gradient(420px 300px at 45% 120%,rgba(63,211,154,.30),transparent 70%),
    linear-gradient(135deg,#2e1d4f,#1b1133);
  box-shadow:0 30px 60px -30px rgba(42,27,69,.75);
}
.home-feature h2{color:#fff;font-size:clamp(30px,3.4vw,44px);line-height:1.08}
.home-feature p,.home-feature-copy .eyebrow{color:#d8ccef}
.home-feature-copy .eyebrow{color:#a8f0d0}
.home-feature>img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}

/* ---------- Buttons & forms ---------- */
.button,.academy .button,.classroom-app .button{
  background:linear-gradient(135deg,var(--ls-brand-2),var(--ls-brand));border:0;color:#fff;
  border-radius:14px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 10px 22px -12px rgba(109,60,224,.85),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.button:hover,.academy .button:hover,.classroom-app .button:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 16px 28px -14px rgba(109,60,224,.9),0 0 0 3px rgba(63,211,154,.25)}
.button:active{transform:translateY(0)}
.button.secondary,.button.white,.academy .button.secondary,.classroom-app .button.secondary{
  background:rgba(255,255,255,.9);color:var(--ls-brand);box-shadow:inset 0 0 0 1px var(--ls-line-strong)
}
.button.secondary:hover,.academy .button.secondary:hover,.classroom-app .button.secondary:hover{background:#fff;color:#4c22b0;box-shadow:inset 0 0 0 1px var(--ls-mint),0 0 0 3px rgba(63,211,154,.18)}
.button.danger{background:linear-gradient(135deg,#f06a6a,#d94848);box-shadow:0 10px 22px -12px rgba(217,72,72,.8)}
.button:disabled,.button[disabled]{opacity:.5;transform:none;filter:grayscale(.3);cursor:not-allowed}
.text-button{color:#b0344a;font-weight:700}
input,textarea,select{border-radius:12px;background:rgba(255,255,255,.92)}
label{font-weight:600;color:var(--ls-ink)}
.heading-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.page-heading{align-items:flex-end}
.badge{background:linear-gradient(135deg,#efe7ff,#e3faf0);color:#4c22b0;border-radius:999px;font-weight:700}
.notice{border-radius:14px;box-shadow:var(--ls-shadow)}
details.form-panel>summary{font-weight:800;color:var(--ls-brand);cursor:pointer}
.appointment.cancelled{opacity:.62}
table th{letter-spacing:.08em;font-size:12px;text-transform:uppercase;color:var(--ls-muted)}
progress{accent-color:var(--ls-brand)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ls-mint);outline-offset:3px;border-radius:10px}

/* ---------- Grammar-sheet tables (lesson content) ----------
   Adapted from the Lispeak "Grammar Sheet": deep header row, deep row-label column,
   airy white body, rounded outer frame; violet instead of blue to match the platform. */
.prose table,.table-wrap table{
  width:100%;margin:22px 0;border-collapse:separate;border-spacing:0;
  border:1.5px solid rgba(69,38,163,.3);border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:var(--ls-shadow);
  font-size:15px;line-height:1.5;
}
.prose table:hover,.table-wrap table:hover{border-color:rgba(69,38,163,.3);box-shadow:var(--ls-shadow)}
.prose thead th,.table-wrap thead th{
  background:linear-gradient(135deg,var(--ls-table-deep),var(--ls-table-brand));color:#fff;
  font-family:var(--ls-sans);font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  text-align:center;padding:14px 16px;border:0;border-right:1px solid rgba(255,255,255,.16);
}
.prose thead th:last-child,.table-wrap thead th:last-child{border-right:0}
.prose tbody td,.table-wrap tbody td{
  background:#fff;color:var(--ls-ink);padding:14px 16px;vertical-align:middle;
  border:0;border-right:1px solid rgba(69,38,163,.12);border-bottom:1px solid rgba(69,38,163,.12);
}
.prose tbody tr:last-child td,.table-wrap tbody tr:last-child td{border-bottom:0}
.prose tbody td:last-child,.table-wrap tbody td:last-child{border-right:0}
.prose tbody tr:nth-child(even) td,.table-wrap tbody tr:nth-child(even) td{background:#f8f6ff}
.prose tbody tr:hover td,.table-wrap tbody tr:hover td{background:#f0ebff}
.prose td strong,.table-wrap td strong{color:var(--ls-table-brand);font-weight:800}
.classroom-app .exercise-body table{font-size:15px}
/* short tables: first column is a row label, as in the sheet (USE / EXAMPLE / TIME PHRASES) */
.prose table:not(:has(tbody tr:nth-child(7))) tbody td:first-child,
.table-wrap table:not(:has(tbody tr:nth-child(7))) tbody td:first-child{
  background:linear-gradient(135deg,var(--ls-table-deep),#35207f);color:#fff;font-weight:700;
  border-right:0;border-bottom:1px solid rgba(255,255,255,.16);
}
.prose table:not(:has(tbody tr:nth-child(7))) tbody tr:last-child td:first-child,
.table-wrap table:not(:has(tbody tr:nth-child(7))) tbody tr:last-child td:first-child{border-bottom:0}
.prose table:not(:has(tbody tr:nth-child(7))) td:first-child strong{color:#c9b8ff}
@media(max-width:600px){
  .classroom-app .exercise-body table,.classroom-app .vocab-details .prose table{min-width:580px}
  .prose tbody td:first-child,.table-wrap tbody td:first-child{min-width:112px;overflow-wrap:normal;word-break:normal}
}
@media(max-width:480px){
  .prose table,.table-wrap table{font-size:13.5px;border-radius:14px}
  .prose thead th,.table-wrap thead th{padding:10px 10px;font-size:11.5px}
  .prose tbody td,.table-wrap tbody td{padding:10px}
}

/* ---------- Courses ---------- */
.level-mark{border-radius:16px;font-family:var(--ls-display);font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.business-feature{overflow:hidden}
.business-image img{transition:transform .6s ease}
.business-feature:hover .business-image img{transform:scale(1.04)}
.library-heading h1>span,.course-availability{color:var(--ls-brand)}
.catalog-search input{background:rgba(255,255,255,.9)}

/* ---------- Sign-in page: London photo with an aubergine veil ---------- */
body.auth-page .auth-layout{background:transparent}
body.auth-page .auth-story{
  background:
    linear-gradient(160deg,rgba(42,27,69,.94) 0%,rgba(42,27,69,.78) 45%,rgba(26,16,48,.9) 100%),
    url('images/lispeak-business.jpg') center/cover no-repeat;
}
body.auth-page .auth-story h1{color:#fff}
body.auth-page .auth-story>.brand{font-family:var(--ls-display);font-weight:600;letter-spacing:-.02em;color:#fff}
body.auth-page .auth-story h1 em{font-family:var(--ls-display);font-style:italic;color:#c4a4ff}
body.auth-page .story-chips span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#f1eafd;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.auth-page .auth-form{
  background:var(--ls-surface);border-radius:28px;box-shadow:var(--ls-shadow);
  outline:1px solid var(--ls-line);outline-offset:-1px;margin:32px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}

/* ---------- Lesson classroom ---------- */
.classroom-app .class-header{
  background:linear-gradient(100deg,#2c1c4a 0%,#4a2a86 55%,#6d3ce0 100%);
  box-shadow:0 10px 30px -18px rgba(26,16,48,.9);border:0;
}
.classroom-app .class-logo{font-family:var(--ls-display);font-weight:600;color:#fff}
.classroom-app .class-logo strong{color:#c4a4ff}
.classroom-app .class-main{background:transparent}
.classroom-app .exercise-card{overflow:hidden}
.classroom-app .exercise-track{background:rgba(109,60,224,.1)}
.classroom-app .exercise-track>span{background:linear-gradient(90deg,var(--ls-brand-2),var(--ls-mint))}
.classroom-app .step-link[aria-current="step"],.classroom-app .step-link.active{background:linear-gradient(90deg,rgba(139,92,246,.16),rgba(139,92,246,.04));box-shadow:inset 3px 0 0 var(--ls-brand)}
.classroom-app .flash-image{border-radius:16px}
.preview-banner{background:linear-gradient(90deg,#ffe7c7,#fff3e0);color:#6b3d00}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .home-shortcuts>a:hover,.lesson-row:hover,.level-row:hover,.programme-row:hover,.button:hover{transform:none}
}

/* ---------- Small screens ---------- */
@media (max-width:800px){
  body.academy,body.classroom-app{background-attachment:scroll}
  .home-feature>img{-webkit-mask-image:none;mask-image:none}
  body.auth-page .auth-form{margin:16px;padding:28px 22px}
  .page-heading{align-items:flex-start}
}