/* GoConqr redesign · study.css · STUDY area (resource pages around today's players, courses, error pages).
   Ported from the mock-up's goconqr-design/full-site/study/study.css: the page parts these pages use (Información,
   rating, facts, text sections, results, course pages, certificate, print). The mock's native viewers (cards, map
   canvas, note pages, slides) are 1b work and not here: today's players run in their own frame document.
   Tokens from site.css only; no site.css component is restyled. Every class starts with "study-". */

/* 1 · The player frame ------------------------------------------------------------------------ */
/* Today's player document fills the surface. The frame fits the screen (sizes fix 5, 20 Oct): as tall as the players'
   own caps (680 px; notes and slides 760) but never taller than the screen below the page's header, so the whole
   player is on screen when the page opens (1280×720 up). --study-above = what sits above the frame on load (site
   header, breadcrumbs and title block, the frame's borders) plus a 16 px margin under it. Pure CSS (vh/dvh, clamp),
   so nothing moves after load. Phones get most of the screen (inline frames: deep links), or the full-screen player. */

.study-frame { --study-above: 300px; display: flex; flex-direction: column; background: var(--paper-2); }
@media (min-width: 900px) { .study-frame { --study-above: 324px; } }
@media (min-width: 1100px) { .study-frame { --study-above: 263px; } }
.study-frame-doc { display: block; width: 100%; height: clamp(440px, calc(100vh - var(--study-above)), 680px); height: clamp(440px, calc(100dvh - var(--study-above)), 680px); border: 0; background: #fff; opacity: 0; transition: opacity .15s ease-out; }
.study-frame.is-ready .study-frame-doc { opacity: 1; }
.study-frame--note .study-frame-doc, .study-frame--slides .study-frame-doc { height: clamp(440px, calc(100vh - var(--study-above)), 760px); height: clamp(440px, calc(100dvh - var(--study-above)), 760px); }
@media (max-width: 639px) { .study-frame-doc, .study-frame--note .study-frame-doc, .study-frame--slides .study-frame-doc { height: clamp(420px, 72vh, 640px); } }
/* Phones: the player frame waits for a tap (_surface .is-tap); the page leads with the resource as text below */
.study-tap { display: none; }
.study-frame.is-tap .study-frame-doc, .study-frame.is-tap .study-frame-wait { display: none; }
.study-frame.is-tap { background: var(--paper); }
.study-frame.is-tap .study-tap { display: flex; flex-direction: column; }
.study-tap-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
/* today's lead image (SEO review 17 Oct): full width, a fixed 3:2 box so nothing shifts while it loads */
.study-tap-hero { aspect-ratio: 3 / 2; min-height: 0; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--rule); cursor: pointer; }
.study-tap-hero picture { display: block; height: 100%; }
.study-tap-hero img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }
/* the text's images wait for the lead image or the player (_surface .rd-img-hold): a lazy image with no box is not fetched */
@media screen { .rd-img-hold .study-text img[loading="lazy"] { display: none; } }
/* no picture (sizes fix 8): a placeholder card with a play button, as today's phone page; CSS and the inline sprite */
.study-tap-ph { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); background: color-mix(in srgb, var(--c, var(--ink-3)) 12%, var(--paper)); border-bottom: 1px solid var(--rule); color: var(--c, var(--ink-2)); cursor: pointer; }
.study-tap-ph-type { position: absolute; left: -6%; bottom: -14%; display: block; width: 62%; aspect-ratio: 1; opacity: .16; }
.study-tap-ph-type .i { width: 100%; height: 100%; stroke-width: 1.2; }
.study-tap-ph-play { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-1); color: var(--c, var(--accent)); }
.study-tap-ph-play .i { width: 34px; height: 34px; margin-left: 4px; fill: currentColor; }
.study-tap-ph:active .study-tap-ph-play { transform: scale(.96); }
.study-tap-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--paper-2); color: var(--c, var(--ink-2)); }
.study-tap-icon .i { width: 24px; height: 24px; }
.study-tap-btn { flex: 1; }
/* the placeholder while the frame loads (the old pages showed a spinner) */
.study-frame-wait { position: absolute; inset: 3px 0 0; display: grid; place-items: center; pointer-events: none; }
.study-frame.is-ready .study-frame-wait { display: none; }
.study-frame-skel { display: block; width: min(420px, 70%); height: 56%; border-radius: var(--r); }
/* full screen (the shell's data-fullscreen, or its .is-full fallback where the Fullscreen API fails, e.g. iPhone).
   Where today's player offers its own full screen, study.js uses that instead (today's re-fit, sizes fix 1). */
