/* Component styles for pages with a strict CSP (no inline <style>). Same rules the components inject
   themselves when this file is absent (tests/fixtures/harness.html). Keep in sync with:
   src/js/player.js (CSS), src/js/pdfview.js (CSS), src/js/embed.js (CSS), src/js/protect.js (print + user-select). */

/* player.js */
.pk-player{position:relative;background:#000;color:#fff;font-family:Lexend,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;container-type:inline-size}
.pk-player video{width:100%;height:100%;display:block;background:#000}
.pk-player.pk-pseudo-fs{position:fixed!important;inset:0;width:100vw!important;height:100vh!important;height:100dvh!important;z-index:2147482000;border-radius:0}
.pk-controls{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:nowrap;align-items:center;gap:4px;padding:6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.75));z-index:2147482500}
.pk-controls button{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;background:transparent;color:#fff;border:0;border-radius:8px;font:inherit;cursor:pointer;position:relative}
.pk-controls button:hover,.pk-controls button[aria-expanded="true"]{background:rgba(255,255,255,.18)}
.pk-controls button:focus-visible{outline:2px solid #D7B46A;outline-offset:1px}
.pk-controls svg{width:24px;height:24px;display:block}
.pk-controls .pk-seek{flex:1 1 auto;min-width:60px;margin:0 4px;accent-color:#D7B46A}
.pk-controls .pk-time{flex:none;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums;padding:0 2px}
.pk-player .pk-i-pause,.pk-player.is-playing .pk-i-play,.pk-player .pk-i-shrink,.pk-player.is-fs .pk-i-expand{display:none}
.pk-player.is-playing .pk-i-pause,.pk-player.is-fs .pk-i-shrink{display:block}
.pk-controls [data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:6px;background:rgba(20,6,10,.92);color:#fff;font-size:12.5px;line-height:1.3;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
.pk-controls .pk-tip-end::after{left:auto;right:0;transform:none}
.pk-controls .pk-tip-start::after{left:0;transform:none}
.pk-controls [data-tip]:focus-visible::after{opacity:1}
/* Hover shows the tooltip only on a device that hovers: a tap on a touch screen leaves :hover set, and the word would
   stay on screen (Tú 11/11/2026: no visible text with a universal icon). Same for the PDF bar and the embed button. */
@media (hover:hover) and (pointer:fine){.pk-controls [data-tip]:hover::after{opacity:1}}
.pk-controls [aria-expanded="true"]::after{opacity:0!important}
.pk-menu{position:absolute;right:8px;bottom:54px;z-index:2147482600;display:flex;gap:4px;max-height:calc(100% - 62px);overflow:auto;padding:6px;border-radius:10px;background:rgba(20,6,10,.94);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.pk-menu[hidden]{display:none}
.pk-menu__col{display:flex;flex-direction:column;min-width:96px}
.pk-menu__head{margin:0;padding:4px 10px 6px;font-size:12px;font-weight:600;color:#F0E0B8;text-transform:uppercase;letter-spacing:.04em}
.pk-menu button{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:#fff;font:inherit;font-size:14px;text-align:left;cursor:pointer;white-space:nowrap}
.pk-menu button::before{content:"";width:14px;flex:none}
.pk-menu button[aria-checked="true"]::before{content:"\2713";color:#D7B46A}
.pk-menu button:hover,.pk-menu button:focus-visible{background:rgba(255,255,255,.14);outline:none}
@container (max-width:360px){.pk-controls .pk-dur{display:none}}
@container (max-width:480px){.pk-menu{bottom:50px;max-height:calc(100% - 56px)}.pk-menu button{min-height:30px}.pk-menu__head{padding-bottom:4px}}
/* Touch screens: 44 x 44 px targets (40 px measured on iPhone 14, 11/11/2026). The bar grows from 52 to 56 px, so the
   menu keeps its distance to the bar: 2 px above it, or 2 px over it in a small player. Same 44 px for the PDF bar and
   the embed button below. */
@media (pointer:coarse){.pk-controls button{width:44px;height:44px}.pk-menu{bottom:58px;max-height:calc(100% - 66px)}}
@container (max-width:480px){@media (pointer:coarse){.pk-menu{bottom:54px;max-height:calc(100% - 60px)}}}

/* pdfview.js */
.pk-pdf{position:relative;display:flex;flex-direction:column;background:#EFE4DF;color:#33161F;font-family:Lexend,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}
.pk-pdf.pk-pseudo-fs{position:fixed!important;inset:0;width:100vw!important;height:100vh!important;height:100dvh!important;z-index:2147482000}
.pk-pdf-bar{position:relative;z-index:2147482500;flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:2px;padding:4px 6px;background:#FFFDFB;border-bottom:2px solid #F0DFDA}
.pk-pdf-bar button{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:transparent;color:#7A1232;cursor:pointer;position:relative}
.pk-pdf-bar button:hover{background:#FCF1F3}
.pk-pdf-bar button:focus-visible{outline:2px solid #C79C47;outline-offset:1px}
.pk-pdf-bar svg{width:22px;height:22px;display:block}
.pk-pdf-bar .pk-page,.pk-pdf-bar .pk-zoom{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 4px;min-width:3.2em;text-align:center}
.pk-pdf-bar .pk-gap{flex:1 1 auto}
.pk-pdf .pk-i-shrink,.pk-pdf.is-fs .pk-i-expand{display:none}
.pk-pdf.is-fs .pk-i-shrink{display:block}
.pk-pdf-bar [data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:6px;background:rgba(20,6,10,.92);color:#fff;font-size:12.5px;line-height:1.3;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:1}
.pk-pdf-bar .pk-tip-start::after{left:0;transform:none}
.pk-pdf-bar .pk-tip-end::after{left:auto;right:0;transform:none}
.pk-pdf-bar [data-tip]:focus-visible::after{opacity:1}
@media (hover:hover) and (pointer:fine){.pk-pdf-bar [data-tip]:hover::after{opacity:1}}
/* 5 buttons of 44 px, page and zoom text, 7 gaps and the padding need 336 px; a phone narrower than 340 px drops the
   gaps and most of the side padding (314 px, the bar needed 316 px with 40 px buttons). */
@media (pointer:coarse){.pk-pdf-bar button{width:44px;height:44px}}
@media (pointer:coarse) and (max-width:339px){.pk-pdf-bar{gap:0;padding:4px 2px}}
.pk-pdf-pages{flex:1 1 auto;min-height:0;max-height:80vh;overflow:auto;overscroll-behavior:contain;text-align:center;padding:12px}
.pk-pdf.is-fs .pk-pdf-pages{max-height:none}
.pk-pdf-slot{margin:0 auto 12px}
.pk-pdf-slot:last-child{margin-bottom:0}
.pk-pdf-slot canvas{display:inline-block;background:#fff;box-shadow:0 1px 3px rgba(51,22,31,.18)}

/* embed.js */
.pk-embed{position:relative;background:#000;overflow:hidden}
.pk-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pk-embed.pk-pseudo-fs{position:fixed!important;inset:0;width:100vw!important;height:100vh!important;height:100dvh!important;z-index:2147482000;border-radius:0}
.pk-embed .pk-embed-fs{position:absolute;top:8px;right:8px;z-index:2147482500;display:grid;place-items:center;width:40px;height:40px;padding:0;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:8px;cursor:pointer}
.pk-embed .pk-embed-fs svg{width:24px;height:24px;display:block}
.pk-embed .pk-i-shrink,.pk-embed.is-fs .pk-i-expand{display:none}
.pk-embed.is-fs .pk-i-shrink{display:block}
.pk-embed .pk-embed-fs::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:0;padding:4px 8px;border-radius:6px;background:rgba(20,6,10,.92);color:#fff;font:12.5px/1.3 Lexend,system-ui,sans-serif;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
.pk-embed .pk-embed-fs:focus-visible::after{opacity:1}
@media (hover:hover) and (pointer:fine){.pk-embed .pk-embed-fs:hover::after{opacity:1}}
@media (pointer:coarse){.pk-embed .pk-embed-fs{width:44px;height:44px}}

/* protect.js: protectPage() adds html.pk-protected */
html.pk-protected [data-protected], html.pk-protected .lesson-content { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.pk-protected input, html.pk-protected textarea, html.pk-protected [contenteditable] { -webkit-user-select: text; user-select: text; }
@media print {
  html.pk-protected body > *, html.pk-protected [data-protected], html.pk-protected .lesson-content,
  html.pk-protected video, html.pk-protected canvas { display: none !important; }
  html.pk-protected body::before { content: "Nội dung bài học không in được."; display: block; }
}

/* Contact and social icons: ui.js initSupportLinks (sign-in pages, classroom), the public footer and /contact
   (tools/build_public_pages.py). One link per channel: the brand's own logo from /img/icons/ in its official colours,
   no tile, 28 px, in one horizontal row. The link is a 44 px square (padding, not a bigger glyph), its aria-label is
   its accessible name. The short label shows no text at rest on any device (Tú 11/11/2026: a universal icon carries
   no visible text, touch screens included); it is a tooltip on keyboard focus, and on hover only on a device that
   hovers, so a tap on a touch screen shows nothing. The tooltip opens BELOW the icon, inside space the row reserves
   for it (padding-bottom), so it never covers the heading above or the content below (coordinator's finding 11/11;
   tests/e2e/text-layout.spec.js "icon labels", tests/e2e/icons.spec.js). */
.cicons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; }
.cicons > li { margin: 0; }
.cicon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); text-decoration: none; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.cicon > img { display: block; width: 28px; height: 28px; transition: transform .15s ease-out; }
/* zalo.png is Zalo's own 512 px app icon (chat.zalo.me/favicon-512x512.png, unmodified): its squircle fills 412 of
   the 512 px (80.5%), the rest is transparent margin. Drawn 32 px in the 28 px slot (negative margin keeps the slot),
   so the visible icon is 25.8 px, the size the previous drawn icon showed beside Messenger. Hero sizes: public.css.
   max-width: none, because app.css `img { max-width: 100% }` would clamp the width to the slot and squash it. */
.cicon--zalo > img { width: 32px; height: 32px; margin: -2px; max-width: none; }
.cicon__label {
  position: absolute; top: calc(100% + 6px); left: 50%; z-index: 5;
  transform: translate(-50%, -4px); opacity: 0; pointer-events: none;
  padding: 6px 12px; border-radius: 8px; background: var(--ink); color: var(--canvas);
  font-size: 13.5px; font-weight: 600; line-height: 1.25; text-align: center;
  white-space: nowrap; box-shadow: var(--shadow-float); transition: opacity .12s, transform .12s;
}
.cicon__label::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-bottom-color: var(--ink); }
.cicon__name { display: block; }
.cicon__detail { display: block; font-size: 13px; font-weight: 500; }
.cicon:focus-visible .cicon__label { opacity: 1; transform: translate(-50%, 0); }
.cicon:hover > img, .cicon:focus-visible > img { transform: translateY(-2px) scale(1.1); }
.cicon:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 1px; }
/* In a left-aligned row the first tooltip starts at the icon's left edge, so it never leaves the screen. */
.cicons--dark > li:first-child .cicon__label { left: 0; transform: translate(0, -4px); }
.cicons--dark > li:first-child .cicon:focus-visible .cicon__label { transform: none; }
.cicons--dark > li:first-child .cicon__label::after { left: 22px; }
/* A touch screen reserves no room at rest; a keyboard there (tablet, phone with a keyboard) opens it on focus. */
.cicons:has(.cicon:focus-visible) { padding-bottom: 58px; }
@media (hover: hover) and (pointer: fine) {
  .cicons { padding-bottom: 58px; }
  .cicon:hover .cicon__label { opacity: 1; transform: translate(-50%, 0); }
  .cicons--dark > li:first-child .cicon:hover .cicon__label { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cicon > img, .cicon__label { transition: none; }
  .cicon:hover > img, .cicon:focus-visible > img { transform: none; }
}
/* On a dark band (the public footer) */
.cicons--dark { justify-content: flex-start; }
.cicons--dark .cicon:focus-visible { outline-color: var(--gold-400); }
.cicons--dark .cicon__label { background: var(--cream-text); color: var(--ink); }
.cicons--dark .cicon__label::after { border-bottom-color: var(--cream-text); }
.support .support__label { margin-bottom: 12px; }

/* Tú's short-text rule (UAT 11/11/2026), sign-in pages and 404: short blocks wrap balanced; each sentence of a
   short block is a <span class="line"> (app.css), from the HTML or from setLines() in ui.js for script text.
   Checked by tests/e2e/text-layout.spec.js. */
.auth p, .auth li { text-wrap: balance; }