/* video.html - the "Discussion" section, on every video page. On a TEACHING video
   (2026-10-11, v1) video-discussion.js reads and renders the live comments and
   mounts the real form; a PATIENT video still shows the switched-off box. Loaded
   by video.html alone, after the site's stylesheets and video-library.css. Site
   tokens only. Everything is prefixed vl-discussion / vl-comment.
   Pairs on the white card: --text #2E2A3D 13.9:1; --text-muted #5B5670 7.0:1; "Pinned" --gold-deep on cream 5.2:1;
   a pressed Helpful white on --purple 12.3:1; "Reported" --text-muted on cream 6.6:1;
   errors --guide-help #9B1C1C 8.2:1; links --purple #3A2A66 11.7:1; the role chip
   --purple-deep on --lavender 12.7:1; on the cream comment card --text 13.2:1. */
.vl-discussion[hidden] { display: none; }
/* never beside "This video isn't available", and never before the page is ready */
.vl-single:not(.is-ready) .vl-discussion, .vl-single.is-missing .vl-discussion { display: none; }
/* a card like the others on the page: white on cream, 16px corners, soft shadow, a gold hairline along the top */
.vl-discussion { position: relative; margin: 0; padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid rgba(58, 42, 102, 0.08); border-radius: 16px; background: var(--white); box-shadow: 0 1px 2px rgba(46, 33, 80, 0.06), 0 12px 30px rgba(46, 33, 80, 0.08); }
.vl-discussion::before { content: ""; position: absolute; top: -1px; left: 1.25rem; right: 1.25rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) 0%, rgba(187, 134, 63, 0) 100%); }
.vl-discussion__title { margin: 0 0 1.1rem; max-width: none; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: var(--purple-deep); }
/* the Patient Video notice: a cream callout with a gold edge (the teaching prompt no longer uses it) */
.vl-discussion__notice { margin: 0 0 1.25rem; padding: 0.9rem 1.1rem; background: var(--cream); border: 1px solid rgba(187, 134, 63, 0.55); border-left: 4px solid var(--gold); border-radius: 12px; }
.vl-discussion__notice p { margin: 0; max-width: none; font-size: 0.9375rem; line-height: 1.55; color: var(--purple-deep); }      /* 13.9:1 on cream */
/* the teaching prompt (2026-10-12): one plain line of secondary text under the heading, no box; the
   same size as a comment's date, 12px before whatever follows (the sign-in line or the box) */
.vl-discussion__prompt { margin: 0 0 0.75rem; max-width: none; font-size: 0.8125rem; line-height: 1.5; text-align: left; color: var(--text-muted); overflow-wrap: break-word; }      /* #5B5670 on white 7.0:1 */
/* the guidelines (2026-10-11, teaching videos): a disclosure under the prompt; open, a short intro and six points. */
/* the trigger is "Guidelines", the one link in the line: deep gold with the page's thin underline; the
   guidelines open directly beneath the line. The button's tap area is 44px tall through padding that is
   cancelled by negative margins, so the line of text keeps its rhythm. */
