/* ============================================================
   KS2 ENGLISH
   WATERCOLOUR LEARNING SYSTEM
   ============================================================ */


/* ============================================================
   COLOUR SYSTEM
============================================================ */

:root {

  --ink:
    #182743;

  --ink-soft:
    #354762;

  --blue:
    #315b8d;

  --blue-deep:
    #1f3d67;

  --blue-soft:
    #dce9f1;

  --blue-wash:
    #edf4f5;

  --cream:
    #fbf8f0;

  --cream-deep:
    #f2eadc;

  --paper:
    #fffdf8;

  --paper-soft:
    #f8f5ed;

  --green:
    #708c70;

  --green-soft:
    #e8efe5;

  --gold:
    #c69d58;

  --gold-soft:
    #f5ead3;

  --coral:
    #c87968;

  --coral-soft:
    #f5e2dc;

  --red:
    #a95a55;

  --red-soft:
    #f5e4e0;

  --line:
    rgba(38, 60, 91, 0.14);

  --line-strong:
    rgba(38, 60, 91, 0.23);

  --shadow-soft:
    0 12px 40px rgba(24, 39, 67, 0.08);

  --shadow:
    0 20px 55px rgba(24, 39, 67, 0.12);

  --radius:
    16px;

  --radius-large:
    24px;

}


/* ============================================================
   RESET
============================================================ */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  color:
    var(--ink);

  background:
    var(--cream);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;

  line-height:
    1.55;

  -webkit-font-smoothing:
    antialiased;

}


button,
input,
textarea,
select {
  font: inherit;
}


button {
  color: inherit;
}


a {
  color: inherit;
  text-decoration: none;
}


.hidden {
  display: none !important;
}


/* ============================================================
   SUBTLE WATERCOLOUR PAGE WASH
============================================================ */

body::before {

  content: "";

  position:
    fixed;

  inset:
    0;

  z-index:
    -3;

  pointer-events:
    none;

  background:

    radial-gradient(
      ellipse at 8% 8%,
      rgba(113, 151, 173, 0.16),
      transparent 34%
    ),

    radial-gradient(
      ellipse at 90% 22%,
      rgba(201, 157, 88, 0.10),
      transparent 27%
    ),

    radial-gradient(
      ellipse at 45% 95%,
      rgba(112, 140, 112, 0.12),
      transparent 31%
    ),

    var(--cream);

}


/* ============================================================
   SITE HEADER
============================================================ */

.paper-site-header {

  position:
    sticky;

  top: 0;

  z-index:
    80;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(251, 248, 240, 0.92);

  backdrop-filter:
    blur(16px);

}


.paper-site-header-inner {

  max-width:
    1240px;

  min-height:
    70px;

  margin:
    0 auto;

  padding:
    0 30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

}


.paper-site-brand {

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

}


.paper-site-brand-mark {

  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(31, 61, 103, 0.18);

  border-radius:
    50% 46% 52% 48%;

  background:

    radial-gradient(
      circle at 35% 30%,
      #527aa0,
      #294b74
    );

  color:
    white;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    0.04em;

  box-shadow:
    0 5px 14px rgba(31, 61, 103, 0.15);

  transform:
    rotate(-2deg);

}


.paper-site-brand-name {

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    18px;

  font-weight:
    600;

  letter-spacing:
    -0.02em;

}


.paper-home-link {

  color:
    #5c6b80;

  font-size:
    12px;

  font-weight:
    650;

}


.paper-home-link:hover {
  color: var(--blue-deep);
}


/* ============================================================
   LOADING
============================================================ */

.loading-screen,
.error-screen {

  min-height:
    calc(100vh - 70px);

  display:
    grid;

  place-items:
    center;

  padding:
    35px;

}


.loading-inner,
.error-inner {

  max-width:
    520px;

  text-align:
    center;

}


.loading-mark {

  width:
    76px;

  height:
    76px;

  margin:
    0 auto 22px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    51% 45% 48% 53%;

  background:

    radial-gradient(
      circle at 35% 25%,
      #52799e,
      #233f67
    );

  color:
    white;

  font-family:
    Georgia,
    serif;

  font-size:
    18px;

  font-weight:
    700;

  animation:
    watercolourBreathe
    2s ease-in-out infinite;

}


@keyframes watercolourBreathe {

  0%,
  100% {
    transform:
      scale(1)
      rotate(-2deg);
  }

  50% {
    transform:
      scale(1.04)
      rotate(1deg);
  }

}


.loading-inner strong {

  font-family:
    Georgia,
    serif;

  font-size:
    20px;

  font-weight:
    500;

}


.error-inner h1 {

  margin:
    8px 0 12px;

  font-family:
    Georgia,
    serif;

  font-size:
    38px;

  line-height:
    1.1;

  font-weight:
    500;

}


.error-inner p {

  color:
    #68758a;

}


.error-home-button {

  margin-top:
    20px;

  min-height:
    46px;

  padding:
    0 18px;

  display:
    inline-flex;

  align-items:
    center;

  border-radius:
    10px;

  background:
    var(--blue-deep);

  color:
    white;

  font-size:
    12px;

  font-weight:
    700;

}


/* ============================================================
   GENERAL LABEL
============================================================ */

.section-kicker,
.panel-kicker {

  color:
    var(--blue);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

}


/* ============================================================
   DASHBOARD
============================================================ */

.paper-dashboard {

  position:
    relative;

  min-height:
    calc(100vh - 70px);

}


