/* KeraKult — student cabinet.
   Same design language as the public site: greige surfaces, Archivo,
   radius 0, 1px hairlines, no shadows. Tokens mirror site/styles.css. */

:root{
  --surface:#A39D94;
  --cream:#EDE9E2;
  --sand:#B2ACA3;
  --green:#16130F;
  --ink:#1E1B17;
  --terra:#33271C;
  --warmsand:#D3CCC0;
  --body:#231F1A;
  --muted:#221E19;
  --meta:#2A251F;
  --white:#F2EFE9;
  --line:rgba(22,19,15,.24);
  --line-soft:rgba(22,19,15,.14);
  --sans:"Archivo",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--surface)}
body{
  font-family:var(--sans);
  background:var(--surface);
  color:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--green);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--terra)}
::selection{background:var(--terra);color:var(--cream)}

.lrn-kicker{
  font-size:11px;text-transform:uppercase;letter-spacing:.26em;
  color:var(--terra);line-height:1.7;
}
.lrn-h1{font-weight:300;font-size:clamp(30px,4vw,46px);line-height:1.06;letter-spacing:-.03em}
.lrn-h2{font-weight:300;font-size:clamp(24px,3vw,34px);line-height:1.12;letter-spacing:-.02em}
.lrn-h3{font-weight:400;font-size:20px;line-height:1.25}
.lrn-fine{font-size:14px;line-height:1.62;color:var(--meta)}

/* ---------- shell ---------- */
.lrn-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px clamp(20px,5vw,48px);
  border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.lrn-wordmark{display:block;line-height:0}
.lrn-wordmark img{display:block;height:32px;width:auto}
.lrn-topbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.lrn-userchip{font-size:12px;color:var(--meta);letter-spacing:.02em;word-break:break-all}
.lrn-signout{
  appearance:none;background:transparent;border:1px solid var(--line);
  color:var(--green);font-family:inherit;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;padding:9px 16px;cursor:pointer;transition:background .18s ease,color .18s ease;
}
.lrn-signout:hover{background:var(--green);color:var(--cream)}

.lrn-main{padding:clamp(36px,6vw,72px) clamp(20px,5vw,48px);max-width:1000px;margin:0 auto}
.lrn-main-narrow{max-width:820px}

.lrn-back{
  display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--meta);margin-bottom:28px;
}
.lrn-back:hover{color:var(--terra)}

/* ---------- states ---------- */
.lrn-state{padding:60px 0;text-align:center;color:var(--meta);font-size:14px}
.lrn-error{
  border:1px solid var(--line);background:var(--white);
  padding:18px 20px;margin:24px 0;font-size:14px;line-height:1.55;
}
.lrn-error strong{display:block;margin-bottom:6px;color:var(--green)}

/* ---------- login ---------- */
.lrn-login-wrap{min-height:100vh;display:grid;place-items:center;padding:32px 20px}
.lrn-login-card{
  width:100%;max-width:420px;background:var(--white);
  border:1px solid var(--line);padding:clamp(28px,5vw,44px);
}
.lrn-login-logo{margin-bottom:28px;line-height:0}
.lrn-login-logo img{display:block;height:40px;width:auto}
.lrn-login-title{font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-.02em;margin-bottom:10px}
.lrn-login-hint{font-size:14px;line-height:1.6;color:var(--meta);margin-bottom:22px}
.lrn-login-foot{font-size:12px;line-height:1.6;color:var(--meta);margin-top:24px;border-top:1px solid var(--line-soft);padding-top:18px}

/* ---------- course cards ---------- */
.lrn-cards{display:grid;gap:20px;margin-top:32px}
.lrn-card{
  display:block;background:var(--white);border:1px solid var(--line);
  padding:clamp(22px,3.4vw,32px);transition:background .18s ease;
}
.lrn-card:hover{background:var(--cream)}
.lrn-card-tag{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra);margin-bottom:12px}
.lrn-card-title{font-weight:300;font-size:clamp(24px,3vw,32px);line-height:1.1;letter-spacing:-.02em;color:var(--green)}
.lrn-card-sub{font-size:15px;line-height:1.6;color:var(--muted);margin-top:10px;max-width:56ch}
.lrn-card-meta{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--meta);
}

/* ---------- modules ---------- */
.lrn-intro{margin:20px 0 40px;font-size:16px;line-height:1.7;color:var(--body);max-width:62ch}
.lrn-intro p{margin-bottom:14px}

.lrn-module{border:1px solid var(--line);background:var(--white);margin-bottom:18px}
.lrn-module-head{padding:22px clamp(20px,3vw,28px);border-bottom:1px solid var(--line-soft)}
.lrn-module-title{font-weight:400;font-size:19px;line-height:1.3;color:var(--green)}
.lrn-module-sum{font-size:14px;line-height:1.6;color:var(--muted);margin-top:8px;max-width:64ch}

