/* PTE Academic Reading Skills — front-end styles */

.ptrs-root{
  --ptrs-ink:#1f2937; --ptrs-sub:#5b6472; --ptrs-line:#e2e5ea; --ptrs-bg:#f7f8fa;
  --ptrs-brand:#2f5fd6; --ptrs-brand-dark:#22409e;
  --ptrs-good:#1a8a4a; --ptrs-good-bg:#e9f7ef;
  --ptrs-mid:#9a6a00; --ptrs-mid-bg:#fff2d9;
  --ptrs-bad:#c33; --ptrs-bad-bg:#fdecec;
  --ptrs-card:#ffffff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ptrs-ink); line-height:1.6; max-width:820px; margin:0 auto;
}
.ptrs-root *{box-sizing:border-box;}

.ptrs-top{background:var(--ptrs-brand-dark); margin:0 0 20px; border-radius:10px;}
.ptrs-top-inner{padding:14px 18px;}
.ptrs-brand{color:#fff; font-weight:700; font-size:1.05rem;}
.ptrs-brand span{font-weight:400; opacity:.85;}

.ptrs-choose-intro{color:var(--ptrs-sub); margin:0 0 18px;}
.ptrs-tier-heading{font-size:1.05rem; margin:22px 0 10px;}
.ptrs-choose-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:6px;}
.ptrs-choose-card{
  display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--ptrs-line);
  border-radius:12px; background:var(--ptrs-card); text-decoration:none; color:var(--ptrs-ink);
  transition:box-shadow .15s, border-color .15s;
}
.ptrs-choose-card:hover{border-color:var(--ptrs-brand); box-shadow:0 2px 10px rgba(47,95,214,.12);}
.ptrs-choose-label{font-weight:700;}
.ptrs-choose-meta{color:var(--ptrs-sub); font-size:.85rem;}
.ptrs-choose-go{display:flex; align-items:center; gap:4px; color:var(--ptrs-brand-dark); font-weight:600; font-size:.88rem; margin-top:4px;}
.ptrs-choose-back{font-size:.9rem; margin-bottom:14px;}

/* Intake gate */
.ptrs-gate{background:var(--ptrs-card); border:1px solid var(--ptrs-line); border-radius:14px; padding:26px;}
.ptrs-gate h2{margin-top:0;}
.ptrs-field{margin-bottom:14px;}
.ptrs-field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:5px;}
.ptrs-in{width:100%; font:inherit; padding:9px 11px; border:1px solid var(--ptrs-line); border-radius:8px;}
.ptrs-err{color:var(--ptrs-bad); font-size:.88rem; margin-bottom:10px; display:none;}

/* Sections */
.ptrs-section-heading{margin:30px 0 4px; font-size:1.2rem;}
.ptrs-section-sub{color:var(--ptrs-sub); font-size:.9rem; margin:0 0 16px;}
.ptrs-note{
  background:#eef2ff; border:1px solid #c9d4f7; border-radius:10px;
  padding:12px 16px; font-size:.9rem; color:#33406b; margin:14px 0 26px;
}

section.ptrs-exercise{
  background:var(--ptrs-card); border:1px solid var(--ptrs-line); border-radius:14px;
  padding:22px 22px 20px; margin-bottom:22px; box-shadow:0 1px 2px rgba(20,20,40,.03);
}
.ptrs-ex-kicker{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ptrs-brand-dark); background:#e8edfc;
  padding:3px 9px; border-radius:20px; margin-bottom:9px;
}
section.ptrs-exercise h3{font-size:1.05rem; margin:0 0 4px;}
.ptrs-ex-instr{color:var(--ptrs-sub); font-size:.88rem; margin:0 0 14px;}

