/* lesson_shared_v4.css
   Fixes:
   - exercises panel height recalculated in JS (CSS prepared for smooth)
   - selects use same font as page
   - fill-in inputs styled as inline blanks inside sentences (like your screenshot)
*/

*,
*::before,
*::after{ box-sizing:border-box; }

:root{
  --brand-900:#034769;
  --brand-700:#086FA1;
  --brand-400:#3CA0D0;
  --accent:#FF8900;

  --teal:#559088;

  --text:#16232a;
  --muted:#5f7784;
  --card:#ffffff;

  --r-xl:20px;
  --r-lg:14px;
  --pill:999px;

  --shadow-md:0 14px 34px rgba(0,0,0,.20);
  --shadow-sm:0 8px 20px rgba(0,0,0,.14);
  --ring:0 0 0 3px rgba(60,160,208,.35);

  --speed-fast:180ms;
  --speed-med:320ms;
  --speed-slow:520ms;

  --max:980px;

  --explain-bg: rgba(60,160,208,.18);
  --exercise-bg: rgba(255,137,0,.36);

  --good-bg: rgba(31,157,77,.16);
  --bad-bg: rgba(217,83,79,.16);
  --good:#2F8F4E;
  --bad:#b63a37;
}

html, body{
  margin:0; padding:0; min-height:100vh; width:100%;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  overflow-x:hidden;
  font-size:16px;
}

body{
  background: linear-gradient(135deg, #034769 0%, #086FA1 45%, #3CA0D0 100%);
  background-size:180% 180%;
  animation:bgShift 90s ease infinite;
}
@keyframes bgShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

body[data-lang="cs"] .lang-sk{ display:none !important; }
body[data-lang="sk"] .lang-cs{ display:none !important; }

.lesson-wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px;
  position:relative;
  z-index:1;
}

.lesson-surface{
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 26px;
  line-height: 1.85;
  box-shadow: var(--shadow-md);
  border: 1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg, var(--teal), var(--brand-400)) border-box;
  position:relative;
}
.lesson-surface::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:url('https://www.transparenttextures.com/patterns/diagonal-noise.png');
  opacity:.05;
  pointer-events:none;
}

.lesson-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.lesson-title{
  margin:0;
  font-size:2rem;
  line-height:1.2;
  font-weight:900;
  color: var(--brand-900);
}
.lesson-subtitle{
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

/* back arrow */
.nav-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 46px;
  height: 46px;
  border-radius: 999px !important;
  background:#EEF3F6;
  border: 2px solid var(--brand-900);
  color: var(--brand-900);
  font-size:0; /* hide inconsistent inline arrow glyphs from HTML */
  line-height:0;
  text-decoration:none;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  transition: transform var(--speed-fast), background var(--speed-med), color var(--speed-med), box-shadow var(--speed-med);
  user-select:none;
}
.nav-back::before{
  content:"\2190";
  font-size:22px;
  line-height:1;
  font-weight:900;
}
.nav-back:hover{
  transform: translateY(-1px);
  background: var(--accent);
  color:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.nav-back:focus-visible{ outline:0; box-shadow: var(--ring); }

/* cards */
.card{
  margin-top: 16px;
  border:1px solid rgba(60,160,208,.22);
  border-radius: var(--r-xl);
  padding: 16px 16px 14px;
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow-sm);
}
.card-title{
  margin:0 0 10px;
  font-size:1.2rem;
  font-weight:900;
  color: var(--brand-700);
  position:relative;
  padding-bottom:6px;
}
.card-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:140px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--teal), var(--brand-700));
  opacity:.85;
}