.lrn-lesson-row{
  display:flex;align-items:baseline;gap:16px;
  padding:15px clamp(20px,3vw,28px);
  border-top:1px solid var(--line-soft);
  transition:background .16s ease,padding-left .16s ease;
}
.lrn-lesson-row:first-of-type{border-top:0}
.lrn-lesson-row:hover{background:var(--cream);padding-left:calc(clamp(20px,3vw,28px) + 5px)}
.lrn-lesson-num{
  flex:0 0 auto;font-size:11px;letter-spacing:.14em;color:var(--meta);min-width:26px;
}
.lrn-lesson-name{font-size:16px;line-height:1.5;color:var(--body)}

/* ---------- lesson ---------- */
.lrn-lesson-head{margin-bottom:30px}
.lrn-lesson-head .lrn-kicker{margin-bottom:8px}
.lrn-lesson-body{font-size:16px;line-height:1.7;color:var(--body);max-width:68ch}
.lrn-lesson-body p{margin-bottom:14px}
.lrn-lesson-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* small caps label above the lead, as on the original course pages */
.lrn-lesson-body .lesson-label{
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terra);margin:0 0 12px;
}
.lrn-lesson-body .lesson-lead{
  font-size:clamp(20px,2.3vw,24px);font-weight:300;line-height:1.45;letter-spacing:-.01em;
  color:var(--green);margin-bottom:18px;
}
/* each section starts with a hairline, so the page reads in clear blocks */
.lrn-lesson-body h3{
  font-weight:500;font-size:21px;line-height:1.3;color:var(--green);
  margin:38px 0 14px;padding-top:26px;border-top:1px solid var(--line-soft);
}
.lrn-lesson-body h4{font-weight:600;font-size:15px;line-height:1.4;margin:20px 0 8px;color:var(--green)}
.lrn-lesson-body ul,.lrn-lesson-body ol{margin:0 0 16px;padding-left:22px}
.lrn-lesson-body ul{list-style:disc}
.lrn-lesson-body ul ul{list-style:circle;margin:8px 0 4px}
.lrn-lesson-body li{margin-bottom:9px;padding-left:4px}
.lrn-lesson-body li::marker{color:var(--terra)}
.lrn-lesson-body strong{font-weight:600;color:var(--green)}
.lrn-lesson-body .lesson-photo{margin:26px 0 8px}
.lrn-lesson-body .lesson-photo img{display:block;width:100%;height:auto}
.lrn-lesson-body .lesson-note{
  margin:28px 0 0;padding:14px 18px;background:var(--cream);
  border-left:2px solid var(--terra);font-size:15px;line-height:1.6;
}
.lrn-lesson-body a.lesson-download{
  display:inline-block;margin-top:10px;padding:14px 24px;
  background:var(--green);color:var(--white);text-decoration:none;
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.lrn-lesson-body a.lesson-download:hover{background:var(--terra);color:var(--white)}
@media (max-width:640px){
  .lrn-lesson-body{font-size:15.5px}
  .lrn-lesson-body h3{font-size:19px;margin-top:32px;padding-top:22px}
}
.lrn-lesson-body table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:15px}
.lrn-lesson-body th,.lrn-lesson-body td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.lrn-lesson-body th{background:var(--cream);font-weight:500}

/* video.
   The placeholder in courses.json carries inline styles (padding-top hack for
   the 16:9 box, absolutely positioned caption). Inline styles win over classes,
   so the overrides below need !important. Using aspect-ratio instead of the
   padding hack lets the caption sit in normal flow and centre properly. */
.lrn-lesson-body .lesson-video{
  position:relative!important;
  padding-top:0!important;
  aspect-ratio:16/9;
  width:100%;
  overflow:hidden;
  display:grid!important;
  place-items:center;
  gap:6px;
  background:var(--warmsand)!important;
  border:1px solid var(--line)!important;
  margin:0 0 30px!important;
}
.lrn-lesson-body .lesson-video>div{
  position:static!important;
  inset:auto!important;
  display:block!important;
  text-align:center;
  line-height:2.1!important;
  padding:0 16px;
}
/* No fill or border behind the player: the Kinescope player has its own
   rounded corners, and anything behind it shows through at the corners. */