.paper-dashboard::before {

  content: "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    360px;

  z-index:
    -1;

  background:

    radial-gradient(
      ellipse at 10% 30%,
      rgba(65, 103, 139, 0.18),
      transparent 36%
    ),

    radial-gradient(
      ellipse at 80% 15%,
      rgba(115, 142, 113, 0.12),
      transparent 32%
    ),

    linear-gradient(
      to bottom,
      #edf2f2,
      rgba(251, 248, 240, 0)
    );

}


.paper-dashboard-inner {

  max-width:
    1160px;

  margin:
    0 auto;

  padding:
    34px 30px 110px;

}


/* ============================================================
   BREADCRUMB
============================================================ */

.paper-breadcrumb {

  margin-bottom:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #768295;

  font-size:
    11px;

}


.paper-breadcrumb a:hover {
  color: var(--blue);
}


/* ============================================================
   DASHBOARD HERO
============================================================ */

.paper-dashboard-hero {

  position:
    relative;

  padding:
    18px 0 40px;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items:
    end;

  gap:
    50px;

}


.paper-dashboard-heading {

  max-width:
    740px;

}


.paper-dashboard-heading h1 {

  margin:
    8px 0 14px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(43px, 7vw, 72px);

  line-height:
    0.98;

  font-weight:
    500;

  letter-spacing:
    -0.055em;

}


.paper-dashboard-heading p {

  max-width:
    650px;

  margin:
    0;

  color:
    #637187;

  font-family:
    Georgia,
    serif;

  font-size:
    16px;

  line-height:
    1.72;

}


.paper-dashboard-meta {

  min-width:
    225px;

  padding:
    17px 0;

  display:
    grid;

  gap:
    17px;

  border-top:
    1px solid var(--line-strong);

  border-bottom:
    1px solid var(--line-strong);

}


.paper-meta-item {

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

}


.paper-meta-item span {

  color:
    #8b94a1;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.11em;

}


.paper-meta-item strong {

  color:
    var(--ink-soft);

  font-family:
    Georgia,
    serif;

  font-size:
    14px;

  font-weight:
    500;

}


/* ============================================================
   PROGRESS
============================================================ */

.paper-progress-card {

  margin:
    7px 0 35px;

  padding:
    22px 25px;

  display:
    grid;

  grid-template-columns:
    190px
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    32px;

  border:
    1px solid rgba(38, 60, 91, 0.11);

  border-radius:
    12px 18px 14px 17px;

  background:
    rgba(255, 253, 248, 0.78);

  box-shadow:
    0 8px 24px rgba(34, 50, 76, 0.04);

}


.paper-progress-copy {

  display:
    grid;

  grid-template-columns:
    auto auto;

  align-items:
    baseline;

  gap:
    5px 13px;

}


.paper-progress-copy .section-kicker {

  grid-column:
    1 / -1;

}


.paper-progress-copy strong {

  font-family:
    Georgia,
    serif;

  font-size:
    29px;

  font-weight:
    500;

}


.paper-progress-copy p {

  margin:
    0;

  color:
    #7a8595;

  font-size:
    10px;

}


.paper-progress-track {

  height:
    8px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    rgba(54, 83, 115, 0.09);

}


.paper-progress-track span {

  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:

    linear-gradient(
      90deg,
      #365e88,
      #6f8d7c
    );

  transition:
    width 0.5s ease;

}


/* ============================================================
   DASHBOARD SECTIONS
============================================================ */

.dashboard-section {

  margin-top:
    52px;

}


.dashboard-section-heading {

  margin-bottom:
    22px;

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    30px;

}


.dashboard-section-heading h2 {

  margin:
    5px 0 0;

  font-family:
    Georgia,
    serif;

  font-size:
    28px;

  font-weight:
    500;

  letter-spacing:
    -0.025em;

}


.dashboard-section-heading > p {

  max-width:
    410px;

  margin:
    0;

  color:
    #778294;

  font-size:
    11px;

  line-height:
    1.55;

  text-align:
    right;

}


/* ============================================================
   ACTIVITY CARDS
============================================================ */

.activity-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    15px;

}


.activity-grid-small {

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

}


.activity-card {

  position:
    relative;

  min-height:
    220px;

  padding:
    20px;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid rgba(44, 65, 91, 0.13);

  border-radius:
    13px 18px 14px 16px;

  background:

    radial-gradient(
      circle at 90% 10%,
      rgba(108, 138, 155, 0.08),
      transparent 38%
    ),

    var(--paper);

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  box-shadow:
    0 6px 19px rgba(40, 55, 78, 0.04);

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;

}


.activity-card:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(49, 91, 141, 0.30);

  box-shadow:
    0 16px 34px rgba(38, 55, 82, 0.09);

}


.activity-card.complete {

  background:

    radial-gradient(
      circle at 90% 15%,
      rgba(112, 140, 112, 0.13),
      transparent 38%
    ),

    var(--paper);

}


.activity-card.locked {

  opacity:
    0.55;

  cursor:
    not-allowed;

}


.activity-card.locked:hover {

  transform:
    none;

  box-shadow:
    0 6px 19px rgba(40, 55, 78, 0.04);

}


.activity-card-header {

  margin-bottom:
    26px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

}


.activity-icon {

  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(49, 91, 141, 0.13);

  border-radius:
    49% 45% 54% 47%;

  background:
    var(--blue-wash);

  color:
    var(--blue-deep);

  font-family:
    Georgia,
    serif;

  font-size:
    12px;

  font-weight:
    700;

}


