/* ===================================================================
   WRITING TOOLKIT  (/writing/toolkit)  +  exam phrase drawer
   Matches the app's token system (00-base.css) and light/dark themes.
   =================================================================== */

/* ---- takeover mode: hide the rest of the site, un-stick the header ----
   The homepage hero lives in <div id="home">, NOT a <section>, so a bare
   "> section" rule leaves it bleeding through — hide it explicitly too. */
body.toolkit-mode > section:not(#writing-toolkit-page),
body.toolkit-mode > #home{ display:none !important; }
body.toolkit-mode{ position:relative; }
body.toolkit-mode > header{ position:relative; z-index:50; }
body.toolkit-mode > #writing-toolkit-page{ position:relative; z-index:1; }
body.toolkit-mode > footer{ display:block; }

#writing-toolkit-page{ max-width:1080px; margin:0 auto; padding:20px 20px 120px; }

/* =========================== HERO =========================== */
.wtk-hero{
  position:relative; text-align:center; padding:30px 22px 26px; margin-bottom:26px;
  border:1px solid var(--card-border); border-radius:28px; overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% -20%, rgba(139,109,255,.16), transparent 60%),
    radial-gradient(90% 90% at 100% 120%, rgba(78,224,242,.12), transparent 55%),
    var(--card-bg-soft);
  backdrop-filter:blur(10px);
}
.wtk-hero-glow{
  position:absolute; inset:-40% 20% auto; height:320px; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(198,242,78,.18), transparent 70%);
  filter:blur(30px); animation:wtkGlow 9s ease-in-out infinite;
}
@keyframes wtkGlow{ 0%,100%{ transform:translateX(-10%) scale(1);} 50%{ transform:translateX(10%) scale(1.15);} }
.wtk-hero > *{ position:relative; z-index:1; }
/* decorative self-drawing line-graph across the hero foot */
.wtk-hero-spark{ position:absolute; left:0; right:0; bottom:0; z-index:0; width:100%; height:120px; opacity:.32; pointer-events:none; }
.wtk-spark-line{
  fill:none; stroke:var(--cyan); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1400; stroke-dashoffset:1400; animation:wtkDraw 2.4s cubic-bezier(.4,0,.2,1) .25s forwards;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--cyan) 55%, transparent));
}
@keyframes wtkDraw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .wtk-spark-line{ animation:none; stroke-dashoffset:0; } }
.wtk-back{
  position:absolute; top:16px; left:18px; z-index:2; font-size:13px; font-weight:600;
  color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:99px;
  border:1px solid transparent; transition:.18s;
}
.wtk-back:hover{ color:var(--text); background:var(--chip-bg); border-color:var(--card-border); }
.wtk-eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet); margin-bottom:6px;
}
.wtk-title{
  font-family:'Bricolage Grotesque', 'Hanken Grotesk', 'Native Emoji', sans-serif;
  font-weight:800; font-size:clamp(34px,6vw,54px); line-height:1.02; letter-spacing:-.02em; margin:0 0 10px;
}
.wtk-grad{
  background:linear-gradient(115deg, var(--lime), var(--cyan) 55%, var(--violet));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.wtk-sub{ max-width:620px; margin:0 auto; color:var(--muted); font-size:15.5px; line-height:1.55; }

.wtk-hero-controls{
  display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin:22px 0 14px;
}

/* task segmented control */
.wtk-taskseg{
  position:relative; display:inline-flex; padding:5px; gap:4px; border-radius:99px;
  background:var(--chip-bg); border:1px solid var(--card-border);
}
.wtk-taskseg button{
  position:relative; z-index:1; appearance:none; border:0; background:transparent; cursor:pointer;
  font:inherit; font-weight:700; font-size:14.5px; color:var(--muted); padding:9px 20px; border-radius:99px;
  transition:color .2s;
}
.wtk-taskseg button.active{ color:var(--on-lime); }
.wtk-taskseg-pill{
  position:absolute; z-index:0; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:99px;
  background:linear-gradient(120deg, var(--lime), #a3e635); box-shadow:0 6px 18px -6px rgba(163,230,53,.6);
  transition:transform .34s cubic-bezier(.34,1.4,.4,1);
}
.wtk-taskseg[data-active="task2"] .wtk-taskseg-pill{ transform:translateX(100%); }

/* language mini-segment (reuses [data-deflang]) */
.wtk-langseg{
  display:inline-flex; align-items:center; gap:2px; padding:5px 6px 5px 10px; border-radius:99px;
  background:var(--chip-bg); border:1px solid var(--card-border);
}
.wtk-langseg-ic{ font-size:13px; margin-right:2px; opacity:.8; }
.wtk-langseg button{
  appearance:none; border:0; background:transparent; cursor:pointer; font:inherit; font-weight:700; font-size:12.5px;
  color:var(--muted); padding:6px 11px; border-radius:99px; transition:.16s; letter-spacing:.03em;
}
.wtk-langseg button:hover{ color:var(--text); background:var(--chip-bg-hover); }
.wtk-langseg button.is-active{ color:var(--on-lime); background:var(--cyan); box-shadow:0 3px 10px -3px var(--ring-cyan); }
/* EN / RU / UZ measure ~27px tall — under the ~40px a fingertip needs, and this
   is the switcher this site's Russian- and Uzbek-speaking students reach for
   first. Sized here rather than in the shared touch layer because the sibling
   .wtk-taskseg buttons are already 40px and must not change. */
@media (pointer:coarse), (max-width:900px){
  .wtk-langseg button{ padding:10px 14px; }
}

/* search */
.wtk-search{
  position:relative; max-width:520px; margin:6px auto 0;
}
.wtk-search-ic{ position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:15px; opacity:.7; }
.wtk-search input{
  width:100%; font:inherit; font-size:15px; color:var(--text);
  padding:13px 16px 13px 42px; border-radius:14px; border:1px solid var(--card-border);
  background:var(--input-bg); transition:.18s;
}
.wtk-search input:focus{ outline:none; border-color:var(--ring-violet); box-shadow:0 0 0 4px var(--ring-violet); background:var(--input-bg-focus); }
.wtk-search input::placeholder{ color:var(--muted); }

/* =========================== LAYOUT SHELL =========================== */
.wtk-shell{ display:grid; grid-template-columns:180px 1fr; gap:26px; align-items:start; }
.wtk-subnav{
  position:sticky; top:84px; display:flex; flex-direction:column; gap:4px;
}
.wtk-subnav-btn{
  display:flex; align-items:center; gap:9px; text-align:left; appearance:none; cursor:pointer;
  font:inherit; font-weight:600; font-size:13.5px; color:var(--muted);
  padding:9px 12px; border-radius:11px; border:1px solid transparent; background:transparent; transition:.16s;
}
.wtk-subnav-btn:hover{ color:var(--text); background:var(--chip-bg); }
.wtk-subnav-btn.active{ color:var(--text); background:var(--chip-bg); border-color:var(--card-border); }
.wtk-subnav-btn.active .wtk-subnav-ic{ transform:scale(1.12); }
.wtk-subnav-ic{ font-size:15px; transition:transform .2s; }

.wtk-main{ min-width:0; }

/* translating indicator (РУ / UZ full-page localisation) */
#wtkL10nBadge{
  position:fixed; right:18px; bottom:18px; z-index:1300; display:flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:99px; font-size:13px; font-weight:700; color:var(--text);
  background:var(--card-bg); border:1px solid var(--card-border-hi); box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);
}
#wtkL10nBadge[hidden]{ display:none; }
.wtk-l10n-spin{
  width:13px; height:13px; border-radius:50%; border:2px solid var(--card-border); border-top-color:var(--cyan);
  animation:wtkSpin .7s linear infinite;
}
.wtk-localizing .wtk-main{ transition:opacity .2s; }

