/* Tool hero: the navy LootDrop band with the tool's own art bleeding in from the right.
   Usage: <section class="app-head hero" style="--art:url(/assets/thumbs/x.jpg?v=2)"> ... <div class="hero-art" aria-hidden="true"></div></section>
   The thumbnail's left third carries its title lettering, so the art is anchored right and masked so only the illustration shows. */
.app-head.hero{padding-block:0;position:relative;overflow:hidden;background:#071326;color:#F5F9FF;border-bottom:0;isolation:isolate}
.app-head.hero .wrap{position:relative;z-index:2;min-height:236px;padding-block:24px 26px;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:18px}
/* the art is laid out at its true 16:9 size against the right edge; the mask drops the thumbnail's own title lettering (its left half) */
.app-head.hero .hero-art{position:absolute;z-index:1;top:0;bottom:0;right:max(0px,calc((100vw - 1500px) / 2));aspect-ratio:16/9;height:100%;
  background:var(--art) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent var(--fade-a,57%),#000 var(--fade-b,71%));mask-image:linear-gradient(90deg,transparent var(--fade-a,57%),#000 var(--fade-b,71%))}
.app-head.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;z-index:3;background:linear-gradient(90deg,var(--yellow) 0 62%,var(--blue) 62% 100%)}
.app-head.hero .app-title{max-width:min(560px,100%)}
.app-head.hero .app-title .badge-ic{display:none}
.app-head.hero .app-title h1{font-size:clamp(40px,5.6vw,68px);font-weight:900;letter-spacing:-.035em;line-height:.95;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 28px rgba(53,184,245,.35)}
.app-head.hero .app-title p{font-size:15.5px;color:#C4D3E6;max-width:46ch;margin-top:10px;line-height:1.45}
.app-head.hero .crumb-t{color:#8FA6C2}
.app-head.hero .actions{position:relative;z-index:2;margin-left:0}
@media (max-width:760px){
  .app-head.hero .wrap{min-height:0;padding-block:26px 24px}
  .app-head.hero .hero-art{right:-38%;opacity:.42}
  .app-head.hero .app-title h1{font-size:clamp(36px,11vw,48px)}
}
/* students and projector views stay compact */
.student .app-head.hero .wrap,.boardmode .app-head.hero .wrap{min-height:0;padding-block:18px 16px}
.student .app-head.hero .app-title h1{font-size:clamp(28px,4vw,38px)}
@media print{.app-head.hero .hero-art,.app-head.hero::after{display:none}}

/* Tool pages: the tool's name already sits in the top bar, so the hero shrinks to one quiet row:
   a short line about the tool on the left, the tool's buttons on the right. No art, no giant title. */
html.tool-page:not(.rx-student) .app-head.hero .hero-art,
html.tool-page:not(.rx-student) .app-head.hero .crumb-t{display:none}
html.tool-page:not(.rx-student) .app-head.hero .app-title h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.tool-page:not(.rx-student) .app-head.hero::after{height:3px}
html.tool-page:not(.rx-student) .app-head.hero .wrap{min-height:0;padding-block:4px 16px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px}
html.tool-page:not(.rx-student) .app-head.hero .app-title{max-width:min(640px,100%)}
html.tool-page:not(.rx-student) .app-head.hero .app-title p{margin-top:0;font-size:14.5px;color:#9FB2CA;max-width:64ch}
html.tool-page:not(.rx-student) .app-head.hero .actions .btn.lg{padding:10px 18px;font-size:15px}
@media (max-width:760px){html.tool-page:not(.rx-student) .app-head.hero .wrap{padding-block:2px 14px}}
html.tool-page:not(.rx-student) .app-head.hero .wrap{display:flex}
html.tool-page:not(.rx-student) .app-head.hero .app-title{flex:1 1 380px}
html.tool-page:not(.rx-student) .app-head.hero .actions{flex:0 0 auto;margin-left:auto;margin-top:0}
.tool-page .topbar{border-bottom:0}
@media (max-width:760px){html.tool-page:not(.rx-student) .app-head.hero .actions{margin-left:0}}

/* Tool pages sit on pure white (light theme only) so the tool cards pop */
@media not (prefers-color-scheme: dark){html.tool-page:not([data-theme="dark"]){--bg:#FFFFFF;--hq-page:#FFFFFF}}
html.tool-page[data-theme="light"]{--bg:#FFFFFF;--hq-page:#FFFFFF}
html.tool-page .tool-foot{background:transparent}