.activity-card.complete
.activity-icon {

  background:
    var(--green-soft);

  color:
    #496b54;

}


.activity-status {

  color:
    #7b8798;

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    0.03em;

}


.activity-card.complete
.activity-status {

  color:
    #58755f;

}


.activity-card-body {

  flex:
    1;

}


.activity-type {

  color:
    #8590a0;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.09em;

}


.activity-card h3 {

  margin:
    6px 0 9px;

  font-family:
    Georgia,
    serif;

  font-size:
    21px;

  line-height:
    1.18;

  font-weight:
    500;

  letter-spacing:
    -0.02em;

}


.activity-card p {

  margin:
    0;

  color:
    #718095;

  font-size:
    11px;

  line-height:
    1.63;

}


.activity-card-footer {

  margin-top:
    22px;

  padding-top:
    12px;

  border-top:
    1px solid rgba(44, 65, 91, 0.09);

  color:
    var(--blue);

  font-size:
    10px;

  font-weight:
    700;

}


/* ============================================================
   READER WORKSPACE
============================================================ */

.reading-app {

  position:
    fixed;

  inset:
    0;

  z-index:
    200;

  display:
    flex;

  flex-direction:
    column;

  background:
    var(--cream);

}


/* ============================================================
   READER TOPBAR
============================================================ */

.reader-topbar {

  min-height:
    67px;

  padding:
    0 20px;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    22px;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(251, 248, 240, 0.96);

}


.reader-topbar-left,
.reader-topbar-right {

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

}


.reader-back-button {

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--line);

  border-radius:
    50%;

  background:
    var(--paper);

  cursor:
    pointer;

}


.reader-back-button:hover {

  border-color:
    var(--blue);

}


.reader-title-block {

  display:
    flex;

  flex-direction:
    column;

}


.reader-title-block span {

  color:
    #8993a2;

  font-size:
    8px;

  font-weight:
    750;

  letter-spacing:
    0.06em;

}


.reader-title-block strong {

  margin-top:
    1px;

  font-family:
    Georgia,
    serif;

  font-size:
    15px;

  font-weight:
    500;

}


.question-list-button {

  min-height:
    37px;

  padding:
    0 13px;

  border:
    1px solid var(--line);

  border-radius:
    8px;

  background:
    var(--paper);

  color:
    #506078;

  font-size:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

}


/* ============================================================
   SPLIT PANE
============================================================ */

.reader-workspace {

  min-height:
    0;

  flex:
    1;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.06fr)
    minmax(420px, 0.94fr);

}


/* ============================================================
   READING PANEL
============================================================ */

.reading-panel {

  min-width:
    0;

  overflow-y:
    auto;

  border-right:
    1px solid var(--line-strong);

  background:

    radial-gradient(
      ellipse at 0% 0%,
      rgba(77, 116, 149, 0.13),
      transparent 28%
    ),

    radial-gradient(
      ellipse at 100% 100%,
      rgba(113, 142, 113, 0.10),
      transparent 32%
    ),

    #f6f2e8;

}


.reading-panel-header {

  padding:
    27px 35px 15px;

}


.reading-panel-header h2 {

  margin:
    5px 0 0;

  font-family:
    Georgia,
    serif;

  font-size:
    29px;

  font-weight:
    500;

  letter-spacing:
    -0.03em;

}


/* ============================================================
   READING TOOLBAR
============================================================ */

.reading-toolbar {

  position:
    sticky;

  top:
    0;

  z-index:
    10;

  margin:
    0 25px 14px;

  padding:
    10px 11px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  border:
    1px solid rgba(39, 59, 84, 0.12);

  border-radius:
    11px;

  background:
    rgba(255, 253, 248, 0.92);

  backdrop-filter:
    blur(12px);

}


.reading-toolbar-group {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

}


.toolbar-label {

  margin-right:
    4px;

  color:
    #9299a5;

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

}


.font-button,
.clear-highlight-button {

  min-width:
    30px;

  height:
    29px;

  border:
    1px solid var(--line);

  border-radius:
    7px;

  background:
    white;

  color:
    #566478;

  font-size:
    9px;

  font-weight:
    700;

  cursor:
    pointer;

}


.clear-highlight-button {

  padding:
    0 9px;

}


.highlight-colour {

  width:
    24px;

  height:
    24px;

  padding:
    0;

  border:
    2px solid transparent;

  border-radius:
    50%;

  cursor:
    pointer;

}


.highlight-colour[data-highlight="yellow"] {
  background: #ebd891;
}


.highlight-colour[data-highlight="green"] {
  background: #b8d0ae;
}


.highlight-colour[data-highlight="blue"] {
  background: #b9d4e2;
}


.highlight-colour[data-highlight="pink"] {
  background: #e3b8b4;
}


.highlight-colour.active {

  border-color:
    var(--ink);

}


/* ============================================================
   READING TEXT — STORYBOOK HEART
============================================================ */

.reading-text {

  max-width:
    760px;

  margin:
    0 auto;

  padding:
    35px 55px 100px;

  color:
    #26364d;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    17px;

  line-height:
    1.88;

}


.reading-text h1 {

  margin:
    35px 0 18px;

  font-size:
    36px;

  line-height:
    1.1;

  font-weight:
    500;

}


.reading-text h2 {

  margin:
    34px 0 17px;

  color:
    var(--blue-deep);

  font-size:
    28px;

  line-height:
    1.15;

  font-weight:
    500;

}