/* search mode: page collapses to just the matching phrase/collocation results */
.wtk-searching .wtk-shell{ grid-template-columns:1fr; }
.wtk-searching .wtk-subnav{ display:none; }
.wtk-searching .wtk-facts,
.wtk-searching .wtk-cta{ display:none; }
.wtk-searching .wtk-sec[hidden]{ display:none; }

/* section reveal */
.wtk-sec, .wtk-facts{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.wtk-sec.wtk-in, .wtk-facts.wtk-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .wtk-sec, .wtk-facts{ opacity:1; transform:none; transition:none; }
}

.wtk-sec{ margin-bottom:34px; scroll-margin-top:80px; }
.wtk-sec-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.wtk-sec-head h2{
  font-family:'Bricolage Grotesque', 'Hanken Grotesk', 'Native Emoji', sans-serif; font-weight:800;
  font-size:22px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px;
}
.wtk-sec-ic{ font-size:20px; }
.wtk-sec-tag{ font-size:12.5px; color:var(--muted); font-weight:600; }
/* plain-English lead-in under a section heading */
.wtk-sec-intro{ font-size:14px; color:var(--muted); line-height:1.6; margin:-4px 0 18px; max-width:74ch; }
:root[data-theme="light"] .wtk-sec-intro{ color:#475569; }

/* =========================== FACTS =========================== */
.wtk-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:30px; }
.wtk-fact{
  padding:16px 16px 14px; border-radius:16px; border:1px solid var(--card-border);
  background:var(--card-bg-soft); backdrop-filter:blur(6px);
}
.wtk-fact-n{
  display:block; font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:30px; line-height:1;
  color:var(--text); letter-spacing:-.02em;
}
.wtk-fact-n small{ font-size:13px; font-weight:700; color:var(--muted); margin-left:3px; }
.wtk-fact-l{ display:block; margin-top:6px; font-size:12.5px; color:var(--muted); font-weight:600; }
.wtk-fact-wide .wtk-fact-n{ font-size:24px; }
@media (max-width:720px){ .wtk-facts{ grid-template-columns:repeat(2,1fr); } }

