/* =========================================================
   A) DESIGN TOKENS
   ========================================================= */
:root{
  --bg:#f7f7fb;
  --card:#ffffff;
  --ink:#172033;
  --muted:#5a6473;
  --accent:#0b6efd;                /* primary blue for misc UI */
  --good:#117a37; --warn:#cc8b00; --high:#b54800; --ext:#a40000;
  /* warm gradient for the intro button */
  --warmA:#ffb703;  /* amber */
  --warmB:#ff7a18;  /* orange */
  --warmC:#ff3b30;  /* red */
}

/* =========================================================
   B) PAGE WRAPPER + MAIN LAYOUT
   ========================================================= */
.wt-wrap{
  box-sizing:border-box;
  width:95vw; max-width:95vw;
  margin:24px auto; padding:0 16px; color:var(--ink);
  margin-left:calc(50% - 47.5vw); margin-right:calc(50% - 47.5vw);
}
.wt-layout{display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:980px){
  .wt-layout{grid-template-columns:minmax(0,1.6fr) minmax(280px,0.9fr);}
}
.wt-sticky{position:sticky;top:120px}

/* =========================================================
   C) TOOL (cards, fields, results)
   ========================================================= */
.wt-card{background:var(--card);border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,.08);padding:22px;}
.wt-title{margin:0 0 8px;font-size:28px;}
.wt-lead{margin:0 0 16px;color:var(--muted);}