/* explanation */
.card.explain{
  border-color: rgba(60,160,208,.35);
  background: var(--explain-bg);
}
.card.explain *{ color:#0f2a3a; }
.card.explain .card-title{ color:#03334f; }
.card.explain .card-title::after{ background:linear-gradient(90deg, rgba(3,71,105,.85), rgba(60,160,208,.85)); }

/* SLP3 explanation helper block - visually aligned with past_simple style */
.quality-brief{
  margin:0 0 10px 0 !important;
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  line-height:1.7;
}
.quality-brief p{
  margin:0 0 8px 0 !important;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.78);
}
.quality-brief p:last-child{
  margin-bottom:0 !important;
}
.quality-brief p strong{
  display:inline;
  color:#03334f;
}
.quality-brief p > strong:first-child{
  display:block;
  margin-bottom:2px;
}

/* vocabulary */
.vocab-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.vocab-item{
  border:1px solid rgba(85,144,136,.30);
  border-radius: var(--r-lg);
  padding: 10px 12px;
  background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.06), inset 0 0 0 2px rgba(85,144,136,.08);
}
.vocab-item strong{ display:block; color: var(--brand-900); font-size:1.05rem; }
.vocab-item span{ display:block; margin-top:2px; color:#2f3f49; }

/* examples */
.example{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.example-good{ background: var(--good-bg); border-color: rgba(31,157,77,.25); }
.example-bad{ background: var(--bad-bg); border-color: rgba(217,83,79,.25); }
.example .label{ font-weight:900; color:#03334f; }

/* buttons */
.exercise-toggle-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  margin: 18px 0 8px;
}
.btn{
  all:unset;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 210px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--pill);
  background:#EEF3F6;
  border: 2px solid var(--brand-900);
  color: var(--brand-900);
  font-weight:900;
  cursor:pointer;
  user-select:none;
  box-shadow: inset 0 0 0 2px rgba(60,160,208,.18), 0 3px 10px rgba(0,0,0,.10);
  transition: transform var(--speed-fast), background var(--speed-med), color var(--speed-med), box-shadow var(--speed-med), filter var(--speed-fast);
}
.btn:hover{
  background: var(--accent);
  color:#fff;
  transform: translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.16);
}
.btn:active{ transform: translateY(0px) scale(.99); filter:saturate(1.05); }
.btn:focus-visible{ outline:0; box-shadow: var(--ring); }

/* exercises panel (height controlled by JS for perfect resizing) */
.exercise-box{
  margin-top: 10px;
  border-radius: var(--r-xl);
  border:1px solid rgba(255,137,0,.35);
  background: var(--exercise-bg);
  box-shadow: var(--shadow-sm);
  overflow:hidden;

  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height var(--speed-slow) ease, opacity var(--speed-med) ease, transform var(--speed-med) ease;
}
.exercise-box.open{
  opacity: 1;
  transform: translateY(0);
}

.exercise-inner{
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.76));
}
.exercise-intro{ margin: 0 0 12px; line-height:1.75; color:#1f323e; }

/* exercise cards */
.exercise{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px 12px;
  margin: 10px 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform var(--speed-fast), box-shadow var(--speed-med);
  overflow: hidden;
}
.exercise:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }

