/* IELTS band score calculator. Built on /english/tools.css and /english/ielts/ielts.css.
   Hero: copy left, the calculator card right (under the heading on a phone).
   Each section row carries its skill colour; the result is a solid panel. */

.cb-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head tool" "more tool";grid-template-rows:auto 1fr;gap:0 clamp(32px,5vw,72px);align-items:start}
.cb-hero-head{grid-area:head;align-self:start;padding-top:32px}
.cb-hero-tool{grid-area:tool}
.cb-hero-more{grid-area:more;align-self:start}
.cb-hero-more .tt-facts-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:480px}
.cb-hero .tt-lede{max-width:50ch;margin:18px 0 0!important}
@media (max-width:1023px){
  .cb-hero-grid{grid-template-columns:1fr;grid-template-areas:"head" "tool" "more";gap:24px}
  .cb-hero-head{padding-top:0}
  .cb-hero-more .tt-facts-row{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;margin-top:4px!important}
}
@media (max-width:639px){.cb-hero-more .tt-facts-row{grid-template-columns:repeat(2,minmax(0,1fr))}.cb-hero .tt-lede{font-size:1rem}}

/* The card */
.cb-card{display:grid;border:1px solid var(--line-strong);border-radius:28px;background:#fff;overflow:hidden}
.cb-card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;padding:20px 24px;border-bottom:1px solid var(--line)}
.cb-title{font:700 20px/1.2 var(--font-display);letter-spacing:-.03em}

/* Academic | General Training */
.seg{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:var(--field)}
.seg-opt{position:relative;cursor:pointer}
.seg-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg-opt span{display:block;padding:10px 16px;border-radius:999px;text-align:center;font:600 14px/1.2 var(--font-body);color:var(--muted);white-space:nowrap;transition:background-color .2s,color .2s}
.seg-opt input:checked+span{background:var(--exam-ink);color:#fff}
.seg-opt input:focus-visible+span{outline:2px solid var(--purple);outline-offset:2px}

/* One row per section */
.cb-rows{display:grid}
.cb-row{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;grid-template-areas:"label stepper chip" "slider slider slider";gap:10px 16px;align-items:center;padding:16px 24px;border-top:1px solid var(--line)}
.cb-row:first-child{border-top:0}
.cb-row-band{grid-template-columns:minmax(0,1fr) auto 64px;grid-template-areas:"label stepper ."}
.cb-label{grid-area:label;display:flex;align-items:center;gap:12px;min-width:0}
.cb-label>span:last-child{display:grid;gap:2px;min-width:0}
.cb-label label{font:700 16px/1.3 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.cb-label small{font-size:13px;color:var(--muted)}
.cb-label small a{color:var(--skill-ink);font-weight:600}
.cb-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--skill-bg);color:var(--skill-ink)}
.cb-ico .tt-i{width:22px;height:22px}

.stepper{grid-area:stepper;display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--field)}
.stepper input{width:52px;height:36px;border:0;border-radius:10px;background:transparent;text-align:center;font:600 17px/1 var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.stepper input:focus-visible{outline:2px solid var(--purple);outline-offset:0}
.stepper-btn{width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:var(--ink);font:500 20px/1 var(--font-body);cursor:pointer;box-shadow:0 0 0 1px var(--line);transition:transform .14s var(--ease-out),background-color .2s}
.stepper-btn:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.stepper-btn:hover{background:var(--skill-bg)}}

.band-chip{grid-area:chip;justify-self:end;display:inline-grid;place-items:center;min-width:56px;height:40px;padding:0 10px;border-radius:12px;background:var(--skill-bg);color:var(--skill-ink);font:700 18px/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.slider{grid-area:slider;width:100%;height:22px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.slider::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:var(--skill-bg)}
.slider::-moz-range-track{height:6px;border-radius:6px;background:var(--skill-bg)}
.slider::-moz-range-progress{height:6px;border-radius:6px;background:var(--skill-btn)}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--skill-btn);border:3px solid #fff;box-shadow:0 0 0 1px var(--skill-btn)}
.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--skill-btn);border:3px solid #fff}
.slider:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