.vl-discussion__rules-toggle { display: inline; margin: -0.8rem 0; padding: 0.8rem 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--gold-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }      /* --gold-deep #8A6222 on white 5.3:1 */
.vl-discussion__rules-toggle:hover { color: var(--purple); }
.vl-discussion__rules-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.vl-discussion__rules { margin: 0 0 1.25rem; max-width: 60ch; padding: 0 0.25rem; }
.vl-discussion__rules[hidden] { display: none; }
.vl-discussion__rules p { margin: 0.25rem 0 0.5rem; max-width: none; font-size: 0.875rem; line-height: 1.55; color: var(--text); }
.vl-discussion__rules ul { margin: 0; padding-left: 1.2rem; }
.vl-discussion__rules li { margin: 0 0 0.35rem; max-width: none; font-size: 0.875rem; line-height: 1.55; color: var(--text); }
.vl-discussion__signin { margin: 0 0 1rem; max-width: none; font-size: 1rem; line-height: 1.5; color: var(--text); }
.vl-discussion__signin--live { margin: 0 0 0.75rem; }      /* the visitor's line above the live box (teaching videos) */
.vl-discussion__signin--live a + a { margin-left: 0.1rem; }
.vl-discussion__signin a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; margin-left: 0.35rem; font-weight: 600; color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }      /* 11.7:1 */
.vl-discussion__signin a:hover { color: var(--purple-bright); }
.vl-discussion__signin a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.vl-discussion__form { display: grid; gap: 0.75rem; justify-items: start; margin: 0 0 1.5rem; }
.vl-discussion__form textarea { display: block; box-sizing: border-box; width: 100%; min-height: 6.5rem; margin: 0; padding: 0.7rem 0.85rem; border: 1.5px solid #8A84A0; border-radius: 12px; background: var(--lavender-light); font: inherit; line-height: 1.5; color: var(--text); resize: none; }
.vl-discussion__form textarea::placeholder { color: var(--text-muted); opacity: 1; }      /* 6.5:1 on --lavender-light */
.vl-discussion__form textarea:disabled, .vl-discussion__form .btn:disabled { cursor: not-allowed; }
.vl-discussion__form .btn { min-height: 44px; }
.vl-discussion__form .btn:disabled { opacity: 1; background: #6F6A85; border-color: #6F6A85; color: var(--white); box-shadow: none; transform: none; }      /* white on #6F6A85: 5.0:1 */
/* the comments, when there are some: an empty list for now (no height), then "No comments yet." */
.vl-discussion__list, .vl-discussion__replies { list-style: none; margin: 0; padding: 0; }
.vl-discussion__list:not(:empty) { display: grid; gap: 0.85rem; margin: 0 0 1rem; }
.vl-discussion__empty { margin: 0; max-width: none; padding-top: 1rem; border-top: 1px solid rgba(58, 42, 102, 0.1); font-size: 0.9375rem; line-height: 1.5; color: var(--text-muted); }      /* secondary text, 7.0:1 on white */
.vl-discussion__list:not(:empty) + .vl-discussion__empty { display: none; }
.vl-comment { margin: 0; padding: 1rem 1.1rem; background: var(--cream); border: 1px solid rgba(58, 42, 102, 0.1); border-radius: 14px; }
.vl-discussion__replies { margin-top: 0.85rem; padding-left: clamp(0.9rem, 4vw, 2rem); border-left: 3px solid var(--lavender); }      /* a reply sits indented under its comment */
.vl-comment--reply { background: var(--lavender-light); }
.vl-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 0.45rem; }
.vl-comment__name { font-weight: 700; color: var(--purple-deep); }
.vl-comment__role { padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--lavender); font-size: 0.8125rem; font-weight: 600; color: var(--purple-deep); }      /* 12.7:1 */
.vl-comment__text { margin: 0; max-width: none; font-size: 0.9375rem; line-height: 1.55; color: var(--text); overflow-wrap: break-word; white-space: pre-line; }      /* line breaks kept, as typed */
.vl-comment__date { font-size: 0.8125rem; color: var(--text-muted); }      /* 6.6:1 on cream */

