/* [seo] The HUD's words are real HTML in the page (index.html: #hud, the initial HTML), and hud.js slots them into the HUD's shadow
   root. The shadow root's own styles (site/cinema.css and scroll.css, scoped by hud.js) give each slot's box its size, color and
   spacing; a slotted node inherits through it. Document CSS is what styles the nodes themselves, so the few rules the shadow sheets
   had for their insides (the body's paragraphs, the statement's strong, the tagline's b) are here, the same values.
   Nothing here hides text: a chapter's words show when the film is at that chapter, as the callouts' boxes do. */

/* ?hud=off and ?capture have no HUD (the lab's own page): no words either */
html:not(.hud) #hud { display: none; }
/* [rawcopy] (Q, Oct 9, a screenshot of every chapter's words run together over the page: "What is this blackhat SEO stuff happening?")
   html.hud is set at the first paint (index.html) but the shadow root only after hud.js has fetched its sheets, and until then the
   words, as the page's own children, showed as plain text over the film (or the inside page, coming in by a link). They wait for the
   shadow root now (hud.js adds .hud-ready the moment it is attached; after that only the slotted words render, each in its place) */
#hud:not(.hud-ready) > * { display: none !important; }
#hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }

/* the words that live in a slot: no box of their own (the slot's container is the box), the type inherited */
#hud > [slot="tagline"], #hud > [slot="note"], #hud > [slot="head-title"], #hud > [slot="head-sub"], #hud > [data-part] { display: contents; margin: 0; font: inherit; }
#hud > [slot="tagline"] b { font-weight: 700; }                       /* cinema.css: .tagline b */
#hud > [data-part="statement"] strong { color: var(--amber, #ffaf43); } /* cinema.css: #statement strong */
#hud > [data-part="body"] .hl { color: var(--amber, #ffaf43); font-weight: 700; }   /* [hl] (Q, Oct 9) words picked out in a chapter's body: the job titles, "free Mac app for job hunters" */
#hud > [data-part="body"] p { margin: 0 0 26px; text-wrap: pretty; }  /* cinema.css: #body p (26px on a narrow panel, 21px from 801px) */
@media (min-width: 801px) { #hud > [data-part="body"] p { margin: 0 0 21px; } #hud > [data-part="body"] > :last-child { margin-bottom: 0; } }   /* cinema.css: #body p:last-child (from 801px) */
/* the lines that carry a feature: a small amber title over its words, as the callouts' boxes do (callouts.css .co-title) */
#hud > [data-part="body"] h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; letter-spacing: .16px; line-height: 1.25; color: var(--amber, #ffaf43); text-wrap: balance; }
#hud > [data-part="body"] h3 + p { text-wrap: pretty; }

/* the plain link slotted into a chapter-bar tab's label (hud.js: <slot name="tab-N">; index.html: <a slot="tab-5" href="app">): it looks like the label it stands in for */
#hud > a[slot^="tab-"] { display: contents; color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; cursor: inherit; -webkit-tap-highlight-color: transparent; }

/* [download] (Oct 10) the note's "Intel Mac?" link: the cursor's amber, underlined, and clickable through the HUD (which takes no pointer) */
#hud > [slot="note"] a { color: #F1C78E; text-decoration: underline; text-underline-offset: 2px; pointer-events: auto; }
#hud > [slot="note"] a:hover { color: #FFAF43; }