.study-frame:fullscreen, .study-frame.is-full { border: 0; border-radius: 0; }
.study-frame:fullscreen .study-frame-doc, .study-frame.is-full .study-frame-doc { flex: 1; height: 100%; }
/* Phones (sizes fix 7): the tap opens the player over the whole screen with a slim bar (×, title); Back closes it */
html.has-study-ov, html.has-study-ov body { overflow: hidden; }
.study-frame.is-overlay { position: fixed; inset: 0; z-index: var(--z-full); width: auto; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; background: #fff; }
.study-frame.is-overlay .study-tap { display: none; }
.study-frame.is-overlay .study-frame-doc { display: block; flex: 1 1 auto; height: auto; min-height: 0; }
.study-frame.is-overlay:not(.is-ready) .study-frame-wait { display: grid; inset: 48px 0 0; }
.study-ov-bar { display: none; }
.study-frame.is-overlay .study-ov-bar { display: flex; flex: none; align-items: center; gap: 2px; height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 2px; border-top: 3px solid var(--c, var(--rule-2)); border-bottom: 1px solid var(--rule); background: var(--paper); }
.study-ov-bar .icon-btn { width: 44px; height: 44px; }
.study-trap { display: none; }
.study-frame.is-overlay .study-trap { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.study-ov-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.study-version { margin-top: 16px; }
.study-version + .surface { margin-top: 12px; }

/* 2 · Session and owner variants ---------------------------------------------------------------- */
body[data-logged-in] .study-out, body:not([data-logged-in]) .study-in { display: none !important; }
.res-acts .study-act-report .i { color: var(--ink-3); }
.study-own-acts { margin-top: 16px; }
.study-more { margin-top: 4px; }
.study-related .entry-meta .i { width: 14px; height: 14px; }

/* 3 · Text sections (the content as text: SEO and reading) -------------------------------------- */
.study-text > .sec-head .count { color: var(--ink-3); font-weight: 400; }
.study-root { margin: 4px 0 12px; font-weight: 700; }
/* reading measure for the text versions (long map nodes ran to ~96 characters a line at 1280 px) */
.study-text .study-root, .study-text .outline, .study-text .study-wrap, .study-text .study-fl-text { max-width: 72ch; }
.study-sub { margin-top: 24px; }
.study-wrap { overflow-wrap: anywhere; }
.study-wrap h3 { margin-top: 1.4em; font-size: var(--fs-3); }
.study-wrap h3:first-child { margin-top: 0; }
.study-wrap h4 { margin-top: 1em; font-size: var(--fs-2); }
.study-page-link { color: inherit; }
.study-page-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px), (pointer: coarse) { .study-page-link { display: inline-flex; align-items: center; min-height: 44px; } }
.study-media-list { display: grid; gap: 12px; margin-top: 8px; }
/* content images in the text sections: shown small (the player has them full size); vw, not %, because the
   outline's sub-lists are grids, where a percentage max-width would not limit the track */
.outline ul > li, .study-fl-text > li, .study-sl-text > li { min-width: 0; overflow-wrap: anywhere; }
.study-media-list img, .study-sl-text img, .study-fl-text img, .outline img, .study-wrap img { display: block; max-width: min(360px, 76vw); max-height: 320px; width: auto; height: auto; -o-object-fit: contain; object-fit: contain; border-radius: var(--r-in); }
/* deck as text (term – definition) */
.study-fc-list > li { display: grid; grid-template-columns: 2.25em minmax(0, 14em) minmax(0, 1fr) 72px; gap: 4px 20px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.study-fc-list .study-n { padding-top: 2px; font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.study-fc-list .study-q { font-weight: 700; overflow-wrap: anywhere; }
.study-fc-list .study-a { color: var(--ink-2); overflow-wrap: anywhere; }
.study-fc-list img { grid-column: 4; width: 72px; height: 54px; -o-object-fit: contain; object-fit: contain; background: var(--paper-2); border-radius: var(--r-in); }
@media (max-width: 639px) {
  .study-fc-list > li { grid-template-columns: 2em minmax(0, 1fr) 64px; }
  .study-fc-list .study-a { grid-column: 2 / 4; }
  .study-fc-list img { grid-column: 3; grid-row: 1; width: 64px; height: 48px; }
}
.study-fl-text > li { padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); overflow-wrap: anywhere; }
.study-fl-text p + p { margin-top: .4em; }
.study-sl-text > li > ul { color: var(--ink-2); }

/* 4 · Información, facts, rating ------------------------------------------------------------------ */
.study-info { margin-top: 8px; }
.study-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin-top: 8px; font-size: var(--fs-1); }
.study-facts dt { color: var(--ink-3); }
.study-facts dd { color: var(--ink); overflow-wrap: anywhere; }
.study-history { display: grid; gap: 4px; font-size: var(--fs-1); color: var(--ink-2); }
.study-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 0; border: 0; }
.study-rate legend { float: left; margin-right: 8px; padding: 0; font-size: var(--fs-1); color: var(--ink-3); line-height: 44px; }
.study-stars { display: inline-flex; }
.study-stars label { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; color: var(--rule-3); }
.study-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.study-stars .i { width: 26px; height: 26px; }
.facts .study-rate { margin: -10px 0 -10px -9px; }
.facts .study-rate legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.study-stars label:hover .i, .study-stars label:has(input:checked) .i, .study-stars label.is-on .i { fill: #a86a12; stroke: #a86a12; }
.study-stars label:has(input:focus-visible) { outline: var(--ring); outline-offset: -4px; border-radius: var(--r); }
.study-rate-avg { margin-right: 12px; }

/* 5 · Results (course) -------------------------------------------------------------------------- */
.study-res-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; margin-top: 24px; }
.study-res-pie .pie svg { width: 128px; height: 128px; }
.study-res-pct { font-size: var(--fs-6); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.study-res-lines { display: grid; gap: 8px; margin-top: 4px; }
.study-res-lines li { display: flex; align-items: center; gap: 10px; }
.study-res-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.study-scorebar { display: flex; height: 12px; margin-top: 12px; overflow: hidden; border-radius: 6px; background: var(--rule); }
.study-scorebar > span { display: block; height: 100%; }
.study-scorebar .ok { background: var(--ok); }
.study-scorebar .bad { background: var(--bad); }
.study-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: var(--fs-1); color: var(--ink-2); }
.study-key span { display: inline-flex; align-items: center; gap: 6px; }
.study-key i { width: 10px; height: 10px; border-radius: 2px; }

