/* lingo.css: what every page of apaslingo.in shares: colours, type,
   the top bar, buttons, fields and the footer. */
:root {
  --ink: #10201e; --ink2: #3c4b49; --dim: #5d6b69; --paper: #f6faf9; --card: #ffffff; --rule: #d8e4e2;
  --teal: #0f766e; --teal-dark: #0b5c56; --teal-soft: #e6f4f2; --coral: #c2410c; --focus: rgba(15, 118, 110, 0.3);
  --radius: 14px; --gutter: clamp(1rem, 4vw, 2rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #e6f1ef; --ink2: #c3d3d0; --dim: #9fb2ae; --paper: #0d1615; --card: #13201e; --rule: #24403c; --teal: #2dd4bf; --teal-dark: #5eead4; --teal-soft: #12302c; --coral: #fb923c; --focus: rgba(45, 212, 191, 0.35); }
}
:root[data-theme="dark"] { --ink: #e6f1ef; --ink2: #c3d3d0; --dim: #9fb2ae; --paper: #0d1615; --card: #13201e; --rule: #24403c; --teal: #2dd4bf; --teal-dark: #5eead4; --teal-soft: #12302c; --coral: #fb923c; --focus: rgba(45, 212, 191, 0.35); }
/* the sign-in dialog and account chip (auth-ui.js) read these */
:root { --surface: var(--card); --surface2: var(--paper); --border: var(--rule); --border2: var(--rule);
  --t1: var(--ink); --t2: var(--ink); --t3: var(--dim); --accent: var(--teal); --aui-accent: var(--teal); --aui-on-accent: var(--on-teal); --mars: var(--coral); }
/* text on teal: white on the light teal, near-black on the bright dark-mode teal */
:root { --on-teal: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --on-teal: #06201d; } }
:root[data-theme="dark"] { --on-teal: #06201d; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 6rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); }

/* top bar */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.bar { display: flex; align-items: center; gap: 1.2rem; min-height: 4rem; }
.brand { font: 700 1.45rem Fraunces, Georgia, serif; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.brand b { color: var(--teal); font-weight: 700; }
.brand span { font: 500 0.9rem Inter, sans-serif; color: var(--dim); }
.nav { display: flex; gap: 0.2rem; margin-left: auto; }
.nav a { color: var(--ink2); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 0.4rem 0.7rem; border-radius: 8px; white-space: nowrap; }
.nav a:hover { background: var(--teal-soft); color: var(--teal-dark); }
.nav a[aria-current="page"] { color: var(--teal-dark); background: var(--teal-soft); }
.nav a:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
#account { flex: none; }
.phone-only { display: none; }
@media (max-width: 680px) {
  .bar { flex-wrap: wrap; gap: 0 0.8rem; padding-top: 0.5rem; }
  #account { margin-left: auto; }
  .nav { order: 3; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0.2rem var(--gutter) 0.45rem; overflow-x: auto; scrollbar-width: none; }
  .nav a { padding: 0.35rem 0.5rem; font-size: 0.92rem; }
  .nav .wide-only { display: none; }
  .nav .phone-only { display: inline; }
}

/* buttons and fields; auth-ui.js styles its own (aui-*) buttons */
button:not([class*="aui-"]), .cta { font: 600 1rem Inter, sans-serif; background: var(--teal); color: var(--on-teal); border: 0; border-radius: 10px; padding: 0.75rem 1.2rem; cursor: pointer; text-decoration: none; display: inline-block; }
button:not([class*="aui-"]):hover, .cta:hover { background: var(--teal-dark); }
button:not([class*="aui-"]):disabled { opacity: 0.6; cursor: default; }
button.ghost { background: transparent; color: var(--teal-dark); border: 1px solid var(--rule); }
button.ghost:hover { background: var(--teal-soft); }
.cta:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
label { display: grid; gap: 0.3rem; font-weight: 500; font-size: 0.92rem; }
input, select { font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--rule); border-radius: 9px; background: var(--paper); color: var(--ink); width: 100%; }
input:focus, select:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--teal); }
input[readonly] { color: var(--dim); }
.msg { min-height: 1.4em; margin: 0; font-size: 0.95rem; }
.msg.ok { color: var(--teal-dark); font-weight: 600; } .msg.bad { color: var(--coral); }
.note { color: var(--dim); font-size: 0.92rem; margin-top: 0.8rem; }

footer { border-top: 1px solid var(--rule); margin-top: 1.5rem; padding: 1.2rem 0 2rem; color: var(--dim); font-size: 0.88rem; }
footer a { color: inherit; }

/* lesson pages (build_lessons.py): the course's lessons on the left, the lesson drawn by apas-content-render.js */
.skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--card); padding: 0.5rem 0.8rem; border-radius: 8px; }
[lang="hi"], .lesson { font-family: Inter, "Noto Sans Devanagari", system-ui, sans-serif; }
.crumbs { color: var(--dim); font-size: 0.9rem; margin: 1.2rem 0 0.4rem; } .crumbs a { color: inherit; }
.layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; gap: 0; } .layout > nav.lessons { order: 2; } }
nav.lessons { position: sticky; top: 5rem; margin-top: 1.2rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem 0.6rem; max-height: calc(100vh - 6rem); overflow: auto; }
@media (max-width: 860px) { nav.lessons { position: static; max-height: none; margin: 1rem 0; } }
nav.lessons .course-name { margin: 0 0.5rem 0.6rem; font-weight: 600; font-size: 0.95rem; } nav.lessons .course-name a { color: var(--ink); text-decoration: none; }
nav.lessons ol, .lesson-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
nav.lessons ol a, .lesson-list a { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.45rem 0.5rem; border-radius: 9px; color: var(--ink2); text-decoration: none; font-size: 0.93rem; }
nav.lessons ol a:hover, .lesson-list a:hover { background: var(--teal-soft); }
nav.lessons [aria-current="page"] a { background: var(--teal-soft); color: var(--teal-dark); font-weight: 600; }
.num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); font-size: 0.8rem; font-weight: 600; }
.free, .lock { font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 0.05rem 0.5rem; }
.free { color: var(--teal-dark); background: var(--teal-soft); } .lock { color: var(--dim); border: 1px solid var(--rule); }
.course h1, .lesson h1 { font: 700 clamp(1.7rem, 4vw, 2.4rem)/1.15 Fraunces, Georgia, serif; margin: 0.3rem 0 0.6rem; letter-spacing: -0.01em; }
.course .lead { font-size: 1.08rem; color: var(--ink2); max-width: 40rem; }
.lesson-list { margin-top: 1.2rem; gap: 0.6rem; }
.lesson-list a { background: var(--card); border: 1px solid var(--rule); padding: 0.8rem 1rem; font-size: 1rem; }
.lesson-list .t strong { display: block; color: var(--ink); } .lesson-list .t span { color: var(--dim); font-size: 0.9rem; }
.lesson { max-width: 46rem; padding-bottom: 1rem; }
.lesson h2 { font: 700 1.4rem Fraunces, "Noto Sans Devanagari", Georgia, serif; margin: 2rem 0 0.4rem; }
.lesson table { border-collapse: collapse; width: 100%; font-size: 0.95rem; margin: 1rem 0; display: block; overflow-x: auto; }
.lesson th, .lesson td { border: 1px solid var(--rule); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
.lesson th { background: var(--teal-soft); }
.loading { color: var(--dim); }
.locked-box { display: grid; gap: 0.5rem; justify-items: start; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.2rem 1.3rem; margin: 1.2rem 0; }
.locked-box strong { font-size: 1.1rem; } .locked-box span { color: var(--dim); }
.prevnext { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 1rem; max-width: 46rem; }
.btn { display: inline-block; padding: 0.6rem 1rem; border-radius: 10px; border: 1px solid var(--rule); color: var(--teal-dark); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.btn.primary { background: var(--teal); color: var(--on-teal); border-color: var(--teal); }
/* the renderer's sequence player, questions and ordering, in the site's colours */
.lesson .apc-sequence-player { background: var(--card) !important; border: 1px solid var(--rule) !important; color: var(--ink) !important; border-radius: var(--radius) !important; padding: 1rem 1.2rem !important; }
.lesson .apc-sequence-title { color: var(--coral) !important; font-weight: 600; }
.lesson .apc-sequence-frame { min-height: 6.5em !important; }
.lesson .apc-sequence-frame h2, .lesson .apc-sequence-frame h3 { margin: 0.2rem 0 0.3rem; font-family: Fraunces, "Noto Sans Devanagari", Georgia, serif; color: var(--teal-dark); }
.lesson .apc-sequence-frame h2 { font-size: 1.9rem; } .lesson .apc-sequence-frame p { font-size: 1.08rem; margin: 0.3rem 0; }
.lesson .apc-sequence-frame audio { display: none; }
.lesson .apc-sequence-controls input[type=range] { accent-color: var(--teal); }
.lesson .apc-sequence-controls button { padding: 0.4rem 0.8rem !important; font-size: 0.9rem; }
.lesson .apc-question { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1rem 0; }
.lesson .apc-question-options label { display: flex; gap: 0.5rem; align-items: baseline; font-weight: 400; font-size: 1rem; padding: 0.3rem 0; }
.lesson .apc-question-options input { width: auto; }
.lesson .apc-question-feedback[data-correct="true"] { color: var(--teal-dark); font-weight: 600; }
.lesson .apc-question-feedback[data-correct="false"] { color: var(--coral); font-weight: 600; }
.lesson details summary { cursor: pointer; color: var(--teal-dark); font-weight: 500; margin-top: 0.5rem; }
/* units (2026-10-16): a unit's heading in the lesson lists; one block a course on the dashboard */
nav.lessons ol .unit-head, .lesson-list .unit-head { font: 600 0.8rem Inter, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-dark); padding: 0.9rem 0.5rem 0.2rem; }
.lesson-list .unit-head { font-size: 0.85rem; padding-top: 1.2rem; }
.course-plan { padding: 0.2rem 0 1rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; }
#plan { margin-top: 2.5rem; }
/* plan cards (home page prices and each course page's price) */
h2.section { font: 700 1.6rem Fraunces, Georgia, serif; margin: 0 0 1rem; }
.plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.plan { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.plan.best { border: 2px solid var(--teal); }
.plan .tag { position: absolute; top: -0.7rem; right: 1rem; background: var(--teal); color: var(--on-teal); font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 0.1rem 0.6rem; }
.plan .price { font: 700 1.9rem Fraunces, Georgia, serif; } .plan .price small { font: 400 0.95rem Inter, sans-serif; color: var(--dim); }
.plan .per { color: var(--dim); font-size: 0.9rem; }
.plan .has { margin: 0.4rem 0 0.8rem; padding-left: 1.1rem; color: var(--ink2); font-size: 0.93rem; flex: 1; }
#lp-actions { margin-top: 0.6rem; }