/* B299 · Ask the Lab and Never miss a note, on both hubs and every note page (tools/hubask299.py).
   Ask the Lab is the front door of /ask/: the composer is the hero, real starters open the app with the question asked, and an
   example shows the numbered passages an answer is written from. Never miss a note is a subscription moment: the show's own cover,
   email first, then Spotify, Apple Podcasts and LinkedIn. Solid surfaces and depth, never outlines. Blue #1559F5 is the only accent;
   Scrubs' violet lives only inside its marks and art. Rubik for the interface, Source Serif for the notes' own words. */
.hx-ask,.hx-sub{--hx-ink:#0a1633;--hx-char:#3b4457;--hx-mute:#566074;--hx-blue:#1559F5;--hx-blue-ink:#0f46c9;--hx-tint:#eef3ff;--hx-well:#f2f4f9;
  --hx-s1:0 1px 2px rgba(10,22,51,.06),0 1px 1px rgba(10,22,51,.03);
  --hx-s2:0 1px 2px rgba(10,22,51,.05),0 8px 20px -8px rgba(10,22,51,.14);
  --hx-s3:0 1px 2px rgba(10,22,51,.06),0 22px 48px -18px rgba(10,22,51,.28);
  --hx-ease:cubic-bezier(.2,.7,.2,1);font-family:Rubik,system-ui,sans-serif;color:var(--hx-ink)}
.hx-ask *,.hx-sub *{box-sizing:border-box}
.hx-ask a,.hx-sub a{text-decoration:none!important;border-bottom:0!important;background-image:none!important}
.hx-ask svg,.hx-sub svg{flex:none}

/* ---------- Ask the Lab */
.hx-ask{padding:clamp(56px,6vw,96px) 0 0}
.hx-askin{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"main ex" "lib lib";gap:clamp(20px,2.4vw,32px);
  padding:clamp(22px,3.6vw,52px);border-radius:28px;background:var(--hx-well)}