/* =========================== BLUEPRINT =========================== */
.wtk-blueprint{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.wtk-bp-step{
  position:relative; padding:18px 16px 16px; border-radius:16px; border:1px solid var(--card-border);
  background:var(--card-bg-soft); backdrop-filter:blur(6px);
  animation:wtkPop .5s both cubic-bezier(.2,.8,.3,1); animation-delay:calc(var(--i) * 70ms);
}
@keyframes wtkPop{ from{ opacity:0; transform:translateY(10px) scale(.98);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .wtk-bp-step{ animation:none; } }
.wtk-bp-num{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:15px; color:var(--on-lime);
  background:linear-gradient(135deg, var(--lime), var(--cyan)); margin-bottom:11px;
}
.wtk-bp-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:5px; }
.wtk-bp-top h3{ font-size:15px; font-weight:800; }
.wtk-bp-t{ font-size:11px; font-weight:700; color:var(--violet); white-space:nowrap; }
.wtk-bp-body p{ font-size:13px; color:var(--muted); line-height:1.5; }
@media (max-width:820px){ .wtk-blueprint{ grid-template-columns:repeat(2,1fr); } }
/* The 820px step assumes the steps get the full viewport, but .wtk-shell still
   spends 180px + 26px on the sub-nav until 800px — so between 821 and ~1000 the
   four steps were sharing a column ~206px narrower than the screen (≈134px per
   step at 850). Collapse to two on the whole tablet band instead; 460px below
   still wins on source order for phones. */
@media (max-width:900px){ .wtk-blueprint{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .wtk-blueprint{ grid-template-columns:1fr; } }

/* essay types */
.wtk-etypes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.wtk-etype{
  padding:15px 16px; border-radius:14px; border:1px solid var(--card-border); background:var(--card-bg-soft);
  border-left:3px solid var(--violet);
}
.wtk-etype h3{ font-size:14px; font-weight:800; margin-bottom:5px; }
.wtk-etype p{ font-size:12.5px; color:var(--muted); line-height:1.5; }

/* =========================== PHRASE BANK =========================== */
.wtk-groups{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:900px){ .wtk-groups{ grid-template-columns:1fr; } }

.wtk-group{
  border:1px solid var(--card-border); border-radius:18px; overflow:hidden;
  background:var(--card-bg-soft); backdrop-filter:blur(6px);
  animation:wtkPop .5s both cubic-bezier(.2,.8,.3,1); animation-delay:calc(var(--i) * 45ms);
}
@media (prefers-reduced-motion: reduce){ .wtk-group{ animation:none; } }
.wtk-group[hidden]{ display:none; }
.wtk-group-head{
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--card-border);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tone) 15%, transparent), transparent 60%);
}
.wtk-group-ic{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:16px;
  background:color-mix(in srgb, var(--tone) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--tone) 40%, transparent);
}
.wtk-group-head h3{ font-size:15px; font-weight:800; flex:1; }
.wtk-group-count{
  font-size:11.5px; font-weight:800; color:var(--tone); background:color-mix(in srgb, var(--tone) 14%, transparent);
  padding:3px 9px; border-radius:99px;
}

