/* ==========================================================================
   OLI BENE — the subscriber-only Slovak course.
   Rides on css/learn-slovak-v3.css: same tokens, same type, same axis.
   Only the pieces that page does not already own live here — the lesson
   ledger, the lesson body and the sign-up form.
   ========================================================================== */

/* learn-slovak-v3.css hides every .rise at opacity 0 and waits for JS to add
   .is-in. On this page the lesson ledger IS the page, so if js/course.js never
   runs the whole thing would be a blank screen. The entrance only arms itself
   once that script has marked the document. */
html:not(.crs-animating) .rise { opacity: 1; transform: none; }

/* the line that appears after a confirm link */
.note {
  margin: 0;
  padding: 16px var(--margin);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--t-small);
  text-align: center;
}
.note[data-tone="bad"] { background: var(--surface-2); color: var(--ink); }

/* who the course is open for, in the axis margin */
#crsWho { font-variant-numeric: tabular-nums; }
#crsWho b { display: block; color: var(--ink); font-weight: 400; word-break: break-all; }

/* ---------------------------------------------------- the lesson ledger */

.plan {
  display: grid;
  gap: 2px;
  counter-reset: none;
}

.plan__item { background: var(--surface); }
.plan__item[data-open="true"] { background: var(--surface-2); }

/* the row you click: number, title, what is inside, state */
.plan__head {
  width: 100%;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: 8px clamp(14px, 1.6vw, 26px);
  align-items: baseline;
  background: none;
  border: 0;
  padding: clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 26px);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: background-color .15s;
}
.plan__head:hover { background: rgba(255, 255, 255, 0.04); }

.plan__n {
  font-family: 'Poiret One', system-ui, sans-serif;
  font-size: var(--t-lead);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.plan__name { font-size: var(--t-body); color: var(--ink); }
.plan__name small { display: block; font-size: var(--t-small); color: var(--muted); line-height: 1.5; margin-top: 4px; }

.plan__state { font-size: var(--t-small); color: var(--muted); white-space: nowrap; }
.plan__item[data-locked="true"] .plan__state { color: var(--muted-dark); }
.plan__item[data-open="true"] .plan__state { color: var(--accent); }

.plan__lvl {
  display: inline-block;
  margin-right: 10px;
  padding: 1px 7px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.plan__body { padding: 0 clamp(16px, 1.8vw, 26px) clamp(24px, 2.6vw, 36px); }
.plan__body[hidden] { display: none; }

.les__h {
  margin: clamp(20px, 2.2vw, 30px) 0 14px;
  font-size: var(--t-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------- the phrases */

.les__phrase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 6px clamp(14px, 1.6vw, 26px);
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
}
.les__phrase:last-child { border-bottom: 0; }
.les__sk { font-size: var(--t-body); color: var(--ink); }
.les__sk em { display: block; font-style: normal; font-size: var(--t-small); color: var(--muted); margin-top: 4px; }
.les__tr { font-size: var(--t-small); color: var(--muted); }
.les__tr em { display: block; font-style: normal; margin-top: 4px; color: var(--muted-dark); }

.les__say {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18); /* taste-skill-ignore */
  color: var(--muted);
  width: 2.25rem; height: 2.25rem;
  cursor: pointer;
  line-height: 1;
  transition: background-color .15s, color .15s;
}
.les__say:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------------------------------------------------------- the dialogue */

.les__line {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 4px clamp(14px, 1.6vw, 26px);
  padding: 10px 0;
}
.les__who { font-size: var(--t-small); color: var(--accent); }
.les__line p { margin: 0; font-size: var(--t-body); color: var(--ink); }
.les__line p em { display: block; font-style: normal; font-size: var(--t-small); color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------- the drill */

.les__drill p { margin: 0 0 12px; font-size: var(--t-body); color: var(--ink); line-height: 2.4; }
.les__drill em { display: block; font-style: normal; font-size: var(--t-small); color: var(--muted-dark); line-height: 1.6; }

.les__gap {
  width: 9rem;
  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--muted); /* taste-skill-ignore */
  color: var(--ink);
  padding: 2px 8px;
  font-size: var(--t-small);
}
.les__gap[data-ok="yes"] { border-bottom-color: var(--accent); color: var(--accent); }
.les__gap[data-ok="no"] { border-bottom-color: var(--ink); text-decoration: line-through; }

.les__bank { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.les__bank li { background: var(--bg); color: var(--muted); padding: 3px 10px; font-size: var(--t-small); }

.les__go { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 16px; }
.les__score { font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }

/* the state a locked lesson shows instead of a body */
.les__shut { margin: 0; padding: 18px 0 0; color: var(--muted); font-size: var(--t-small); }

/* --------------------------------------------------------------- the form */

.join { background: var(--surface); padding-block: clamp(80px, 9vw, 140px); }
.join h2 { font-size: var(--t-head); margin-bottom: clamp(24px, 3vw, 40px); }

.join__form { max-width: 46rem; }

.join__form input[type="email"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.14); /* taste-skill-ignore */
  color: var(--ink);
  padding: 15px 18px;
  font-size: var(--t-body);
}
.join__form input[type="email"]::placeholder { color: var(--muted-dark); }

.join__consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 18px;
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.6;
  cursor: pointer;
}
.join__consent input { margin-top: 0.35em; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

.join__go { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 24px; }
.join__link { font-size: var(--t-small); color: var(--muted); }

.join__msg { margin: 18px 0 0; font-size: var(--t-small); color: var(--muted); min-height: 1.6em; }
.join__msg[data-tone="bad"] { color: var(--ink); }
.join__msg[data-tone="good"] { color: var(--accent); }
.join__msg b { display: block; font-weight: 400; color: var(--ink); font-size: var(--t-body); margin-bottom: 4px; }

.join__form[data-busy="true"] { opacity: 0.6; pointer-events: none; }

/* -------------------------------------------------------------- narrower */

@media (max-width: 900px) {
  .plan__head { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .plan__state { grid-column: 2; }
  .les__phrase { grid-template-columns: minmax(0, 1fr) auto; }
  .les__tr { grid-column: 1; }
  .les__line { grid-template-columns: 1fr; }
  .les__gap { width: 7rem; }
}