/* 6 · Course pages ------------------------------------------------------------------------------ */
.study-co-head { padding-top: 2px; }
.study-co-head > * + * { margin-top: 10px; }
.study-co-head .h1 { margin-top: 4px; }
.study-co-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.study-co-prog { display: grid; gap: 8px; max-width: 440px; margin-top: 18px; }
.study-co-desc { max-width: 72ch; margin-top: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.study-mods { position: relative; display: grid; }
.study-mods > li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); -moz-column-gap: 14px; column-gap: 14px; padding: 12px 0; }
.study-mods > li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 44px; bottom: -12px; border-left: 2px solid var(--rule-2); }
.study-mods > li.is-done:not(:last-child)::after { border-left-color: var(--ok); }
.study-mod-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--rule-2); border-radius: 50%; background: var(--paper); color: var(--ink-3); font-size: var(--fs-1); font-weight: 700; }
.study-mod-dot .i { width: 16px; height: 16px; }
.is-done > .study-mod-dot { border-color: var(--ok); background: var(--ok); color: #fff; }
.is-now > .study-mod-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.study-mod-main { display: grid; gap: 2px; min-width: 0; }
.study-mod-link { justify-self: start; display: block; padding-block: 4px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
a.study-mod-link:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.is-locked .study-mod-link { color: var(--ink-3); }
.is-now .study-mod-link { color: var(--accent-ink); }
.study-mod-meta { font-size: var(--fs-1); color: var(--ink-3); }
.study-mod-detail { margin: 8px 0 4px; padding-left: 12px; border-left: 2px solid var(--rule); color: var(--ink-2); overflow-wrap: anywhere; }
.study-mod-detail > * + * { margin-top: 6px; }
.study-mod-more { justify-self: start; min-height: 44px; margin: -6px 0 -12px; padding: 0; border: 0; background: none; color: var(--accent); font-size: var(--fs-1); font-weight: 600; }
.study-mod-more:hover { text-decoration: underline; text-underline-offset: 3px; }
/* module page: the breadcrumbs row as tight as the resource pages' (sizes fix 5: the player ~190 px down at 1366×768) */
@media (min-width: 1100px) and (pointer: fine) { main[data-study="course-module"] > .crumbs { padding-top: 0; } main[data-study="course-module"] > .crumbs a { min-height: 40px; } }
.study-co-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; }
@media (min-width: 1100px) { .study-co-layout { grid-template-columns: 280px minmax(0, 1fr); } }
.study-co-side { align-self: start; padding: 4px 24px 0 0; border-right: 1px solid var(--rule); }
@media (max-width: 1099px) { .study-co-side { display: none; } }
@media (min-width: 1100px) { .study-hide-xl { display: none !important; } }
.study-co-side .h3 { margin-bottom: 4px; }
.study-co-side .study-mods > li { padding: 8px 0; }
.study-co-side .study-mods > li:not(:last-child)::after { top: 40px; bottom: -8px; }
.study-co-modbtn { justify-self: start; }
.study-co-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.study-co-card { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--rule-2); border-top: 3px solid var(--c, var(--rule-2)); border-radius: var(--r); transition: border-color var(--t), background-color var(--t); }
a.study-co-card:hover { background: var(--paper-2); }
a.study-co-card:hover .entry-title { text-decoration: underline; text-underline-offset: 3px; }
.study-co-card--next { text-align: right; justify-items: end; }
.study-co-card .meta { display: inline-flex; align-items: center; gap: 4px; }
.study-co-card[aria-disabled="true"] { color: var(--ink-3); background: var(--paper-2); }
@media (max-width: 639px) { .study-co-cards { grid-template-columns: minmax(0, 1fr); } .study-co-card--next { text-align: left; justify-items: start; } }
.study-co-text { max-width: 72ch; margin-top: 16px; overflow-wrap: anywhere; }
.study-co-media { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-in); background: var(--ink); }