/* the "table" (grid rows) */
.wtk-table{ display:flex; flex-direction:column; }
.wtk-tr{ display:grid; grid-template-columns:112px 1fr; gap:10px; }
.wtk-thead{
  padding:8px 16px; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--hairline);
}
.wtk-row{
  padding:12px 16px; border-bottom:1px solid var(--hairline); transition:background .15s;
}
.wtk-row:last-child{ border-bottom:0; }
.wtk-row:hover{ background:var(--chip-bg); }
.wtk-row[hidden]{ display:none; }
.wtk-fn{
  font-size:12px; font-weight:700; color:var(--tone); padding-top:2px; line-height:1.35;
}
.wtk-cell{ min-width:0; }
.wtk-phrase-row{ display:flex; align-items:flex-start; gap:8px; justify-content:space-between; }
.wtk-phrase{
  font-size:14.5px; font-weight:700; color:var(--text); line-height:1.4; letter-spacing:-.005em;
}
.wtk-tools{ display:inline-flex; gap:3px; flex-shrink:0; opacity:.35; transition:opacity .15s; }
.wtk-row:hover .wtk-tools, .wtk-tools:focus-within{ opacity:1; }
@media (hover:none){ .wtk-tools{ opacity:1; } }
.wtk-tool{
  appearance:none; border:1px solid transparent; background:transparent; cursor:pointer;
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:13px; color:var(--muted);
  transition:.14s; line-height:1;
}
.wtk-tool:hover{ background:var(--chip-bg-hover); color:var(--text); border-color:var(--card-border); transform:translateY(-1px); }
.wtk-tool.wtk-tool-ok{ color:#34d399; background:rgba(52,211,153,.14); }
.wtk-tool.pronouncing{ color:var(--cyan); animation:wtkPulse .5s ease; }
@keyframes wtkPulse{ 50%{ transform:scale(1.25);} }
.wtk-use{ font-size:12px; color:var(--muted); margin-top:4px; line-height:1.45; }
.wtk-example{
  font-size:13px; color:var(--text); opacity:.9; margin-top:7px; padding:8px 11px 8px 12px;
  border-radius:10px; background:var(--chip-bg); border-left:2px solid color-mix(in srgb, var(--tone) 55%, transparent);
  font-style:italic; line-height:1.5; position:relative;
}
.wtk-ex-mark{ font-weight:800; color:var(--tone); font-style:normal; margin-right:2px; font-size:15px; }

/* inline translation reveal */
.wtk-trans{
  margin-top:8px; padding:9px 12px; border-radius:10px; font-size:13px; line-height:1.5;
  background:color-mix(in srgb, var(--cyan) 9%, transparent);
  border:1px dashed color-mix(in srgb, var(--cyan) 40%, transparent);
  animation:wtkFade .25s both;
}
@keyframes wtkFade{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }
.wtk-tr-flag{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:3px;
}
.wtk-tr-phrase{ font-weight:700; color:var(--text); }
.wtk-tr-ex{ color:var(--muted); font-style:italic; margin-top:2px; }
.wtk-tr-spin, .wtk-wp-spin{
  display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:-1px;
  border:2px solid var(--card-border); border-top-color:var(--cyan); animation:wtkSpin .7s linear infinite;
}
@keyframes wtkSpin{ to{ transform:rotate(360deg);} }

.wtk-noresults{ text-align:center; color:var(--muted); padding:26px; font-size:14px; }

/* =========================== GRAMMAR =========================== */
.wtk-grammar{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:760px){ .wtk-grammar{ grid-template-columns:1fr; } }
.wtk-gcard{
  padding:16px 17px; border-radius:16px; border:1px solid var(--card-border);
  background:var(--card-bg-soft); backdrop-filter:blur(6px);
  animation:wtkPop .5s both cubic-bezier(.2,.8,.3,1); animation-delay:calc(var(--i) * 50ms);
}
@media (prefers-reduced-motion: reduce){ .wtk-gcard{ animation:none; } }
.wtk-gcard-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.wtk-gcard-head h3{ font-size:15.5px; font-weight:800; }
.wtk-formula{
  display:block; font-family:'SF Mono', ui-monospace, Menlo, 'Native Emoji', monospace; font-size:12.5px; line-height:1.5;
  color:var(--violet); background:color-mix(in srgb, var(--violet) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--violet) 26%, transparent);
  padding:9px 12px; border-radius:10px; white-space:normal;
}
.wtk-gex{
  margin-top:10px; font-size:13.5px; font-style:italic; color:var(--text); line-height:1.5;
  padding-left:2px;
}
.wtk-gtip{ margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.5; display:flex; gap:6px; }
.wtk-gtip span{ flex-shrink:0; }

