﻿/* ============================================
   PRACTICE TEST 4 — WRITING TASK 2
   ============================================ */

.pt4w2-inst-header { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:14px 20px;margin-bottom:20px; }
.pt4w2-inst-label  { font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--gold);margin-bottom:4px; }
.pt4w2-inst-text   { font-size:1rem;color:rgba(255,255,255,0.85);line-height:1.5; }

/* ── Prompt ── */
.pt4w2-prompt-box { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:20px 24px;margin-bottom:20px; }
.pt4w2-prompt-topic    { font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,0.45);margin-bottom:10px; }
.pt4w2-prompt-question { font-size:1.08rem;color:rgba(255,255,255,0.95);line-height:1.75;margin-bottom:14px;font-family:'Georgia',serif; }
.pt4w2-prompt-dir      { font-size:.93rem;color:rgba(255,255,255,0.6);font-style:italic;margin-bottom:10px;line-height:1.6; }
.pt4w2-prompt-min      { font-size:.9rem;color:rgba(255,255,255,0.5); }
.pt4w2-prompt-min strong { color:var(--gold); }

/* ── Writing area ── */
.pt4w2-write-head { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px; }
.pt4w2-write-label { font-size:.9rem;font-weight:700;color:rgba(255,255,255,0.75);text-transform:uppercase;letter-spacing:.5px; }
.pt4w2-wc { font-size:.88rem;font-weight:700;padding:3px 10px;border-radius:20px;transition:background .25s,color .25s; }
.pt4w2-wc-low  { background:rgba(248,113,113,.15);color:#f87171;border:1px solid rgba(248,113,113,.3); }
.pt4w2-wc-warn { background:rgba(251,191,36,.12);color:var(--gold);border:1px solid rgba(251,191,36,.3); }
.pt4w2-wc-ok   { background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.3); }

.pt4w2-textarea { width:100%;min-height:440px;background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.15);border-radius:10px;padding:16px;color:rgba(255,255,255,0.9);font-size:.97rem;line-height:1.8;font-family:'Georgia',serif;resize:vertical;outline:none;transition:border-color .2s;box-sizing:border-box; }
.pt4w2-textarea:focus { border-color:rgba(251,191,36,0.5); }
.pt4w2-textarea::placeholder { color:rgba(255,255,255,0.2); }
.pt4w2-textarea-hint { font-size:.82rem;color:rgba(255,255,255,0.35);font-style:italic;margin:6px 0 20px; }

/* ── Disclaimer ── */
.pt4w2-disclaimer { background:rgba(96,165,250,0.08);border:1.5px solid rgba(96,165,250,0.3);border-radius:10px;padding:12px 18px;margin-bottom:14px;font-size:.92rem;color:rgba(255,255,255,0.8);line-height:1.6; }
.pt4w2-disclaimer strong { color:#60a5fa; }

/* ── Sample toggle ── */
.pt4w2-sample-toggle-row { text-align:center;margin-bottom:20px; }
.pt4w2-sample-btn { background:rgba(251,191,36,0.1);border:1.5px solid rgba(251,191,36,0.4);color:var(--gold);border-radius:8px;padding:10px 24px;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .15s; }
.pt4w2-sample-btn:hover { background:rgba(251,191,36,0.22); }

/* ── Sample section ── */
.pt4w2-sample-wrap { background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:22px 26px;margin-bottom:24px; }
.pt4w2-sample-header { display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px; }
.pt4w2-band-badge { background:var(--gold);color:#111;font-weight:900;font-size:.85rem;padding:3px 12px;border-radius:20px;white-space:nowrap; }
.pt4w2-sample-title { font-size:1rem;font-weight:700;color:rgba(255,255,255,0.9); }
.pt4w2-ann-legend { display:flex;gap:10px;flex-wrap:wrap;margin-left:auto; }
.pt4w2-ann-legend .pt4w2-ann { font-size:.78rem;padding:2px 8px;border-radius:4px;cursor:default; }
.pt4w2-ann-hint { font-size:.82rem;color:rgba(255,255,255,0.4);font-style:italic;margin-bottom:14px; }

/* ── Sample text ── */
.pt4w2-sample-text { font-size:1.05rem;line-height:2.1;color:rgba(255,255,255,0.88);font-family:'Georgia',serif;position:relative; }
.pt4w2-sample-text p { margin:0 0 16px; }

/* ── Annotations ── */
.pt4w2-ann { border-radius:3px;padding:1px 4px;cursor:pointer;transition:opacity .15s; }
.pt4w2-ann:hover { opacity:.8; }
.pt4w2-ann-good { background:rgba(74,222,128,0.18);border-bottom:2px solid #4ade80;color:rgba(255,255,255,0.95); }
.pt4w2-ann-err  { background:rgba(248,113,113,0.18);border-bottom:2px solid #f87171;color:rgba(255,255,255,0.95); }
.pt4w2-ann-note { background:rgba(96,165,250,0.18);border-bottom:2px solid #60a5fa;color:rgba(255,255,255,0.95);font-style:italic;font-size:.88em; }

/* ── Annotation popup ── */
.pt4w2-ann-popup { position:fixed;background:#1e1e38;border:1.5px solid rgba(255,255,255,0.22);border-radius:10px;padding:12px 16px;font-size:.88rem;color:rgba(255,255,255,0.92);line-height:1.65;width:300px;z-index:9999;box-shadow:0 8px 32px rgba(0,0,0,0.6);font-family:'Inter',sans-serif;pointer-events:none; }

/* ── Examiner comment cards ── */
.pt4w2-comments-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px; }
@media(max-width:700px){ .pt4w2-comments-grid { grid-template-columns:1fr; } }
.pt4w2-comment-card { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:14px 16px; }
.pt4w2-comment-head { font-size:.88rem;font-weight:700;color:var(--gold);margin-bottom:8px;display:flex;align-items:center;gap:6px; }
.pt4w2-comment-body { font-size:.9rem;color:rgba(255,255,255,0.78);line-height:1.65; }
.pt4w2-comment-body em { color:rgba(255,255,255,0.55); }

/* ?? Annotation emoji indicators ?? */
.pt4w2-ann-good::before { content: '?? '; font-style: normal; }
.pt4w2-ann-err::before  { content: '?? '; font-style: normal; }

/* ── Annotation emoji indicators ── */
.pt4w2-ann[data-icon]::before { content: attr(data-icon) ' '; font-style: normal; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; }