/* The result: a solid panel at the foot of the card */
.cb-result{display:grid;gap:14px;padding:22px 24px 24px;background:var(--exam-bg)}
.cb-overall{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.cb-k{display:block;font:600 13px/1.2 var(--font-body);color:var(--exam-ink)}
.cb-overall strong{display:block;margin-top:4px;font:700 72px/.9 var(--font-display);letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.cb-cefr{text-align:right}
.cb-cefr strong{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:14px;background:#fff;font-size:26px;line-height:1;letter-spacing:-.02em}
.cb-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cb-bars li{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:var(--skill-bg);color:var(--skill-ink);font-weight:600}
.cb-bars b{font:700 17px/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.cb-math{font-size:14.5px;color:var(--exam-ink)}
.cb-next{padding:12px 14px;border-radius:12px;background:#fff;color:var(--ink);font-size:15px;font-weight:500}

@media (max-width:520px){
  .cb-card{border-radius:22px}
  .cb-card-head{padding:16px}
  .seg{width:100%}
  .cb-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label chip" "stepper stepper" "slider slider";padding:14px 16px}
  .cb-row-band{grid-template-areas:"label stepper"}
  .cb-row .stepper{justify-self:start}
  .cb-row-band .stepper{justify-self:end}
  .cb-label small a{display:inline-block}
  .cb-result{padding:18px 16px 20px}
  .cb-overall strong{font-size:60px}
  .cb-bars{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Next step: the Slova card and the email box, side by side */
.cb-next-wrap{padding-top:0}
.cb-email-wrap #cb-email{max-width:720px}

.cb-section-head{max-width:760px;margin-bottom:32px}

/* Raw score tables, one colour per skill */
.tables{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.tables{grid-template-columns:1fr}}
.tbl{margin:0;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;transition:opacity .2s}
.tbl.is-off{opacity:.55}
.tbl figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:center;padding:16px 18px;background:var(--skill-bg);color:var(--skill-ink);font:700 16px/1.2 var(--font-display);letter-spacing:-.02em}
.tbl figcaption .cb-ico{grid-row:1/span 2;background:#fff}
.tbl figcaption small{grid-column:2;font:500 13px/1.3 var(--font-body);color:var(--skill-ink)}
.tbl table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:9px 18px;text-align:left;font-size:14.5px}
.tbl thead th{font:600 13px/1.2 var(--font-body);color:var(--muted);background:var(--surface)}
.tbl td:last-child,.tbl th:last-child{text-align:right}
.tbl td:last-child{font-weight:600;color:var(--ink)}
.tbl tbody tr+tr td{border-top:1px solid var(--line)}
.tbl tr.is-you td{background:var(--skill-btn);color:#fff;font-weight:700}
.cb-source{margin-top:20px!important;max-width:80ch;font-size:14.5px;color:var(--muted)}

/* Rounding examples */
.examples{display:grid;gap:12px}
.examples li{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;font-variant-numeric:tabular-nums}
.ex-bands{display:flex;flex-wrap:wrap;gap:6px}
.ex-bands span{padding:6px 10px;border-radius:10px;background:var(--skill-bg);color:var(--skill-ink);font-weight:700}
.ex-avg{font-size:14px;color:var(--muted)}
.examples strong{justify-self:end;display:grid;place-items:center;width:64px;height:48px;border-radius:14px;background:var(--exam-bg);font:700 22px/1 var(--font-display);color:var(--ink)}
@media (max-width:520px){.examples li{grid-template-columns:1fr auto}.ex-avg{grid-column:1;grid-row:2}.examples strong{grid-row:1/3;grid-column:2}}

/* IELTS ↔ CEFR (the category band) */
.cefr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:760px){.cefr{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cefr li{display:grid;gap:4px;padding:20px;border-radius:18px;background:#fff}
.cefr strong{font:700 30px/1 var(--font-display);letter-spacing:-.03em;color:var(--exam-ink)}
.cefr span{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cefr em{font-style:normal;font-size:13.5px;color:var(--muted)}
.cefr li.is-you{background:var(--exam-ink)}
.cefr li.is-you strong,.cefr li.is-you span,.cefr li.is-you em{color:#fff}
.cb-cefr-note{margin-top:24px!important;color:var(--ink)}
.cb-cefr-note a{color:var(--exam-ink);font-weight:600}

.cb-faq{margin-top:0}

/* Phones: a slim bar keeps the overall band in view until the result scrolls in */
.mini{display:none}
@media (max-width:1023px){
  .mini{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    background:var(--exam-ink);color:#fff;font-size:14px;transition:transform .25s var(--ease-out)}
  .mini b{font:700 22px/1 var(--font-display);margin-left:6px;font-variant-numeric:tabular-nums}
  .mini a{padding:8px 14px;border-radius:999px;background:#fff;color:var(--exam-ink);text-decoration:none;font-weight:600;font-size:14px}
  .mini.is-away{transform:translateY(110%)}
  .tt-foot{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* Phones: the calculator on the first screen */
@media (max-width:639px){
  .cb-hero .ie-up{display:none}
  .cb-hero .tt-lede{margin-top:12px!important}
}

/* Heading on top, the calculator under it: inputs left, the result right */
.cb-hero-grid{grid-template-columns:1fr;grid-template-areas:"head" "more" "tool";grid-template-rows:auto;gap:0}
.cb-hero-head{max-width:880px;padding-top:0}
.cb-hero .tt-title{max-width:none}
.cb-hero .tt-lede{max-width:68ch}
.cb-hero-more .tt-facts-row{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;margin:28px 0 36px!important}
.cb-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"head head" "rows result"}
.cb-card-head{grid-area:head}
.cb-rows{grid-area:rows}
.cb-result{grid-area:result;align-content:start;border-left:1px solid var(--line)}
@media (max-width:899px){
  .cb-hero-grid{grid-template-areas:"head" "tool" "more";gap:24px}
  .cb-hero-more .tt-facts-row{grid-template-columns:repeat(2,minmax(0,1fr));margin:0!important}
  .cb-card{grid-template-columns:1fr;grid-template-areas:"head" "rows" "result"}
  .cb-result{border-left:0}
}
@media (max-width:520px){
  .cb-row-band{grid-template-columns:1fr;grid-template-areas:"label" "stepper"}
  .cb-row-band .stepper{justify-self:start}
}