/* certificate */
.study-cert { position: relative; max-width: 820px; margin: 32px auto 0; padding: 56px 48px 48px; border: 1px solid var(--rule-2); background: var(--paper); text-align: center; }
.study-cert::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--rule-2); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--rule-2); pointer-events: none; }
.study-cert-ribbon { display: inline-block; max-width: 100%; padding: 10px 28px; background: var(--c-course); color: #fff; font-family: var(--serif); font-size: var(--fs-5); line-height: 1.2; overflow-wrap: anywhere; }
.study-cert-lead { margin-top: 28px; color: var(--ink-2); font-size: var(--fs-3); }
.study-cert-name { margin-top: 8px; font-family: var(--serif); font-weight: 600; font-size: var(--fs-6); line-height: 1.1; overflow-wrap: anywhere; }
.study-cert-text { max-width: 56ch; margin: 16px auto 0; color: var(--ink-2); }
.study-cert-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: var(--fs-1); }
.study-cert-facts dt { color: var(--ink-3); }
.study-cert-facts dd { margin-top: 2px; font-size: var(--fs-2); font-weight: 700; }
@media (max-width: 639px) { .study-cert { padding: 40px 20px 32px; } .study-cert::before { inset: 6px; } }

/* 7 · Error pages (not found, private, removed) -------------------------------------------------- */
.study-err { max-width: 720px; padding-top: 24px; }
.study-err .lead { margin-top: 12px; }
.study-err-search { display: flex; gap: 8px; margin-top: 24px; max-width: 560px; }
.study-err-search .field-search { flex: 1; }
.study-err-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* 8 · Print: the text content prints; the frame, chrome and actions don't ------------------------- */
@media print {
  .study-frame, .study-info .info-acts, .study-rate, .res-acts, .study-related .nudge { display: none !important; }
  .study-fc-list > li, .study-mods > li { -moz-column-break-inside: avoid; break-inside: avoid; }
  .study-cert { border-color: #999; }
}
@media (pointer: coarse) { .study-mod-link { padding-block: 10px; } }

/* 9 · Small parts from the mock's study.css (disclosure heading button, tag links) ----------------- */
.study-info-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.study-info-btn .i { color: var(--ink-3); transition: rotate var(--t); }
.study-info-btn[aria-expanded="true"] .i { rotate: 180deg; }
.study-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.study-tags a { color: var(--accent); }
.study-tags a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Mind-map outline: a node's notes and attached resources (today's summary lists them; gate 16 Oct) */
.outline-notes, .outline-links { margin: 4px 0 6px; padding-left: 1.1em; list-style: disc; font-size: var(--fs-1); color: var(--ink-2); }
.outline-notes li, .outline-links li { margin: 2px 0; }
/* Course module on phones: the breadcrumb's last item ("Módulo 1") was cut to "Mód…" by the course title; it repeats the
   module header below, so phones drop it (usability checks 21 Oct, item 16) */
@media (max-width: 639px) {
  [data-study="course-module"] > .crumbs li[aria-current] { display: none; }
  [data-study="course-module"] > .crumbs li:nth-last-child(2) { flex: 0 1 auto; min-width: 0; }
  [data-study="course-module"] > .crumbs li:nth-last-child(2) a { display: block; line-height: 44px; overflow: hidden; text-overflow: ellipsis; }
}
/*
 * Redesign: the STUDY area stylesheet (resource pages, courses, error pages), loaded after redesign.css by
 * app/views/redesign/study/*. Port of the mock-up's study/study.css parts these pages use, plus the player frame.
 *

 */