/* =========================== VOCAB CARDS (word + quick meaning) =========================== */
.wtk-vocab{ display:grid; grid-template-columns:repeat(auto-fill,minmax(192px,1fr)); gap:10px; }
.wtk-vcard{
  display:flex; flex-direction:column; gap:3px; text-align:left; appearance:none; cursor:pointer;
  padding:12px 14px; border-radius:14px; border:1px solid var(--card-border); background:var(--card-bg-soft);
  transition:transform .16s, border-color .16s, box-shadow .16s;
  animation:wtkPop .45s both; animation-delay:calc(var(--i) * 24ms);
}
@media (prefers-reduced-motion: reduce){ .wtk-vcard{ animation:none; } }
.wtk-vcard:hover{ border-color:var(--ring-violet); transform:translateY(-2px); box-shadow:0 10px 22px -12px var(--ring-violet); }
.wtk-vcard:active{ transform:translateY(0); }
.wtk-vword{ font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:15.5px; color:var(--text); letter-spacing:-.01em; }
.wtk-vcard:hover .wtk-vword{ color:var(--violet); }
.wtk-vdef{ font-size:12.5px; color:var(--muted); line-height:1.45; }
@media (max-width:460px){ .wtk-vocab{ grid-template-columns:1fr 1fr; } }

/* =========================== BAND DESCRIPTORS =========================== */
.wtk-band-scroll{ overflow-x:auto; border-radius:16px; border:1px solid var(--card-border); }
.wtk-band-table{ width:100%; min-width:820px; border-collapse:collapse; font-size:12.5px; background:var(--card-bg-soft); }
.wtk-band-table th, .wtk-band-table td{ padding:12px 13px; text-align:left; vertical-align:top; border-bottom:1px solid var(--hairline); }
.wtk-band-table thead th{
  position:sticky; top:0; font-weight:800; font-size:12px; background:var(--bg-soft);
  border-bottom:2px solid var(--card-border); white-space:nowrap;
}
.wtk-band-crit{ min-width:150px; }
.wtk-band-name{ display:block; font-weight:800; font-size:13.5px; color:var(--text); }
.wtk-band-hint{ display:block; font-size:11px; font-weight:600; color:var(--muted); margin-top:3px; }
.wtk-band-table td{ color:var(--muted); line-height:1.5; max-width:230px; }
.wtk-band-table tbody tr:hover td, .wtk-band-table tbody tr:hover th{ background:var(--chip-bg); }
.wtk-band-col.b9, td.b9{ background:color-mix(in srgb, var(--lime) 9%, transparent); }
.wtk-band-col.b8, td.b8{ background:color-mix(in srgb, var(--cyan) 7%, transparent); }
.wtk-band-col.b7, td.b7{ background:color-mix(in srgb, var(--violet) 6%, transparent); }
.wtk-band-col.b9{ color:var(--lime); }
.wtk-band-col.b8{ color:var(--cyan); }
.wtk-band-col.b7{ color:var(--violet); }
.wtk-band-note{ margin-top:12px; font-size:12.5px; color:var(--muted); line-height:1.55; }

