/* The IELTS pages under /english/ielts/: the guide (index.html), the speaking
   mock test and the band score calculator. Built on /english/tools.css.
   One solid colour per IELTS skill, used for skill tiles, chips and rows.
   Solid colours only, sentence case only. */

:root{
  --listening-bg:#dbeafe; --listening-ink:#1e3a8a; --listening-btn:#1d4ed8;
  --reading-bg:#d1fae5;   --reading-ink:#065f46;   --reading-btn:#047857;
  --writing-bg:#fef3c7;   --writing-ink:#78350f;   --writing-btn:#b45309;
  --speaking-bg:#ede4ff;  --speaking-ink:#4c1d95;  --speaking-btn:#7E22FF;
  --cue:#fff7d1; --cue-line:#f1dc8a;
}
[data-skill="listening"]{--skill-bg:var(--listening-bg);--skill-ink:var(--listening-ink);--skill-btn:var(--listening-btn)}
[data-skill="reading"]{--skill-bg:var(--reading-bg);--skill-ink:var(--reading-ink);--skill-btn:var(--reading-btn)}
[data-skill="writing"]{--skill-bg:var(--writing-bg);--skill-ink:var(--writing-ink);--skill-btn:var(--writing-btn)}
[data-skill="speaking"]{--skill-bg:var(--speaking-bg);--skill-ink:var(--speaking-ink);--skill-btn:var(--speaking-btn)}

/* The small link above a hero heading back to the guide */
.ie-up{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--exam-bg);color:var(--exam-ink);font:600 14px/1.2 var(--font-body);text-decoration:none}
.ie-up .tt-ico{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--exam-ink)}
.ie-up .tt-ico .tt-i{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.ie-up:hover{background:#c3cff9}}

/* A skill chip: a small solid label in the skill's colour */
.ie-skill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--skill-bg);color:var(--skill-ink);font:600 13.5px/1.2 var(--font-body)}
.ie-skill .tt-i{width:16px;height:16px}

/* Two columns that stay two on a tablet */
.ie-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:767px){.ie-two{grid-template-columns:1fr}}

/* A white card with a hairline */
.ie-card{padding:clamp(20px,3vw,28px);border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.ie-card h3{font:700 19px/1.25 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.ie-card p{margin-top:8px!important;color:var(--ink-soft)}

/* A plain data table that scrolls inside itself on a phone, never the page */
.ie-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;-webkit-overflow-scrolling:touch}
.ie-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.ie-table th,.ie-table td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.ie-table thead th{border-top:0;background:var(--surface);font:600 14px/1.3 var(--font-body);color:var(--muted)}
.ie-table tbody th{font-weight:600;color:var(--ink)}
.ie-table td{color:var(--ink-soft)}
.ie-table .ie-skill{white-space:nowrap}

/* Links out to other sites */
.ie-out{display:inline-flex;align-items:center;gap:6px;color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ie-out .tt-i{width:16px;height:16px}

/* Read next: our blog posts, as compact rows */
.ie-reads{display:grid;gap:12px}
.ie-read{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s}
.ie-read .tt-ico{grid-row:1/span 2}
.ie-read b{font:600 16px/1.3 var(--font-display);letter-spacing:-.01em}
.ie-read small{grid-column:2;color:var(--muted);font-size:14px}
.ie-read>.tt-i{grid-row:1/span 2;grid-column:3;color:var(--purple)}
@media (hover:hover) and (pointer:fine){.ie-read:hover{border-color:var(--line-strong)}}

/* Phones: a table becomes one card per row, each cell with its column name */
@media (max-width:639px){
  .ie-table-wrap{overflow:visible;border:0;background:none}
  .ie-table{min-width:0}
  .ie-table thead{display:none}
  .ie-table,.ie-table tbody,.ie-table tr,.ie-table th,.ie-table td{display:block;width:auto}
  .ie-table tr{margin-bottom:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
  .ie-table th,.ie-table td{padding:4px 0;border:0}
  .ie-table tbody th{margin-bottom:6px;font-size:16px}
  .ie-table td[data-label]::before{content:attr(data-label);display:block;font:600 12.5px/1.3 var(--font-body);color:var(--muted)}
  .ie-table td+td{margin-top:6px}
}
.tt-email-row input{min-height:48px}