/* English vocabulary with pictures: hub (topic cards, search) and topic pages
   (the quiz in the hero, the word cards, tips). On top of /english/tools.css.
   Solid colours only; sentence case; no inline styles (the CSP refuses them). */

/* ── One solid colour per topic ─────────────────────────────────────── */
[data-tp="kitchen"]{--tp-bg:#ffe2b8;--tp-soft:#fff3e1;--tp-ink:#7c4300;--tp-btn:#9a5200}
[data-tp="fruits-and-vegetables"]{--tp-bg:#bcf7db;--tp-soft:#e8fbf2;--tp-ink:#065f46;--tp-btn:#047857}
[data-tp="clothes"]{--tp-bg:#d4ddff;--tp-soft:#eef1ff;--tp-ink:#3730a3;--tp-btn:#3730a3}
[data-tp="body"]{--tp-bg:#fed6d6;--tp-soft:#fff0f0;--tp-ink:#991b1b;--tp-btn:#991b1b}

.vc-hero .tt-hero2-grid{align-items:start}
.vc-hero .tt-hero2-copy{padding-top:clamp(8px,3vw,40px)}
.vc-inline-i{display:inline-block;vertical-align:-3px;width:16px;height:16px}

/* ── Hub: topic cards ───────────────────────────────────────────────── */
.vc-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vc-topic{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:24px;background:var(--tp-bg);color:var(--ink);text-decoration:none;transition:transform .15s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.vc-topic:hover{transform:translateY(-3px)}}
.vc-topic-art{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.vc-topic-body{display:grid;gap:4px;padding:16px 56px 18px 18px}
.vc-topic-name{font:750 1.4rem/1.1 var(--font-display);letter-spacing:-.03em}
.vc-topic-meta{color:var(--tp-ink);font-weight:700;font-size:14px}
.vc-topic-words{color:var(--ink-soft);font-size:14px}
.vc-topic-known{color:var(--tp-ink);font-size:13px;font-weight:600}
.vc-topic-known:empty{display:none}
.vc-topic-go{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--tp-ink);color:#fff}
.vc-topic-go .tt-i{width:18px;height:18px}

/* search */
.vc-find{display:grid;gap:18px}
.vc-search label{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 18px;border:1.5px solid var(--line-strong);border-radius:18px;background:#fff}
.vc-search label:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-14)}
.vc-search-i{color:var(--muted)}
.vc-search input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font-size:18px;outline:none}
.vc-results ul{display:grid;gap:8px}
.vc-results li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:10px 14px;border-radius:16px;background:var(--tp-soft)}
.vc-results a{display:grid;grid-template-columns:auto 1fr;gap:0 10px;color:var(--ink);text-decoration:none}
.vc-results a b{font-size:17px}
.vc-results a small{align-self:center;justify-self:start;padding:2px 8px;border-radius:999px;background:var(--tp-bg);color:var(--tp-ink);font-size:12px;font-weight:700}
.vc-results a span{grid-column:1/-1;color:var(--ink-soft);font-size:13px}
.vc-results a:hover b{text-decoration:underline}
.vc-noresult{color:var(--muted)}
.vc-soon{padding:20px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.vc-soon h3{font-size:1rem;margin-bottom:10px}
.vc-soon-chips{display:flex;flex-wrap:wrap;gap:8px}
.vc-soon-chips li{padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink-soft);font-size:14px;box-shadow:inset 0 0 0 1px var(--line-strong)}

/* how to learn, tips */
.vc-steps{display:grid;gap:12px}
.vc-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:20px;border-radius:22px;background:#fff}
.vc-step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--cat-ink);color:#fff;font:800 17px/1 var(--font-display)}
.vc-steps h3{font-size:1.1rem;margin-bottom:4px}
.vc-tips .tt-sub a{color:var(--cat-ink);font-weight:600}

/* ── The quiz in the hero ───────────────────────────────────────────── */
.vc-quiz{min-height:440px;padding:clamp(16px,2.4vw,24px);border-radius:28px;background:var(--tp-bg);color:var(--ink);scroll-margin-top:calc(var(--top-h) + 16px)}
.vc-quiz:focus{outline:none}
.vc-qi-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:center}
.vc-qi-art{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:20px;background:#fff}
.vc-qi-kicker{color:var(--tp-ink);font-weight:700;font-size:14px}
.vc-qi-h{margin-top:6px!important;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1;letter-spacing:-.03em}
.vc-qi-p{margin-top:10px!important;color:var(--ink-soft)}
.vc-qi-k{margin-top:22px!important;color:var(--tp-ink);font-weight:600;font-size:14px}
.vc-qi-sample{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px!important}
.vc-qi-sample li{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:15px}
.vc-chip-say{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--tp-soft);color:var(--tp-ink);cursor:pointer}
.vc-chip-say .tt-i{width:16px;height:16px}
.vc-chip-say:hover,.vc-chip-say[data-state]{background:var(--tp-ink);color:#fff}
.vc-qi-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.vc-qi-fine{color:var(--tp-ink);font-size:14px;font-weight:600}

/* a question */
.vc-q-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.vc-q-count{color:var(--tp-ink);font-weight:700;font-size:14px;white-space:nowrap}
.vc-q-dots{display:flex;flex:1;gap:4px}
.vc-q-dots li{flex:1;height:8px;border-radius:4px;background:#fff}
.vc-q-dots li.is-ok{background:var(--ok)}
.vc-q-dots li.is-miss{background:var(--bad)}
.vc-q-dots li.is-now{background:var(--tp-ink)}
.vc-q-quit{border:0;background:none;color:var(--tp-ink);font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.vc-q-body{display:grid;gap:16px;padding:clamp(16px,2.4vw,24px);border-radius:22px;background:#fff}
.vc-q-kind{color:var(--tp-ink);font-weight:700;font-size:14px}
.vc-q-text{margin-top:2px!important;color:var(--ink);font:600 18px/1.35 var(--font-display)}
.vc-q-listen{display:flex;align-items:center;gap:14px}
.vc-q-play{display:grid;place-items:center;width:84px;height:84px;border:0;border-radius:50%;background:var(--tp-btn);color:#fff;cursor:pointer;transition:transform .15s var(--ease-out)}
.vc-q-play .tt-i{width:36px;height:36px}
.vc-q-play:hover{transform:scale(1.04)}
.vc-q-play[data-state]{background:var(--tp-ink)}
.vc-q-slow{min-height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.vc-q-slow:hover,.vc-q-slow[data-state]{border-color:var(--tp-ink);background:var(--tp-ink);color:#fff}
.vc-q-gap{padding:18px 20px;border-radius:18px;background:var(--tp-soft);color:var(--ink);font:600 clamp(1.15rem,2vw,1.4rem)/1.45 var(--font-display)}
.vc-q-blank{display:inline-block;margin:0 2px;padding:0 10px;border-radius:8px;background:#fff;color:var(--tp-ink);font:600 15px/1.8 var(--font-body);box-shadow:inset 0 -2px 0 var(--tp-ink)}
.vc-q-pic{display:block;width:min(260px,100%);height:auto;aspect-ratio:1;border-radius:18px;object-fit:cover}
.vc-q-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vc-q-opt{min-height:60px;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:16px;background:#fff;color:var(--ink);font:700 17px/1.25 var(--font-display);cursor:pointer;transition:border-color .15s,background .15s}
@media (hover:hover) and (pointer:fine){.vc-q-opt:not([disabled]):hover{border-color:var(--tp-ink);background:var(--tp-soft)}}
.vc-q-opt[disabled]{cursor:default;opacity:.5}
.vc-q-opt.is-right{border-color:var(--ok);background:var(--ok);color:#fff;opacity:1}
.vc-q-opt.is-wrong{border-color:var(--bad);background:var(--bad);color:#fff;opacity:1}
.vc-q-type{display:grid;gap:10px}
.vc-q-input{width:100%;min-height:56px;padding:0 16px;border:1.5px solid var(--line-strong);border-radius:16px;background:#fff;color:var(--ink);font:600 20px/1 var(--font-body)}
.vc-q-input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-14)}
.vc-q-input.is-right{border-color:var(--ok);background:var(--ok-bg)}
.vc-q-input.is-near{border-color:#b45309;background:#fef3c7}
.vc-q-input.is-wrong{border-color:var(--bad);background:var(--bad-bg)}
.vc-q-hint{color:var(--tp-ink);font:700 20px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.vc-q-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.vc-q-link{border:0;background:none;color:var(--purple);font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.vc-q-next{margin-top:14px}
.vc-q-next:empty{display:none}

/* feedback */
.vc-fb{display:grid;gap:8px;padding:14px 16px;border-radius:16px;color:#fff}
.vc-fb.is-right{background:var(--ok)}
.vc-fb.is-wrong{background:var(--bad)}
.vc-fb.is-near{background:#9a3412}
.vc-fb-h{display:flex;align-items:center;gap:8px;font:700 16px/1.3 var(--font-display)}
.vc-fb-h .tt-i{stroke-width:2.6}
.vc-fb-word{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.vc-fb-word b{font-size:20px}
.vc-fb-word span{color:rgba(255,255,255,.9);font-size:14px}
.vc-fb-ex{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.95);font-size:15px}
.vc-fb-say{display:grid;place-items:center;flex:none;width:34px;height:34px;border:0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.vc-fb-say[data-state]{box-shadow:inset 0 0 0 2px currentColor}
.vc-results .vc-fb-say,.vc-res-missed .vc-fb-say{background:var(--tp-ink);color:#fff}

/* the result */
.vc-res{display:grid;gap:6px;padding:clamp(18px,2.4vw,24px);border-radius:22px;background:#fff}
.vc-res-k{color:var(--tp-ink);font-weight:700;font-size:14px}
.vc-res-big{color:var(--ink);font:800 clamp(3rem,6vw,4rem)/1 var(--font-display);letter-spacing:-.04em}
.vc-res-big small{font-size:.4em;font-weight:700;letter-spacing:-.01em;color:var(--ink-soft)}
.vc-res-line{color:var(--ink);font-weight:600}
.vc-res-known{color:var(--ink-soft);font-size:14px}
.vc-res progress{width:100%;height:10px;border:0;border-radius:5px;background:var(--line);appearance:none;-webkit-appearance:none;overflow:hidden}
.vc-res progress::-webkit-progress-bar{background:var(--line);border-radius:5px}
.vc-res progress::-webkit-progress-value{background:var(--tp-btn);border-radius:5px}
.vc-res progress::-moz-progress-bar{background:var(--tp-btn);border-radius:5px}
.vc-res-missed{margin-top:14px;padding:16px;border-radius:20px;background:#fff}
.vc-res-missed h3{font-size:1rem;margin-bottom:10px}
.vc-res-missed ul{display:grid;gap:8px}
.vc-res-missed li{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;font-size:14px}
.vc-res-missed a{color:var(--ink);font-weight:700;font-size:16px}
.vc-res-go{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.vc-res-cta,.vc-res-mail{margin-top:14px}
.vc-res-mail:empty,.vc-res-cta:empty{display:none}

/* ── The words ──────────────────────────────────────────────────────── */
.vc-words-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:20px}
.vc-words-head .tt-sub{max-width:62ch;margin-top:12px!important}
.vc-print{flex:none}
.vc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.vc-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--tp-bg);color:var(--tp-ink);font-weight:600;font-size:14px;text-decoration:none}
.vc-chip b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#fff;font-size:12px}
.vc-chip:hover{background:var(--tp-ink);color:#fff}
.vc-chip:hover b{color:var(--tp-ink)}
.vc-sec-h{margin-top:40px!important}
.vc-group{padding-top:28px;scroll-margin-top:calc(var(--top-h) + 16px)}
.vc-gh{margin-bottom:14px;font-size:1.3rem;letter-spacing:-.02em}
.vc-gh small{margin-left:6px;color:var(--muted);font:500 14px/1 var(--font-body)}
.vc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.vc-card{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:20px;background:#fff;scroll-margin-top:calc(var(--top-h) + 24px)}
.vc-card:target{box-shadow:0 0 0 3px var(--tp-ink)}
.vc-card.is-known{border-color:var(--ok)}
.vc-card.is-known::after{content:"Known";position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:999px;background:var(--ok);color:#fff;font-size:11px;font-weight:700}
.vc-art{display:grid;place-items:center;align-content:center;gap:2px;width:72px;height:72px;overflow:hidden;border-radius:16px;background:var(--tp-soft);color:var(--tp-ink)}
.vc-art img{display:block;width:100%;height:100%;object-fit:cover}
.vc-pic-i{width:24px;height:24px}
.vc-art small{font-size:10px;font-weight:600;line-height:1.1;text-align:center;opacity:.85}
.vc-info{display:grid;gap:5px;min-width:0}
.vc-word{display:flex;align-items:center;gap:8px;padding-right:48px}
.vc-word b{color:var(--ink);font:750 1.2rem/1.15 var(--font-display);letter-spacing:-.02em;overflow-wrap:break-word}
.vc-word .tt-say{flex:none;width:34px;height:34px;background:var(--tp-bg);color:var(--tp-ink)}
.vc-word .tt-say[data-state]{background:var(--tp-ink);color:#fff}
.vc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.vc-lv{padding:1px 7px;border-radius:6px;background:var(--tp-soft);color:var(--tp-ink);font-weight:700;font-size:12px}
.vc-alt{display:flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:13px}
.vc-alt b{color:var(--ink)}
.vc-ex{display:flex;align-items:flex-start;gap:8px;color:var(--ink-soft);font-size:14.5px;line-height:1.45}
.vc-ex b{color:var(--ink)}
.vc-say-mini{display:grid;place-items:center;flex:none;width:26px;height:26px;border:0;border-radius:50%;background:var(--tp-soft);color:var(--tp-ink);cursor:pointer}
.vc-say-mini .tt-i{width:14px;height:14px}
.vc-say-mini:hover,.vc-say-mini[data-state]{background:var(--tp-ink);color:#fff}
.vc-note{color:var(--muted);font-size:13px}

/* ── Tablets and phones ─────────────────────────────────────────────── */
@media (max-width:1023px){
  .vc-quiz{min-height:0}
}
@media (max-width:640px){
  .vc-hero .tt-facts-row{gap:14px 18px;margin-top:24px!important}
  .vc-hero .tt-fact .tt-i{width:30px;height:30px}
  .vc-topics{gap:10px}
  .vc-topic{border-radius:18px}
  .vc-topic-body{padding:12px 12px 48px}
  .vc-topic-name{font-size:1.1rem}
  .vc-topic-words{display:none}
  .vc-topic-go{right:10px;bottom:10px;width:30px;height:30px}
  .vc-quiz{margin-inline:-4px;padding:14px;border-radius:22px}
  .vc-qi-top{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .vc-qi-art{border-radius:14px}
  .vc-qi-h{font-size:1.3rem}
  .vc-qi-p{display:none}
  .vc-qi-k{margin-top:16px!important}
  .vc-qi-go .tt-pill{width:100%}
  .vc-q-body{padding:16px}
  .vc-q-play{width:68px;height:68px}
  .vc-q-play .tt-i{width:30px;height:30px}
  .vc-q-opt{min-height:54px;font-size:16px}
  .vc-grid{grid-template-columns:1fr;gap:8px}
  .vc-card{grid-template-columns:52px minmax(0,1fr);gap:12px;padding:10px 12px;border-radius:16px}
  .vc-info{grid-template-columns:minmax(0,1fr) auto;gap:3px 8px}
  .vc-info>*{grid-column:1/-1}
  .vc-info>.vc-word{grid-column:1;padding-right:0}
  .vc-info>.vc-meta{grid-column:2;grid-row:1;justify-content:flex-end}
  .vc-card.is-known .vc-meta{padding-right:56px}
  .vc-word .tt-say{width:30px;height:30px}
  .vc-ex{font-size:14px}
  .vc-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 4px;scrollbar-width:none}
  .vc-chips::-webkit-scrollbar{display:none}
  .vc-chip{flex:none}
  .vc-art{width:52px;height:52px;border-radius:12px}
  .vc-art small{display:none}
  .vc-pic-i{width:20px;height:20px}
  .vc-word b{font-size:1.1rem}
  .vc-words-head .vc-print{display:none}
  .vc-steps li{padding:16px;gap:12px;grid-template-columns:36px minmax(0,1fr)}
  .vc-step-n{width:36px;height:36px;border-radius:12px;font-size:15px}
}

/* ── Print: the word list only ──────────────────────────────────────── */
@media print{
  body.tt-body > :not(main), main > :not(#words), .tt-related, .vc-chips, .vc-words-head .tt-pill, .vc-art, .tt-say, .vc-say-mini, .vc-card::after{display:none!important}
  .vc-words{padding:0!important}
  .vc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
  .vc-card{display:block;padding:6px 0;border:0;border-bottom:1px solid #ccc;border-radius:0;break-inside:avoid}
  .vc-word{padding:0}
  .vc-group{padding-top:12px}
}

/* Narrower, quieter hero tool (owner review, 22 Oct) */
.vc-hero .tt-hero2-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.vc-quiz{min-height:0}
.vc-qi-top{grid-template-columns:120px minmax(0,1fr)}
.vc-qi-h{font-size:1.45rem}
.vc-qi-sample{margin-top:18px!important}
.vc-topic-art{aspect-ratio:16/9}
.vc-topic-body{padding:12px 50px 14px 14px}
.vc-topic-name{font-size:1.15rem}
.vc-topic-go{width:30px;height:30px;right:12px;bottom:12px}
@media (max-width:1023px){.vc-hero .tt-hero2-grid{grid-template-columns:1fr}}

/* No pictures (owner decision, 24 Oct): cards are text, topic cards are solid colour */
.vc-card{grid-template-columns:minmax(0,1fr)}
.vc-qi-top-text{grid-template-columns:1fr}
.vc-topic-body{padding-top:20px;min-height:132px}
.vc-topic-name{font-size:1.35rem}
@media (max-width:640px){.vc-card{grid-template-columns:minmax(0,1fr)}.vc-topic-body{min-height:110px}}