/* ---- the live discussion (2026-10-11, teaching videos) ------------------------ */
/* the list block keeps its room while the comments arrive, so nothing below it moves when they land */
.vl-discussion--live .vl-discussion__thread { min-height: 7.5rem; }
.vl-discussion--live .vl-discussion__empty { padding-top: 0; border-top: 0; }
.vl-discussion--live .vl-discussion__list:not(:empty) + .vl-discussion__empty { display: none; }
.vl-discussion__compose { margin: 0 0 1.5rem; }
.vl-discussion--live .vl-discussion__form { margin: 0; }
.vl-discussion__form textarea[readonly] { cursor: default; }
.vl-discussion__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.vl-discussion__counter { margin: -0.35rem 0 0; max-width: none; font-size: 0.8125rem; line-height: 1.4; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vl-discussion__counter[hidden] { display: none; }
.vl-discussion__counter.is-over { color: var(--guide-help); font-weight: 600; }
.vl-discussion__error { margin: 0; max-width: none; font-size: 0.9375rem; line-height: 1.5; font-weight: 600; color: var(--guide-help); }
.vl-discussion__error[hidden] { display: none; }
.vl-discussion__error a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0.2rem; font-weight: 600; color: var(--purple); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.vl-discussion__error:not([role]) { font-weight: 400; color: var(--text); }      /* the sign-in invitation, not an error */
.vl-discussion__error a:hover { color: var(--purple-bright); }
.vl-discussion__error a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.vl-discussion__cancel { min-height: 44px; margin: 0; padding: 0 0.25rem; border: 0; background: none; font: inherit; font-weight: 600; color: var(--purple); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; cursor: pointer; }
.vl-discussion__cancel:hover { color: var(--purple-bright); }
.vl-discussion__cancel:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.vl-comment:focus { outline: none; }
.vl-comment:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vl-comment__actions { margin: 0.35rem 0 0; }
.vl-comment__reply { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--purple); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; cursor: pointer; }
.vl-comment__reply:hover { color: var(--purple-bright); }
.vl-comment__reply:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.vl-comment__notes .vl-discussion__form--reply textarea { min-height: 5rem; background: var(--white); }      /* a reply box sits in the comment's notes area */
.vl-discussion__replies:empty { display: none; }
.vl-discussion__replies { display: grid; gap: 0.6rem; }

/* ---- v1.1 (2026-10-11): pinned, Helpful, Report -------------------------------- */
.vl-comment__pinned { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }      /* #8A6222 on cream 5.2:1, on lavender-light 5.0:1 */
.vl-comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin: 0.25rem 0 0; }
.vl-comment__helpful, .vl-comment__report { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--purple); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; cursor: pointer; }
.vl-comment__helpful:hover, .vl-comment__report:hover { color: var(--purple-bright); }
.vl-comment__helpful:focus-visible, .vl-comment__report:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* a member's own Helpful mark: filled chip, still text-first */
.vl-comment__helpful.is-pressed { padding: 0.1rem 0.7rem; border-radius: 999px; background: var(--purple); color: var(--white); text-decoration: none; }      /* 12.3:1 */
.vl-comment__helpful.is-pressed:hover { background: var(--purple-bright); }
.vl-comment__helpful-count { font-variant-numeric: tabular-nums; }
.vl-comment__reported { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }      /* 6.6:1 on cream */
.vl-comment__notes:empty { display: none; }
.vl-comment__notes > .vl-discussion__error { margin-top: 0.25rem; }
.vl-comment__thanks { margin: 0.25rem 0 0; max-width: none; font-size: 0.875rem; line-height: 1.5; color: var(--text); }
.vl-comment__reportbox { display: grid; gap: 0.5rem; justify-items: start; margin: 0.5rem 0 0; padding: 0.85rem 1rem; border: 1px solid rgba(58, 42, 102, 0.12); border-radius: 12px; background: var(--white); }
.vl-comment__reportask { margin: 0; max-width: none; font-size: 0.9375rem; font-weight: 600; line-height: 1.45; color: var(--purple-deep); }
.vl-comment__reasonlabel { margin: 0; font-size: 0.8125rem; color: var(--text-muted); }
.vl-comment__reason { display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 0.5rem 0.75rem; border: 1.5px solid #8A84A0; border-radius: 10px; background: var(--lavender-light); font: inherit; color: var(--text); }
.vl-comment__reason:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vl-comment__sendreport { min-height: 44px; }
.vl-comment__notes .vl-discussion__form { margin-top: 0.5rem; }