/* Coastal captain's log for the first 30 Sentence Structure lessons. */
.sentence-seaside-lesson {
  --sea-ink: #102959;
  --sea-blue: #2768c9;
  --sea-line: #c8dced;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 0 28px;
  color: var(--sea-ink);
  background: #f8f6f0;
  box-shadow: 0 20px 60px rgba(25, 61, 102, .15);
}
.sentence-seaside-lesson::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 290px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.89) 29%, rgba(255,255,255,.04) 62%),
    linear-gradient(0deg, #f8f6f0 0%, transparent 31%),
    url("https://edmund-site-assets.edmundeducation.workers.dev/site-assets/v1/assets/sentence-structure/seaside/header-v2.webp") center 30% / cover no-repeat;
}
.sentence-seaside-lesson .lesson-topbar,
.sentence-seaside-lesson .lesson-title-row,
.sentence-seaside-lesson .lesson-stepper,
.sentence-seaside-lesson .lesson-content {
  position: relative;
  z-index: 1;
  margin-left: clamp(20px, 3vw, 48px);
  margin-right: clamp(20px, 3vw, 48px);
}
.sentence-seaside-lesson .lesson-topbar { padding-top: 18px; }
.sentence-seaside-lesson .lesson-topbar .text-button {
  color: #1e62b9;
  font-weight: 800;
  text-shadow: 0 1px #fff;
}
.sentence-seaside-lesson .lesson-title-row {
  min-height: 125px;
  margin-top: 24px;
  margin-bottom: 12px;
  align-items: flex-end;
}
.sentence-seaside-lesson .lesson-title-row h1 {
  max-width: 1200px;
  color: var(--sea-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 500;
  word-break: keep-all;
  text-shadow: 0 2px 2px #fff;
}
.sentence-seaside-lesson [data-lesson-kicker] {
  color: #2b66b1;
  letter-spacing: .15em;
  text-shadow: 0 1px #fff;
}
.seaside-level-badge { display: none; }
.sentence-seaside-lesson .seaside-level-badge:not([hidden]) {
  display: inline-block;
  margin-top: 12px;
  border: 1px solid #edd7bd;
  border-radius: 999px;
  padding: 6px 16px;
  color: #94643f;
  background: rgba(255,241,223,.9);
  font: 700 12px Georgia, "Times New Roman", serif;
  letter-spacing: .13em;
}
.sentence-seaside-lesson .bookmark-library-button {
  border-color: #bfd4ed;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(20,68,125,.09);
  white-space: nowrap;
}
.sentence-seaside-lesson .lesson-stepper { gap: 12px; }
.sentence-seaside-lesson .lesson-stepper button {
  min-height: 91px;
  border-color: #cddff0;
  padding: 14px 18px;
  background: rgba(255,255,255,.89);
  box-shadow: 0 8px 20px rgba(37,89,146,.07);
  font-family: Georgia, "Times New Roman", serif;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sentence-seaside-lesson .lesson-stepper button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(37,89,146,.13); }
.sentence-seaside-lesson .lesson-stepper button[aria-current="step"] { border: 2px solid #3d7ae1; background: linear-gradient(135deg,#fff,#e9f3ff); }
.sentence-seaside-lesson .lesson-stepper button > span {
  width: 44px;
  height: 44px;
  font: 700 21px Georgia, "Times New Roman", serif;
}
.sentence-seaside-lesson .lesson-stepper strong { font-size: 18px; }
.sentence-seaside-lesson .lesson-stepper small { font-size: 12px; }
.sentence-seaside-lesson .lesson-content { margin-top: 18px; }
.sentence-seaside-lesson .info-page,
.sentence-seaside-lesson .exercise-page {
  position: relative;
  overflow: hidden;
  border: 1px solid #d9c9b5;
  border-left: 4px solid #cab8a1;
  border-radius: 19px;
  padding: clamp(25px, 3.5vw, 48px) clamp(25px, 4vw, 58px) 28px clamp(45px, 5vw, 77px);
  background:
    radial-gradient(circle at 90% 0%,rgba(230,212,182,.19),transparent 35%),
    repeating-linear-gradient(0deg,transparent 0 35px,rgba(66,126,180,.055) 36px,transparent 37px),
    #fffdf8;
  box-shadow: -5px 0 0 #f2e9dd, 0 18px 42px rgba(38,59,75,.11);
}
.sentence-seaside-lesson .info-page::before,
.sentence-seaside-lesson .exercise-page::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 8px;
  bottom: 8px;
  width: 72px;
  background: url("https://edmund-site-assets.edmundeducation.workers.dev/site-assets/v1/assets/sentence-structure/seaside/notebook-ring.svg?v=2") left top / 70px 130px repeat-y;
  opacity: .95;
  pointer-events: none;
}
.sentence-seaside-lesson .info-page::after,
.sentence-seaside-lesson .exercise-page::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 20px;
  width: 105px;
  height: 105px;
  background: url("https://edmund-site-assets.edmundeducation.workers.dev/site-assets/v1/assets/sentence-structure/seaside/compass-v2.webp") center / contain no-repeat;
  opacity: .58;
  pointer-events: none;
}
.sentence-seaside-lesson .info-page-header { max-width: calc(100% - 110px); padding-bottom: 20px; border-bottom: 1px solid #d9c7ad; }
.sentence-seaside-lesson .info-page-header::after { content: ""; position: absolute; left: 50%; margin-top: 2px; width: 28px; height: 28px; background: url("https://edmund-site-assets.edmundeducation.workers.dev/site-assets/v1/assets/sentence-structure/seaside/compass-v2.webp") center / contain no-repeat; opacity: .53; }
.sentence-seaside-lesson .seaside-benefits-page .info-page-header { position: relative; min-height: 165px; }
.sentence-seaside-lesson .seaside-benefits-page .info-page-header::before { content: ""; position: absolute; right: 0; top: -62px; width: 340px; height: 210px; background: url("https://edmund-site-assets.edmundeducation.workers.dev/site-assets/v1/assets/sentence-structure/seaside/lookout-v2.webp") right center / 500px auto no-repeat; opacity: .79; pointer-events: none; }
.sentence-seaside-lesson .info-page-header .page-label,
.sentence-seaside-lesson .exercise-header .eyebrow { color: #547fb5; font-family: Georgia,"Times New Roman",serif; }
.sentence-seaside-lesson .info-page-header h2,
.sentence-seaside-lesson .exercise-header h2 { color: var(--sea-ink); font-family: Georgia,"Times New Roman",serif; font-weight: 600; }
.sentence-seaside-lesson .info-page-header p,
.sentence-seaside-lesson .exercise-header p { color: #4c6896; }
.sentence-seaside-lesson .formula-card {
  margin-top: 28px;
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.sentence-seaside-lesson .formula-label,
.sentence-seaside-lesson .example-block strong {
  display: inline-block;
  border-radius: 0 20px 20px 0;
  padding: 9px 24px;
  color: var(--sea-ink);
  background: #dae9f8;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 13px;
}
.sentence-seaside-lesson .formula-display,
.sentence-seaside-lesson .example-block,
.sentence-seaside-lesson .meaning-block {
  border: 1px solid #cddded;
  border-radius: 12px;
  padding: 18px 26px;
  background:
    linear-gradient(90deg, transparent 0 46px,rgba(211,95,89,.5) 47px,transparent 49px),
    repeating-linear-gradient(0deg,#fcfdff 0 36px,#dce9f6 37px,#fcfdff 38px);
  box-shadow: 0 6px 18px rgba(37,89,146,.05);
}
.sentence-seaside-lesson .formula-display { margin: 0 0 20px; font-family: Georgia,"Times New Roman",serif; font-weight: 500; }
.sentence-seaside-lesson .formula-display p { margin-left: 30px; }
.sentence-seaside-lesson .example-block { margin: 0 0 18px; border-color: #efd9ca; background: linear-gradient(90deg,transparent 0 46px,rgba(211,95,89,.45) 47px,transparent 49px),repeating-linear-gradient(0deg,#fffdf9 0 36px,#f0e6df 37px,#fffdf9 38px); }
.sentence-seaside-lesson .example-block strong { margin: -18px 0 10px -26px; color: #ac5837; background: #f8e9d8; }
.sentence-seaside-lesson .example-block p { margin-left: 30px; color: var(--sea-ink); font-family: Georgia,"Times New Roman",serif; font-weight: 500; }
.sentence-seaside-lesson .meaning-block { margin-top: 12px; }
.sentence-seaside-lesson .benefit-list,
.sentence-seaside-lesson .rule-list { margin-top: 26px; }
.sentence-seaside-lesson .benefit-card,
.sentence-seaside-lesson .rule-card {
  border-color: #d5dfeb;
  padding: 18px 24px;
  background: repeating-linear-gradient(0deg,#fffdfa 0 33px,#e4ecf2 34px,#fffdfa 35px);
  box-shadow: 0 5px 15px rgba(34,75,120,.06);
}
.sentence-seaside-lesson .benefit-card > span,
.sentence-seaside-lesson .rule-card > span { border-radius: 50%; width: 44px; height: 44px; font: 700 19px Georgia,"Times New Roman",serif; }
.sentence-seaside-lesson .benefit-card .chinese,
.sentence-seaside-lesson .rule-card .chinese { font-family: Georgia,"Times New Roman",serif; font-weight: 600; }
.sentence-seaside-lesson .rule-card { grid-template-columns: auto 1fr; }
.sentence-seaside-lesson .rule-card > div { border-left: 3px solid #b9d5f5; padding-left: 15px; }
.sentence-seaside-lesson .rule-card .examples code { color: #17704d; background: #e9f7ee; }
.seaside-anchor { display: none; }
.sentence-seaside-lesson .seaside-rules-page .rule-card { grid-template-columns: 45px 44px minmax(0,1fr); align-items: center; }
.sentence-seaside-lesson .seaside-rules-page .seaside-anchor { display: block; width: 38px; height: 38px; }
.sentence-seaside-lesson .lesson-navigation .primary-button,
.sentence-seaside-lesson .exercise-actions .primary-button {
  border-color: #0e2d67;
  background: linear-gradient(140deg,#397bd9,#123168);
  box-shadow: 0 6px 0 #0d244a;
}
.sentence-seaside-lesson .exercise-page { padding-top: 34px; }
.sentence-seaside-lesson .exercise-header {
  border: 0;
  border-bottom: 1px solid #d9c7ad;
  border-radius: 0;
  padding: 0 0 24px;
  background: transparent;
}
.sentence-seaside-lesson .exercise-progress { height: 13px; border: 1px solid #cdddec; background: #e8f1fa; }
.sentence-seaside-lesson .exercise-progress > span { background: linear-gradient(90deg,#6ac7e8,#2474ce); }
.seaside-chapters { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 17px; }
.seaside-chapters button {
  min-width: 0;
  min-height: 72px;
  border: 1px solid #ceddec;
  border-radius: 12px;
  padding: 8px 5px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 5px;
  align-items: center;
  color: #294f84;
  background: #f3f9ff;
  cursor: pointer;
  text-align: center;
}
.seaside-chapters button:hover,
.seaside-chapters button[aria-current] { border-color: #2974d8; background: #e5f1ff; }
.seaside-chapters button > img { grid-row: 1 / 3; width: 54px; height: 54px; object-fit: contain; margin: auto; }
.seaside-chapters strong { font: 700 15px Georgia,"Times New Roman",serif; }
.seaside-chapters small { font-size: 10px; }
.sentence-seaside-lesson .question-list { gap: 18px; }
.sentence-seaside-lesson .question-card {
  border-color: #e4d9c9;
  border-radius: 16px;
  padding: 22px 24px;
  background: linear-gradient(90deg,transparent 0 57px,rgba(214,101,91,.24) 58px,transparent 60px),repeating-linear-gradient(0deg,#fffdfa 0 36px,#e4edf3 37px,#fffdfa 38px);
  box-shadow: 0 6px 19px rgba(30,73,117,.07);
}
.sentence-seaside-lesson .question-card::before { content: ""; position: absolute; left: 16px; top: 22px; bottom: 20px; width: 10px; background: radial-gradient(circle,#b6c4d1 0 4px,transparent 5px) top left / 10px 44px repeat-y; }
.sentence-seaside-lesson .question-card::before { left: -25px; top: 4px; bottom: 4px; width: 52px; background: url("https://edmund-site-assets.edmundeducation.workers.dev/site-assets/v1/assets/sentence-structure/seaside/notebook-ring.svg?v=2") left top / 48px 90px no-repeat; }
.sentence-seaside-lesson .question-card.is-correct { border-color: #99cdb1; }
.sentence-seaside-lesson .question-card.is-wrong { border-color: #e6a59c; }
.sentence-seaside-lesson .question-number { border-radius: 4px; padding: 5px 12px; color: #365e94; background: #f3e9d9; font-family: Georgia,"Times New Roman",serif; }
.sentence-seaside-lesson .question-prompt .english { color: var(--sea-ink); font: 500 clamp(19px,2.15vw,27px)/1.35 Georgia,"Times New Roman",serif; }
.sentence-seaside-lesson .question-prompt .chinese { color: #536f9c; font: 500 16px/1.5 Georgia,"Times New Roman",serif; }
.sentence-seaside-lesson .answer-input { border-color: #92b9ec; border-radius: 9px; background: repeating-linear-gradient(0deg,#fff 0 32px,#dfeaf4 33px,#fff 34px); }
@media (max-width: 850px) {
  .sentence-seaside-lesson .seaside-sailboat { right: 9%; }
  .sentence-seaside-lesson .lesson-stepper { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .seaside-chapters { grid-template-columns: repeat(5,minmax(110px,1fr)); overflow-x: auto; padding-bottom: 5px; }
}
@media (max-width: 600px) {
  .sentence-seaside-lesson::before { height: 253px; background-position: 63% 9%; }
  .sentence-seaside-lesson .lesson-title-row { min-height: 145px; margin-top: 12px; align-items: flex-start; }
  .sentence-seaside-lesson .lesson-title-row h1 { font-size: clamp(31px,9vw,46px); }
  .sentence-seaside-lesson .bookmark-library-button { min-height: 38px; }
  .sentence-seaside-lesson .lesson-stepper { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sentence-seaside-lesson .lesson-stepper button { min-height: 71px; padding: 8px; }
  .sentence-seaside-lesson .lesson-stepper button > span { width: 34px; height: 34px; font-size: 16px; }
  .sentence-seaside-lesson .lesson-stepper strong { font-size: 13px; }
  .sentence-seaside-lesson .lesson-stepper small { font-size: 10px; }
  .sentence-seaside-lesson .info-page,
  .sentence-seaside-lesson .exercise-page { padding: 22px 15px 25px 35px; }
  .sentence-seaside-lesson .info-page::before,
  .sentence-seaside-lesson .exercise-page::before { left: -24px; }
  .sentence-seaside-lesson .info-page::after,
  .sentence-seaside-lesson .exercise-page::after { width: 58px; height: 58px; right: 9px; }
  .sentence-seaside-lesson .seaside-benefits-page .info-page-header { min-height: 0; }
  .sentence-seaside-lesson .seaside-benefits-page .info-page-header::before { display: none; }
  .sentence-seaside-lesson .info-page-header { max-width: calc(100% - 50px); }
  .sentence-seaside-lesson .formula-display,
  .sentence-seaside-lesson .example-block { padding: 14px 12px; }
  .sentence-seaside-lesson .formula-display p,
  .sentence-seaside-lesson .example-block p { margin-left: 11px; }
  .sentence-seaside-lesson .benefit-card,
  .sentence-seaside-lesson .rule-card { padding: 13px; gap: 9px; }
  .sentence-seaside-lesson .seaside-rules-page .rule-card { grid-template-columns: 34px 34px minmax(0,1fr); }
  .sentence-seaside-lesson .seaside-rules-page .seaside-anchor { width: 30px; height: 30px; }
  .sentence-seaside-lesson .question-card { padding: 17px 13px 17px 27px; }
  .sentence-seaside-lesson .question-card::before { left: -20px; }
}

/* The controls live under <body> so the 50-question notebook cannot clip them. */
body > .exercise-actions[data-floating-exercise-actions] {
  position: fixed;
  z-index: 1100;
  left: 50%;
  right: auto;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  width: min(960px, calc(100vw - 32px));
  max-height: min(32vh, 190px);
  margin: 0;
  overflow-y: auto;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 46px rgba(16, 41, 89, .23);
}
body.has-sentence-floating-actions .app-shell { padding-bottom: 175px; }
@media (max-width: 720px) {
  body > .exercise-actions[data-floating-exercise-actions] {
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 20px);
  }
  body.has-sentence-floating-actions .app-shell { padding-bottom: 205px; }
}