/* ===================================================================
   Heading colours — main headings RED, sub-headings BLUE
   Tutor's theme loads after this file and styles headings inside
   .tutor-lesson-wrapper, so these need !important to win.
   =================================================================== */
.jt-rp h2,
.tutor-lesson-wrapper .jt-rp h2{color:#C62828 !important}
.jt-rp h3,
.tutor-lesson-wrapper .jt-rp h3{color:#1565C0 !important}
.jt-rp h4,
.tutor-lesson-wrapper .jt-rp h4{color:#1565C0 !important}
.jt-rp h5,
.tutor-lesson-wrapper .jt-rp h5{color:#1565C0 !important}
.jt-rp h6,
.tutor-lesson-wrapper .jt-rp h6{color:#1565C0 !important}
/* section headings sharing the card-head class */
.jt-rp h3.jt-card-head{color:#1565C0 !important}
.jt-rp .jt-teach h4{color:#1565C0 !important}
/* headings ON DARK backgrounds must stay white or contrast fails */
.jt-rp .jt-card-head-bar,
.jt-rp .jt-card-head-bar .jt-card-name,
.jt-rp .jt-oet-title .jt-oet-no,
.jt-rp .jt-reveal>summary{color:#fff !important}
.jt-rp .jt-question-paper{border:1px solid #cddbd3;border-radius:12px;background:#fff;padding:26px 28px;margin:22px 0;box-shadow:0 6px 20px rgba(16,43,63,.05)}
/* ===================================================================
   OET role-play card
   =================================================================== */
.jt-rp .jt-oet-sheet{
  border:1px solid #d9e2de;
  border-radius:14px;
  background:#fff;
  margin:30px 0;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(16,43,63,.06), 0 12px 28px rgba(16,43,63,.07);
}
/* ---- highlighted card heading ---- */
.jt-rp .jt-oet-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:18px 28px;
  background:#0F6B69;
}
.jt-rp .jt-oet-sheet.is-patient-card .jt-oet-title{background:#8a6d1f}
.jt-rp .jt-oet-title .jt-oet-no{
  font:700 20px/1.2 Georgia,"Times New Roman",serif;
  color:#fff;
  letter-spacing:.01em;
}
.jt-rp .jt-oet-title .jt-oet-set{
  font:600 11.5px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.42);
  border-radius:20px;
  padding:7px 14px;
}
/* ---- body ---- */
.jt-rp .jt-oet-body{padding:26px 28px 28px}
.jt-rp .jt-oet-situation{
  font:400 17px/1.8 Arial,Helvetica,sans-serif;
  color:#16293a;
  margin:0 0 26px;
  padding:0 0 0 16px;
  border-left:3px solid #0F6B69;
}
.jt-rp .jt-oet-sheet.is-patient-card .jt-oet-situation{border-left-color:#b8912f}
.jt-rp .jt-oet-situation p{margin:0}
.jt-rp .jt-oet-tasks-block{
  background:#f7faf9;
  border:1px solid #e6eeea;
  border-radius:11px;
  padding:20px 24px 22px;
}
.jt-rp .jt-oet-sheet.is-patient-card .jt-oet-tasks-block{background:#fbf8f1;border-color:#efe6d2}
.jt-rp .jt-oet-tasks-label{
  margin:0 0 14px;
  font:700 11px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#0F6B69;
}
.jt-rp .jt-oet-sheet.is-patient-card .jt-oet-tasks-label{color:#8a6d1f}
.jt-rp .jt-oet-tasks{list-style:none;margin:0;padding:0;counter-reset:oettask}
.jt-rp .jt-oet-tasks li{
  counter-increment:oettask;
  position:relative;
  padding:0 0 14px 38px;
  font:400 16.5px/1.7 Arial,Helvetica,sans-serif;
  color:#1c3141;
}
.jt-rp .jt-oet-tasks li:last-child{padding-bottom:0}
.jt-rp .jt-oet-tasks li:before{
  content:counter(oettask);
  position:absolute;
  left:0; top:1px;
  width:24px; height:24px;
  border-radius:50%;
  background:#0F6B69;
  color:#fff;
  font:700 11.5px/24px Arial,Helvetica,sans-serif;
  text-align:center;
}
.jt-rp .jt-oet-sheet.is-patient-card .jt-oet-tasks li:before{background:#8a6d1f}
.jt-rp .jt-oet-tasks li:after{
  content:"";
  position:absolute;
  left:11.5px; top:28px; bottom:4px;
  width:1px;
  background:#d7e5e0;
}
.jt-rp .jt-oet-sheet.is-patient-card .jt-oet-tasks li:after{background:#e6dcc3}
.jt-rp .jt-oet-tasks li:last-child:after{display:none}

@media(max-width:720px){
  .jt-rp .jt-oet-title{padding:15px 18px;gap:10px}
  .jt-rp .jt-oet-title .jt-oet-no{font-size:17px}
  .jt-rp .jt-oet-body{padding:20px 18px 22px}
  .jt-rp .jt-oet-situation{font-size:16px;margin-bottom:20px}
  .jt-rp .jt-oet-tasks-block{padding:16px 18px 18px}
}

/* ---- legacy card style retained for older pages ---- */
.jt-rp .jt-card{border:1px solid #c9d6d0;border-radius:14px;background:#fff;margin:26px 0;overflow:hidden;box-shadow:0 8px 26px rgba(16,43,63,.07)}
.jt-rp .jt-card-head-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:15px 24px;background:#102B3F;color:#fff}
.jt-rp .jt-card-head-bar .jt-card-label{font:700 11px/1 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#e5c891}
.jt-rp .jt-card-head-bar .jt-card-name{font:400 21px/1.25 Georgia,serif;letter-spacing:-.01em;color:#fff;margin:4px 0 0;display:block}
.jt-rp .jt-card-head-bar .jt-card-badge{font:700 10px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:20px;background:#0F6B69;color:#fff;white-space:nowrap}
.jt-rp .jt-card.is-patient .jt-card-head-bar{background:#5c4a1c}
.jt-rp .jt-card.is-patient .jt-card-head-bar .jt-card-label{color:#f0d9a0}
.jt-rp .jt-card.is-patient .jt-card-head-bar .jt-card-badge{background:#8a6d1f;color:#fff}
.jt-rp .jt-card-body{padding:24px 26px 26px}
.jt-rp .jt-dotted{border:0;border-top:1px dashed #cddbd3;margin:22px 0}
.jt-rp .jt-situation{font:400 16px/1.75 Arial,sans-serif;color:#102B3F;background:#f6f9f7;border-radius:8px;padding:14px 18px;margin:0 0 6px}
.jt-rp .jt-card-title{font:700 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#0F6B69;margin:0 0 6px}
.jt-rp h3.jt-card-head{font:400 26px/1.2 Georgia,serif;letter-spacing:-.02em;color:#102B3F;margin:0 0 18px;padding:0}
.jt-rp .jt-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px}
.jt-rp .jt-meta div{border:1px solid #e2e8e4;border-radius:8px;padding:11px 13px;background:#f8faf9}
.jt-rp .jt-meta .jt-k{display:block;font:700 10px/1.6 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5b6f7a}
.jt-rp .jt-meta .jt-v{display:block;font:400 16px/1.5 Arial,sans-serif;color:#102B3F}
.jt-rp .jt-label{font:700 12px/1.6 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#0F6B69;margin:20px 0 8px}
.jt-rp .jt-tasklist{counter-reset:jt;list-style:none;margin:0;padding:0}
.jt-rp .jt-tasklist li{counter-increment:jt;position:relative;padding:13px 14px 13px 52px;margin:0 0 9px;border:1px solid #e2e8e4;border-left:4px solid #0F6B69;border-radius:0 8px 8px 0;background:#fbfcfb;font:400 16px/1.7 Arial,sans-serif;color:#102B3F}
.jt-rp .jt-tasklist li:before{content:counter(jt);position:absolute;left:14px;top:13px;width:24px;height:24px;border-radius:50%;background:#0F6B69;color:#fff;font:700 12px/24px Arial,sans-serif;text-align:center}
.jt-rp .jt-patient{border-color:#c6a66b;border-left-color:#c6a66b}
.jt-rp .jt-patient .jt-card-title,.jt-rp .jt-patient h3.jt-card-head{color:#8a6d1f}
.jt-rp .jt-patient .jt-tasklist li{border-left-color:#c6a66b}
.jt-rp .jt-patient .jt-tasklist li:before{background:#c6a66b;color:#3a2c08}
.jt-rp .jt-reveal{border:1px solid #cddbd3;border-radius:12px;margin:24px 0;overflow:hidden;background:#fff}
.jt-rp .jt-reveal>summary{cursor:pointer;list-style:none;padding:20px 26px;background:#102B3F;color:#fff;font:700 15px/1.4 Arial,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:14px}
.jt-rp .jt-reveal>summary::-webkit-details-marker{display:none}
.jt-rp .jt-reveal>summary:after{content:"\25BC";font-size:12px;opacity:.85;transition:transform .2s}
.jt-rp .jt-reveal[open]>summary:after{transform:rotate(180deg)}
.jt-rp .jt-reveal>summary .jt-hint{display:block;font:400 12px/1.5 Arial,sans-serif;opacity:.8;margin-top:3px}
.jt-rp .jt-reveal-body{padding:8px 26px 26px}
.jt-rp .jt-script{display:grid;gap:14px;margin:18px 0}
.jt-rp .jt-line{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start}
.jt-rp .jt-who{font:700 11px/1.6 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#0F6B69;padding-top:4px}
.jt-rp .jt-say{font:400 16px/1.75 Arial,sans-serif;color:#102B3F}
.jt-rp .jt-line.jt-p .jt-who{color:#8a6d1f}
.jt-rp .jt-line.jt-p .jt-say{color:#31404a;font-style:italic}
.jt-rp .jt-stage{font:italic 13px/1.7 Arial,sans-serif;color:#5b6f7a;margin:2px 0 12px;padding-left:14px;border-left:2px solid #e2e8e4}
.jt-rp .jt-teach{border:1px solid #e2e8e4;border-radius:10px;padding:20px 22px;margin:16px 0;background:#fbfcfb}
.jt-rp .jt-teach h4{font:400 21px/1.3 Georgia,serif;color:#102B3F;margin:0 0 12px}
.jt-rp .jt-teach dl{margin:0}
.jt-rp .jt-teach dt{font:700 12px/1.7 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5b6f7a;margin-top:12px}
.jt-rp .jt-teach dd{margin:3px 0 0;font:400 16px/1.7 Arial,sans-serif;color:#102B3F}
.jt-rp .jt-teach dd ul{margin:6px 0 0;padding-left:20px}
.jt-rp .jt-teach dd li{margin:4px 0}
.jt-rp .jt-skill{display:inline-block;background:#eaf0eb;color:#0F6B69;font:700 11px/1 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:5px;margin-top:10px}
.jt-rp .jt-modelbox{background:#f8faf9;border-left:4px solid #0F6B69;border-radius:0 8px 8px 0;padding:14px 18px;margin:12px 0}
.jt-rp .jt-modelbox p{margin:0 0 8px;font:400 16px/1.7 Arial,sans-serif;color:#102B3F}
.jt-rp .jt-modelbox p:last-child{margin-bottom:0}
.jt-rp table.jt-course-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.jt-rp table.jt-course-table th,.jt-rp table.jt-course-table td{border:1px solid #e2e8e4;padding:10px 12px;text-align:left;vertical-align:top;font:400 15px/1.6 Arial,sans-serif}
.jt-rp table.jt-course-table th{background:#f2f6f4;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#5b6f7a}
.jt-rp .jt-note{background:#fdf7e8;border-left:4px solid #c6a66b;border-radius:0 8px 8px 0;padding:14px 18px;margin:16px 0;font:400 15px/1.7 Arial,sans-serif;color:#4a3a12}
.jt-rp .jt-sequence{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;padding:0;list-style:none}
.jt-rp .jt-sequence li{background:#fff;border:1px solid #cddbd3;border-radius:20px;padding:7px 14px;font:700 12px/1.4 Arial,sans-serif;color:#102B3F}
.jt-rp .jt-sequence li:not(:last-child):after{content:"\2192";margin-left:14px;color:#0F6B69;font-weight:400}
/* Paired self-practice mocks: two complete role-plays on one page */
.jt-rp .jt-rp-divide{border:0;border-top:2px solid #cddbd3;margin:44px 0 34px}
.jt-rp .jt-sub-head{font:400 19px/1.3 Georgia,serif;color:#1565C0;margin:22px 0 10px}
/* Communication essentials lessons use a lighter structure: prose, model
   sentence lists and a callout. The callout had no styling at all, so it
   rendered as a bare paragraph. These rules give it the same treatment as
   the note box used elsewhere in the course. */
.jt-rp .jt-callout{background:#fdf7e8;border-left:4px solid #c6a66b;border-radius:0 8px 8px 0;padding:15px 18px;margin:18px 0}
.jt-rp .jt-callout p{margin:0 0 8px;font:400 15px/1.7 Arial,sans-serif;color:#4a3a12}
.jt-rp .jt-callout p:last-child{margin-bottom:0}
.jt-rp .jt-callout strong{color:#8a6d1f}
/* Communication essentials headings sit directly in the lesson wrapper rather
   than inside a card, so they need their own spacing. */
.jt-rp>.jt-lesson>h4,.jt-rp h4{font:400 20px/1.35 Georgia,serif;margin:26px 0 10px}
.jt-rp>.jt-lesson>p{font:400 16px/1.75 Arial,sans-serif;color:#102B3F;margin:0 0 14px}
.jt-rp>.jt-lesson>ul{margin:0 0 18px;padding-left:22px}
.jt-rp>.jt-lesson>ul>li{margin:7px 0;font:400 16px/1.7 Arial,sans-serif;color:#102B3F}
/* Safety net: Tutor wraps lesson content in an Alpine panel carrying x-cloak,
   and [x-cloak]{display:none!important} keeps the whole lesson invisible until
   Alpine.js initialises. If that script is ever delayed or fails, students see
   an empty lesson. This rule keeps the panel visible regardless. The attribute
   is left in place so Alpine's tab switching still behaves normally. */
.tutor-course-spotlight-tab .tutor-tab-panel{display:block}
@media(max-width:720px){
  .jt-rp .jt-meta{grid-template-columns:1fr}
  .jt-rp .jt-line{grid-template-columns:1fr;gap:4px}
  .jt-rp .jt-question-paper{padding:20px 18px}
  .jt-rp .jt-reveal-body{padding:6px 18px 20px}
  .jt-rp .jt-reveal>summary{padding:16px 18px}
}

/* ===================================================================
   RESPONSIVE — phones and small tablets
   Tables are the main overflow risk: some carry three columns of prose
   and cannot reflow. They scroll horizontally instead of breaking the
   page layout. Cards, headings and long model answers are tightened.
   =================================================================== */
@media(max-width:900px){
  .jt-rp h2{font-size:26px;line-height:1.3}
  .jt-rp h3,.jt-rp h3.jt-card-head{font-size:22px}
  .jt-rp .jt-course-table{font-size:14.5px}
  .jt-rp table.jt-course-table th,
  .jt-rp table.jt-course-table td{padding:9px 10px}
}
@media(max-width:720px){
  /* keep every table inside the viewport */
  .jt-rp table.jt-course-table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .jt-rp h2{font-size:23px}
  .jt-rp h3,.jt-rp h3.jt-card-head{font-size:20px}
  .jt-rp h4,.jt-rp .jt-teach h4,.jt-rp .jt-sub-head{font-size:18px}
  .jt-rp .jt-modelbox{font-size:15px;padding:16px 18px}
  .jt-rp .jt-teach{padding:16px 18px}
  .jt-rp .jt-teach dt{font-size:12.5px}
  .jt-rp .jt-teach dd{font-size:15px}
  .jt-rp .jt-note{padding:13px 16px;font-size:14.5px}
  .jt-rp .jt-oet-tasks li{font-size:15.5px}
  .jt-rp .jt-sequence{gap:6px}
  .jt-rp .jt-sequence li{font-size:11.5px;padding:6px 11px}
}
@media(max-width:480px){
  .jt-rp h2{font-size:21px}
  .jt-rp h3,.jt-rp h3.jt-card-head{font-size:18.5px}
  .jt-rp .jt-oet-title{padding:14px 15px}
  .jt-rp .jt-oet-title .jt-oet-no{font-size:16px}
  .jt-rp .jt-oet-title .jt-oet-set{font-size:10.5px;padding:5px 9px}
  .jt-rp .jt-oet-body{padding:16px 15px 18px}
  .jt-rp .jt-oet-situation{font-size:15.5px}
  .jt-rp .jt-oet-tasks-block{padding:14px 15px 16px}
  .jt-rp .jt-card{padding:18px 16px}
  .jt-rp .jt-teach{padding:14px 15px}
  .jt-rp .jt-reveal-body{padding:4px 15px 18px}
  .jt-rp .jt-reveal>summary{padding:14px 15px}
  .jt-rp table.jt-course-table th,
  .jt-rp table.jt-course-table td{font-size:13.5px;padding:8px 9px}
}


/* ===================================================================
   Responsive hardening
   -------------------------------------------------------------------
   The card header bar, the meta grid and the long role-play titles could
   overflow horizontally on a narrow screen: the flex children had no
   min-width, so a long condition name pushed the card badge past the
   viewport edge and the page scrolled sideways. These rules guarantee the
   lesson body never exceeds its container at any width.
   =================================================================== */
.jt-rp,.jt-rp .jt-lesson{max-width:100%}
.jt-rp h2,.jt-rp h3,.jt-rp h4,.jt-rp p,.jt-rp li,.jt-rp dd,.jt-rp dt{overflow-wrap:anywhere;word-break:normal}
.jt-rp .jt-card,.jt-rp .jt-reveal,.jt-rp .jt-teach,.jt-rp .jt-note,.jt-rp .jt-modelbox{max-width:100%}
.jt-rp .jt-card-head-bar>*{min-width:0}
.jt-rp .jt-card-head-bar .jt-card-name{overflow-wrap:anywhere}
.jt-rp .jt-card-badge{flex:0 0 auto}
.jt-rp .jt-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.jt-rp .jt-meta>div{min-width:0}
.jt-rp .jt-tasklist li{overflow-wrap:anywhere}
/* Tables scroll inside their own box. An earlier attempt set min-width:520px on
   the inner table, which forced the WHOLE PAGE to 520px and made the site scroll
   sideways on a phone. The inner table may now be as wide as its content needs,
   but the overflow is contained by the scroll container, never by the page. */
.jt-rp .jt-course-table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.jt-rp .jt-course-table thead,.jt-rp .jt-course-table tbody{display:table;width:100%}
.jt-rp .jt-course-table th,.jt-rp .jt-course-table td{min-width:0}
@media(max-width:480px){
  .jt-rp .jt-card-head-bar{padding:13px 16px;gap:8px}
  .jt-rp .jt-card-head-bar .jt-card-name{font-size:18px}
  .jt-rp .jt-card-body{padding:18px 16px 20px}
  .jt-rp .jt-reveal>summary{padding:16px 18px;font-size:14px}
  .jt-rp .jt-reveal-body{padding:6px 18px 20px}
  .jt-rp .jt-teach{padding:16px 16px}
  .jt-rp .jt-sequence li{font-size:11px;padding:6px 11px}
}