/* Vocab (typed) */
.ptrs-passage{font-size:.95rem; margin-bottom:6px;}
input.ptrs-vocab-input{
  font:inherit; font-weight:600; width:220px; padding:3px 8px; margin:0 2px;
  border:none; border-bottom:2px solid var(--ptrs-brand); background:#eef2ff; border-radius:4px;
  color:var(--ptrs-brand-dark); text-align:center;
}
input.ptrs-vocab-input:disabled{background:#f1f3f6; color:var(--ptrs-sub);}
.ptrs-guess-chip{
  display:inline-block; font-size:.8rem; padding:2px 9px; border-radius:14px;
  margin:2px 6px 2px 0; border:1px solid var(--ptrs-line);
}
.ptrs-guess-chip.exact{background:var(--ptrs-good-bg); color:var(--ptrs-good); border-color:var(--ptrs-good);}
.ptrs-guess-chip.close{background:var(--ptrs-mid-bg); color:var(--ptrs-mid); border-color:var(--ptrs-mid);}
.ptrs-guess-chip.different{background:#fff; color:var(--ptrs-sub);}

/* FIB (bank + dropdown) */
.ptrs-blank{
  display:inline-block; min-width:80px; padding:2px 8px; margin:0 2px;
  border-bottom:2px solid var(--ptrs-brand); border-radius:4px; background:#eef2ff;
  text-align:center; cursor:pointer; font-weight:600; color:var(--ptrs-brand-dark);
}
.ptrs-blank.selected{outline:2px solid var(--ptrs-brand); outline-offset:1px;}
.ptrs-blank.empty{color:#9aa3b2; font-weight:400;}
.ptrs-blank.correct{background:var(--ptrs-good-bg); border-color:var(--ptrs-good); color:var(--ptrs-good);}
.ptrs-blank.incorrect{background:var(--ptrs-bad-bg); border-color:var(--ptrs-bad); color:var(--ptrs-bad);}
.ptrs-blank .ptrs-hint{font-size:.76rem; font-weight:400; margin-left:6px;}

select.ptrs-select{
  font:inherit; font-weight:600; color:var(--ptrs-brand-dark); background:#eef2ff;
  border:2px solid var(--ptrs-brand); border-radius:6px; padding:2px 6px; margin:0 3px;
}
select.ptrs-select.correct{background:var(--ptrs-good-bg); border-color:var(--ptrs-good); color:var(--ptrs-good);}
select.ptrs-select.incorrect{background:var(--ptrs-bad-bg); border-color:var(--ptrs-bad); color:var(--ptrs-bad);}

.ptrs-word-bank{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0;}
.ptrs-chip{
  border:1px solid var(--ptrs-brand); color:var(--ptrs-brand-dark); background:#fff;
  padding:5px 12px; border-radius:20px; font-size:.86rem; cursor:pointer;
}
.ptrs-chip.used{opacity:.35; cursor:not-allowed; text-decoration:line-through;}

/* Reorder */
.ptrs-para-list{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;}
.ptrs-para-card{
  border:2px solid var(--ptrs-line); border-radius:10px; padding:12px 14px;
  background:#fbfcfe; cursor:grab; display:flex; gap:12px; align-items:flex-start;
}
.ptrs-para-card.dragging{opacity:.4;}
.ptrs-para-card .ptrs-pos{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--ptrs-brand);
  color:#fff; font-size:.78rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.ptrs-para-card .ptrs-ptext{flex:1 1 auto; font-size:.92rem;}
.ptrs-para-card .ptrs-arrows{flex:0 0 auto; display:flex; flex-direction:column; gap:2px;}
.ptrs-para-card .ptrs-arrows button{
  border:1px solid var(--ptrs-line); background:#fff; border-radius:5px; width:24px; height:20px;
  cursor:pointer; font-size:.68rem; line-height:1; color:var(--ptrs-sub);
}
.ptrs-para-card.correct{border-color:var(--ptrs-good); background:var(--ptrs-good-bg);}
.ptrs-para-card.incorrect{border-color:var(--ptrs-bad); background:var(--ptrs-bad-bg);}

/* Shared actions/reveal */
.ptrs-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
button.ptrs-primary, button.ptrs-secondary{
  font:inherit; font-weight:600; border-radius:8px; padding:9px 16px; cursor:pointer; border:none;
}
button.ptrs-primary{background:var(--ptrs-brand); color:#fff;}
button.ptrs-primary:hover{background:var(--ptrs-brand-dark);}
button.ptrs-secondary{background:#fff; border:1px solid var(--ptrs-line); color:var(--ptrs-ink);}
button.ptrs-secondary:hover{background:#f1f3f6;}

.ptrs-reveal{margin-top:14px; display:none;}
.ptrs-reveal.show{display:block;}
.ptrs-reveal-summary{
  font-weight:700; margin-bottom:10px; padding:9px 13px; border-radius:10px;
  background:#eef2ff; color:var(--ptrs-brand-dark); font-size:.9rem;
}
.ptrs-reveal-item{
  border:1px solid var(--ptrs-line); border-radius:10px; padding:11px 13px; margin-bottom:9px;
  background:#fbfcfe;
}
.ptrs-tag{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; padding:2px 8px; border-radius:20px; margin-bottom:6px;
}
.ptrs-tag.exact{background:var(--ptrs-good-bg); color:var(--ptrs-good);}
.ptrs-tag.close{background:var(--ptrs-mid-bg); color:var(--ptrs-mid);}
.ptrs-tag.different{background:var(--ptrs-bad-bg); color:var(--ptrs-bad);}
.ptrs-reveal-item .ptrs-your-word{color:var(--ptrs-sub); font-size:.86rem; margin-bottom:2px;}
.ptrs-reveal-item .ptrs-model-word{font-size:.92rem; margin-bottom:4px;}
.ptrs-reveal-item .ptrs-why{font-size:.86rem; color:var(--ptrs-sub);}

/* Finish + final summary */
.ptrs-finish-bar{
  text-align:center; margin:24px 0 40px; padding:22px; border:1px dashed var(--ptrs-line); border-radius:14px;
}
.ptrs-final-summary{
  background:var(--ptrs-card); border:1px solid var(--ptrs-line); border-radius:14px;
  padding:22px 24px; margin:20px 0 40px;
}
.ptrs-final-summary h2{margin-top:0;}
.ptrs-final-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--ptrs-line);}
.ptrs-final-row:last-child{border-bottom:none;}
.ptrs-final-row .label{font-weight:600;}
.ptrs-final-row .value{color:var(--ptrs-sub);}
.ptrs-skip-note{color:var(--ptrs-mid); font-size:.85rem; margin-top:10px;}