/* Experivio styles — fluid and container-aware.
   Navigation: swipeable bottom bar (<= 760px wide) · top bar with a fixed logo and scrollable items (761–1023px) · left sidebar (>= 1024px).
   Page content does NOT key off the screen width: <main> is a size container, so cards, forms and two-column
   workspaces respond to the space actually available (which differs with and without the sidebar). */
:root{
  --bg:#f5f4ff;--card:#fff;--ink:#1d1b3a;--mut:#5c587f;--pri:#5b3fd9;--pri2:#2f6bff;--line:#e2dff5;--soft:#efecff;
  --warn:#fff4d6;--wink:#6b4a00;--ok:#1c8a5a;--bad:#b42318;--focus:#ffb703;
  --r:clamp(12px,.6vw + 8px,16px);--sh:0 1px 2px rgba(40,30,120,.06),0 6px 18px rgba(40,30,120,.06);
  --gap:clamp(10px,1.2vw + 4px,20px);--pad:clamp(14px,1vw + 10px,24px);
  --side:clamp(232px,15vw,272px);--navh:64px;color-scheme:light;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14122b;--card:#1e1b3d;--ink:#eeedff;--mut:#b0acdb;--pri:#9b86ff;--pri2:#6ea0ff;--line:#34305f;--soft:#2a2656;--warn:#3d3210;--wink:#ffe3a0;--ok:#4cd08f;--bad:#ff9a8a;--sh:none;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#14122b;--card:#1e1b3d;--ink:#eeedff;--mut:#b0acdb;--pri:#9b86ff;--pri2:#6ea0ff;--line:#34305f;--soft:#2a2656;--warn:#3d3210;--wink:#ffe3a0;--ok:#4cd08f;--bad:#ff9a8a;--sh:none;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;max-width:100%;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:clamp(15px,.25vw + 14px,17.5px);line-height:1.55}
h1{margin:0 0 6px;font-size:clamp(1.4rem,1.1vw + 1.05rem,2rem);font-weight:700;letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
h2{margin:0 0 8px;font-size:clamp(1.05rem,.4vw + .95rem,1.3rem);font-weight:650;line-height:1.3;text-wrap:balance}
h3{margin:12px 0 6px;font-size:clamp(1rem,.25vw + .95rem,1.15rem);font-weight:650}
p{margin:6px 0}.mut{color:var(--mut)}.big{font-size:1.15em;font-weight:700}
img,svg,video{max-width:100%}
a{color:var(--pri2)}
/* Long words, links and pasted text wrap instead of pushing the layout wider. */
main{overflow-wrap:break-word}
.ai,.m,.pill,td,th,summary,.chip,.warn,.card h3,.card p{overflow-wrap:anywhere}
.btn,.chip,label,summary{hyphens:auto}

/* ---------- shell ---------- */
.app{min-height:100vh;min-height:100dvh}
main{display:block;width:100%;max-width:1920px;margin:0 auto;padding:clamp(14px,2.2vw,40px) clamp(12px,2.4vw,44px) clamp(28px,3vw,56px);min-width:0;container:main / inline-size;animation:in .25s}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
nav{background:linear-gradient(160deg,#3b2aa8,#2f6bff);color:#fff;z-index:20}
.logo{display:flex;align-items:center;gap:10px;flex:none;min-width:0}.logo .emark{flex:none;width:30px;height:30px}.logo .ewrd{display:block;height:20px;width:auto;color:currentColor}.logo .logo-txt{display:flex;align-items:center}.logo>div{min-width:0}.logo b{display:block;font-size:18px;line-height:1.15;white-space:nowrap}.logo small{display:block;font-size:12px;opacity:.9;white-space:nowrap}
/* Desktop sidebar: the brand area is a link-style button that opens Home (rendered only at 1024px+). */
.logo.logo-home{width:100%;margin:0;padding:6px 8px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease}
.logo.logo-home:hover{background:rgba(255,255,255,.08)}
.logo.logo-home:active{background:rgba(255,255,255,.12)}
.logo.logo-home:focus{outline:none}
.logo.logo-home:focus-visible{outline:3px solid var(--focus,#ffb703);outline-offset:2px}
.logo-home .logo-txt{display:block;min-width:0}
@media(prefers-reduced-motion:reduce){.logo.logo-home{transition:none}}
@media(forced-colors:active){.logo.logo-home:focus-visible{outline:2px solid Highlight}}
nav select{min-height:40px;padding:7px 10px;border-radius:10px;border:0;font:inherit;font-size:14px;background:#fff;color:#1d1b3a;width:100%;min-width:0}
.navwrap{position:relative;display:flex;align-items:center;gap:4px;min-width:0}
.navscroll{display:flex;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-behavior:smooth}
.navscroll::-webkit-scrollbar{display:none}
.navscroll button{display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;font:inherit;cursor:pointer;border-radius:10px;transition:background .15s;min-height:44px}
.navscroll button:hover{background:rgba(255,255,255,.14)}
.navscroll button.on{background:rgba(255,255,255,.22);font-weight:700}
.navscroll button span{white-space:nowrap}
.navscroll button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.navarrow{display:none;flex:none;width:36px;height:36px;min-height:36px;padding:0;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;cursor:pointer}
.navarrow:hover{background:rgba(255,255,255,.3)}

/* Laptops and desktops: left sidebar (never needs to scroll sideways; scrolls vertically on short windows) */
@media(min-width:1024px){
  .app{display:grid;grid-template-columns:var(--side) minmax(0,1fr)}
  nav{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:clamp(12px,2.2vh,22px) 14px;display:flex;flex-direction:column;gap:clamp(8px,2vh,18px)}
  .navwrap,.navscroll{display:block;overflow:visible}
  .navscroll button{width:100%;padding:clamp(6px,1.2vh,11px) 12px;margin:2px 0;text-align:left}
  .navscroll button.on{box-shadow:inset 3px 0 0 #fff}
}

/* Tablets and narrow windows: top bar; the logo stays put and only the items scroll */
@media(min-width:761px) and (max-width:1023px){
  html{scroll-padding-top:calc(var(--navh) + 12px)}
  nav{position:sticky;top:0;display:flex;align-items:center;gap:12px;padding:6px max(14px,env(safe-area-inset-right,0px)) 6px max(14px,env(safe-area-inset-left,0px))}
  nav select{width:clamp(108px,14vw,160px);flex:none}
  .navwrap{flex:1 1 0}
  .navscroll{flex:1 1 0;scroll-snap-type:x proximity}
  .navscroll button{flex:1 0 auto;min-width:56px;justify-content:center;flex-direction:column;gap:2px;padding:6px 6px;font-size:12.5px;scroll-snap-align:center} /* seven tabs fit in one row at tablet widths */
  .navscroll button.on{box-shadow:inset 0 -3px 0 #fff}
  .navwrap.can-left .navarrow.l,.navwrap.can-right .navarrow.r{display:inline-flex}
}
@media(min-width:761px) and (max-width:900px){.logo small{display:none}.logo>div{display:none}}
/* Short screens (landscape tablets, zoomed windows): don't pin the top bar, so content keeps the space */
@media(min-width:761px) and (max-width:1023px) and (max-height:560px){nav{position:relative}html{scroll-padding-top:12px}}

/* Phones: swipeable bottom bar with snap points, inside the safe area */
@media(max-width:760px){
  nav{position:fixed;left:0;right:0;bottom:0;padding:4px env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-shadow:0 -2px 12px rgba(0,0,0,.18)}
  .logo,nav select{display:none}
  .navscroll{scroll-snap-type:x mandatory}
  .navscroll button{flex:1 0 76px;min-width:76px;justify-content:center;flex-direction:column;gap:2px;padding:6px 4px;font-size:12px;scroll-snap-align:center}
  .navscroll button.on{box-shadow:inset 0 3px 0 #fff}
  main{padding-bottom:calc(var(--navh) + 24px)}
  /* While the on-screen keyboard is open, hide the bar so it never covers the field being typed in. */
  body.typing nav{display:none}
  body.typing main{padding-bottom:24px}
  .navwrap.can-right:not(.can-left) .navscroll{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .navwrap.can-left:not(.can-right) .navscroll{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}
  .navwrap.can-left.can-right .navscroll{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
}

/* ---------- surfaces ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);margin:var(--gap) 0;box-shadow:var(--sh);min-width:0}
.hero{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border:0;padding:clamp(18px,1.6vw + 12px,32px)}
.hero h2{color:#fff;font-size:clamp(1.25rem,.8vw + 1.05rem,1.7rem);margin-bottom:4px}
.hero>p{max-width:60ch;opacity:.95}
.hero .btn{background:#fff;color:#3b2aa8;font-size:1.02rem;padding:12px 20px;box-shadow:0 2px 10px rgba(20,10,80,.18)}
.heroacts{margin-top:14px;gap:10px 14px}
.lnkbtn{min-height:44px;padding:10px 14px;border-radius:10px;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.lnkbtn:hover{background:rgba(255,255,255,.12)}
.heroproj{margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.12);max-width:44rem}
.heroname{font-size:1.1rem;font-weight:700;margin:0 0 8px}
.herobar{height:10px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden}.herobar i{display:block;height:100%;background:#fff;border-radius:99px}
.herometa{margin:8px 0 0;font-size:.95rem}
.heroswitch{margin-top:12px;max-width:22rem}.heroswitch label{color:#fff;margin-top:0}.heroswitch select{background:#fff;color:#1d1b3a;border:0}
@container main (max-width:480px){.heroacts .btn,.heroacts .lnkbtn{width:100%}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--gap)}
.grid .card{margin:0}
.tool{text-align:left;font:inherit;color:inherit;width:100%;display:block;cursor:pointer;transition:transform .15s,border-color .15s}
.tool:hover{transform:translateY(-2px);border-color:var(--pri)}
.tool[aria-pressed="true"]{outline:3px solid var(--pri);background:var(--soft)}.tool p{margin:4px 0}
/* Idea cards: as many columns as fit at a comfortable reading width (min ~19.5rem, max ~44rem each). */
.ideas{display:grid;gap:var(--gap);margin:var(--gap) 0;grid-template-columns:repeat(auto-fill,minmax(min(100%,19.5rem),1fr))}
@container main (min-width:1500px){.ideas{grid-template-columns:repeat(auto-fill,minmax(22rem,1fr))}}
.ideas .card{margin:0;display:flex;flex-direction:column}
.idea h3{font-size:clamp(1.02rem,.3vw + .95rem,1.15rem);margin:8px 0}
.idea .acts{margin-top:auto;padding-top:6px}
.idea .acts .row{margin-top:6px}.idea .acts .btn{flex:1 1 auto}
/* When one card is expanded, the others keep their own height instead of stretching to match it. */
.ideas:has(details[open]),.ideas:has(.ai[role="region"]){align-items:start}
/* Two-column workspaces appear only when the content area (not the screen) is wide enough. */
.split,.duo{display:grid;gap:0 var(--gap);grid-template-columns:minmax(0,1fr);align-items:start}
@container main (min-width:900px){.split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.form2{display:grid;gap:4px var(--gap);grid-template-columns:minmax(0,1fr)}
@container main (min-width:640px){.form2{grid-template-columns:repeat(2,minmax(0,1fr))}.form2 .wide{grid-column:1/-1}}
@container main (min-width:1240px){.form2.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fld{min-width:0;display:flex;flex-direction:column}.fld textarea{flex:1}
.designer{display:grid;gap:0 var(--gap);grid-template-columns:minmax(0,1fr)}
@container main (min-width:860px){
  .designer{grid-template-columns:minmax(180px,220px) minmax(0,1fr);align-items:start}
  .designer>.steps{flex-direction:column;flex-wrap:nowrap;position:sticky;top:16px}
  .designer>.steps button{width:100%;border-radius:12px;justify-content:flex-start}
}
.readable{max-width:min(100%,72rem)}

/* ---------- controls ---------- */
label{display:block;font-weight:650;margin:12px 0 4px;font-size:.9rem}
input,textarea,select{width:100%;max-width:100%;min-width:0;min-height:44px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:max(16px,1em)}
textarea{min-height:88px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--pri2);border-color:transparent}
input[aria-invalid="true"]{border-color:#d9480f;background:var(--warn)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border:0;border-radius:10px;padding:10px clamp(12px,1vw + 6px,18px);font:inherit;font-weight:650;cursor:pointer;margin:6px 6px 0 0;max-width:100%;text-align:center;line-height:1.25}
.btn.alt{background:var(--soft);color:var(--ink)}
.btn:disabled,button:disabled{opacity:.5;cursor:not-allowed}
.btn:not(:disabled):hover{filter:brightness(1.06)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:0}
.row>*{min-width:0}
.row .btn{margin:0}
.chip{min-height:36px;padding:6px 12px;border-radius:99px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--soft);border-color:var(--pri);font-weight:650}
.chips{margin-top:8px}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:24px;height:24px;min-height:24px;border-radius:7px;border:2px solid var(--pri);background:var(--bg);cursor:pointer;display:inline-grid;place-content:center;padding:0;flex:none}
input[type=checkbox]:checked{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent}
input[type=checkbox]:checked::after{content:"";width:12px;height:7px;border:solid #fff;border-width:0 0 2.5px 2.5px;transform:translate(0,-1px) rotate(-45deg)}
summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:650;color:var(--pri)}

/* ---------- status & feedback ---------- */
.warn{background:var(--warn);color:var(--wink);border-radius:12px;padding:12px 14px;font-size:.95rem}
.err{color:var(--bad)}
.ai{white-space:pre-wrap;background:var(--soft);border-radius:12px;padding:12px 14px;margin-top:10px;font-size:.95rem;max-width:75ch}.ai:empty{display:none}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;background:var(--soft);color:var(--ink);font-size:12px;margin:2px;max-width:100%}
.warnpill{background:var(--warn);color:var(--wink);font-weight:700}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#9aa0b8;margin-right:6px;vertical-align:1px}.dot.on{background:var(--ok)}
.savebar{display:flex;gap:6px 12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 12px;margin-bottom:var(--gap);font-size:.875rem;color:var(--mut)}
.savebar>span{min-width:0}
.savebar .btn{margin:0;min-height:40px;padding:6px 12px;font-size:.875rem}.savebar .row{gap:6px}
@container main (max-width:560px){.savebar .row{width:100%}.savebar .row .btn{flex:1 1 auto;padding:6px 8px;white-space:nowrap}}
.aistat{white-space:nowrap}
#toast{position:fixed;left:50%;bottom:calc(var(--navh) + 16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#1d1b3a;color:#fff;padding:10px 16px;border-radius:12px;display:none;z-index:40;width:max-content;max-width:min(92vw,560px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
@media(min-width:761px){#toast{bottom:24px}}
@media(min-width:1024px){#toast{left:calc(50% + var(--side) / 2)}}
.detload{color:var(--pri);font-weight:600;display:flex;align-items:center;gap:6px}.detload .ic{animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.okline{color:var(--ok);font-weight:600}
.modelbox{border-top:1px solid var(--line);margin-top:12px;padding-top:4px}

/* ---------- progress, steps, levels ---------- */
.bar{height:10px;background:var(--soft);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--pri2));transition:width .4s}
.row .bar{width:100px;flex:none}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.steps button{display:inline-flex;align-items:center;gap:5px;border:0;color:var(--ink);font:inherit;min-height:44px;padding:6px 12px;border-radius:99px;background:var(--soft);font-size:.82rem;cursor:pointer}
.steps .on{background:var(--pri);color:#fff}
@container main (max-width:420px){.steps{gap:5px}.steps button{padding:6px 10px}}
.tbar{height:14px;background:var(--soft);border-radius:99px;overflow:hidden;margin:10px 0}.tbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2f6bff,#5b3fd9,#b03bff);transition:width .4s}
.tbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tbtns button{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;font:inherit;font-weight:700;padding:10px 6px;cursor:pointer;min-height:44px;min-width:0}
.tbtns button.on{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-color:transparent}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:var(--gap)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;min-width:0}.stat b{display:block;font-size:clamp(1.5rem,1vw + 1.1rem,2rem);color:var(--pri)}.stat span{color:var(--mut);font-size:.875rem}
.check{list-style:none;padding:0;margin:0}
.lnk{background:none;border:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer;padding:6px 4px;width:100%;border-radius:8px;min-height:44px}.lnk:hover{background:var(--soft)}
.cb{display:inline-flex;width:22px;height:22px;border-radius:7px;border:2px solid var(--pri);align-items:center;justify-content:center;font-size:14px;font-weight:800;vertical-align:middle;margin-right:6px;color:#fff}.cb.on{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent}

/* ---------- tables & charts ---------- */
/* Only large tables scroll, inside their own box (position:relative keeps screen-reader labels inside it too). */
.scroll{overflow-x:auto;max-width:100%;position:relative;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
table{border-collapse:collapse;width:100%}
td,th{padding:6px;text-align:left;font-size:.875rem;vertical-align:middle}
.datatab td input{min-width:68px;padding:7px}
td select{min-width:68px}
.datatab td:first-child input{min-width:110px}
.datatab th{font-weight:650;color:var(--mut)}
.stattab{font-variant-numeric:tabular-nums}
.stattab thead th{border-bottom:2px solid var(--line);color:var(--mut);font-weight:650}
.stattab tbody th{max-width:16ch}
.stattab tbody tr:nth-child(even){background:var(--soft)}
.stattab td{text-align:right}
/* The chart is drawn at the size of its box (see chartSVG), so it is never stretched and labels stay ~11–12px. */
#chart{min-width:0}
#chart svg{display:block;width:100%;height:auto}
svg text{font-family:inherit}

/* ---------- AI coach ---------- */
.coachcard{max-width:min(100%,64rem)}
.chat{max-height:max(240px,min(62dvh,720px));min-height:120px;overflow:auto;overscroll-behavior:contain}
.m{padding:10px 12px;border-radius:12px;margin:8px 0;white-space:pre-wrap;width:fit-content;max-width:min(88%,68ch)}.m.u{background:var(--pri);color:#fff;margin-left:auto}.m.a{background:var(--soft)}
.chat.full{height:clamp(280px,52dvh,720px);max-height:none}/* a steady size once chatting: new messages scroll inside it instead of pushing the message box down */
.coachsug{overflow:hidden;transition:height .25s ease,opacity .2s ease,margin .25s ease}.coachsug.out{opacity:0;margin-top:0;margin-bottom:0;pointer-events:none}
.coachnew{margin-top:6px;text-align:right}
@media(prefers-reduced-motion:reduce){.coachsug{transition:none}}:root[data-motion="off"] .coachsug{transition:none}
.askbar{display:flex;gap:8px;align-items:stretch;margin-top:10px}.askbar input{flex:1 1 auto;min-width:0}.askbar .btn{margin:0;flex:none}

/* ---------- accessibility ---------- */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:#fff;color:#1d1b3a;padding:10px 14px;border-radius:10px;z-index:50}.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
main:focus{outline:none}
.ic{vertical-align:-3px;flex:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.btn,.chip,.steps button{border:1px solid ButtonText}}

/* ---------- Step 6: research blueprint workspace ---------- */
.small{font-size:.85rem}
.bphead .legend{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.stc{display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px;font-size:.75rem;font-weight:650;border:1.5px solid transparent;white-space:nowrap}
.st-ai{background:#fff4d6;color:#6b4a00;border-color:#f1d48a;border-style:dashed}
.st-edited{background:#e8f0ff;color:#1d3f8f}
.st-approved{background:#e3f6ec;color:#11633f}
.st-review{background:#ffe9e3;color:#8a2a10}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .st-ai{background:#3d3210;color:#ffe3a0}:root:not([data-theme="light"]) .st-edited{background:#1f2c55;color:#bcd0ff}:root:not([data-theme="light"]) .st-approved{background:#123a28;color:#9be8c0}:root:not([data-theme="light"]) .st-review{background:#4a1f14;color:#ffc2b0}}
.bpwrap{display:grid;gap:0 var(--gap);grid-template-columns:minmax(0,1fr);align-items:start}
@container main (min-width:1100px){.bpwrap{grid-template-columns:minmax(0,1fr) minmax(280px,340px)}.bpside{position:sticky;top:12px;max-height:calc(100dvh - 24px);overflow:auto}}
.bpside .card{margin-top:0}
.bptabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
.bptabs button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer}
.bptabs button.on{background:var(--pri);color:#fff;border-color:transparent}
.bptabs .secl{display:inline-grid;place-content:center;width:20px;height:20px;border-radius:6px;background:var(--soft);color:var(--pri);font-weight:800;font-size:.75rem}
.bptabs button.on .secl{background:rgba(255,255,255,.25);color:#fff}
.bptabs .cnt{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#fff4d6;color:#6b4a00;font-size:12px;font-weight:800;display:inline-grid;place-content:center}
.bpf{margin:14px 0;min-width:0}
.bpfh{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.bpfh label{margin:0}
.bpacts{margin-top:6px}.bpacts .btn{min-height:40px;padding:6px 12px;font-size:.85rem}
.bpout:empty{display:none}
.hintbox,.fbbox,.verbox,.sugbox{border-radius:12px;padding:10px 14px;margin-top:8px;font-size:.95rem}
.hintbox{background:var(--soft)}.fbbox{background:var(--soft)}.fbbox ul{margin:4px 0 8px;padding-left:20px}
.sugbox{background:#fff8e6;border:1.5px dashed #f1d48a;color:var(--ink)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .sugbox{background:#2b2410;border-color:#6b5520}}
.verbox{border:1px solid var(--line)}
.verrow{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px solid var(--line)}.verrow span{min-width:0;flex:1}.verrow .btn{margin:0;min-height:40px}
.bpitem{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0;background:var(--bg)}
.bpitem .row .btn{min-height:40px;padding:6px 12px;font-size:.85rem}
.itemtag{margin:0 0 4px;font-size:.78rem;font-weight:700;color:var(--pri);text-transform:uppercase;letter-spacing:.04em}
.minigrid{display:grid;gap:4px 12px;grid-template-columns:minmax(0,1fr)}
@container main (min-width:620px){.minigrid{grid-template-columns:repeat(2,minmax(0,1fr))}.minigrid .wide{grid-column:1/-1}}
@container main (min-width:1300px){.bpitem .minigrid{grid-template-columns:repeat(4,minmax(0,1fr))}.bpitem .minigrid .wide{grid-column:span 2}}
.mini label{font-size:.8rem;margin:6px 0 2px;color:var(--mut)}.mini input,.mini select{min-height:42px;padding:8px 10px}
.hypbox{margin-top:18px;padding-top:6px;border-top:2px solid var(--line)}
.inlinecheck{display:flex;gap:8px;align-items:center;font-weight:500}
.matsum{background:var(--soft);border-radius:12px;padding:12px 14px;margin-bottom:8px}.matsum .bar{margin-bottom:6px}
.preview{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:16px;background:var(--bg)}
.preview dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:6px 0}.preview dt{font-weight:650;color:var(--mut)}.preview dd{margin:0;overflow-wrap:anywhere}
@container main (max-width:420px){.preview dl{grid-template-columns:minmax(0,1fr)}.preview dd{margin-bottom:6px}}
.secnav{margin-top:18px;justify-content:space-between}
.lnk2{background:none;border:0;color:var(--pri2);font:inherit;text-decoration:underline;cursor:pointer;padding:0 2px;min-height:36px}
.unitline .warn,.unitline .okline{margin:10px 0}
/* ---------- Judging Practice: microphone ---------- */
.microw{align-items:center}
#mic.on{background:linear-gradient(135deg,#b42318,#d9480f);color:#fff}
.micstat{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-weight:700;font-size:.9rem;background:var(--soft);color:var(--ink)}
.micstat[hidden]{display:none}
.micstat.live{background:color-mix(in srgb,#d92d20 12%,var(--card));color:#b42318}
.micdot{width:10px;height:10px;border-radius:50%;background:#d92d20;box-shadow:0 0 0 0 rgba(217,45,32,.5)}
:root:not([data-motion="off"]) .micstat.live .micdot{animation:micpulse 1.6s ease-out infinite}
@keyframes micpulse{0%{box-shadow:0 0 0 0 rgba(217,45,32,.45)}100%{box-shadow:0 0 0 10px rgba(217,45,32,0)}}
@media(prefers-reduced-motion:reduce){.micstat.live .micdot{animation:none}}
.micmsg{display:grid;gap:6px;margin:10px 0;padding:12px 14px;border-radius:14px;border:1px solid color-mix(in srgb,#d97706 45%,var(--line));background:var(--warn);color:var(--wink)}
.micmsg[hidden]{display:none}
.micmsg b{display:flex;align-items:center;gap:6px}
.micmsg.consent{border-color:color-mix(in srgb,var(--pri) 40%,var(--line));background:color-mix(in srgb,var(--pri) 7%,var(--card));color:var(--ink)}
.micmsg .row .btn{margin:0}
:root[data-theme="dark"] .micstat.live{color:#ff9a8a}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .micstat.live{color:#ff9a8a}}
/* ---------- Judging Practice: the judge's voice ---------- */
.jvoice{align-items:center;position:relative}
#jhear[aria-pressed="true"]{border-color:var(--pri);color:var(--pri)}
.jwave{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 4px}
.jwave[hidden]{display:none}
.jwave i{display:block;width:4px;height:8px;border-radius:2px;background:linear-gradient(var(--pri),var(--pri2));opacity:.8}
:root:not([data-motion="off"]) .jwave i{animation:jwave 1.1s ease-in-out infinite}
.jwave i:nth-child(2){animation-delay:.15s!important}.jwave i:nth-child(3){animation-delay:.3s!important}.jwave i:nth-child(4){animation-delay:.45s!important}
@keyframes jwave{0%,100%{height:6px}50%{height:18px}}
@media(prefers-reduced-motion:reduce){.jwave i{animation:none!important;height:12px}}
.vset{position:relative}
.vset>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer}
.vset>summary::-webkit-details-marker{display:none}
.vset[open]>summary{border-color:var(--pri);color:var(--pri)}
.vset-b{display:grid;gap:8px;margin-top:8px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--sh);max-width:30rem}
.vset-b label[for]{font-weight:700;font-size:.9rem}.vset-b select{width:100%}
.vset-b .btn{margin:0;justify-self:start}
.vstyles{border:0;margin:0;padding:0;display:grid;gap:6px}.vstyles legend{font-weight:700;font-size:.9rem;margin-bottom:4px}
.vsty{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.vsty input{width:18px;height:18px;min-height:0;margin:3px 0 0;accent-color:var(--pri)}
.vsty b{display:block;font-size:.92rem}.vsty small{color:var(--mut)}
.vsty:has(input:checked){border-color:var(--pri);background:color-mix(in srgb,var(--pri) 7%,var(--card))}
.vspeed{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.vspeed span{font-weight:700;font-size:.9rem;margin-right:4px}
.vspeed .co-chip{margin:0;min-height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
.vspeed .co-chip[aria-pressed="true"]{background:color-mix(in srgb,var(--pri) 14%,var(--card));border-color:var(--pri);color:var(--pri)}