/* A0019030 Interactive Content Tools
 * Article-scoped presentation only. Existing article themes remain owners of the
 * surrounding page. Semantic colours fall back to the A0019020 design system.
 */
.yitm-interactive-tool-host{
  --ict-ink:var(--yitm-ds-text-primary,#102033);
  --ict-copy:var(--yitm-ds-text-secondary,#526274);
  --ict-line:var(--yitm-ds-line,#dbe4ee);
  --ict-card:var(--yitm-ds-surface-card,#fff);
  --ict-page:var(--yitm-ds-surface-page,#f5f8fc);
  --ict-blue:var(--yitm-ds-action-blue,#0f64ee);
  --ict-blue-hover:var(--yitm-ds-action-blue-hover,#0b53c9);
  --ict-green:var(--yitm-ds-trust,#26b56a);
  --ict-mint:var(--yitm-ds-surface-green,#eefaf4);
  --ict-amber:var(--yitm-ds-attention,#ffb020);
  --ict-amber-soft:var(--yitm-ds-surface-amber,#fff8e7);
  --ict-danger:var(--yitm-ds-danger,#d92d20);
  max-width:960px;
  margin:clamp(28px,5vw,54px) auto;
  padding:0 clamp(14px,2vw,20px);
  color:var(--ict-ink);
}
.yitm-interactive-tool{
  border:1px solid var(--ict-line);
  border-radius:22px;
  background:var(--ict-card);
  box-shadow:0 18px 48px rgba(7,20,38,.10);
  overflow:hidden;
}
.yitm-interactive-tool *{box-sizing:border-box}
.yitm-interactive-tool__head{
  padding:clamp(20px,4vw,34px);
  border-bottom:1px solid var(--ict-line);
  background:linear-gradient(180deg,#fff 0%,var(--ict-page) 100%);
}
.yitm-interactive-tool__kicker{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  margin:0 0 10px;
  padding:4px 10px;
  border:1px solid var(--ict-line);
  border-radius:999px;
  background:#fff;
  color:var(--ict-blue);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.02em;
}
.yitm-interactive-tool__head h2,
.yitm-interactive-tool__body h3,
.yitm-interactive-tool__result h3{
  color:var(--ict-ink)!important;
  -webkit-text-fill-color:var(--ict-ink)!important;
  text-wrap:pretty;
}
.yitm-interactive-tool__head h2{margin:0;font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.12}
.yitm-interactive-tool__head p{max-width:72ch;margin:10px 0 0;color:var(--ict-copy)!important;-webkit-text-fill-color:var(--ict-copy)!important;line-height:1.65}
.yitm-interactive-tool__body{padding:clamp(20px,4vw,34px)}
.yitm-interactive-tool__progress-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;color:var(--ict-copy);font-size:.92rem;font-weight:700}
.yitm-interactive-tool__progress{width:100%;height:8px;overflow:hidden;border:0;border-radius:999px;background:#e8eef5;appearance:none}
.yitm-interactive-tool__progress::-webkit-progress-bar{background:#e8eef5;border-radius:999px}
.yitm-interactive-tool__progress::-webkit-progress-value{background:var(--ict-blue);border-radius:999px}
.yitm-interactive-tool__progress::-moz-progress-bar{background:var(--ict-blue);border-radius:999px}
.yitm-interactive-tool__question{margin:0;padding:0;border:0}
.yitm-interactive-tool__question legend{max-width:760px;margin:0 0 8px;padding:0;color:var(--ict-ink);font-size:clamp(1.2rem,2.2vw,1.55rem);font-weight:900;line-height:1.3;text-wrap:pretty}
.yitm-interactive-tool__help{margin:0 0 16px;color:var(--ict-copy);line-height:1.55}
.yitm-interactive-tool__choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.yitm-interactive-tool__choice{position:relative;display:flex;align-items:flex-start;min-height:58px;padding:15px 16px;border:2px solid var(--ict-line);border-radius:16px;background:#fff;color:var(--ict-ink);font-weight:800;line-height:1.35;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.yitm-interactive-tool__choice:hover{border-color:#a9bfd8;background:#f8fbff}
.yitm-interactive-tool__choice:has(input:checked){border-color:var(--ict-blue);background:#eef6ff;box-shadow:0 0 0 1px rgba(15,100,238,.08)}
.yitm-interactive-tool__choice:has(input:focus-visible){outline:3px solid var(--ict-amber);outline-offset:3px}
.yitm-interactive-tool__choice input{width:20px;height:20px;min-width:20px;margin:1px 11px 0 0;accent-color:var(--ict-blue)}
.yitm-interactive-tool__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.yitm-interactive-tool__button,
.yitm-interactive-tool__actions a{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 17px;border:2px solid var(--ict-blue);border-radius:12px;background:var(--ict-blue);color:#fff!important;-webkit-text-fill-color:#fff!important;text-decoration:none!important;font:inherit;font-weight:900;line-height:1.2;cursor:pointer
}
.yitm-interactive-tool__button:hover,
.yitm-interactive-tool__actions a:hover{background:var(--ict-blue-hover);border-color:var(--ict-blue-hover);color:#fff!important;-webkit-text-fill-color:#fff!important}
.yitm-interactive-tool__button--secondary{background:#fff!important;color:var(--ict-ink)!important;-webkit-text-fill-color:var(--ict-ink)!important;border-color:#b8c8da!important}
.yitm-interactive-tool__button--secondary:hover{background:#f4f8fc!important;color:var(--ict-ink)!important;-webkit-text-fill-color:var(--ict-ink)!important;border-color:#94a9bf!important}
.yitm-interactive-tool__button:focus-visible,
.yitm-interactive-tool__actions a:focus-visible{outline:3px solid var(--ict-amber)!important;outline-offset:3px!important}
.yitm-interactive-tool__button[disabled]{opacity:.58;cursor:wait}
.yitm-interactive-tool__message{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#fff3f1;color:#7a271a;font-weight:750;line-height:1.5}
.yitm-interactive-tool__loading{padding:24px;border:1px solid var(--ict-line);border-radius:18px;background:#fff;color:var(--ict-copy)}
.yitm-interactive-tool__result{padding:clamp(20px,4vw,34px)}
.yitm-interactive-tool__result-banner{padding:18px;border:1px solid #c9ded1;border-radius:18px;background:var(--ict-mint)}
.yitm-interactive-tool__result-banner--safety{border-color:#ecd38c;background:var(--ict-amber-soft)}
.yitm-interactive-tool__result-banner h3{margin:0 0 8px;font-size:clamp(1.35rem,2.5vw,1.8rem)}
.yitm-interactive-tool__result-banner p{margin:0;color:var(--ict-copy)!important;-webkit-text-fill-color:var(--ict-copy)!important;line-height:1.6}
.yitm-interactive-tool__next{margin-top:18px;padding:18px;border:1px solid var(--ict-line);border-radius:18px;background:#fff}
.yitm-interactive-tool__next strong{display:block;margin-bottom:5px;color:var(--ict-ink)}
.yitm-interactive-tool__next p{margin:0 0 12px;color:var(--ict-copy);line-height:1.55}
.yitm-interactive-tool__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.yitm-interactive-tool__panel{padding:18px;border:1px solid var(--ict-line);border-radius:18px;background:#fff}
.yitm-interactive-tool__panel h4{margin:0 0 10px;color:var(--ict-ink)!important;-webkit-text-fill-color:var(--ict-ink)!important;font-size:1.05rem}
.yitm-interactive-tool__panel ul{margin:0;padding-left:20px}
.yitm-interactive-tool__panel li{margin:8px 0;color:var(--ict-copy)!important;-webkit-text-fill-color:var(--ict-copy)!important;line-height:1.5}
.yitm-interactive-tool__links{display:grid;gap:10px;margin-top:18px}
.yitm-interactive-tool__link{display:block;padding:14px 16px;border:1px solid var(--ict-line);border-radius:14px;background:#fff;color:var(--ict-ink)!important;-webkit-text-fill-color:var(--ict-ink)!important;text-decoration:none!important}
.yitm-interactive-tool__link strong{display:block;color:var(--ict-blue)!important;-webkit-text-fill-color:var(--ict-blue)!important}
.yitm-interactive-tool__link span{display:block;margin-top:3px;color:var(--ict-copy)!important;-webkit-text-fill-color:var(--ict-copy)!important;font-size:.92rem;line-height:1.45}
.yitm-interactive-tool__link:hover{border-color:#a9bfd8;background:#f8fbff}
.yitm-interactive-tool__note{margin:18px 0 0;color:var(--ict-copy)!important;-webkit-text-fill-color:var(--ict-copy)!important;font-size:.9rem;line-height:1.55}
.yitm-interactive-tool__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:720px){
  .yitm-interactive-tool-host{padding:0 12px;margin:28px auto}
  .yitm-interactive-tool{border-radius:18px}
  .yitm-interactive-tool__choices,.yitm-interactive-tool__grid{grid-template-columns:1fr}
  .yitm-interactive-tool__choice{min-height:56px;padding:14px}
  .yitm-interactive-tool__actions{display:grid;grid-template-columns:1fr}
  .yitm-interactive-tool__button,.yitm-interactive-tool__actions a{width:100%;min-height:50px}
}
@media(prefers-reduced-motion:reduce){
  .yitm-interactive-tool__choice{transition:none}
}