.reading-text h3 {

  margin:
    30px 0 13px;

  font-size:
    22px;

  font-weight:
    500;

}


.reading-text p {

  margin:
    0 0 21px;

}


.reading-text blockquote {

  margin:
    28px 0;

  padding:
    5px 0 5px 24px;

  border-left:
    2px solid rgba(49, 91, 141, 0.35);

  color:
    #455775;

  font-style:
    italic;

}


.reading-text hr {

  width:
    80px;

  margin:
    40px auto;

  border:
    0;

  border-top:
    1px solid rgba(44, 65, 91, 0.18);

}


/* ============================================================
   BOOKLET PAGE MARKER
============================================================ */

.booklet-page-marker {

  margin:
    42px 0 25px !important;

  padding:
    8px 12px !important;

  display:
    inline-block;

  border:
    1px solid rgba(49, 91, 141, 0.13);

  border-radius:
    7px;

  background:
    rgba(220, 233, 241, 0.78);

  color:
    var(--blue-deep) !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;

  letter-spacing:
    0.1em !important;

  text-transform:
    uppercase;

}


.booklet-page-marker.referenced-page {

  background:
    #d7e9ef;

  box-shadow:
    0 0 0 4px rgba(89, 125, 150, 0.09);

}


/* ============================================================
   READING WORDS + HIGHLIGHTS
============================================================ */

.reading-word {

  border-radius:
    2px;

  cursor:
    text;

  transition:
    background 0.12s ease;

}


.highlight-yellow {
  background: rgba(235, 216, 145, 0.66);
}


.highlight-green {
  background: rgba(184, 208, 174, 0.62);
}


.highlight-blue {
  background: rgba(185, 212, 226, 0.72);
}


.highlight-pink {
  background: rgba(227, 184, 180, 0.63);
}


/* ============================================================
   QUESTION PANEL
============================================================ */

.question-panel {

  min-width:
    0;

  overflow-y:
    auto;

  display:
    flex;

  flex-direction:
    column;

  background:
    var(--paper);

}


.question-panel-inner {

  width:
    min(100%, 690px);

  margin:
    0 auto;

  padding:
    34px 42px 45px;

  flex:
    1;

}


.question-meta-row {

  margin-bottom:
    18px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    #8791a1;

  font-size:
    9px;

  font-weight:
    700;

}


.question-counter {

  margin-bottom:
    23px;

  display:
    flex;

  align-items:
    baseline;

  gap:
    5px;

  color:
    #929aa7;

  font-size:
    9px;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;

}


.question-counter strong {

  color:
    var(--ink);

  font-family:
    Georgia,
    serif;

  font-size:
    14px;

}


.question-content {

  margin-bottom:
    25px;

}


.question-content h2 {

  margin:
    12px 0 16px;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(22px, 3vw, 29px);

  line-height:
    1.32;

  font-weight:
    500;

  letter-spacing:
    -0.025em;

}


.question-content ul {

  padding-left:
    20px;

}


.question-page-reference {

  padding:
    7px 10px;

  border:
    1px solid rgba(49, 91, 141, 0.16);

  border-radius:
    7px;

  background:
    var(--blue-wash);

  color:
    var(--blue-deep);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.04em;

  cursor:
    pointer;

}


.question-quote {

  margin:
    15px 0;

  padding:
    15px 17px;

  border-left:
    2px solid var(--gold);

  background:
    #faf5e9;

  color:
    #48566b;

  font-family:
    Georgia,
    serif;

  font-size:
    14px;

  line-height:
    1.65;

}


/* ============================================================
   FORM ELEMENTS
============================================================ */

.answer-area input[type="text"],
.answer-area textarea,
.answer-area select,
.spelling-input,
.writing-plan-input,
.writing-draft {

  width:
    100%;

  border:
    1px solid #ccd3d9;

  border-radius:
    10px;

  background:
    #fffefd;

  color:
    var(--ink);

  outline:
    none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;

}


.answer-area input[type="text"],
.answer-area select,
.spelling-input {

  min-height:
    47px;

  padding:
    0 13px;

}


.answer-area textarea {

  min-height:
    150px;

  padding:
    13px;

  resize:
    vertical;

  line-height:
    1.6;

}


.answer-area input:focus,
.answer-area textarea:focus,
.answer-area select:focus,
.spelling-input:focus,
.writing-plan-input:focus,
.writing-draft:focus {

  border-color:
    #6d8aaa;

  box-shadow:
    0 0 0 3px rgba(81, 115, 151, 0.09);

}


/* ============================================================
   CHOICES
============================================================ */

.choice-list {

  display:
    grid;

  gap:
    8px;

}


.choice-option {

  width:
    100%;

  padding:
    12px 13px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  border:
    1px solid rgba(44, 65, 91, 0.14);

  border-radius:
    10px;

  background:
    white;

  color:
    #45536a;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background 0.13s ease,
    border-color 0.13s ease;

}


.choice-option:hover {

  border-color:
    rgba(49, 91, 141, 0.36);

  background:
    #f7fafb;

}


.choice-option.selected {

  border-color:
    rgba(49, 91, 141, 0.46);

  background:
    #edf4f6;

}


.choice-marker {

  width:
    24px;

  height:
    24px;

  flex:
    0 0 auto;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(49, 91, 141, 0.22);

  border-radius:
    50%;

  color:
    var(--blue);

  font-size:
    10px;

  font-weight:
    800;

}