.lrn-video-frame{
  position:relative;padding-top:56.25%;width:100%;overflow:hidden;
  background:transparent;border:0;margin:0 0 28px;
}
.lrn-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* nav */
.lrn-lesson-nav{
  display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
}
.lrn-nav-btn{
  display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line);padding:13px 22px;color:var(--green);
  transition:background .18s ease,color .18s ease;
}
.lrn-nav-btn:hover{background:var(--green);color:var(--cream)}
.lrn-nav-btn.is-primary{background:var(--green);color:var(--cream);border-color:var(--green)}
.lrn-nav-btn.is-primary:hover{background:var(--terra);border-color:var(--terra)}
.lrn-nav-btn.is-off{opacity:.34;pointer-events:none}

@media (max-width:640px){
  .lrn-topbar{flex-direction:column;align-items:flex-start;gap:10px}
  .lrn-topbar-right{justify-content:flex-start}
  .lrn-lesson-nav .lrn-nav-btn{flex:1 1 100%;text-align:center}
}

/* ---------- Clerk widget ----------
   Clerk renders its own card: grey surface, shadow, fixed 25rem width.
   Inside our own card that reads as a box inside a box and overflows on
   narrow screens. These rules strip its chrome and let it fill the parent.
   Clerk's public class names are stable (cl-*); internal ones are not,
   so we only touch the documented layout wrappers. */
#clerk-mount .cl-rootBox,
#clerk-mount .cl-cardBox,
#clerk-mount .cl-card{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}
#clerk-mount .cl-header,
#clerk-mount .cl-footer,
#clerk-mount .cl-footerAction,
#clerk-mount .cl-dividerRow,
#clerk-mount .cl-socialButtons{display:none!important}

#clerk-mount .cl-formFieldLabel{
  font-size:11px!important;
  letter-spacing:.2em!important;
  text-transform:uppercase!important;
  color:var(--meta)!important;
}
#clerk-mount .cl-formFieldInput{
  border:1px solid var(--line)!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
#clerk-mount .cl-formButtonPrimary{
  border-radius:0!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
#clerk-mount .cl-formButtonPrimary::after{display:none!important}

/* ---- student survey (before a paid course) ---- */
.lrn-sv-intro{font-size:16px;line-height:1.6;color:var(--body);margin:14px 0 34px;max-width:56ch}
.lrn-sv-form{display:flex;flex-direction:column;gap:26px;max-width:640px}
.lrn-sv-q{border:0;padding:18px 0 0;border-top:1px solid var(--line-soft)}
.lrn-sv-label{font-weight:500;font-size:17px;line-height:1.4;color:var(--green);margin-bottom:12px;padding:0}
.lrn-sv-opt{font-weight:400;color:var(--meta);opacity:.7}
.lrn-sv-options{display:flex;flex-direction:column;gap:8px}
.lrn-sv-option{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:15.5px;line-height:1.5}
.lrn-sv-option input{margin-top:4px;accent-color:var(--green)}
.lrn-sv-input{width:100%;font:inherit;font-size:15.5px;color:var(--body);background:var(--white);border:1px solid var(--line);border-radius:0;padding:12px 14px}
.lrn-sv-input:focus{outline:2px solid var(--green);outline-offset:-1px}
.lrn-sv-q.is-missing .lrn-sv-label{color:#8a2b1d}
.lrn-sv-q.is-missing .lrn-sv-input{border-color:#8a2b1d}
.lrn-sv-err{color:#8a2b1d;font-size:15px;min-height:1px}
.lrn-sv-form .lrn-nav-btn{align-self:flex-start;cursor:pointer;font:inherit}
.lrn-sv-scale{display:flex;flex-wrap:wrap;gap:6px}
.lrn-sv-num{position:relative;cursor:pointer}
.lrn-sv-num input{position:absolute;opacity:0;pointer-events:none}
.lrn-sv-num span{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);font-size:15px;background:var(--white)}
.lrn-sv-num input:checked+span{background:var(--green);color:var(--cream);border-color:var(--green)}
.lrn-sv-num input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.lrn-sv-promo{font-size:16px;line-height:1.6;color:var(--cream);background:var(--green);padding:16px 20px;margin:0 0 28px;max-width:56ch}
button.lrn-nav-btn{cursor:pointer;font-family:inherit;background:transparent}
button.lrn-nav-btn.is-primary{background:var(--green)}

/* ---- review promo banner on every lesson ---- */
.lrn-promo-banner{display:flex;gap:14px;align-items:center;background:var(--green);color:var(--cream);padding:14px 18px;margin:0 0 28px;font-size:15px;line-height:1.5;max-width:68ch}
.lrn-promo-tag{flex:none;font-weight:600;font-size:18px;letter-spacing:.02em;border:1px solid rgba(237,233,226,.5);padding:6px 10px}
@media (max-width:600px){
  .lrn-promo-banner{font-size:14px;padding:12px 14px;gap:12px}
  .lrn-promo-tag{font-size:16px;padding:5px 8px}
}