.exercise p{
  margin:0;
  line-height: 2.0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

/* Inline blanks like your screenshot */
.inline-input,
.inline-select{
  font: inherit;
  color: inherit;
  line-height: inherit;
}

.inline-input{
  display:inline-block;
  width: 130px;
  max-width: 60vw;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1.6px solid rgba(3,71,105,.22);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(60,160,208,.10);
}

.inline-select{
  display:inline-block;
  min-width: 170px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1.6px solid rgba(3,71,105,.22);
  background: #fff;
  cursor:pointer;
}

/* Global anti-overflow rules for all lesson grids with inline selects */
.exercise-grid > .exercise{ min-width: 0; }
.exercise .q{
  flex: 1 1 auto;
  min-width: 0;
}
.exercise p > .inline-select{
  width: min(100%, 420px);
  min-width: 0;
}

/* Make selects + options match font */
select, option{ font-family: inherit; font-size: inherit; }

/* Inputs/textarea general */
.exercise textarea{
  font: inherit;
  width: min(760px, 92vw);
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.6px solid rgba(3,71,105,.22);
  background:#fff;
  resize: vertical;
  display:block;
  margin-top: 8px;
}
.exercise textarea:focus,
.inline-input:focus,
.inline-select:focus{
  outline:none;
  border-color: var(--brand-700);
  box-shadow:0 0 0 3px rgba(60,160,208,.28);
}

/* feedback pill */
.feedback{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-left: 4px;
  font-weight:900;
  padding:3px 10px;
  border-radius: var(--pill);
  background: rgba(255,255,255,.75);
}
.feedback.correct{
  color: var(--good);
  background: rgba(31,157,77,.14);
  box-shadow:0 0 0 1px rgba(31,157,77,.25) inset;
}
.feedback.incorrect{
  color: var(--bad);
  background: rgba(217,83,79,.14);
  box-shadow:0 0 0 1px rgba(217,83,79,.25) inset;
}

/* explanations */
.why{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px dashed rgba(0,0,0,.14);
  background: rgba(255,255,255,.84);
  color:#20333f;
  display:none;
}
.why.show{ display:block; }
.why .why-title{ font-weight:900; color:#03334f; }
.why .why-correct{ margin-top:6px; font-weight:900; color: var(--good); }

/* Inline translation line under example sentences */
.ex-translation{
  display:inline-block;
  margin-top:4px;
  padding:2px 8px;
  border-left:3px solid rgba(8,111,161,.55);
  background:rgba(8,111,161,.08);
  border-radius:8px;
  font-size:.93em;
  color:#274657;
  font-style:italic;
}

/* Example + translation as one shared box */
.ex-pair{
  display:block;
  margin:6px 0;
  padding:6px 10px;
  border-radius:10px;
  border-left:3px solid rgba(8,111,161,.55);
  background:rgba(8,111,161,.08);
}
.ex-pair .en{
  display:block;
  color:#173848;
  font-weight:700;
  font-style:normal;
}
.ex-pair .cs{
  display:block;
  margin-top:2px;
  color:#315666;
  font-style:italic;
}

/* Global table scroll (mobile-friendly) */
.table-wrap-global{
  position:relative;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  margin:8px 0;
}
.table-wrap-global > table{
  width:100%;
  min-width:560px;
  border-collapse:separate;
  border-spacing:0;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(3,71,105,.12);
  border-radius:12px;
  overflow:hidden;
}
.table-wrap-global > table th,
.table-wrap-global > table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(3,71,105,.10);
  vertical-align:top;
}
.table-wrap-global > table th{
  font-weight:900;
  color:#183847;
  background:rgba(8,111,161,.08);
}
.table-wrap-global > table tr:last-child td{
  border-bottom:none;
}

/* check button centered */
.check-row{
  display:flex;
  justify-content:center;
  margin-top: 14px;
}

/* animations on check */
@keyframes popOk{
  0%{ transform:scale(.98); }
  50%{ transform:scale(1.01); }
  100%{ transform:scale(1); }
}
@keyframes popBad{
  0%{ transform:translateX(0); }
  20%{ transform:translateX(-2px); }
  40%{ transform:translateX(2px); }
  60%{ transform:translateX(-2px); }
  80%{ transform:translateX(2px); }
  100%{ transform:translateX(0); }
}
.exercise.flash-ok{ outline:2px solid rgba(31,157,77,.35); animation: popOk 420ms ease; }
.exercise.flash-bad{ outline:2px solid rgba(217,83,79,.35); animation: popBad 420ms ease; }

/* bottom nav */
.chapter-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  margin-top: 18px;
}
.nav-chapter{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  border: 2px solid var(--brand-900);
  background:#EEF3F6;
  color: var(--brand-900);
  height: 46px;
  padding: 0 14px;
  border-radius: var(--pill);
  font-weight:900;
  box-shadow:0 3px 10px rgba(0,0,0,.10);
  transition: transform var(--speed-fast), background var(--speed-med), color var(--speed-med), box-shadow var(--speed-med);
}
.nav-chapter:hover{
  transform: translateY(-1px);
  background: var(--brand-700);
  color:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.16);
}
.nav-chapter[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

@media (max-width: 640px){
  .lesson-wrap{ padding: 10px; }
  .lesson-surface{ padding: 16px; border-radius: 16px; }
  .lesson-title{ font-size: 1.45rem; }
  .exercise p{ display:block; }
  .inline-input, .inline-select{ width:100%; min-width:0; margin-top:8px; }
}

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