/* ============================================================
   CHECK / HELP
============================================================ */

.check-help-row {

  margin-top:
    18px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.check-answer-button,
.special-primary-button {

  min-height:
    43px;

  padding:
    0 16px;

  border:
    0;

  border-radius:
    9px;

  background:
    var(--blue-deep);

  color:
    white;

  font-size:
    10px;

  font-weight:
    750;

  cursor:
    pointer;

}


.check-answer-button:hover,
.special-primary-button:hover {

  background:
    #172f53;

}


.help-button,
.special-secondary-button {

  min-height:
    43px;

  padding:
    0 14px;

  border:
    1px solid var(--line-strong);

  border-radius:
    9px;

  background:
    white;

  color:
    #526079;

  font-size:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

}


/* ============================================================
   FEEDBACK
============================================================ */

.answer-feedback {

  margin-top:
    15px;

  padding:
    14px 16px;

  border-radius:
    10px;

  font-size:
    11px;

  line-height:
    1.6;

}


.feedback-title {

  margin-right:
    5px;

  font-weight:
    800;

}


.answer-feedback.correct {

  border:
    1px solid rgba(93, 127, 97, 0.23);

  background:
    var(--green-soft);

  color:
    #45644d;

}


.answer-feedback.incorrect {

  border:
    1px solid rgba(169, 90, 85, 0.20);

  background:
    var(--red-soft);

  color:
    #824b48;

}


.answer-feedback.partial {

  border:
    1px solid rgba(198, 157, 88, 0.26);

  background:
    var(--gold-soft);

  color:
    #785e32;

}


/* ============================================================
   HELP PANEL
============================================================ */

.help-panel {

  margin-top:
    18px;

  border:
    1px solid rgba(49, 91, 141, 0.17);

  border-radius:
    11px;

  background:

    radial-gradient(
      ellipse at 100% 0%,
      rgba(96, 133, 156, 0.12),
      transparent 42%
    ),

    #eef4f5;

}


.help-panel-inner {

  padding:
    17px;

}


.help-panel-header {

  margin-bottom:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

}


.help-panel-header strong {

  font-family:
    Georgia,
    serif;

  font-size:
    15px;

  font-weight:
    500;

}


.help-step-label {

  color:
    #82909f;

  font-size:
    8px;

  font-weight:
    700;

}


.help-panel p {

  margin:
    0;

  color:
    #56677d;

  font-size:
    11px;

  line-height:
    1.65;

}


.next-hint-button {

  margin-top:
    13px;

  padding:
    8px 11px;

  border:
    1px solid var(--line);

  border-radius:
    7px;

  background:
    white;

  color:
    var(--blue-deep);

  font-size:
    9px;

  font-weight:
    700;

  cursor:
    pointer;

}


/* ============================================================
   TEACHING AFTER MISTAKE
============================================================ */

.mistake-teaching,
.correct-explanation {

  margin-top:
    12px;

  padding:
    17px;

  border-radius:
    10px;

}


.mistake-teaching {

  background:
    #fbf5e8;

  border:
    1px solid rgba(198, 157, 88, 0.20);

}


.correct-explanation {

  background:
    #eef4eb;

  border:
    1px solid rgba(112, 140, 112, 0.18);

}


.mistake-teaching h4,
.correct-explanation strong {

  display:
    block;

  margin:
    0 0 10px;

  font-family:
    Georgia,
    serif;

  font-size:
    15px;

  font-weight:
    500;

}


.teaching-block {

  margin-top:
    11px;

}


.teaching-block-label {

  color:
    #8b744a;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

}


.teaching-block p,
.correct-explanation p {

  margin:
    3px 0 0;

  color:
    #5b6575;

  font-size:
    10px;

  line-height:
    1.65;

}


/* ============================================================
   MULTI-PART
============================================================ */

.question-part {

  margin-bottom:
    18px;

  padding:
    17px;

  border:
    1px solid rgba(44, 65, 91, 0.13);

  border-radius:
    11px;

  background:
    #fffefd;

}


.question-part-heading {

  margin-bottom:
    10px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    #778294;

  font-size:
    8px;

  font-weight:
    750;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;

}


/* ============================================================
   LIST ANSWERS
============================================================ */

.list-answer {

  display:
    grid;

  gap:
    8px;

}


.list-answer-row {

  display:
    grid;

  grid-template-columns:
    24px minmax(0, 1fr);

  align-items:
    center;

  gap:
    8px;

}


.list-answer-number {

  color:
    #8893a3;

  font-family:
    Georgia,
    serif;

}


/* ============================================================
   TABLE QUESTION
============================================================ */

.question-table-wrap {

  overflow-x:
    auto;

  margin:
    5px 0 10px;

}


.question-table {

  width:
    100%;

  border-collapse:
    collapse;

  font-size:
    10px;

}


.question-table th,
.question-table td {

  padding:
    9px;

  border:
    1px solid rgba(44, 65, 91, 0.12);

  text-align:
    left;

}


.question-table th {

  background:
    #edf2f3;

  color:
    #596a80;

  font-weight:
    750;

}


/* ============================================================
   MATCHING
============================================================ */

.matching-list {

  display:
    grid;

  gap:
    8px;

}


.matching-row {

  padding:
    9px 0;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    150px;

  align-items:
    center;

  gap:
    15px;

  border-bottom:
    1px solid rgba(44, 65, 91, 0.09);

}


.matching-row strong {

  font-family:
    Georgia,
    serif;

  font-size:
    13px;

  font-weight:
    500;

}


/* ============================================================
   QUESTION NAVIGATION
============================================================ */

.question-navigation {

  position:
    sticky;

  bottom:
    0;

  padding:
    13px 18px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;

  border-top:
    1px solid var(--line);

  background:
    rgba(255, 253, 248, 0.95);

  backdrop-filter:
    blur(12px);

}


.question-nav-button {

  min-height:
    42px;

  padding:
    0 15px;

  border:
    1px solid var(--line);

  border-radius:
    8px;

  background:
    white;

  color:
    #58667b;

  font-size:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

}


.question-nav-primary {

  border-color:
    var(--blue-deep);

  background:
    var(--blue-deep);

  color:
    white;

}


.question-nav-button:disabled {

  opacity:
    0.4;

  cursor:
    default;

}


/* ============================================================
   QUESTION DRAWER
============================================================ */

.question-drawer-backdrop {

  position:
    fixed;

  inset:
    0;

  z-index:
    290;

  background:
    rgba(15, 27, 46, 0.36);

  backdrop-filter:
    blur(2px);

}


.question-drawer {

  position:
    fixed;

  top:
    0;

  right:
    0;

  bottom:
    0;

  z-index:
    300;

  width:
    min(420px, 90vw);

  overflow-y:
    auto;

  border-left:
    1px solid var(--line);

  background:
    var(--cream);

  box-shadow:
    -20px 0 60px rgba(25, 38, 62, 0.15);

}


.question-drawer-header {

  position:
    sticky;

  top:
    0;

  z-index:
    2;

  min-height:
    67px;

  padding:
    0 17px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(251, 248, 240, 0.95);

}


.question-drawer-header div {

  display:
    flex;

  flex-direction:
    column;

}


.question-drawer-header strong {

  font-family:
    Georgia,
    serif;

  font-weight:
    500;

}


.question-drawer-header button {

  width:
    34px;

  height:
    34px;

  border:
    1px solid var(--line);

  border-radius:
    50%;

  background:
    white;

  cursor:
    pointer;

}


.question-drawer-list {

  padding:
    10px;

}


.drawer-question {

  width:
    100%;

  padding:
    12px;

  display:
    grid;

  grid-template-columns:
    35px
    minmax(0, 1fr)
    20px;

  align-items:
    center;

  gap:
    9px;

  border:
    0;

  border-bottom:
    1px solid rgba(44, 65, 91, 0.08);

  background:
    transparent;

  color:
    #516078;

  text-align:
    left;

  cursor:
    pointer;

}


.drawer-question:hover {

  background:
    rgba(220, 233, 241, 0.45);

}


.drawer-question.active {

  background:
    #e8f0f2;

}


.drawer-question.correct
.drawer-question-status {

  color:
    var(--green);

}


.drawer-question-number {

  font-family:
    Georgia,
    serif;

  font-size:
    15px;

}


.drawer-question-title {

  overflow:
    hidden;

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* ============================================================
   SPECIAL ACTIVITY
============================================================ */

.special-activity {

  position:
    fixed;

  inset:
    0;

  z-index:
    250;

  overflow-y:
    auto;

  background:

    radial-gradient(
      ellipse at 10% 10%,
      rgba(88, 125, 153, 0.14),
      transparent 34%
    ),

    radial-gradient(
      ellipse at 88% 83%,
      rgba(114, 142, 113, 0.11),
      transparent 30%
    ),

    var(--cream);

}


.special-activity-header {

  position:
    sticky;

  top:
    0;

  z-index:
    5;

  min-height:
    68px;

  padding:
    0 23px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(251, 248, 240, 0.94);

  backdrop-filter:
    blur(14px);

}


.special-activity-header div {

  display:
    flex;

  flex-direction:
    column;

}


.special-activity-header span {

  color:
    #8590a0;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

}


.special-activity-header strong {

  font-family:
    Georgia,
    serif;

  font-size:
    15px;

  font-weight:
    500;

}


.special-activity-content {

  max-width:
    920px;

  margin:
    0 auto;

  padding:
    65px 30px 110px;

}


.special-intro {

  max-width:
    690px;

  margin-bottom:
    35px;

}


.special-intro h1 {

  margin:
    8px 0 13px;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(38px, 6vw, 58px);

  line-height:
    1.04;

  font-weight:
    500;

  letter-spacing:
    -0.04em;

}


.special-intro p {

  color:
    #6e7c8f;

  font-family:
    Georgia,
    serif;

  font-size:
    15px;

  line-height:
    1.7;

}


/* ============================================================
   VOCABULARY
============================================================ */

.vocabulary-card,
.spelling-card,
.writing-prompt-card {

  padding:
    28px;

  border:
    1px solid var(--line);

  border-radius:
    14px 20px 16px 18px;

  background:
    var(--paper);

  box-shadow:
    var(--shadow-soft);

}


.vocab-word {

  font-family:
    Georgia,
    serif;

  font-size:
    42px;

  line-height:
    1.1;

  color:
    var(--blue-deep);

}


.vocab-meta {

  margin-top:
    6px;

  color:
    #8b95a4;

  font-size:
    9px;

}


.vocab-options {

  margin-top:
    27px;

  display:
    grid;

  gap:
    8px;

}


.vocab-option {

  padding:
    12px;

  border:
    1px solid var(--line);

  border-radius:
    9px;

  background:
    white;

  text-align:
    left;

  cursor:
    pointer;

}


.vocab-option:hover {

  background:
    #eef4f5;

}


/* ============================================================
   SPELLING
============================================================ */

.spelling-hear-button {

  min-height:
    45px;

  padding:
    0 15px;

  border:
    1px solid rgba(49, 91, 141, 0.20);

  border-radius:
    9px;

  background:
    #edf4f5;

  color:
    var(--blue-deep);

  font-size:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

}


.spelling-input {

  margin-top:
    18px;

}


/* ============================================================
   WRITING
============================================================ */

.writing-stage-tabs {

  margin-bottom:
    40px;

  display:
    flex;

  gap:
    6px;

}


.writing-stage-tab {

  padding:
    7px 11px;

  border:
    1px solid var(--line);

  border-radius:
    8px;

  color:
    #8b95a3;

  font-size:
    9px;

  font-weight:
    700;

}


.writing-stage-tab.active {

  border-color:
    rgba(49, 91, 141, 0.30);

  background:
    #eaf2f4;

  color:
    var(--blue-deep);

}


.writing-workspace {

  display:
    grid;

  gap:
    22px;

}


.writing-plan-input,
.writing-draft {

  min-height:
    165px;

  padding:
    16px;

  resize:
    vertical;

  line-height:
    1.7;

}


.writing-draft {

  min-height:
    400px;

  font-family:
    Georgia,
    serif;

  font-size:
    15px;

}


.writing-help-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    10px;

}


.writing-help-card {

  padding:
    14px;

  border:
    1px solid var(--line);

  border-radius:
    10px;

  background:
    #faf6eb;

}


.writing-help-card strong {

  font-family:
    Georgia,
    serif;

  font-size:
    13px;

  font-weight:
    500;

}


.writing-help-card p {

  margin:
    6px 0 0;

  color:
    #727d8b;

  font-size:
    10px;

}


.review-checklist {

  display:
    grid;

  gap:
    9px;

}


.review-check {

  padding:
    13px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border:
    1px solid var(--line);

  border-radius:
    9px;

  background:
    white;

  font-size:
    11px;

}


/* ============================================================
   ADAPTIVE LEARNING
   HIGHER SPECIFICITY TO OVERRIDE adaptive-ui.js INJECTED CSS
============================================================ */

body .adaptive-learning-area {

  margin:
    22px 0 47px;

}


/* ============================================================
   ADAPTIVE RECOMMENDATION — JOURNEY CARD
============================================================ */

body .adaptive-recommendation {

  position:
    relative;

  overflow:
    hidden;

  margin-bottom:
    16px;

  border:
    1px solid rgba(34, 65, 97, 0.18);

  border-radius:
    18px 25px 20px 23px;

  background:

    radial-gradient(
      ellipse at 10% 0%,
      rgba(88, 128, 156, 0.24),
      transparent 42%
    ),

    radial-gradient(
      ellipse at 92% 100%,
      rgba(105, 133, 103, 0.18),
      transparent 38%
    ),

    linear-gradient(
      135deg,
      #edf2f1,
      #f7f3e8
    );

  box-shadow:
    0 17px 40px rgba(31, 50, 76, 0.07);

}


body .adaptive-recommendation::before {

  content:
    "✦";

  position:
    absolute;

  top:
    18px;

  right:
    24px;

  width:
    auto;

  height:
    auto;

  border:
    0;

  color:
    rgba(198, 157, 88, 0.55);

  font-size:
    17px;

}


body .adaptive-recommendation::after {

  content:
    "";

  position:
    absolute;

  right:
    -35px;

  bottom:
    -40px;

  width:
    170px;

  height:
    115px;

  border-radius:
    50%;

  background:
    radial-gradient(
      ellipse,
      rgba(62, 96, 125, 0.12),
      transparent 70%
    );

  transform:
    rotate(-11deg);

}


body .adaptive-recommendation-inner {

  min-height:
    190px;

  padding:
    31px 34px;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap:
    45px;

}


body .adaptive-kicker {

  color:
    #5f7891;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.13em;

}


body .recommendation-copy h2 {

  max-width:
    700px;

  margin:
    6px 0 10px;

  color:
    #213753;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(27px, 4vw, 39px);

  line-height:
    1.08;

  font-weight:
    500;

  letter-spacing:
    -0.035em;

}


body .recommendation-copy p {

  max-width:
    690px;

  color:
    #637489;

  font-family:
    Georgia,
    serif;

  font-size:
    13px;

  line-height:
    1.72;

}


body .recommendation-skill {

  margin-top:
    17px;

}


body .recommendation-skill span {

  color:
    #8090a1;

  font-size:
    8px;

}


body .recommendation-skill strong {

  color:
    #315c84;

  font-family:
    Georgia,
    serif;

  font-size:
    12px;

  font-weight:
    500;

}


body .recommendation-action button {

  min-height:
    47px;

  padding:
    0 16px;

  border-radius:
    9px 12px 10px 11px;

  background:
    var(--blue-deep);

  font-size:
    10px;

  box-shadow:
    0 6px 16px rgba(31, 61, 103, 0.13);

}


/* ============================================================
   READING JOURNEY PROFILE
============================================================ */

body .reading-profile-card {

  padding:
    26px 30px;

  border:
    1px solid rgba(44, 65, 91, 0.12);

  border-radius:
    14px 19px 16px 17px;

  background:
    rgba(255, 253, 248, 0.88);

  box-shadow:
    none;

}


body .profile-header h2 {

  margin-top:
    4px;

  font-family:
    Georgia,
    serif;

  font-size:
    24px;

  font-weight:
    500;

}


body .profile-evidence {

  border-radius:
    7px;

  background:
    #edf1ef;

  color:
    #778594;

}


body .skill-profile-list {

  gap:
    8px 34px;

}


body .adaptive-skill-row {

  padding:
    13px 0;

  border-bottom:
    1px solid rgba(44, 65, 91, 0.09);

}


body .adaptive-skill-heading strong {

  color:
    #34455c;

  font-family:
    Georgia,
    serif;

  font-size:
    13px;

  font-weight:
    500;

}


body .adaptive-skill-track {

  height:
    4px;

  background:
    #e8e7df;

}


body .adaptive-skill-track span {

  background:

    linear-gradient(
      90deg,
      #446d94,
      #79917a
    );

}


body .adaptive-skill-score {

  font-family:
    Georgia,
    serif;

  font-size:
    14px;

  font-weight:
    500;

}


body .parent-insight {

  margin-top:
    24px;

  padding:
    20px 21px;

  border:
    0;

  border-radius:
    10px 15px 11px 14px;

  background:

    radial-gradient(
      ellipse at 100% 0%,
      rgba(198, 157, 88, 0.10),
      transparent 40%
    ),

    #faf5e9;

}


body .parent-insight-label {

  color:
    #8b7245;

}


body .parent-insight p {

  color:
    #536174;

  font-family:
    Georgia,
    serif;

  font-size:
    12px;

  line-height:
    1.7;

}


/* ============================================================
   ADAPTIVE TARGET
============================================================ */

body .activity-card.adaptive-target {

  animation:
    storyTarget
    0.8s ease
    3;

}


@keyframes storyTarget {

  0%,
  100% {

    border-color:
      rgba(44, 65, 91, 0.13);

    transform:
      translateY(0);

  }

  50% {

    border-color:
      rgba(49, 91, 141, 0.52);

    transform:
      translateY(-3px);

    box-shadow:
      0 14px 32px rgba(49, 91, 141, 0.10);

  }

}


/* ============================================================
   RESPONSIVE — TABLET
============================================================ */

@media (max-width: 980px) {

  .paper-dashboard-hero {

    grid-template-columns:
      1fr;

    gap:
      25px;

  }


  .paper-dashboard-meta {

    min-width:
      0;

    grid-template-columns:
      repeat(2, 1fr);

  }


  .activity-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }


  .reader-workspace {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(390px, 0.92fr);

  }


  .reading-text {

    padding-left:
      35px;

    padding-right:
      35px;

  }

}