/* =========================== DO / AVOID =========================== */
.wtk-guide{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:680px){ .wtk-guide{ grid-template-columns:1fr; } }
.wtk-guide-col{ padding:16px 18px; border-radius:16px; border:1px solid var(--card-border); background:var(--card-bg-soft); }
.wtk-do{ border-left:3px solid #34d399; }
.wtk-avoid{ border-left:3px solid #f87171; }
.wtk-guide-h{ font-weight:800; font-size:14.5px; margin-bottom:11px; display:flex; align-items:center; gap:8px; }
.wtk-guide-col ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.wtk-guide-col li{ position:relative; padding-left:20px; font-size:13.5px; color:var(--text); opacity:.92; line-height:1.5; }
.wtk-do li::before{ content:'✓'; position:absolute; left:0; color:#34d399; font-weight:800; }
.wtk-avoid li::before{ content:'✕'; position:absolute; left:0; color:#f87171; font-weight:800; }

/* closing CTA */
.wtk-cta{
  margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px 24px; border-radius:20px; border:1px solid var(--card-border);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(198,242,78,.14), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(139,109,255,.16), transparent 55%),
    var(--card-bg-soft);
}
.wtk-cta-tx h3{ font-size:18px; font-weight:800; font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; }
.wtk-cta-tx p{ font-size:13.5px; color:var(--muted); margin-top:3px; }
.wtk-cta-btn{
  flex-shrink:0; text-decoration:none; font-weight:800; font-size:15px; color:var(--on-lime);
  padding:13px 24px; border-radius:14px; background:linear-gradient(120deg, var(--lime), #a3e635);
  box-shadow:0 10px 26px -10px rgba(163,230,53,.6); transition:.18s;
}
.wtk-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(163,230,53,.7); }

/* =========================== SUBNAV RESPONSIVE =========================== */
@media (max-width:800px){
  .wtk-shell{ grid-template-columns:1fr; }
  .wtk-subnav{
    position:sticky; top:0; z-index:9; flex-direction:row; overflow-x:auto; gap:6px;
    padding:8px 2px; margin:0 -4px 6px; background:var(--bg); border-bottom:1px solid var(--hairline);
    -ms-overflow-style:none; scrollbar-width:none;
  }
  .wtk-subnav::-webkit-scrollbar{ display:none; }
  .wtk-subnav-btn{ white-space:nowrap; flex-shrink:0; }
}

/* =========================== WORD DEFINITION POPOVER =========================== */
#wtkWordPop{
  position:absolute; z-index:1200; width:320px; max-width:calc(100vw - 24px);
  border:1px solid var(--card-border-hi); border-radius:16px; overflow:hidden;
  background:var(--card-bg); backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top center;
  transition:opacity .16s, transform .16s;
}
#wtkWordPop.open{ opacity:1; transform:none; }
.wtk-wp-head{ display:flex; align-items:center; gap:8px; padding:13px 14px 10px; border-bottom:1px solid var(--hairline); flex-wrap:wrap; }
.wtk-wp-word{ font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:19px; color:var(--text); }
.wtk-wp-ipa{ font-size:13px; color:var(--cyan); font-family:ui-monospace, 'Native Emoji', monospace; }
.wtk-wp-pos{ font-size:11px; font-weight:700; color:var(--violet); background:color-mix(in srgb, var(--violet) 14%, transparent); padding:2px 8px; border-radius:99px; }
.wtk-wp-say{ margin-left:auto; }
.wtk-wp-x{ width:26px; height:26px; border-radius:8px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; }
.wtk-wp-x:hover{ background:var(--chip-bg-hover); color:var(--text); }
.wtk-wp-body{ padding:12px 14px; font-size:13.5px; line-height:1.55; color:var(--text); }
.wtk-wp-body em{ color:var(--muted); }
.wtk-wp-tr{ padding:0 14px 12px; font-size:13px; color:var(--muted); line-height:1.5; }
.wtk-wp-foot{ padding:10px 14px 14px; border-top:1px solid var(--hairline); }
.wtk-wp-save{
  width:100%; appearance:none; cursor:pointer; font:inherit; font-weight:700; font-size:13.5px;
  color:var(--text); padding:9px; border-radius:11px; border:1px solid var(--card-border); background:var(--chip-bg);
  transition:.15s;
}
.wtk-wp-save:hover{ border-color:var(--ring-lime); color:var(--lime); }
.wtk-wp-save.is-saved{ color:#34d399; border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.1); }

/* =========================== EXAM PHRASE DRAWER ===========================
   Opened from the Writing Practice arena's 💬 button (data-wp="phrases"), which
   is styled as a .wpx-ico alongside the other arena controls. */
#wtkDrawer{ position:fixed; inset:0; z-index:1400; pointer-events:none; }
#wtkDrawer.open{ pointer-events:auto; }
#wtkDrawerScrim{
  position:absolute; inset:0; background:var(--overlay); opacity:0; transition:opacity .3s;
  backdrop-filter:blur(2px);
}
#wtkDrawer.open #wtkDrawerScrim{ opacity:1; }
.wtk-drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(420px, 92vw);
  background:var(--bg-soft); border-left:1px solid var(--card-border);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.5);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.3,.8,.3,1);
  display:flex; flex-direction:column;
}
#wtkDrawer.open .wtk-drawer-panel{ transform:none; }
.wtk-drawer-head{
  padding:16px 18px 12px; border-bottom:1px solid var(--card-border); flex-shrink:0;
}
.wtk-drawer-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wtk-drawer-title h3{ font-size:16px; font-weight:800; font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; }
.wtk-drawer-title h3 small{ color:var(--muted); font-weight:600; font-size:12px; }
#wtkDrawerClose{
  width:32px; height:32px; border-radius:9px; border:1px solid var(--card-border); background:var(--chip-bg);
  color:var(--muted); cursor:pointer; font-size:14px;
}
#wtkDrawerClose:hover{ color:var(--text); background:var(--chip-bg-hover); }
.wtk-drawer-tasks{ display:inline-flex; gap:4px; margin-top:12px; padding:4px; border-radius:99px; background:var(--chip-bg); border:1px solid var(--card-border); }
.wtk-drawer-tasks button{
  appearance:none; border:0; background:transparent; cursor:pointer; font:inherit; font-weight:700; font-size:13px;
  color:var(--muted); padding:6px 16px; border-radius:99px; transition:.16s;
}
.wtk-drawer-tasks button.active{ color:var(--on-lime); background:var(--lime); }
.wtk-drawer-hint{ margin-top:10px; font-size:11.5px; color:var(--muted); }
/* The link inside the hint had no colour rule anywhere, so it fell back to the
   UA default #0000EE — 1.99:1 on the dark drawer panel, the least readable
   thing on it. Every other node in the drawer sets its own colour. */