.hx-askmain{grid-area:main;min-width:0;display:flex;flex-direction:column}
.hx-asktop{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.hx-kick{display:inline-flex;align-items:center;gap:10px;margin:0;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;box-shadow:var(--hx-s1);font:500 15px/1 Rubik,system-ui,sans-serif;color:var(--hx-blue-ink)}
.hx-kick img{width:26px;height:26px;display:block}
.hb .hx-ask h2.hx-h,.hx-ask .hx-h{font:480 clamp(44px,4.8vw,68px)/.98 "Source Serif 4",Georgia,serif;letter-spacing:-.03em;color:var(--hx-ink);margin:28px 0 0}
.hx-h em{font-style:italic;color:var(--hx-blue)}
.hx-dek{font:400 17.5px/1.55 Rubik,system-ui,sans-serif;color:var(--hx-char);margin:16px 0 0;max-width:34em}
.hx-comp{position:relative;display:flex;align-items:center;gap:10px;margin:28px 0 0;padding:9px 9px 9px 22px;border-radius:22px;background:#fff;box-shadow:var(--hx-s3);transition:box-shadow .2s}
.hx-comp:focus-within{outline:3px solid var(--hx-blue);outline-offset:3px}
.hx-comp input{flex:1;min-width:0;height:54px;border:0!important;outline:0;background:none!important;box-shadow:none!important;padding:0;margin:0;font:400 18px/1.4 Rubik,system-ui,sans-serif;color:var(--hx-ink);-webkit-appearance:none;appearance:none}
.hx-comp input::placeholder{color:#6b7385;opacity:1;text-overflow:ellipsis}
.hx-comp button{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:0;border-radius:50%;background:var(--hx-blue);color:#fff;cursor:pointer;box-shadow:0 8px 18px -8px rgba(21,89,245,.7);transition:background .15s,transform .2s var(--hx-ease)}
.hx-comp button svg{width:22px;height:22px}
.hx-comp button:hover{background:var(--hx-blue-ink)}
.hx-comp button:active{transform:scale(.95)}
.hx-comp button:focus-visible{outline:3px solid var(--hx-ink);outline-offset:3px}
.hx-tryh{font:500 13.5px/1.3 Rubik,system-ui,sans-serif;color:var(--hx-mute);margin:26px 0 10px}
.hx-chips{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hx-chips a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:12px 16px 12px 18px;border-radius:14px;background:#fff;box-shadow:var(--hx-s1);
  font:500 15.5px/1.35 Rubik,system-ui,sans-serif;color:var(--hx-ink)!important;transition:box-shadow .2s,transform .2s var(--hx-ease)}
.hx-chips a svg{width:18px;height:18px;color:var(--hx-blue);transition:transform .2s var(--hx-ease)}
.hx-chips a:hover{box-shadow:var(--hx-s2);transform:translateY(-1px)}
.hx-chips a:hover svg{transform:translateX(3px)}

/* the example: what an answer stands on */
.hx-ex{grid-area:ex;min-width:0;margin:0;align-self:start;padding:clamp(20px,2.2vw,28px);border-radius:22px;background:#fff;box-shadow:var(--hx-s2)}
.hx-extag{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0;font:400 13.5px/1.3 Rubik,system-ui,sans-serif;color:var(--hx-mute)}
.hx-extag span{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:var(--hx-tint);color:var(--hx-blue-ink);font:600 13px/1 Rubik,system-ui,sans-serif}
.hx-exq{margin:16px 0 0;padding:14px 18px;border-radius:16px 16px 4px 16px;background:var(--hx-ink);color:#fff;font:500 17px/1.4 Rubik,system-ui,sans-serif;width:fit-content;max-width:100%;margin-left:auto}
.hx-cites{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:4px}
.hx-cites a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;padding:12px 12px 12px 10px;margin:0 -10px;border-radius:14px;color:var(--hx-ink)!important;transition:background .15s}
.hx-cites a:hover{background:var(--hx-well)}
.hx-cites b{grid-row:span 2;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-top:2px;border-radius:8px;background:var(--hx-tint);color:var(--hx-blue-ink);font:600 13px/1 Rubik,system-ui,sans-serif;transition:background .15s,color .15s}
.hx-cites a:hover b{background:var(--hx-blue);color:#fff}
.hx-q{font:400 17.5px/1.45 "Source Serif 4",Georgia,serif;color:var(--hx-ink)}
.hx-q::before{content:"\201C"}
.hx-q::after{content:"\201D"}
.hx-qsrc{font:500 12.5px/1.3 Rubik,system-ui,sans-serif;color:var(--hx-mute)}
.hx-exfoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin:14px 0 0;padding:16px 0 0;box-shadow:0 -1px 0 #e9edf4}
.hx-promise{flex:1 1 220px;font:400 13.5px/1.45 Rubik,system-ui,sans-serif;color:var(--hx-mute)}
.hx-exgo,.hx-open{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--hx-tint);color:var(--hx-blue-ink)!important;font:500 15px/1 Rubik,system-ui,sans-serif;transition:background .15s,color .15s}
.hx-exgo svg,.hx-open svg{width:17px;height:17px;transition:transform .2s var(--hx-ease)}
.hx-exgo:hover,.hx-open:hover{background:var(--hx-blue);color:#fff!important}
.hx-exgo:hover svg,.hx-open:hover svg{transform:translateX(3px)}
.hx-open{grid-column:2;grid-row:1/span 2}

/* the library behind it */
.hx-lib{grid-area:lib;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 32px;padding:16px 16px 16px 22px;border-radius:18px;background:#fff;box-shadow:var(--hx-s1)}
.hx-libh{grid-column:1;margin:0;font:400 15px/1.3 Rubik,system-ui,sans-serif;color:var(--hx-char)}
.hx-libh b{font-weight:600;color:var(--hx-ink)}
.hx-libl{grid-column:1;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px}
.hx-libl li{display:flex;align-items:center;gap:12px;min-width:0}
.hx-lmark{display:block;height:26px;width:auto;flex:none}
.hx-lmeta{display:flex;flex-direction:column;gap:3px;font:400 13px/1.3 Rubik,system-ui,sans-serif;color:var(--hx-mute);min-width:0}
.hx-lmeta b{font:600 14px/1.2 Rubik,system-ui,sans-serif;color:var(--hx-ink)}

.hx-ask :focus-visible{outline:3px solid var(--hx-blue);outline-offset:3px}
.hx-comp input:focus-visible{outline:0}

@media (max-width:980px){
  .hx-askin{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "ex" "lib"}
  .hx-ex{align-self:stretch}
}
@media (max-width:640px){
  .hx-ask{padding-top:44px}
  .hx-askin{padding:18px 14px 14px;border-radius:24px;margin:0 -4px;gap:14px}
  .hb .hx-ask h2.hx-h,.hx-ask .hx-h{font-size:clamp(40px,12vw,52px);margin-top:22px}
  .hx-dek{font-size:16.5px}
  .hx-comp{margin-top:22px;padding:6px 6px 6px 16px;border-radius:18px}
  .hx-comp input{height:50px;font-size:17px}
  .hx-comp button{width:48px;height:48px}
  .hx-chips a{font-size:15px}
  .hx-ex{padding:18px 16px}
  .hx-exq{font-size:16px}
  .hx-q{font-size:16.5px}
  .hx-lib{grid-template-columns:minmax(0,1fr);padding:16px}
  .hx-libl{flex-direction:column;gap:14px}
  .hx-open{justify-content:center;grid-column:1;grid-row:auto}
}

/* ---------- Never miss a note */
.hx-sub{padding:clamp(56px,6vw,96px) 0}
.hx-sub-note{padding:clamp(40px,5vw,72px) 0}
.hx-subin{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:clamp(28px,4.4vw,64px);padding:clamp(24px,4vw,56px);border-radius:28px;background:var(--hx-ink);color:#fff}
.hx-sub-note .hx-subin{max-width:964px;margin:0 auto;grid-template-columns:minmax(0,240px) minmax(0,1fr)}
.hx-show{display:grid;gap:14px;min-width:0}
.hx-cover{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:20px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.hx-newest{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(255,255,255,.08);color:#fff!important;transition:background .15s}
.hx-newest:hover{background:rgba(255,255,255,.14)}
.hx-newest img{width:52px;height:52px;border-radius:10px;display:block}
.hx-newest>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.hx-nk{font:500 12.5px/1.2 Rubik,system-ui,sans-serif;color:#b9c3dc}
.hx-nt{font:500 15px/1.3 Rubik,system-ui,sans-serif;color:#fff;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hx-subtx{min-width:0}
.hx-subk{margin:0;font:500 14px/1.3 Rubik,system-ui,sans-serif;color:#b9c3dc}
.hx-sub h2,.hb .hx-sub h2,.px-art .hx-sub h2{font:600 clamp(32px,3.6vw,48px)/1.05 Rubik,system-ui,sans-serif!important;letter-spacing:-.025em!important;color:#fff!important;margin:10px 0 0!important}
.hx-subd{font:400 17px/1.55 Rubik,system-ui,sans-serif;color:#c9d1e4;margin:14px 0 0!important;max-width:32em}
.hx-mail{margin:26px 0 0;max-width:560px}
.hx-mail label{display:block;font:500 14.5px/1.4 Rubik,system-ui,sans-serif;color:#e4e9f5;margin:0 0 10px}
.hx-mrow{display:flex;gap:8px;padding:6px;border-radius:18px;background:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);transition:box-shadow .2s}
.hx-mrow:focus-within{outline:3px solid #fff;outline-offset:3px}
.hx-mrow input{flex:1;min-width:0;height:52px;padding:0 6px 0 14px;border:0!important;outline:0;border-radius:12px;background:#fff!important;box-shadow:none!important;color:var(--hx-ink);font:400 17px/1 Rubik,system-ui,sans-serif;-webkit-appearance:none;appearance:none}
.hx-mrow input::placeholder{color:#6b7385;opacity:1}
.hx-mrow input:focus-visible{outline:0}
.hx-mrow button{flex:none;height:52px;padding:0 22px;border:0;border-radius:13px;background:var(--hx-blue);color:#fff;font:600 16px/1 Rubik,system-ui,sans-serif;cursor:pointer;transition:background .15s,transform .2s var(--hx-ease)}
.hx-mrow button:hover{background:var(--hx-blue-ink)}
.hx-mrow button:active{transform:scale(.97)}
.hx-mrow button:focus-visible{outline:3px solid var(--hx-ink);outline-offset:-6px;box-shadow:inset 0 0 0 5px #fff}
.hx-also{margin:26px 0 0;padding:22px 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.12)}
.hx-alsoh{margin:0 0 12px;font:500 13.5px/1.3 Rubik,system-ui,sans-serif;color:#b9c3dc}
.hx-fol{margin:0!important;gap:8px!important}
.hx-fol .px-fbtn{margin:0;box-shadow:none}
.hx-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:16px 0 0;font:500 15px/1 Rubik,system-ui,sans-serif;color:#e4e9f5!important}
.hx-back svg{width:18px;height:18px}
.hx-back:hover{color:#fff!important}
.hx-sub :focus-visible{outline:3px solid #fff;outline-offset:3px}
.hx-sub .px-fbtn:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media (max-width:900px){
  .hx-subin,.hx-sub-note .hx-subin{grid-template-columns:minmax(0,1fr);align-items:start}
  .hx-show{grid-template-columns:112px minmax(0,1fr);align-items:center;gap:16px}
  .hx-cover{border-radius:16px}
  .hx-newest{align-self:center}
}
@media (max-width:640px){
  .hx-sub{padding:52px 0}
  .hx-sub-note{padding:36px 0}
  .hx-subin{padding:22px 18px 24px;border-radius:24px;margin:0 -4px;gap:22px}
  .hx-show{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .hx-newest{grid-template-columns:minmax(0,1fr);padding:12px 14px}
  .hx-newest img{display:none}
  .hx-subd{font-size:16px}
  .hx-mrow{flex-direction:column;padding:6px;gap:6px}
  .hx-mrow input{flex:none;width:100%;height:50px}
  .hx-mrow button{height:50px;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .hx-ask *,.hx-sub *{transition:none!important}
  .hx-chips a:hover,.hx-chips a:hover svg,.hx-exgo:hover svg,.hx-open:hover svg{transform:none}
}
@media print{.hx-ask,.hx-sub{display:none!important}}