/* =========================================================
   Likkle Coders — PEP PERFORMANCE TASK (v489)
   Styled to read like the printed paper, because that is the
   point: a child who meets this format on screen should not be
   surprised by it in the exam hall.

   Uses the canonical --lct-* tokens throughout — no new
   literals, no new scales.
   ========================================================= */

.pt-doc{
  max-width: 720px; margin: 0 auto;
  background: var(--lct-paper);
  border: 1px solid var(--lct-line);
  border-radius: var(--lct-r-lg);
  box-shadow: var(--lct-e2);
  padding: clamp(18px, 4vw, 38px);
}

/* the MoESYI-style reference line the real papers carry in the footer */
.pt-code{
  font-family: var(--lct-f-mono); font-size: var(--lct-t-2xs);
  letter-spacing: .06em; color: var(--lct-ink-4);
}
.pt-title{
  font-size: var(--lct-t-4xl); line-height: 1.1; margin: .3rem 0 0;
  letter-spacing: var(--lct-track-tight); color: var(--lct-ink);
}

/* ---------- introduction page ---------- */
.pt-intro{ text-align: left; }
.pt-art{ font-size: 3.4rem; line-height: 1; margin: .6rem 0 1rem; }
.pt-sub{
  font-size: var(--lct-t-sm); text-transform: uppercase;
  letter-spacing: var(--lct-track-caps); color: var(--lct-ink-3);
  margin: 1.4rem 0 .5rem;
}
.pt-scenario{
  font-size: var(--lct-t-lg); line-height: 1.65; color: var(--lct-ink-2);
  margin: 0 0 1.2rem;
}
.pt-help{ font-weight: 700; margin: 0 0 .4rem; color: var(--lct-ink); }
.pt-goals{ margin: 0 0 1.4rem 1.2rem; padding: 0; }
.pt-goals li{ margin: .35rem 0; color: var(--lct-ink-2); line-height: 1.5; }
.pt-gen{
  background: var(--lct-page); border: 1px solid var(--lct-line);
  border-radius: var(--lct-r-md); padding: 14px 16px;
  font-size: var(--lct-t-sm); line-height: 1.6; color: var(--lct-ink-2);
  margin-bottom: 1.4rem;
}
.pt-begin{ width: 100%; }

/* ---------- the running task ---------- */
.pt-run-head{ border-bottom: 2px solid var(--lct-line); padding-bottom: 14px; margin-bottom: 8px; }
.pt-part{ padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--lct-line-soft); }
.pt-part:first-of-type{ border-top: 0; }
.pt-part-h{
  font-size: var(--lct-t-2xl); margin: 0 0 .6rem; color: var(--lct-ink);
  letter-spacing: var(--lct-track-snug);
}
.pt-blurb{ line-height: 1.65; color: var(--lct-ink-2); margin: 0 0 1.1rem; }

/* ---------- data tables ---------- */
.pt-table-wrap{ margin: 0 0 1.6rem; }
.pt-table-label{ font-weight: 800; margin-bottom: .4rem; color: var(--lct-ink); }
.pt-scroll{ overflow-x: auto; border-radius: var(--lct-r-sm); }
.pt-table{ border-collapse: collapse; width: 100%; min-width: 380px; }
.pt-table th{
  background: var(--lct-gold); color: var(--lct-ink);
  font-weight: 800; text-align: center; padding: 10px 12px;
  border: 1px solid var(--lct-ink-4); font-size: var(--lct-t-sm);
}
.pt-table td{
  border: 1px solid var(--lct-ink-4); padding: 10px 12px;
  text-align: center; font-size: var(--lct-t-sm); color: var(--lct-ink-2);
}
.pt-table tbody tr:nth-child(odd) td{ background: var(--lct-page-2); }

/* the worked hint the real paper prints in the first row */
.pt-hint{ background: var(--lct-info-soft) !important; text-align: left !important; }
.pt-hint-tag{
  display: inline-block; font-family: var(--lct-f-mono);
  font-size: var(--lct-t-2xs); font-weight: 700; color: var(--lct-info);
  border: 1px solid var(--lct-info); border-radius: var(--lct-r-xs);
  padding: 1px 5px; margin-right: 6px;
}
.pt-blank{ position: relative; padding: 14px 12px !important; }
.pt-blank-id{
  position: absolute; left: 6px; top: 6px;
  font-size: var(--lct-t-2xs); font-weight: 800; color: var(--lct-ink-4);
}
.pt-cell-in{
  width: 100%; min-height: 40px; border: 2px dashed var(--lct-line);
  border-radius: var(--lct-r-sm); background: var(--lct-paper);
  text-align: center; font-size: var(--lct-t-base); color: var(--lct-ink);
  font-family: inherit; padding: 4px 6px;
}
.pt-cell-in.is-ok{ border-style: solid; border-color: var(--lct-ok); background: var(--lct-ok-soft); }
.pt-cell-in.is-no{ border-style: solid; border-color: var(--lct-danger); background: var(--lct-danger-soft); }