.wtk-drawer-hint a{ color:var(--cyan); font-weight:700; text-decoration:none; }
.wtk-drawer-hint a:hover{ text-decoration:underline; }
.wtk-drawer-body{ flex:1; overflow-y:auto; padding:14px 16px 30px; }

.wtk-dgroup{ margin-bottom:16px; }
.wtk-dgroup-head{
  font-size:12.5px; font-weight:800; color:var(--tone); margin-bottom:8px; display:flex; align-items:center; gap:6px;
  letter-spacing:.01em;
}
.wtk-drow{
  padding:10px 12px; border-radius:12px; border:1px solid var(--card-border); background:var(--card-bg-soft);
  margin-bottom:7px;
}
.wtk-drow-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.wtk-drow-ph{ font-size:13.5px; font-weight:700; color:var(--text); line-height:1.4; }
.wtk-drow-tools{ display:inline-flex; gap:2px; flex-shrink:0; }
.wtk-drow-ex{ font-size:12px; color:var(--muted); font-style:italic; margin-top:5px; line-height:1.45; }

/* =========================== SAMPLES-HUB CTA =========================== */
.wsamples-toolkit-cta{
  display:inline-flex; align-items:center; gap:14px; margin-top:18px; text-decoration:none;
  padding:12px 18px 12px 14px; border-radius:16px; border:1px solid var(--card-border);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(139,109,255,.16), transparent 60%),
    var(--card-bg-soft);
  transition:.2s; max-width:100%;
}
.wsamples-toolkit-cta:hover{ transform:translateY(-2px); border-color:var(--card-border-hi); box-shadow:0 14px 34px -16px rgba(139,109,255,.5); }
.wsamples-toolkit-cta .wtc-ic{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px; flex-shrink:0;
  background:color-mix(in srgb, var(--violet) 18%, transparent); border:1px solid color-mix(in srgb, var(--violet) 34%, transparent);
}
.wsamples-toolkit-cta .wtc-tx{ display:flex; flex-direction:column; text-align:left; min-width:0; }
.wsamples-toolkit-cta .wtc-tx b{ font-size:14.5px; font-weight:800; color:var(--text); }
.wsamples-toolkit-cta .wtc-tx small{ font-size:12px; color:var(--muted); }
.wsamples-toolkit-cta .wtc-go{ font-size:18px; color:var(--violet); font-weight:800; transition:transform .2s; }
.wsamples-toolkit-cta:hover .wtc-go{ transform:translateX(4px); }

