/* Site palette: light cream, navy blue, dark green, burned orange, coffee brown */
:root {
  --cream: #FAF4E6;
  --cream-2: #F3EAD3;
  --navy: #1B2A4A;
  --navy-2: #24365E;
  --green: #1E4D2B;
  --green-2: #2A6B3C;
  --orange: #C1552A;
  --orange-2: #A8441F;
  --brown: #5C4033;
  --brown-2: #7A5647;
  --ink: #2B2118;
  --ok: #2A6B3C;
  --bad: #A8441F;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(43, 33, 24, .12);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
h1, h2, h3, h4, .brand, nav, button, .btn, .chip, .badge, .tag, th, label, .meta {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
a { color: var(--green); }
main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }

/* Header */
header.site {
  background: var(--navy); color: var(--cream);
  position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow);
}
.navwrap { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 1.25rem; color: var(--cream); text-decoration: none; letter-spacing: .2px; }
.brand em { color: var(--orange); font-style: normal; }
.brand .cert { color: #D9C79A; }
nav.main { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }
nav.main a {
  color: var(--cream); text-decoration: none; padding: 7px 12px; border-radius: 8px; font-size: .95rem;
}
nav.main a:hover { background: var(--navy-2); }
nav.main a.active { background: var(--green); }
nav.main a.cta { background: var(--orange); font-weight: 700; }
nav.main a.cta:hover { background: var(--orange-2); }
.navtoggle { display: none; background: none; border: 1px solid var(--cream); color: var(--cream); border-radius: 8px; padding: 6px 10px; font-size: 1.1rem; cursor: pointer; }

/* Footer */
footer.site {
  background: var(--brown); color: var(--cream-2); padding: 18px 16px; font-size: .88rem;
}
footer.site .inner { max-width: 1100px; margin: 0 auto; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
footer.site a { color: var(--cream); }

/* Cards, grid */
.grid { display: grid; gap: 16px; }
.grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff; border: 1px solid var(--cream-2); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; overflow: hidden;
}
.card h3 { margin-top: 0; color: var(--navy); }
.card .thumb { width: calc(100% + 32px); max-width: none; margin: -16px -16px 12px; display: block; aspect-ratio: 16/9; object-fit: cover; background: var(--cream-2); }

/* Buttons */
.btn {
  display: inline-block; border: none; cursor: pointer; text-decoration: none; text-align: center;
  padding: 9px 16px; border-radius: 9px; font-size: .95rem; font-weight: 600;
  background: var(--navy); color: var(--cream);
}
.btn:hover { background: var(--navy-2); }
.btn.orange { background: var(--orange); } .btn.orange:hover { background: var(--orange-2); }
.btn.green { background: var(--green); } .btn.green:hover { background: var(--green-2); }
.btn.brown { background: var(--brown); } .btn.brown:hover { background: var(--brown-2); }
.btn.ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn.small { padding: 5px 10px; font-size: .85rem; }
.btn.danger { background: #8C2F1B; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Forms */
label { display: block; font-weight: 600; color: var(--brown); margin: 12px 0 4px; font-size: .92rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 9px 11px; border: 1.5px solid var(--brown-2); border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 1rem; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); border-color: var(--orange); }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row > div { flex: 1; min-width: 180px; }
form.inline { display: inline; }

/* Chips / badges */
.chip, .badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: var(--cream-2); color: var(--brown);
}
.badge.valid { background: #DDEBD9; color: var(--green); }
.badge.draft, .badge.validating, .badge.queued, .badge.running { background: #F5E3C8; color: var(--brown); }
.badge.failed, .badge.banned { background: #F3D5C9; color: var(--bad); }
.badge.edited { background: #DBE3F5; color: var(--navy); }
.badge.pending { background: #F5E3C8; color: var(--brown); }
.badge.active { background: #DDEBD9; color: var(--green); }
.chip.type { background: var(--navy); color: var(--cream); }
a.chip { text-decoration: none; }

/* Tables */
table.list { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.list th { background: var(--navy); color: var(--cream); text-align: left; padding: 9px 10px; font-size: .85rem; }
table.list td { padding: 9px 10px; border-bottom: 1px solid var(--cream-2); font-size: .93rem; vertical-align: middle; }
table.list tr:hover td { background: var(--cream); }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--green) 100%);
  color: var(--cream); border-radius: var(--radius); padding: 40px 28px; margin-bottom: 24px;
}
.hero h1 { margin: 0 0 8px; font-size: 2.2rem; }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero p { max-width: 640px; font-size: 1.06rem; }

/* Exercise player */
.exbody { font-size: 1.08rem; }
.exbody .gapin { display: inline-block; width: 9.5em; margin: 0 3px; padding: 4px 8px; border: 1.5px dashed var(--orange); border-radius: 6px; background: #FFFDF6; font-size: .95rem; }
.exbody select.gapsel { display: inline-block; width: auto; margin: 0 3px; padding: 4px 8px; }
.stemcap { font-weight: 800; color: var(--orange-2); letter-spacing: .5px; }
.qitem { background: #fff; border: 1px solid var(--cream-2); border-left: 5px solid var(--green); border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.qitem .qn { font-weight: 800; color: var(--navy); margin-right: 6px; }
.qitem .opts { display: grid; gap: 6px; margin-top: 8px; }
.qitem .opts label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; color: var(--ink); margin: 0; cursor: pointer; }
.result-ok { color: var(--ok); font-weight: 700; }
.result-bad { color: var(--bad); font-weight: 700; }
.explain { background: var(--cream-2); border-radius: 6px; padding: 8px 10px; font-size: .92rem; margin-top: 6px; }
.audiobox { background: var(--navy); border-radius: var(--radius); padding: 14px 16px; color: var(--cream); margin: 12px 0; }
.audiobox audio { width: 100%; margin-top: 8px; }
.scorebig { font-size: 2.4rem; font-weight: 800; color: var(--navy); }

/* THE THREE BUTTONS (owner, 2026-10-19) — Check One by One, Check All, Show All Answers — under every exercise; no Check
   beside a gap. A checked or revealed answer shows IN THE SAME GAP: the learner's wrong answer crossed out in red, the
   right one in green (a right answer in green; an empty gap the right one in green); a tap on it opens the reason. A
   question card also gets the reason inside the card; the progress line keeps count. */
.exbody.gaps { line-height: 2.3; }
.gapitem { white-space: nowrap; }
.gapres {
  display: inline-block; vertical-align: middle; margin: 0 3px; padding: 3px 8px; border: 1.5px solid var(--green-2);
  border-radius: 6px; background: #F1F8EF; font-size: .95rem; line-height: 1.45; cursor: pointer; white-space: normal;
  text-align: left; color: var(--ink);
}
.gapres.bad { border-color: var(--bad); background: #FDF1EC; }
.gapres del.gwrong { color: var(--bad); text-decoration: line-through; text-decoration-thickness: 2px; }
.gapres .gright { color: var(--ok); font-weight: 700; text-decoration: none; }
.gapres[hidden], .resultpanel[hidden], .progressbar[hidden], .jsonly[hidden], .checklist[hidden],
.btn[hidden] { display: none; }   /* .btn sets display, which beat the hidden attribute: "Start again" showed before any check */
/* the answer box or drop-down gives way to the result in the same gap; their own display rules would beat [hidden] */
.gapwrap > input[hidden], .gapwrap > select[hidden] { display: none !important; }
.gapwrap.hasbulb > .gapres { padding-right: 28px; }
.gapitem.isselected .gapin, .gapitem.isselected .gapsel, .gapitem.isselected .gapres { outline: 3px solid var(--orange); outline-offset: 1px; }
.qitem .opts label.optright { color: var(--ok); font-weight: 700; }
.qitem .opts label.optright::after { content: " ✓"; }
.qitem .opts label.optwrong > span { color: var(--bad); text-decoration: line-through; text-decoration-thickness: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.resultpanel { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--cream-2); font-size: .95rem; line-height: 1.5; }
.resultpanel .verdict { font-weight: 700; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
.resultpanel .verdict.ok { color: var(--ok); }
.resultpanel .verdict.bad { color: var(--bad); }
.resultpanel .given, .resultpanel .why { margin-top: 4px; }
/* Key word transformations' review (requirement 10): the completed sentence, what the answer did, the language. */
.resultpanel .completed, .resultpanel .note, .resultpanel .lang { margin-top: 4px; }
.resultpanel .note { color: var(--bad); }
.resultpanel .lang { font-size: .9rem; color: var(--brown); }
.patterns { margin-top: 16px; padding: 10px 14px; border-radius: 10px; background: #FDF1EC; border-left: 4px solid var(--bad);
  font-size: .95rem; line-height: 1.5; }
.patterns h3 { margin: 0 0 4px; font-size: 1rem; color: var(--navy); }
.patterns[hidden] { display: none; }
.hintbubble.ok { border-color: var(--green-2); }
.hintbubble.bad { border-color: var(--bad); }
.hintbubble.ok .hintlabel { color: var(--ok); }
.hintbubble.bad .hintlabel { color: var(--bad); }
/* Progress (requirement 6, 2026-10-02): answered, checked and correct from the start. It sits above Check
   all and rides at the foot of the screen while the learner works down a long exercise. */
.progressbar { position: sticky; bottom: 8px; z-index: 5; margin-top: 16px; padding: 10px 14px; border-radius: 10px;
  background: var(--navy); color: var(--cream); box-shadow: 0 4px 14px rgba(27, 42, 74, .28);
  font: 600 .98rem/1.45 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
.purpose { margin: 4px 0 10px; color: var(--brown); }
/* Check all under a gapped text (requirement 9): each checked answer — the learner's, the correct one, why. */
.checklist { margin-top: 16px; padding: 10px 14px; border-radius: 10px; background: var(--cream-2); font-size: .95rem;
  line-height: 1.5; }
.checklist h3 { margin: 0 0 4px; font-size: 1rem; color: var(--navy); }
.checklist .clrow { padding: 6px 0; border-top: 1px solid #E4D8C4; }
.checklist .clrow:first-of-type { border-top: 0; }
.checklist .clhead { font-weight: 700; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
.checklist .clrow.ok .clhead { color: var(--ok); }
.checklist .clrow.bad .clhead { color: var(--bad); }
.checklist .why { margin-top: 2px; }
/* Word formation as the exam sets it out (requirement 9): one line per gap, its base word in capitals at the
   right-hand end of the very line the gap is on. The base word follows its gap; taken out of the line, it keeps
   the gap's height and moves right, into a column as wide as the exercise's longest base word (--wfn letters),
   which the text never enters. On a phone there is no room for a column: each gap starts a line ("wfbr") and
   its base word goes to the end of that line, or just under it if the line is full. */
.wfrows { --wfcol: calc(var(--wfn, 8) * .8em + 14px); }
.wfline { position: relative; padding-right: var(--wfcol); border-bottom: 1px dashed var(--cream-2); }
.wfstem { position: absolute; right: 0; font-weight: 800; color: var(--orange-2); letter-spacing: .5px; }
.wfbr { display: none; }
@media (max-width: 640px) {
  .wfline { display: flow-root; padding-right: 0; }
  .wfbr { display: block; }
  .wfstem { position: static; float: right; margin-left: 8px; font-size: .9em; letter-spacing: 0; }
  .wfline .gapin { width: 7em; }
}
/* The exercise's picture, as the admin chooses (large as before, or small beside the title). */
.expic { margin: 0; }
.expic img { width: 100%; border-radius: 12px; box-shadow: var(--shadow); display: block; }
.expic.large { flex: 1; min-width: 220px; max-width: 320px; }
.expic.small { flex: 0 0 132px; max-width: 132px; }
.card.exform { overflow: visible; }   /* a card clips its content, and a clipping box keeps the progress line from sticking */
html:has(.exform) { scroll-padding-bottom: 64px; }   /* a field reached with the keyboard never hides under it */

/* 💡 hints (owner, 2026-10-02; 2026-10-19: "the same small lightbulb icon inside the answer gap frame across all
   exercises"): a small lightbulb — no circle round it — INSIDE every answer frame, at its right-hand end: the answer box,
   the drop-down (clear of its arrow), the gap in a sentence, or, where the answer is a choice of options, the options'
   frame. A gap in a text opens a bubble under the gap; a question card opens the hint inside the card. */
.exbody.withhints { line-height: 2.3; }
.gapwrap { position: relative; display: inline-block; line-height: 1.55; }
.hintbtn {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); z-index: 2;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.hintbtn:hover, .hintbtn:focus-visible { background: #FFE39A; }
.hintbtn[aria-expanded="true"] { background: #FFE39A; }
.hintbtn[hidden], .hinttext[hidden], .hintpanel[hidden], .hintbubble[hidden] { display: none; }
.gapwrap.hasbulb .gapin, .gapwrap.hasbulb .sgap { padding-right: 28px; }
.gapwrap.hasbulb select.gapsel { padding-right: 52px; }
.gapwrap.hasbulb select.gapsel ~ .hintbtn { right: 26px; }
.gapwrap.hasbulb select.gapsel[hidden] ~ .hintbtn { right: 4px; }   /* the drop-down gone: back to the frame's end */
.qitem .opts.hasbulb { position: relative; padding: 8px 34px 8px 10px; border: 1.5px dashed var(--orange); border-radius: 8px; }
.qitem .opts.hasbulb > .hintbtn { top: 6px; right: 6px; transform: none; }
.hintpanel {
  margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: #FFF8E1;
  border: 1px solid #EBCB8B; border-left: 4px solid var(--orange); font-size: .95rem; line-height: 1.5;
}
.hintbubble {
  position: absolute; z-index: 40; padding: 10px 36px 10px 12px;
  background: #FFF8E1; color: var(--ink); border: 1.5px solid var(--orange); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(27, 42, 74, .14), 0 3px 8px rgba(27, 42, 74, .08);
  font-size: .95rem; line-height: 1.5;
}
.hintbubble .hintlabel { color: var(--orange-2); font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: .85rem; }
.hintclose {
  position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; padding: 0; border: none;
  background: none; color: var(--brown); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.hintclose:hover { color: var(--orange-2); }

/* Filters bar */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; background: var(--cream-2); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 18px; }
.filters label { margin: 0 0 3px; }
.filters > div { min-width: 140px; }

/* Profile */
.avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--orange); background: var(--cream-2); }
.profilehead { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* Editor */
.wysiwyg {
  min-height: 180px; background: #fff; border: 1.5px solid var(--brown-2); border-radius: 8px; padding: 12px;
}
.wysiwyg:focus { outline: 2px solid var(--orange); }
.edtoolbar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.edtoolbar button { background: var(--navy); color: var(--cream); border: none; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: .85rem; }
.edtoolbar button:hover { background: var(--orange); }

/* Flash */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-weight: 600; }
.flash.ok { background: #DDEBD9; color: var(--green); }
.flash.err { background: #F3D5C9; color: var(--bad); }

/* Share buttons */
.sharebar { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.sharebar .btn.x { background: #000; }
.sharebar .btn.li { background: #0A66C2; }

.muted { color: var(--brown-2); font-size: .88rem; }
.meta { font-size: .82rem; color: var(--brown-2); }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }

/* SEO practice landing pages */
.tiplist { margin: 0; padding-left: 18px; }
.tiplist li { margin: 8px 0; line-height: 1.5; }
.faqbox { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
details.faq { background: var(--cream-2); border: 1px solid #E4D8C4; border-radius: 8px; padding: 12px 14px; }
details.faq summary { font-weight: 700; color: var(--navy); cursor: pointer; }
details.faq p { margin: 10px 0 0; line-height: 1.5; }

/* Job progress */
.joblog { background: var(--navy); color: var(--cream-2); font-family: 'Consolas', monospace; font-size: .82rem; border-radius: 8px; padding: 12px; white-space: pre-wrap; max-height: 320px; overflow: auto; }
/* The admin dashboard's live generation progress (owner, 2026-10-20): the running job's bar, its checklist of
   exercises (done / being made / waiting) and its own last line, on the card above the jobs table. */
.jobbar { height: 10px; margin: 8px 0 6px; border-radius: 6px; background: var(--cream-2); border: 1px solid #E4D8C4; overflow: hidden; }
.jobbar > span { display: block; height: 100%; background: var(--orange); border-radius: 5px; transition: width .3s var(--ease); }
.jobfigure { margin: 0 0 8px; }
.jobcost { margin: 0 0 8px; color: var(--brown); font-weight: 600; }
.jobsteps { margin: 6px 0; line-height: 2.1; }
.step { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 9px; border-radius: 999px; font-size: .85rem; background: #EFE7D8; color: #6b6350; }
.step.done { background: #DDEBD9; color: var(--green); }
.step.current { background: #F5E3C8; color: var(--brown); font-weight: 700; }
.jobline { margin: 6px 0 2px; font-family: 'Consolas', monospace; font-size: .82rem; color: var(--navy); overflow-wrap: anywhere; }
.jobqhead { margin: 14px 0 6px; }
.jobhead { margin: 0 0 4px; }

/* Responsive */
@media (max-width: 900px) {
  .grid.cols3 { grid-template-columns: repeat(2, 1fr); }
  /* body has overflow-x:hidden, so wide tables need their OWN scroll below the
     1100px main container — apply from 900px down, not only at 640px. */
  table.list { display: block; overflow-x: auto; }
}
@media (max-width: 640px) {
  .grid.cols3, .grid.cols2 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.6rem; }
  .navtoggle { display: block; margin-left: auto; }
  nav.main { display: none; width: 100%; flex-direction: column; align-items: stretch; }
  nav.main.open { display: flex; }
}

/* Print — results printing */
@media print {
  header.site, footer.site, .sharebar, .btn, .filters, .noprint { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #999; }
  main { max-width: 100%; }
}

/* ============================================================
   UX/UI polish — subtle, professional animations & refinements
   ============================================================ */
:root { --shadow-lg: 0 12px 30px rgba(27,42,74,.14), 0 3px 8px rgba(27,42,74,.08);
        --ease: cubic-bezier(.22,.61,.36,1); }

/* Smooth, consistent interaction transitions */
a, .btn, button, .card, input, select, textarea, nav.main a, .chip, .badge, .qitem, table.list tr {
  transition: background-color .18s var(--ease), color .18s var(--ease),
              box-shadow .22s var(--ease), transform .18s var(--ease),
              border-color .18s var(--ease), opacity .3s var(--ease);
}

/* Entrance animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes popIn    { 0% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shake    { 10%,90%{transform:translateX(-1px)} 30%,70%{transform:translateX(3px)} 50%{transform:translateX(-4px)} }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes flashIn  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes pulseOk  { 0%{box-shadow:0 0 0 0 rgba(30,77,43,.45)} 100%{box-shadow:0 0 0 12px rgba(30,77,43,0)} }

main { animation: fadeInUp .5s var(--ease) both; }
.hero { animation: popIn .55s var(--ease) both; }
.card { animation: fadeInUp .45s var(--ease) both; will-change: transform; }
/* gentle stagger for grids of cards */
.grid .card:nth-child(2){animation-delay:.05s}.grid .card:nth-child(3){animation-delay:.1s}
.grid .card:nth-child(4){animation-delay:.15s}.grid .card:nth-child(5){animation-delay:.2s}
.grid .card:nth-child(6){animation-delay:.25s}.grid .card:nth-child(n+7){animation-delay:.3s}

/* Card lift on hover (clickable feel) */
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card .thumb { transition: transform .4s var(--ease); }
.card:hover .thumb { transform: scale(1.04); }

/* Buttons: lift + press */
.btn { box-shadow: 0 2px 6px rgba(27,42,74,.14); }
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(27,42,74,.22); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 5px rgba(27,42,74,.18); }

/* Nav: animated underline */
nav.main a { position: relative; }
nav.main a::after { content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); border-radius:2px; }
nav.main a:hover::after { transform: scaleX(1); }
nav.main a.active::after, nav.main a.cta::after { display:none; }

/* Inputs: soft focus glow */
input:focus, select:focus, textarea:focus, .wysiwyg:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(193,85,42,.18);
}

/* Chips/quiz items */
.chip, .badge { transition: transform .15s var(--ease); }
.qitem:hover { border-left-color: var(--orange); box-shadow: var(--shadow); }
.qitem .opts label:hover { color: var(--navy); }

/* Flash messages slide in */
.flash { animation: flashIn .35s var(--ease) both; }

/* Result review: correct pulses, wrong shakes (once) */
.qitem.correct { border-left-color: var(--green-2); animation: pulseOk .8s var(--ease) 1; }
.qitem.wrong { border-left-color: var(--orange-2); animation: shake .5s var(--ease) 1; }

/* Loading spinner (generation / async) */
.spinner { display:inline-block; width:1em; height:1em; border:2.5px solid rgba(247,241,227,.4);
  border-top-color: var(--cream); border-radius:50%; animation: spin .7s linear infinite; vertical-align:-2px; }
.btn.loading { pointer-events:none; opacity:.85; }

/* Score number pops in */
.scorebig { animation: popIn .5s var(--ease) both; }
.avatar { transition: transform .3s var(--ease); }
.profilehead:hover .avatar { transform: scale(1.05) rotate(-2deg); }

/* Respect reduced-motion preference (accessibility / professional) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  .card:hover, .btn:hover { transform: none; }
}

/* ============ Admin stats dashboard ============ */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.card.stat { text-align: center; padding: 18px 12px; }
.card.stat .scorebig { font-size: 2.1rem; line-height: 1; }
.statsub { margin-top: 6px; font-size: .8rem; color: var(--brown-2); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 0; margin-right: 3px; }
.dot.ok { background: var(--green-2); } .dot.warn { background: var(--orange); } .dot.bad { background: #8C2F1B; }
.dot.reg { background: var(--navy); } .dot.login { background: var(--orange); }

.chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding: 8px 0 0; }
.chbar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chbar .bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; width: 100%; justify-content: center; }
.chbar .bar { width: 26%; min-height: 3px; border-radius: 4px 4px 0 0; transform-origin: bottom;
  animation: growBar .6s var(--ease) both; }
.chbar .bar.reg { background: var(--navy); }
.chbar .bar.login { background: var(--orange); }
.chlabel { margin-top: 6px; font-size: .78rem; color: var(--brown-2); font-weight: 700; }
.chlegend { margin-top: 10px; font-size: .82rem; color: var(--brown-2); }
@keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.typerow { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--cream-2); }
.typerow:last-child { border-bottom: none; }
.typerow strong { color: var(--navy); }

@media (max-width: 900px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .statgrid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Orientation + viewport hardening (rotation, notches, PWA)
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* no auto text resize on rotate */
body {
  min-height: 100vh;            /* fallback */
  min-height: 100svh;           /* stable across mobile chrome */
  min-height: 100dvh;           /* recomputes correctly on landscape<->portrait */
  overflow-x: hidden;           /* never allow a stray element to force sideways scroll on rotate */
}
img, video, canvas, svg { max-width: 100%; height: auto; }          /* media never overflows the viewport */
/* Respect notches / home indicator so nothing is occluded in the installed app or landscape */
header.site { padding-top: env(safe-area-inset-top, 0px); }
.navwrap {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
main {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 24px));
}
footer.site {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 8px));
}
/* Short landscape phones: keep the sticky header from eating the tiny height */
@media (orientation: landscape) and (max-height: 500px) {
  header.site { position: static; }
  main { padding-top: 12px; }
  .hero { padding: 22px 20px; }
}

.card { position: relative; }
/* The ONE AI notice of a page (owner, 2026-10-31; EU AI Act Art. 50): at the top, seen first, clearly legible. */
.ai-notice { font-size: .9rem; color: var(--brown); margin: 0 0 12px; font-style: italic; }
/* Walkthrough videos (owner, 2026-10-14): under the exercise and on /videos; the player keeps the 16:9 frame. */
.walkthrough { margin-top: 14px; }
.walkthrough video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 8px 0 4px;
  background: var(--navy); border-radius: var(--radius); }

/* ============================================================
   THE 12-SECTION APP (owner, 2026-10-17): dashboard, section pages, the exercise screen's
   Previous / Next and progress bar, the results screen. Phone first; 2, 3 and 4 columns as
   the screen widens.
   ============================================================ */
.dashhead { margin: 4px 0 14px; }
.dashhead h1 { margin: 0 0 6px; font-size: 2rem; color: var(--navy); }
.dashhead p { margin: 0; color: var(--brown); }

/* the progress overview — below the cards since 2026-10-17 2043 MST */
.overview { margin-top: 20px; }
.overview h2 { font-size: 1.1rem; color: var(--navy); }
.ovstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 8px; }
.ovstat { background: var(--cream); border-radius: 10px; padding: 10px 8px; text-align: center; }
.ovnum { display: block; font: 800 1.6rem/1.1 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: var(--green); }
.ovlabel { display: block; font: 600 .78rem/1.3 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: var(--brown-2); }
.ovlist summary { cursor: pointer; font: 700 .9rem 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: var(--navy); }
.ovlist ol { margin: 8px 0 0; padding-left: 22px; font-size: .92rem; }
.ovnote { margin: 8px 0 0; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--orange-2); font: 700 .88rem 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  text-decoration: underline; cursor: pointer; }
.linkbtn[hidden], .overview[hidden], .ovlist[hidden] { display: none; }

/* the twelve section cards: the whole card is the link. They are the page's 12 main tabs (owner, 2026-10-17 2043 MST):
   straight after the title, every card the same size (grid-auto-rows: 1fr), 2 / 3 / 4 columns as the screen widens. */
.secgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
@media (min-width: 640px) { .secgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 960px) { .secgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.seccard { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; background: #fff;
  border: 1px solid var(--cream-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 11px;
  color: var(--ink); text-decoration: none; min-height: 100%; }
.seccard:hover, .seccard:focus-visible { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--green-2); }
.seccard:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.secbadge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--navy); color: var(--cream); }
.secbadge .secicon { width: 19px; height: 19px; }
.seccard:nth-child(3n+2) .secbadge { background: var(--green); }
.seccard:nth-child(3n+3) .secbadge { background: var(--orange); }
.sectext { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; width: 100%; }
.sectitle { font: 700 .9rem/1.22 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: var(--navy); }
.secdesc { font-size: .78rem; line-height: 1.32; color: var(--brown); }
.secmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 2px;
  font: 600 .7rem 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: var(--brown-2); }
@media (min-width: 640px) {
  .seccard { padding: 12px; gap: 8px; }
  .secbadge { width: 38px; height: 38px; border-radius: 10px; }
  .secbadge .secicon { width: 22px; height: 22px; }
  .sectitle { font-size: .95rem; }
  .secdesc { font-size: .82rem; }
}
@media (min-width: 960px) {
  .seccard { padding: 14px; }
  .secbadge { width: 44px; height: 44px; border-radius: 12px; }
  .secbadge .secicon { width: 25px; height: 25px; }
  .sectitle { font-size: 1rem; }
  .secdesc { font-size: .86rem; }
}
.secdone { color: var(--green); }
/* …and light on the section page's dark header, where the dark green all but vanished (until 2026-10-17 1125 MST). */
.sechero .secdone { color: #BDE5AE; }
.secdone[hidden] { display: none; }
.views30, .disclaimer { margin-top: 22px; }

/* a section's own page */
.backbtn { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; padding: 7px 12px 7px 8px; border-radius: 9px;
  background: #fff; border: 1.5px solid var(--navy); color: var(--navy); text-decoration: none;
  font: 700 .92rem 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
.backbtn:hover { background: var(--navy); color: var(--cream); }
.backicon { width: 18px; height: 18px; }
.sechero { display: flex; gap: 18px; align-items: flex-start; padding: 26px 24px; }
.sechero h1 { font-size: 1.9rem; }
.secbadge.big { width: 64px; height: 64px; border-radius: 16px; background: rgba(250, 244, 230, .16); }
.secbadge.big .secicon { width: 34px; height: 34px; }
.secherotext p { margin: 6px 0; }
.secstats { font: 600 .92rem 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; opacity: .95; }
.exgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .exgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .exgrid { grid-template-columns: repeat(3, 1fr); } }
.excard { display: flex; gap: 12px; align-items: stretch; background: #fff; border: 1px solid var(--cream-2); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; color: var(--ink); text-decoration: none; }
.excard:hover, .excard:focus-visible { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--green-2); }
.excard:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.exthumb { flex: 0 0 96px; width: 96px; object-fit: cover; background: var(--cream-2); }
.exthumb-icon { display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--cream); }
.exthumb-icon .secicon { width: 34px; height: 34px; }
.exbody2 { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 10px 0; min-width: 0; }
.extitle { font: 700 .98rem/1.3 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: var(--navy); }
.exmeta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip.level { background: #DBE3F5; color: var(--navy); }
.exstatus { font: 700 .78rem 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
.exstatus.done { color: var(--green); }
.exstatus.todo { color: var(--brown-2); }
.exstatus[hidden] { display: none; }
.extopic { font-size: .82rem; color: var(--brown-2); }
.emptysec { border-left: 5px solid var(--orange); }
.secguide-h { color: var(--brown); }

/* the exercise screen: Previous / Next, the progress bar, the last result */
.laststatus { margin: 0 0 8px; font: 700 .9rem 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: var(--green); }
.laststatus[hidden] { display: none; }
/* Previous / Next ride in the progress bar at the foot of the screen, so they are always in reach */
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.stepper[hidden] { display: none; }
.stepper .btn { background: transparent; color: var(--cream); border: 1.5px solid var(--cream); box-shadow: none;
  white-space: nowrap; }
.stepper .btn:hover:not(:disabled) { background: var(--navy-2); transform: none; }
.steppos { font: 700 .95rem 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: var(--cream); text-align: center;
  white-space: nowrap; }
.qitem.stephidden { display: none; }
.pbar { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(250, 244, 230, .25); overflow: hidden; }
.pbar > span { display: block; height: 100%; background: var(--orange); border-radius: 3px; transition: width .25s var(--ease); }
.exactions { display: flex; flex-wrap: wrap; gap: 8px; }
.exactions .btn[hidden] { display: none; }
.resultcard h1 { color: var(--navy); }

@media (max-width: 640px) {
  .dashhead h1 { font-size: 1.4rem; }
  .dashhead p { font-size: .9rem; }
  .ovnum { font-size: 1.3rem; }
  .sechero { padding: 20px 16px; gap: 12px; }
  .sechero h1 { font-size: 1.45rem; }
  .secbadge.big { width: 48px; height: 48px; }
  .exactions .btn { flex: 1 1 auto; }
}
@media print {
  .qitem.stephidden { display: block !important; }
  .stepper, .backbtn, .overview { display: none !important; }
}

/* THE SIX SENTENCE EXERCISES (2026-10-17): the question is its sentence, the answer where the gap is — a box in the
   line (the verb in brackets after it) or, with options A-D under it, a blank. */
.sitem .ssent { line-height: 2.1; }
.sitem .sgap { display: inline-block; width: 11em; max-width: 62vw; margin: 0 3px; padding: 4px 8px;
  border: 1.5px dashed var(--orange); border-radius: 6px; background: #FFFDF6; font-size: .95rem; line-height: 1.3; }
.sitem .sgap.one { width: 6.5em; }
.sitem .sbase { font-weight: 700; color: var(--orange-2); white-space: nowrap; }
.sitem .sblank { display: inline-block; min-width: 5.5em; min-height: 1.3em; margin: 0 3px; vertical-align: baseline;
  border-bottom: 2px solid var(--navy); }
.sitem .sblank.hasbulb { min-width: 6.5em; min-height: 1.6em; }
.sitem .sblank .gapres { margin: 0 26px 2px 0; }