/* ---------- questions ---------- */
.pt-q{ margin: 0 0 1.8rem; }
.pt-q-n{ font-weight: 800; font-size: var(--lct-t-lg); color: var(--lct-ink); margin-bottom: .3rem; }
.pt-ask{ line-height: 1.6; color: var(--lct-ink); margin: 0 0 .3rem; }
/* the italic "how to answer" line every real sub-part carries */
.pt-form{ font-style: italic; color: var(--lct-ink-3); font-size: var(--lct-t-sm); margin: 0 0 .7rem; }
.pt-tip{
  background: var(--lct-gold-wash); border-left: 3px solid var(--lct-gold);
  padding: 8px 12px; border-radius: 0 var(--lct-r-sm) var(--lct-r-sm) 0;
  font-size: var(--lct-t-sm); color: var(--lct-ink-2); margin: 0 0 .7rem;
}
/* a generous write-in box, like the printed answer space */
.pt-in{
  width: 100%; min-height: 54px; padding: 12px 14px;
  border: 2px solid var(--lct-violet-lt); border-radius: var(--lct-r-md);
  background: var(--lct-paper); font-size: var(--lct-t-lg);
  font-family: inherit; color: var(--lct-ink); margin-bottom: .7rem;
}
.pt-textarea{ min-height: 120px; font-size: var(--lct-t-base); line-height: 1.6; resize: vertical; }
.pt-in:focus{ outline: 2px solid var(--lct-violet); outline-offset: 1px; }

.pt-fb{ margin-top: .8rem; padding: 14px 16px; border-radius: var(--lct-r-md); line-height: 1.6; }
.pt-fb.is-ok{ background: var(--lct-ok-soft); border: 1px solid var(--lct-ok); }
.pt-fb.is-no{ background: var(--lct-danger-soft); border: 1px solid var(--lct-danger); }
.pt-fb.is-shown{ background: var(--lct-page); border: 1px solid var(--lct-line); }
.pt-fb.is-warn{ background: var(--lct-warn-soft); border: 1px solid var(--lct-warn); }
.pt-fb p{ margin: 0 0 .5rem; }
.pt-fb p:last-child{ margin-bottom: 0; }
.pt-ok{ color: var(--lct-ok); }
.pt-no{ color: var(--lct-danger); }
.pt-warn{ color: var(--lct-warn); margin: 0; }

.pt-marks{ margin: 0; padding-left: 1.1rem; }
.pt-marks li{ margin: .4rem 0; font-size: var(--lct-t-sm); }
.pt-ms-h{ font-weight: 700; color: var(--lct-ink); }
.pt-ms{ list-style: none; margin: 0 0 1rem; padding: 0; }
.pt-ms li{ margin: .5rem 0; }
.pt-ms label{ display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: var(--lct-t-sm); }
.pt-ms input{ margin-top: .25rem; width: 18px; height: 18px; flex: 0 0 auto; }
.pt-model{
  background: var(--lct-paper); border: 1px solid var(--lct-line);
  border-radius: var(--lct-r-sm); padding: 12px 14px;
  font-size: var(--lct-t-sm); line-height: 1.6; margin-bottom: .9rem;
}
.pt-scored{ font-weight: 700; color: var(--lct-ink); margin: 0; }
.pt-end{
  margin-top: 30px; padding-top: 18px; border-top: 2px solid var(--lct-line);
  color: var(--lct-ink-3); font-size: var(--lct-t-sm);
}

/* ---------- entry point on the PEP hub ---------- */
.pep-pt-cta{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--lct-paper); border:2px solid var(--lct-violet-lt);
  border-left:6px solid var(--lct-violet);
  border-radius:var(--lct-r-md); padding:14px 16px; margin:0 0 22px;
  box-shadow:var(--lct-e1); transition:transform var(--lct-quick);
}
.pep-pt-cta:hover{ transform:translateX(3px); }
.pep-pt-ico{ font-size:1.9rem; flex:0 0 auto; }
.pep-pt-txt{ flex:1; min-width:0; }
.pep-pt-txt strong{ display:block; color:var(--lct-ink); font-size:var(--lct-t-base); }
.pep-pt-txt small{ display:block; color:var(--lct-ink-3); font-size:var(--lct-t-xs); line-height:1.45; margin-top:3px; }
.pep-pt-go{ color:var(--lct-violet); font-size:1.3rem; flex:0 0 auto; }

/* ---------- multiple choice (Curriculum-Based Test style) ---------- */
.pt-opts{ display:flex; flex-direction:column; gap:8px; }
.pt-opt{
  display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left;
  background:var(--lct-paper); border:2px solid var(--lct-line);
  border-radius:var(--lct-r-md); padding:12px 14px; cursor:pointer;
  font-family:inherit; font-size:var(--lct-t-base); color:var(--lct-ink);
  transition:border-color var(--lct-quick), background var(--lct-quick);
}
.pt-opt:hover:not(:disabled){ border-color:var(--lct-violet-lt); background:var(--lct-violet-wash); }
.pt-opt:disabled{ cursor:default; }
.pt-opt-l{
  flex:0 0 auto; width:26px; height:26px; border-radius:var(--lct-r-pill);
  background:var(--lct-sand); color:var(--lct-ink);
  display:grid; place-items:center; font-weight:800; font-size:var(--lct-t-sm);
}
.pt-opt-t{ flex:1; line-height:1.45; }
.pt-opt.is-right{ border-color:var(--lct-ok); background:var(--lct-ok-soft); }
.pt-opt.is-right .pt-opt-l{ background:var(--lct-ok); color:#fff; }
.pt-opt.is-wrong{ border-color:var(--lct-danger); background:var(--lct-danger-soft); }
.pt-opt.is-wrong .pt-opt-l{ background:var(--lct-danger); color:#fff; }

/* ---------- question illustrations ---------- */
.pt-fig{
  display:flex; justify-content:center; margin:0 0 1rem;
  padding:14px; background:var(--lct-page-2);
  border:1px solid var(--lct-line); border-radius:var(--lct-r-md);
}
.pt-fig svg{ max-width:100%; height:auto; }
/* countable object row for the youngest grades */
.pt-art-row{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:0 0 1rem; padding:16px 14px;
  background:var(--lct-page-2); border:1px solid var(--lct-line);
  border-radius:var(--lct-r-md); font-size:2.1rem; line-height:1;
}