/* light-mode: soften the mono formula + dashed translation so they read */
:root[data-theme="light"] .wtk-formula{ color:#6d28d9; }
:root[data-theme="light"] .wtk-band-table thead th{ background:#f1f3f9; }
/* Band-column header ink. In light theme --lime is #65a30d, which on the
   #f1f3f9 header is only 2.78:1; --muted #64748b on the page is 4.17:1. Both
   just miss AA, so darken them here (dark theme already passes). */
:root[data-theme="light"] .wtk-band-col.b9{ color:#3d6212; }
:root[data-theme="light"] .wtk-subnav-btn{ color:#546074; }

/* =========================== BEGINNER "START HERE" =========================== */
.wtks-lead{ font-size:15px; }
.wtks-facts{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 18px; }
.wtks-fact{
  font-size:13px; font-weight:700; color:var(--text);
  padding:7px 13px; border-radius:11px; border:1px solid var(--card-border); background:var(--card-bg-soft);
}
.wtks-path{
  border:1px solid var(--card-border); border-radius:18px; overflow:hidden; background:var(--card-bg-soft);
}
.wtks-path-h{
  padding:12px 18px; font-weight:800; font-size:15px; color:var(--text);
  border-bottom:1px solid var(--card-border);
  background:linear-gradient(90deg, color-mix(in srgb, var(--lime) 14%, transparent), transparent 65%);
}
.wtks-steps{ list-style:none; margin:0; padding:8px; display:flex; flex-direction:column; gap:4px; }
.wtks-step{
  display:flex; gap:14px; align-items:flex-start; padding:12px 12px; border-radius:13px; transition:background .15s;
  animation:wtkPop .45s both; animation-delay:calc(var(--i) * 60ms);
}
@media (prefers-reduced-motion: reduce){ .wtks-step{ animation:none; } }
.wtks-step:hover{ background:var(--chip-bg); }
.wtks-step-n{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:15px; color:var(--on-lime);
  background:linear-gradient(135deg, var(--lime), var(--cyan)); box-shadow:0 5px 14px -5px var(--ring-lime);
}
.wtks-step-body h3{ font-size:15.5px; font-weight:800; margin-bottom:3px; }
.wtks-step-body p{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.wtks-tmpl{
  margin-top:16px; padding:16px 18px; border-radius:16px;
  border:1px dashed color-mix(in srgb, var(--cyan) 42%, transparent);
  background:color-mix(in srgb, var(--cyan) 8%, transparent);
}
.wtks-tmpl-label{ font-size:12.5px; font-weight:700; color:var(--cyan); margin-bottom:9px; }
.wtks-tmpl-row{ display:flex; align-items:center; gap:10px; }
.wtks-tmpl-text{
  flex:1; font-family:'SF Mono', ui-monospace, Menlo, 'Native Emoji', monospace; font-size:14px; color:var(--text); line-height:1.5;
  padding:11px 14px; border-radius:11px; background:var(--input-bg); border:1px solid var(--card-border);
}
.wtks-tmpl-copy{ flex-shrink:0; width:34px; height:34px; font-size:15px; }
:root[data-theme="light"] .wtks-tmpl-label{ color:#0891b2; }

/* =========================== WHOLE-GUIDE TRANSLATION =========================== */
/* hero banner (shown when RU/UZ chosen) */
.wtk-tr-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  max-width:640px; margin:14px auto 0; padding:11px 16px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  background:color-mix(in srgb, var(--cyan) 10%, transparent);
}
.wtk-tr-banner-ic{ font-size:18px; }
.wtk-tr-banner-tx{ font-size:13.5px; color:var(--text); }
.wtk-tr-banner-tx b{ color:var(--cyan); font-weight:800; }
.wtk-tr-all{
  appearance:none; cursor:pointer; font:inherit; font-weight:800; font-size:13px; color:var(--on-lime);
  padding:9px 16px; border-radius:11px; border:0;
  background:linear-gradient(120deg, var(--cyan), #38bdf8); box-shadow:0 6px 16px -6px var(--ring-cyan);
  transition:.16s;
}
.wtk-tr-all:hover:not(:disabled){ transform:translateY(-1px); }
.wtk-tr-all:disabled{ opacity:.7; cursor:default; }

/* per-section translate button (injected into each .wtk-sec-head) */
.wtk-sec-tr{
  margin-left:auto; appearance:none; cursor:pointer; font:inherit; font-weight:700; font-size:12px;
  color:var(--cyan); padding:6px 12px; border-radius:99px; white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--cyan) 38%, transparent);
  background:color-mix(in srgb, var(--cyan) 9%, transparent); transition:.15s;
}
.wtk-sec-tr:hover{ background:color-mix(in srgb, var(--cyan) 16%, transparent); }
.wtk-sec-tr.is-on{ color:#34d399; border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.1); }
.wtk-sec-tr.is-loading{ opacity:.75; cursor:default; }

/* an inline translated line, inserted under the English block */
.wtk-trx{
  margin:5px 0 2px; padding:8px 12px; border-radius:9px; font-size:13.5px; line-height:1.55; color:var(--text);
  background:color-mix(in srgb, var(--cyan) 8%, transparent);
  border-left:2px solid color-mix(in srgb, var(--cyan) 50%, transparent);
  animation:wtkFade .25s both;
}
.wtk-trx-flag{
  display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cyan); margin-right:7px; vertical-align:1px;
}
/* translated worked-model sits under the English model, tighter */
.wgd-wmodel .wtk-trx, .wgd-wpart .wtk-trx{ margin-top:8px; }
:root[data-theme="light"] .wtk-trx{ color:#0f172a; }