.wt-fieldset{border:1px solid #e7e7ef;border-radius:10px;padding:14px;margin:0 0 14px;}
.wt-fieldset legend{padding:0 6px;color:#27324a;font-weight:600;}

.wt-row{display:grid;gap:12px;grid-template-columns:1fr;}
@media (min-width:720px){
  .wt-two{grid-template-columns:1fr 1fr;}
  .wt-three{grid-template-columns:repeat(3,1fr);}
}

.wt-row label{display:block;font-size:14px;margin:6px 0 8px;}
.wt-checks label{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #ececf2;border-radius:10px;background:#fff;}
select{width:100%;padding:10px 12px;border:1px solid #d8d9e2;border-radius:10px;background:#fff;font:inherit;}
.wt-hint{font-size:12px;color:var(--muted);margin-top:4px;}

.wt-result{margin-top:8px;padding:14px;border-radius:10px;background:#fbfcff;border:1px solid #e6ebff;}
.wt-live{box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:#dfe6ff}
.wt-band{font-weight:700;}
.wt-band.low{color:var(--good);} .wt-band.med{color:var(--warn);}
.wt-band.high{color:var(--high);} .wt-band.ext{color:var(--ext);}
.wt-scoreline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wt-scorenum{font-weight:700;}
.wt-bar{flex:1 1 160px;min-width:160px;height:8px;border-radius:6px;background:#eef2ff;overflow:hidden;}
.wt-bar-fill{display:block;height:100%;background:linear-gradient(90deg,#2caf5b,#f0b400,#d06f2d,#b31212);}

.wt-toplist{margin:8px 0 0 18px;padding:0;} .wt-toplist li{margin:4px 0;}
.wt-fix-label{font-weight:600;}
.wt-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.wt-btn{cursor:pointer;padding:10px 14px;border-radius:10px;border:1px solid #ced5ff;background:var(--accent);color:#fff;font:inherit;}
.wt-btn.ghost{background:#fff;color:var(--accent);border-color:var(--accent);}
.wt-small{font-size:12px;color:var(--muted);}
.wt-foot{margin:8px 0 0;text-align:center;}
.wt-server{margin:14px 0;} .wt-detail p{margin:8px 0 0;}
.wt-topfix{margin-top:10px;}
.wt-audio{margin-top:12px;padding:10px;border:1px dashed #c9d2ff;border-radius:10px;background:#fcfdff;}
.wt-extalert{background:#ffecec;border:1px solid #ffb3b3;color:#8b0000;padding:10px;border-radius:10px;margin:0 0 10px;font-weight:700;}
.wt-server-mount{margin:0 0 16px;}

/* =========================================================
   D) INTRO — TWO-COLUMN GRID (LEFT: combined, RIGHT: audio)
   ========================================================= */
#wt-intro.wt-compact{ padding:12px 12px 10px; border-radius:14px; }
#wt-intro .wt-introgrid{
  display:grid; gap:12px; align-items:stretch;
  grid-template-columns:minmax(340px,1fr) minmax(260px,1fr);
}
@media (max-width:880px){ #wt-intro .wt-introgrid{ grid-template-columns:1fr; } }

/* Intro cards: equal height + bottom-aligned footers */
#wt-intro .wt-card{
  background:#fff;border:1px solid #eef4ff;border-radius:12px;padding:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  display:flex;flex-direction:column;min-height:100%;
}
#wt-intro .wt-card > *:last-child{ margin-top:auto; }  /* push last element to bottom */

#wt-intro .wt-card-title{font-weight:700;color:#162d5b;margin-bottom:8px}
#wt-intro .wt-card-copy{margin:0 0 12px;color:#3c4a68}
#wt-intro .wt-card-note{margin-top:10px;font-size:12px;color:#5c6f93}
#wt-intro .wt-footnote{ margin-top:6px; font-size:11px; color:#5c6f93; }

#wt-intro .wt-tight{ padding:10px; }
#wt-intro .wt-tight-list{ margin:0; padding-left:16px; line-height:1.45; }

/* Combined left card separator */
#wt-intro .wt-card-block + .wt-card-block{ margin-top:8px; }
#wt-intro .wt-divider{ height:1px; background:#eef4ff; border-radius:1px; margin:8px 0; }

/* Score & bands list with colored left stripes */
#wt-intro .wt-score-card .wt-bandlist{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
}
#wt-intro .wt-score-card .wt-banditem{
  position:relative;padding:10px 12px 10px 14px;border:1px solid #eef4ff;border-radius:10px;background:#fff;
  box-shadow:0 1px 0 rgba(11,110,253,0.03);
}
#wt-intro .wt-score-card .wt-banditem::before{
  content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:6px;
  border-top-left-radius:10px; border-bottom-left-radius:10px;
}
#wt-intro .wt-score-card .wt-banditem span{ color:#2b3a55; font-size:12.5px; line-height:1.3; }
#wt-intro .wt-banditem.wt-low::before  { background:#22b573; }
#wt-intro .wt-banditem.wt-med::before  { background:#f0ad00; }
#wt-intro .wt-banditem.wt-high::before { background:#ff6a00; }
#wt-intro .wt-banditem.wt-ext::before  { background:#d90429; }
#wt-intro .wt-score-card .wt-score-note{ margin:8px 0 0; font-size:12.5px; color:#3c4a68; }

/* Ultra-compact option (add wt-mini on #wt-intro) */
#wt-intro.wt-mini{ padding:8px 8px 8px; }
#wt-intro.wt-mini .wt-card{ padding:8px; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,.05); }
#wt-intro.wt-mini .wt-card-title{ font-size:13px; margin-bottom:4px; }
#wt-intro.wt-mini .wt-card-copy{ font-size:12px; margin:0 0 8px; }
#wt-intro.wt-mini .wt-footnote, #wt-intro.wt-mini .wt-card-note{ font-size:11px; }
#wt-intro.wt-mini .wt-tight-list{ font-size:12.5px; line-height:1.35; padding-left:14px; }
#wt-intro.wt-mini .wt-score-card .wt-bandlist{ gap:6px; }
#wt-intro.wt-mini .wt-score-card .wt-banditem{ padding:6px 8px 6px 10px; border-radius:8px; }
#wt-intro.wt-mini .wt-score-card .wt-banditem::before{ width:4px; }
#wt-intro.wt-mini .wt-score-card .wt-score-note{ font-size:12px; margin-top:6px; }
@media (max-width:640px){
  #wt-intro{ padding:10px 10px 8px; }
  #wt-intro .wt-card{ padding:10px; }
  #wt-intro .wt-card-title{ margin-bottom:6px; font-size:13.5px; }
}

/* =========================================================
   E) INTRO BUTTON — WARM GRADIENT
   ========================================================= */
#wt-intro .wt-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border:0;border-radius:12px;cursor:pointer;font-weight:700;
  position:relative;overflow:hidden;isolation:isolate;
}
#wt-intro .wt-btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--warmA) 0%, var(--warmB) 45%, var(--warmC) 100%);
  box-shadow:0 10px 28px rgba(255,122,24,.24), 0 2px 6px rgba(255,122,24,.12);
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
#wt-intro .wt-btn-primary:hover{ transform:translateY(-1px); filter:saturate(1.08) brightness(1.02); }
#wt-intro .wt-btn-primary:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(255,122,24,.22), 0 1px 4px rgba(255,122,24,.18); }
#wt-intro .wt-btn-primary:focus{ outline:none; box-shadow:0 0 0 3px rgba(255,183,3,.35), 0 10px 28px rgba(255,122,24,.24); }
#wt-intro .wt-btn-primary::after{
  content:""; position:absolute; inset:-40% -60% auto auto; width:140%; height:200%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 75%);
  transform:translateX(-100%) rotate(8deg); pointer-events:none; transition:transform .6s ease;
}
#wt-intro .wt-btn-primary:hover::after{ transform:translateX(0) rotate(8deg); }
#wt-intro .wt-btn-dot{ width:18px; height:18px; border-radius:50%; background:#fff; opacity:.95; }
#wt-intro .wt-btn.wt-btn-sm{ padding:9px 12px; border-radius:10px; box-shadow:0 5px 14px rgba(11,110,253,.22); }

/* =========================================================
   F) AUDIO MODAL (incl. height limits)
   ========================================================= */
.wt-modal-overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:9999;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55));
  backdrop-filter:saturate(130%) blur(6px); animation:wtFadeIn .18s ease-out;
}
@keyframes wtFadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.wt-modal-overlay{animation:none}}

.wt-modal{
  position:relative;width:min(900px,92vw);border-radius:20px;overflow:hidden;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(11,110,253,.12), transparent 40%),
    radial-gradient(1200px 500px at 110% 110%, rgba(91,181,255,.12), transparent 40%),
    linear-gradient(180deg,#ffffff, #f9fbff);
  box-shadow:0 22px 60px rgba(0,0,0,.28), 0 8px 24px rgba(11,110,253,.12);
  transform:translateY(8px) scale(.98);opacity:0;animation:wtPop .22s ease-out forwards;
}
@keyframes wtPop{to{transform:translateY(0) scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.wt-modal{animation:none;opacity:1;transform:none}}

.wt-modal-border{
  pointer-events:none;position:absolute;inset:0;border-radius:22px;padding:1px;
  background:conic-gradient(from 180deg at 50% 50%, #5bb5ff, #0b6efd, #5bb5ff, #0b6efd);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude; opacity:.22;
}
.wt-modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid #eef4ff;background:linear-gradient(180deg,#f7fbff,#ffffff)}
.wt-modal-titlewrap{display:flex;align-items:center;gap:10px}
.wt-modal-icon{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#0b6efd,#5bb5ff);box-shadow:0 0 0 4px rgba(11,110,253,.12)}
.wt-modal-title{margin:0;font-weight:800;color:#0b6efd;font-size:16px}
.wt-iconbtn{border:0;background:#edf4ff;color:#0b6efd;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:700}
.wt-iconbtn:hover{background:#e6f0ff}

.wt-modal-body{padding:14px 16px 16px}
.wt-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.wt-embed iframe{position:absolute;inset:0;width:100%;height:100%}

.wt-credits{font-size:12px;color:#6a7ea3;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-credits a{color:#6a7ea3;text-decoration:none}
.wt-credits a:hover{text-decoration:underline}

/* Height limits for intro audio modal */
#wtIntroAudioModal [role="document"]{ max-height:50vh !important; }
#wtIntroEmbedWrap{ height:clamp(200px,36vh,320px) !important; }
@media (max-width:640px){
  #wtIntroAudioModal [role="document"]{ max-height:64vh !important; }
  #wtIntroEmbedWrap{ height:clamp(180px,34vh,280px) !important; }
}

/* Lock page scroll while any modal is open */
.wt-lock-scroll{ overflow:hidden; }

/* =========================================================
   G) HELP TOOLTIP
   ========================================================= */
.wt-helpbar{position:relative;display:flex;justify-content:flex-end;align-items:center;margin:8px 0 12px}
.wt-helpbtn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#0b6efd,#5bb5ff);color:#fff;font-weight:700;
  padding:8px 12px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.wt-helpicon{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff;color:#0b6efd;font-weight:800;line-height:1}

.wt-helptip{position:absolute;top:calc(100% + 10px);right:0;z-index:999;
  width:min(520px,92vw);background:#fff;border:1px solid #e6f0ff;border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.18), 0 8px 22px rgba(11,110,253,.12);
  transform-origin:90% 0;transform:scale(.98) translateY(-6px);opacity:0;pointer-events:none;
  transition:opacity .16s ease, transform .16s ease}
.wt-helptip.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}

.wt-helptip-arrow{position:absolute;top:-8px;right:24px;width:16px;height:16px;transform:rotate(45deg);
  background:#fff;border-left:1px solid #e6f0ff;border-top:1px solid #e6f0ff}
.wt-helptip-inner{padding:14px 14px 10px}
.wt-helptip-title{margin:0 0 6px 0;font-weight:800;color:#0b6efd}
.wt-helptip-list{margin:0 0 8px 20px;color:#2b3a55;line-height:1.55}
.wt-helptip-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wt-tiplink{border:0;background:#edf4ff;color:#0b6efd;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:700}
.wt-tiplink:hover{background:#e6f0ff}
.wt-tipclose{margin-left:auto;border:0;background:linear-gradient(135deg,#0b6efd,#5bb5ff);color:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:800}
/* Force the intro into TWO columns on desktop, ONE on mobile */
#wt-intro .wt-introgrid{
  display: grid !important;                 /* override any stray flex from theme */
  grid-template-columns: 1fr 1fr !important;/* two equal columns */
  gap: 12px !important;
  align-items: stretch !important;          /* equal heights */
}

/* Stack to one column on narrower screens */
@media (max-width: 880px){
  #wt-intro .wt-introgrid{
    grid-template-columns: 1fr !important;
  }
}

/* Make sure each card fills its grid cell and no floats interfere */
#wt-intro .wt-card{
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  width: 100% !important;
  float: none !important;                   /* belt-and-braces against theme floats */
}
#wt-intro .wt-card > *:last-child{ margin-top: auto; } /* pin footer to bottom */


/* --- Tokens --- */
:root{
  --ink:#172033; --muted:#5a6473; --card:#fff;
  --good:#117a37; --warn:#cc8b00; --high:#b54800; --ext:#d90429;
  --warmA:#ffb703; --warmB:#ff7a18; --warmC:#ff3b30; /* warm button gradient */
}

/* --- Intro grid: enforce two columns; stack on mobile --- */
#wt-intro .wt-introgrid{
  display:grid; gap:12px; align-items:stretch;
  /* Inline style sets 2 columns; this is a backup */
  grid-template-columns:minmax(320px,1fr) minmax(280px,1fr);
}
@media (max-width: 880px){
  /* Override inline grid columns on small screens */
  #wt-intro .wt-introgrid{ grid-template-columns:1fr !important; }
}

/* --- Cards (equal height, tidy bottoms) --- */
#wt-intro .wt-card{
  background:#fff;border:1px solid #eef4ff;border-radius:12px;padding:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  display:flex;flex-direction:column;min-height:100%;
}
#wt-intro .wt-card > *:last-child{ margin-top:auto; } /* footer to bottom */

#wt-intro .wt-card-title{font-weight:700;color:#162d5b;margin-bottom:8px}
#wt-intro .wt-card-copy{margin:0 0 12px;color:#3c4a68}
#wt-intro .wt-card-note{margin-top:10px;font-size:12px;color:#5c6f93}
#wt-intro .wt-footnote{ margin-top:6px; font-size:11px; color:#5c6f93; }
#wt-intro .wt-card-block + .wt-card-block{ margin-top:8px; }
#wt-intro .wt-divider{ height:1px; background:#eef4ff; border-radius:1px; margin:8px 0; }
#wt-intro .wt-tight-list{ margin:0; padding-left:16px; line-height:1.45; }

/* --- Score & bands (left color stripe + small labels) --- */
#wt-intro .wt-score-card .wt-bandlist{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
}
#wt-intro .wt-score-card .wt-banditem{
  position:relative;padding:8px 10px 8px 12px;border:1px solid #eef4ff;border-radius:10px;background:#fff;
  box-shadow:0 1px 0 rgba(11,110,253,0.03);
}
#wt-intro .wt-score-card .wt-banditem::before{
  content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:6px;
  border-top-left-radius:10px; border-bottom-left-radius:10px;
}
#wt-intro .wt-score-card .wt-banditem span{ color:#2b3a55; font-size:12.5px; line-height:1.3; }
#wt-intro .wt-banditem.wt-low::before  { background:#22b573; }
#wt-intro .wt-banditem.wt-med::before  { background:#f0ad00; }
#wt-intro .wt-banditem.wt-high::before { background:#ff6a00; }
#wt-intro .wt-banditem.wt-ext::before  { background:var(--ext); }
#wt-intro .wt-score-card .wt-score-note{ margin:8px 0 0; font-size:12.5px; color:#3c4a68; }

/* --- Warm gradient button --- */
#wt-intro .wt-btn{
  display:inline-flex;align-items:center;gap:10px;position:relative;overflow:hidden;isolation:isolate;
  padding:9px 12px;border:0;border-radius:10px;cursor:pointer;font-weight:700;
}
#wt-intro .wt-btn-primary{
  color:#fff;background:linear-gradient(135deg,var(--warmA), var(--warmB) 45%, var(--warmC));
  box-shadow:0 10px 28px rgba(255,122,24,.24), 0 2px 6px rgba(255,122,24,.12);
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
#wt-intro .wt-btn-primary:hover{ transform:translateY(-1px); filter:saturate(1.06) brightness(1.02); }
#wt-intro .wt-btn-primary:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(255,122,24,.22), 0 1px 4px rgba(255,122,24,.18); }
#wt-intro .wt-btn-primary:focus{ outline:none; box-shadow:0 0 0 3px rgba(255,183,3,.35), 0 10px 28px rgba(255,122,24,.24); }
#wt-intro .wt-btn-primary::after{
  content:""; position:absolute; inset:-40% -60% auto auto; width:140%; height:200%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 75%);
  transform:translateX(-100%) rotate(8deg); pointer-events:none; transition:transform .6s ease;
}
#wt-intro .wt-btn-primary:hover::after{ transform:translateX(0) rotate(8deg); }
#wt-intro .wt-btn-dot{ width:14px;height:14px;border-radius:50%;background:#fff;opacity:.95; }

/* --- Modal overlay & card --- */
.wt-modal-overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:9999;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55));
  backdrop-filter:saturate(130%) blur(6px); animation:wtIntroFade .18s ease-out;
}
@keyframes wtIntroFade{from{opacity:0}to{opacity:1}}

.wt-modal{
  position:relative;width:min(900px,92vw);border-radius:20px;overflow:hidden;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(11,110,253,.12), transparent 40%),
    radial-gradient(1200px 500px at 110% 110%, rgba(91,181,255,.12), transparent 40%),
    linear-gradient(180deg,#ffffff, #f9fbff);
  box-shadow:0 22px 60px rgba(0,0,0,.28), 0 8px 24px rgba(11,110,253,.12);
  transform:translateY(8px) scale(.98);opacity:0;animation:wtIntroPop .22s ease-out forwards;
}
@keyframes wtIntroPop{to{transform:translateY(0) scale(1);opacity:1}}

.wt-modal-border{pointer-events:none;position:absolute;inset:0;border-radius:22px;padding:1px;
  background:conic-gradient(from 180deg at 50% 50%, #5bb5ff, #0b6efd, #5bb5ff, #0b6efd);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.22}

.wt-modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid #eef4ff;background:linear-gradient(180deg,#f7fbff,#ffffff)}
.wt-modal-titlewrap{display:flex;align-items:center;gap:10px}
.wt-modal-icon{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#0b6efd,#5bb5ff);box-shadow:0 0 0 4px rgba(11,110,253,.12)}
.wt-modal-title{margin:0;font-weight:800;color:#0b6efd;font-size:16px}
.wt-iconbtn{border:0;background:#edf4ff;color:#0b6efd;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:700}
.wt-iconbtn:hover{background:#e6f0ff}

.wt-modal-body{padding:12px 14px 14px}
.wt-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.wt-embed iframe{position:absolute;inset:0;width:100%;height:100%}

/* Height limits so popup isn’t too tall; tweak if you like */
#wtIntroAudioModal [role="document"]{ max-height:50vh !important; }
#wtIntroEmbedWrap{ height:clamp(200px,36vh,320px) !important; }
@media (max-width:640px){
  #wtIntroAudioModal [role="document"]{ max-height:64vh !important; }
  #wtIntroEmbedWrap{ height:clamp(180px,34vh,280px) !important; }
}

/* Lock page scroll while modal is open (toggled in JS) */
.wt-lock-scroll{ overflow:hidden; }




/* Subtle, non-intrusive emphasis for sections A–H without changing layout */ /* 1) Gentle left accent + focus-within highlight */ #wtRiskForm .wt-fieldset{position:relative;border-left:3px solid #e6ecff;transition:border-color .15s ease, box-shadow .15s ease} #wtRiskForm .wt-fieldset:focus-within{border-left-color:#0b6efd;box-shadow:0 0 0 2px rgba(11,110,253,.06) inset} /* 2) Compact letter badge before each legend (A–H) */ #wtRiskForm .wt-fieldset legend{display:flex;align-items:center;gap:6px} #wtRiskForm .wt-fieldset legend::before{ content:""; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:999px; font-weight:800; font-size:13px; color:#0b6efd; background:#edf4ff; border:1px solid #dfe6ff; box-shadow:0 1px 2px rgba(0,0,0,.05) } /* 3) Letters mapped by order; colours rotate softly to avoid visual noise */ #wtRiskForm fieldset.wt-fieldset:nth-of-type(1) legend::before{content:"A"; background:#edf4ff; color:#0b6efd; border-color:#dfe6ff} #wtRiskForm fieldset.wt-fieldset:nth-of-type(2) legend::before{content:"B"; background:#eefaf3; color:#117a37; border-color:#d7eddc} #wtRiskForm fieldset.wt-fieldset:nth-of-type(3) legend::before{content:"C"; background:#fff7e6; color:#cc8b00; border-color:#ffe2a6} #wtRiskForm fieldset.wt-fieldset:nth-of-type(4) legend::before{content:"D"; background:#fff1e9; color:#b54800; border-color:#ffd9c6} #wtRiskForm fieldset.wt-fieldset:nth-of-type(5) legend::before{content:"E"; background:#edf4ff; color:#0b6efd; border-color:#dfe6ff} #wtRiskForm fieldset.wt-fieldset:nth-of-type(6) legend::before{content:"F"; background:#eefaf3; color:#117a37; border-color:#d7eddc} #wtRiskForm fieldset.wt-fieldset:nth-of-type(7) legend::before{content:"G"; background:#fff7e6; color:#cc8b00; border-color:#ffe2a6} #wtRiskForm fieldset.wt-fieldset:nth-of-type(8) legend::before{content:"H"; background:#fff1e9; color:#b54800; border-color:#ffd9c6} /* 4) Slight top/bottom breathing room so the new badge never wraps the legend */ @media (max-width:480px){ #wtRiskForm .wt-fieldset legend{gap:8px} } /* 5) Checkbox rows: faint outline on hover/focus to reinforce the section emphasis */ #wtRiskForm .wt-checks label{transition:box-shadow .12s ease, border-color .12s ease} #wtRiskForm .wt-checks label:has(input:focus-visible){box-shadow:0 0 0 2px rgba(11,110,253,.08) inset;border-color:#cfe0ff} #wtRiskForm .wt-checks label:hover{border-color:#dfe6ff}