/* ============================================================
   RESPONSIVE — SMALL TABLET
============================================================ */

@media (max-width: 760px) {

  .paper-site-header-inner {

    padding:
      0 18px;

  }


  .paper-dashboard-inner {

    padding:
      28px 18px 85px;

  }


  .paper-dashboard-heading h1 {

    font-size:
      48px;

  }


  .paper-progress-card {

    grid-template-columns:
      1fr;

    gap:
      15px;

  }


  .activity-grid,
  .activity-grid-small {

    grid-template-columns:
      1fr;

  }


  .dashboard-section-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      8px;

  }


  .dashboard-section-heading > p {

    text-align:
      left;

  }


  body .adaptive-recommendation-inner {

    grid-template-columns:
      1fr;

    gap:
      20px;

  }


  body .recommendation-action {

    align-items:
      stretch;

  }


  body .skill-profile-list {

    grid-template-columns:
      1fr;

  }


  /*
     Tablet/phone reader becomes stacked.

     The internal reader is still completely usable;
     later we can create the dedicated Reading / Question
     mobile tab switch.
  */

  .reader-workspace {

    overflow-y:
      auto;

    display:
      block;

  }


  .reading-panel {

    min-height:
      60vh;

    overflow:
      visible;

    border-right:
      0;

    border-bottom:
      1px solid var(--line-strong);

  }


  .question-panel {

    min-height:
      70vh;

    overflow:
      visible;

  }


  .reading-text {

    max-width:
      none;

    padding:
      30px 27px 65px;

  }


  .question-panel-inner {

    padding:
      30px 23px 45px;

  }


  .question-navigation {

    position:
      relative;

  }


  .special-activity-content {

    padding:
      45px 20px 80px;

  }

}


/* ============================================================
   PHONE
============================================================ */

@media (max-width: 520px) {

  .paper-site-brand-name {

    font-size:
      16px;

  }


  .paper-home-link {

    font-size:
      10px;

  }


  .paper-dashboard-heading h1 {

    font-size:
      42px;

  }


  .paper-dashboard-heading p {

    font-size:
      14px;

  }


  .paper-dashboard-meta {

    grid-template-columns:
      1fr;

  }


  .activity-card {

    min-height:
      195px;

  }


  .reading-panel-header {

    padding:
      23px 20px 12px;

  }


  .reading-toolbar {

    margin:
      0 12px 10px;

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .reading-text {

    padding:
      28px 20px 60px;

    font-size:
      16px;

  }


  .question-content h2 {

    font-size:
      23px;

  }


  .matching-row {

    grid-template-columns:
      1fr;

  }


  .writing-help-grid {

    grid-template-columns:
      1fr;

  }


  body .reading-profile-card {

    padding:
      22px 18px;

  }


  body .adaptive-recommendation-inner {

    padding:
      25px 20px;

  }


  body .recommendation-copy h2 {

    font-size:
      29px;

  }

}