/* PLAYER.ID Parent -> Player Highlights V1.
   Page shell follows the locked Parent Dashboard system (white / cool
   off-white, deep navy, restrained teal, cool grey hairlines). The media
   showcase itself is a dark cinematic panel. Scoped to #parentHighlightsView,
   #parentHighlightsModal and the Overview highlight thumbnail only. */

/* View routing (same pattern as the other Parent views). */
.parent-dashboard-only .pid-parent-content[data-parent-current-view="highlights"]>:not(#parentViewContext):not(#parentHighlightsView){display:none!important}
.parent-dashboard-only .pid-parent-content[data-parent-current-view="highlights"]>#parentHighlightsView{display:block}

#parentHighlightsView{--hl-navy:#0b2638;--hl-teal:#13aaa6;--hl-teal-deep:#0d7f7c;--hl-line:#e3e8ec;--hl-muted:#52627a;--hl-stage:#07141c;--hl-stage-2:#0b1e2a;--hl-stage-line:rgba(19,170,166,.22);--hl-stage-text:#e9f1f5;--hl-stage-muted:#8fa3b2;box-sizing:border-box;min-width:0;padding:22px 24px 24px;border:1px solid var(--hl-line);border-radius:18px;background:#fff;color:var(--hl-navy)}
#parentHighlightsView *,#parentHighlightsModal *{box-sizing:border-box}

/* Head */
#parentHighlightsView .pid-hl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 18px}
#parentHighlightsView .pid-hl-head-copy{min-width:0}
#parentHighlightsView .pid-hl-eyebrow{display:block;color:var(--hl-teal-deep);font-size:10.5px;font-weight:800;letter-spacing:.14em}
#parentHighlightsView .pid-hl-head h3{margin:4px 0 0;color:var(--hl-navy);font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
#parentHighlightsView .pid-hl-context{margin:4px 0 0;color:var(--hl-muted);font-size:13px;line-height:1.45;overflow-wrap:anywhere}
#parentHighlightsView .pid-hl-head-actions{display:flex;flex:0 0 auto;gap:8px}

/* Buttons (view + dialog) */
:is(#parentHighlightsView,#parentHighlightsModal) .pid-hl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;margin:0;padding:0 16px!important;border:1px solid #cfd8e0!important;border-radius:11px!important;background:#fff!important;box-shadow:none!important;color:#0b2638!important;font-family:inherit;font-size:13px;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
:is(#parentHighlightsView,#parentHighlightsModal) .pid-hl-btn:hover,:is(#parentHighlightsView,#parentHighlightsModal) .pid-hl-btn:focus-visible{border-color:#13aaa6!important;background:#f1f9f8!important;color:#0d7f7c!important}
:is(#parentHighlightsView,#parentHighlightsModal) .pid-hl-btn.is-primary{border-color:#0b2638!important;background:#0b2638!important;color:#fff!important}
:is(#parentHighlightsView,#parentHighlightsModal) .pid-hl-btn.is-primary:hover,:is(#parentHighlightsView,#parentHighlightsModal) .pid-hl-btn.is-primary:focus-visible{border-color:#0d7f7c!important;background:#0d7f7c!important;color:#fff!important}
#parentHighlightsModal .pid-hl-btn.is-danger{border-color:#b42336!important;background:#b42336!important;color:#fff!important}
#parentHighlightsModal .pid-hl-btn.is-danger:hover,#parentHighlightsModal .pid-hl-btn.is-danger:focus-visible{border-color:#8f1b2b!important;background:#8f1b2b!important;color:#fff!important}
:is(#parentHighlightsView,#parentHighlightsModal) .pid-hl-btn:disabled{opacity:.55;cursor:default}
:is(#parentHighlightsView,#parentHighlightsModal) :is(.pid-hl-btn,.pid-hl-row,.pid-hl-poster,.pid-hl-link,.pid-hl-order-btn):focus-visible{outline:2px solid #13aaa6;outline-offset:2px}

/* Cinematic stage */
#parentHighlightsView .pid-hl-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:18px;padding:18px;border:1px solid var(--hl-stage-line);border-radius:16px;background:linear-gradient(160deg,var(--hl-stage-2),var(--hl-stage) 62%);box-shadow:0 18px 48px rgba(6,20,30,.22);color:var(--hl-stage-text)}
#parentHighlightsView .pid-hl-main{min-width:0}
#parentHighlightsView .pid-hl-screen{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#000}
#parentHighlightsView .pid-hl-iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#parentHighlightsView .pid-hl-poster{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0!important;border:0!important;border-radius:0!important;background:#000!important;box-shadow:none!important;cursor:pointer}
#parentHighlightsView .pid-hl-poster-image,#parentHighlightsView .pid-hl-poster-image img{display:block;width:100%;height:100%}
#parentHighlightsView .pid-hl-poster-image img{object-fit:cover;opacity:.9;transition:opacity .2s}
#parentHighlightsView .pid-hl-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,28,0) 55%,rgba(7,20,28,.55));pointer-events:none}
#parentHighlightsView .pid-hl-play{position:absolute;z-index:1;top:50%;left:50%;display:grid;place-items:center;width:68px;height:68px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(7,20,28,.62);backdrop-filter:blur(4px);transform:translate(-50%,-50%);transition:background-color .15s,border-color .15s}
#parentHighlightsView .pid-hl-play svg{width:28px;height:28px;margin-left:4px;fill:#fff;stroke:none}
#parentHighlightsView .pid-hl-poster:hover .pid-hl-play,#parentHighlightsView .pid-hl-poster:focus-visible .pid-hl-play{border-color:#13aaa6;background:rgba(13,127,124,.85)}
#parentHighlightsView .pid-hl-poster:hover .pid-hl-poster-image img{opacity:1}
#parentHighlightsView .pid-hl-caption{padding:14px 2px 0}
/* !important: the legacy forced heading reset in index.html (:where(h1..h6,.title){color:#0a0a0a!important}) otherwise wins on the dark stage. */
#parentHighlightsView .pid-hl-title{margin:0;color:#fff!important;font-size:18px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
#parentHighlightsView .pid-hl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:6px 0 0;color:var(--hl-stage-muted);font-size:12.5px}
#parentHighlightsView .pid-hl-source{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#c6d4dd;font-size:10.5px;font-weight:700;letter-spacing:.04em}

/* Playlist */
/* Desktop: the playlist never sets the row height -- it fills the height of
   the active video column and scrolls inside it. */
#parentHighlightsView .pid-hl-playlist{position:relative;min-width:0;min-height:300px;border-left:1px solid rgba(255,255,255,.08);padding-left:18px}
#parentHighlightsView .pid-hl-playlist-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 10px}
#parentHighlightsView .pid-hl-playlist-head small{color:#7fd6d2;font-size:10.5px;font-weight:800;letter-spacing:.14em}
#parentHighlightsView .pid-hl-counter{color:var(--hl-stage-muted);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.06em}
#parentHighlightsView .pid-hl-list{position:absolute;top:34px;right:0;bottom:0;left:18px;display:grid;align-content:start;gap:4px;margin:0;padding:0 4px 0 0;overflow-y:auto;list-style:none;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
#parentHighlightsView .pid-hl-list li{margin:0;padding:0}
#parentHighlightsView .pid-hl-row{display:grid;grid-template-columns:22px 104px minmax(0,1fr);align-items:center;gap:10px;width:100%;margin:0;padding:7px!important;border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:inherit!important;font-family:inherit;text-align:left;cursor:pointer;transition:background-color .15s,border-color .15s}
#parentHighlightsView .pid-hl-row:hover{background:rgba(255,255,255,.05)!important}
#parentHighlightsView .pid-hl-row.is-active{border-color:rgba(19,170,166,.5)!important;background:rgba(19,170,166,.12)!important}
#parentHighlightsView .pid-hl-row-index{color:var(--hl-stage-muted);font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
#parentHighlightsView .pid-hl-row.is-active .pid-hl-row-index{color:#7fd6d2}
#parentHighlightsView .pid-hl-row-thumb,:is(#parentHighlightsModal) .pid-hl-library-thumb,#parentHighlightsModal .pid-hl-preview-thumb{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:7px;background:#0a1a24}
:is(#parentHighlightsView,#parentHighlightsModal) :is(.pid-hl-row-thumb,.pid-hl-library-thumb,.pid-hl-preview-thumb) img{display:block;width:100%;height:100%;object-fit:cover}
#parentHighlightsView .pid-hl-row-copy{display:grid;gap:3px;min-width:0}
#parentHighlightsView .pid-hl-row-copy strong{display:-webkit-box;overflow:hidden;color:#eef4f7;font-size:12.5px;font-weight:700;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
#parentHighlightsView .pid-hl-row-copy small{color:var(--hl-stage-muted);font-size:11px}

/* Empty / status */
#parentHighlightsView .pid-hl-empty{display:grid;justify-items:center;gap:8px;padding:48px 20px 52px;border:1px solid var(--hl-line);border-radius:16px;background:linear-gradient(180deg,#f8fbfc,#fff);text-align:center}
#parentHighlightsView .pid-hl-empty-mark{display:grid;place-items:center;width:56px;height:56px;margin-bottom:6px;border:1px solid #cdebe6;border-radius:16px;background:#ecf8f5}
#parentHighlightsView .pid-hl-empty-mark svg{width:26px;height:26px;fill:none;stroke:#0d7f7c;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#parentHighlightsView .pid-hl-empty strong{color:var(--hl-navy);font-size:17px;font-weight:800}
#parentHighlightsView .pid-hl-empty p{max-width:420px;margin:0 0 10px;color:var(--hl-muted);font-size:13.5px;line-height:1.5}
#parentHighlightsView .pid-hl-status{display:grid;justify-items:center;gap:10px;padding:40px 20px;border:1px dashed #d7e0e4;border-radius:16px;color:var(--hl-muted);font-size:13.5px;text-align:center}
#parentHighlightsView .pid-hl-status p{margin:0}

/* Overview "Latest Highlight" real thumbnail (existing card, live data). */
#parentPlayerOverviewSnapshots .pid-ov-poster.has-thumbnail{position:relative;overflow:hidden;aspect-ratio:16/9}
#parentPlayerOverviewSnapshots .pid-ov-poster.has-thumbnail img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#parentPlayerOverviewSnapshots .pid-ov-poster.has-thumbnail .pid-ov-play{position:relative;z-index:1}

/* Dialog (light management surface; Parent dialog shell) */
#parentHighlightsModal .parent-report-modal-panel{width:min(640px,100%);padding:22px 24px 20px;border:1px solid #e3e8ec;border-radius:20px;background:#fff;box-shadow:0 24px 70px rgba(6,24,38,.28);color:#0b2638;font-family:inherit}
#parentHighlightsModal .parent-report-modal-close{display:grid!important;place-items:center;width:38px;height:38px;margin:-4px -8px -38px auto;padding:0 0 2px!important;border:1px solid #d7e0e4!important;border-radius:50%!important;background:#fff!important;color:#0b2638!important;font:400 22px/1 system-ui,sans-serif!important;box-shadow:0 1px 4px rgba(11,38,56,.06)!important;cursor:pointer}
#parentHighlightsModal .parent-report-modal-close:hover,#parentHighlightsModal .parent-report-modal-close:focus-visible{border-color:#13aaa6!important;background:#f1f9f8!important;color:#0d7f7c!important;outline:0}
#parentHighlightsModal .pid-hl-modal-head{padding:0 48px 14px 0;border-bottom:1px solid #e8edf0}
#parentHighlightsModal .pid-hl-modal-head h3{margin:0;color:#0b2638;font-size:15px;font-weight:800;letter-spacing:.12em;line-height:1.3;text-transform:uppercase}
#parentHighlightsModal .pid-hl-modal-head p{margin:5px 0 0;color:#52627a;font-size:13px;line-height:1.45}
#parentHighlightsModal .pid-hl-form{display:grid;gap:14px;padding-top:16px}
#parentHighlightsModal .pid-hl-field{display:grid;gap:6px;margin:0}
#parentHighlightsModal .pid-hl-label{color:#4d5f74;font-size:12px;font-weight:600}
#parentHighlightsModal :is(.pid-hl-field input,.pid-hl-edit input){width:100%;min-height:44px;margin:0;padding:0 14px;border:1px solid #d7e0e4!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important;color:#0b2638!important;font-family:inherit;font-size:14.5px;font-weight:600;outline:0}
#parentHighlightsModal :is(.pid-hl-field input,.pid-hl-edit input):focus{border-color:#13aaa6!important;box-shadow:0 0 0 3px rgba(19,170,166,.13)!important}
#parentHighlightsModal .pid-hl-preview{display:grid;grid-template-columns:136px minmax(0,1fr);align-items:center;gap:14px;padding:10px;border:1px solid #cdebe6;border-radius:14px;background:#f4fbfa}
#parentHighlightsModal .pid-hl-preview[hidden]{display:none}
#parentHighlightsModal .pid-hl-preview-copy{display:grid;gap:4px;min-width:0;justify-items:start}
#parentHighlightsModal .pid-hl-preview-copy small{color:#0d7f7c;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
#parentHighlightsModal .pid-hl-preview-copy strong{color:#0b2638;font-size:14px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
#parentHighlightsModal .pid-hl-preview-copy strong.is-pending{color:#6d7d90;font-weight:600}
#parentHighlightsModal .pid-hl-source{padding:2px 8px;border:1px solid #d7e0e4;border-radius:999px;color:#4d5f74;font-size:10.5px;font-weight:700}
#parentHighlightsModal .pid-hl-message{margin:0;color:#55667b;font-size:12.5px;font-weight:600;line-height:1.45}
#parentHighlightsModal .pid-hl-message:empty{display:none}
#parentHighlightsModal .pid-hl-message.is-error{padding:8px 11px;border:1px solid #f3d6da;border-radius:10px;background:#fdf2f3;color:#9b2c3a}
#parentHighlightsModal .pid-hl-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:14px;border-top:1px solid #e8edf0}
#parentHighlightsModal .pid-hl-actions .pid-hl-btn{min-width:112px}

/* Library */
#parentHighlightsModal .pid-hl-library-add{margin:16px 0 10px}
#parentHighlightsModal .pid-hl-library{display:grid;gap:0;max-height:min(60vh,520px);margin:0;padding:0;overflow-y:auto;list-style:none}
#parentHighlightsModal .pid-hl-library-row{display:grid;grid-template-columns:24px 112px minmax(0,1fr) auto;align-items:center;gap:12px;margin:0;padding:12px 2px;border-top:1px solid #e8edf0}
#parentHighlightsModal .pid-hl-row-index{color:#6d7d90;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
#parentHighlightsModal .pid-hl-library-copy{display:grid;gap:3px;min-width:0}
#parentHighlightsModal .pid-hl-library-copy>strong{color:#0b2638;font-size:13.5px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
#parentHighlightsModal .pid-hl-library-copy>small{color:#6d7d90;font-size:11.5px}
#parentHighlightsModal .pid-hl-library-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
#parentHighlightsModal .pid-hl-dot{color:#a7b5c2}
#parentHighlightsModal .pid-hl-link{min-height:28px;margin:0;padding:0 2px!important;border:0!important;background:none!important;box-shadow:none!important;color:#0d7f7c!important;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
#parentHighlightsModal .pid-hl-link:hover{text-decoration:underline}
#parentHighlightsModal .pid-hl-link.is-danger{color:#a3283a!important}
#parentHighlightsModal .pid-hl-link.is-strong{color:#0b2638!important;font-weight:800}
#parentHighlightsModal .pid-hl-edit{display:grid;gap:6px}
#parentHighlightsModal .pid-hl-edit input{min-height:38px;font-size:13.5px}
#parentHighlightsModal .pid-hl-edit-actions{display:flex;gap:12px}
#parentHighlightsModal .pid-hl-order{display:grid;gap:4px}
#parentHighlightsModal .pid-hl-order-btn{display:grid;place-items:center;width:32px;height:28px;margin:0;padding:0!important;border:1px solid #d7e0e4!important;border-radius:8px!important;background:#fff!important;box-shadow:none!important;color:#0b2638!important;cursor:pointer}
#parentHighlightsModal .pid-hl-order-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#parentHighlightsModal .pid-hl-order-btn:hover:not(:disabled){border-color:#13aaa6!important;color:#0d7f7c!important}
#parentHighlightsModal .pid-hl-order-btn:disabled{opacity:.35;cursor:default}
#parentHighlightsModal .pid-hl-library-empty{margin:8px 0 0;color:#52627a;font-size:13px}

/* Confirm */
#parentHighlightsModal .pid-hl-modal-body.is-confirm{padding-top:4px}
#parentHighlightsModal .pid-hl-confirm{display:grid;gap:12px}
#parentHighlightsModal .pid-hl-confirm h3{margin:0;padding-right:48px;color:#0b2638;font-size:17px;font-weight:800;line-height:1.35}
#parentHighlightsModal .pid-hl-confirm>p{margin:0;color:#52627a;font-size:13.5px;line-height:1.5}
#parentHighlightsModal .pid-hl-confirm-item{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:12px;padding:10px;border:1px solid #e3e8ec;border-radius:12px;background:#f6f8fa}
#parentHighlightsModal .pid-hl-confirm-item strong{color:#0b2638;font-size:13.5px;font-weight:800;overflow-wrap:anywhere}

/* Tablet: stage stacks before the playlist gets cramped. */
@media (max-width:980px){
  #parentHighlightsView .pid-hl-stage{grid-template-columns:1fr}
  #parentHighlightsView .pid-hl-playlist{min-height:0;padding:14px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  #parentHighlightsView .pid-hl-list{position:static;max-height:380px}
}

/* Phone (~396px): single column, active video on top, compact playlist. */
@media (max-width:600px){
  #parentHighlightsView{padding:16px 14px 16px;border-radius:16px}
  #parentHighlightsView .pid-hl-head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:14px}
  #parentHighlightsView .pid-hl-head h3{font-size:19px}
  #parentHighlightsView .pid-hl-head-actions{display:grid;grid-template-columns:1fr 1fr}
  #parentHighlightsView .pid-hl-head-actions .pid-hl-btn{width:100%;padding:0 10px!important}
  #parentHighlightsView .pid-hl-stage{gap:0;margin:0 -6px;padding:10px;border-radius:14px}
  #parentHighlightsView .pid-hl-screen{border-radius:9px}
  #parentHighlightsView .pid-hl-play{width:56px;height:56px}
  #parentHighlightsView .pid-hl-play svg{width:24px;height:24px}
  #parentHighlightsView .pid-hl-caption{padding:12px 2px 2px}
  #parentHighlightsView .pid-hl-title{font-size:16px}
  #parentHighlightsView .pid-hl-playlist{max-height:none;margin-top:12px;padding-top:12px}
  #parentHighlightsView .pid-hl-list{max-height:340px;padding-right:0}
  #parentHighlightsView .pid-hl-row{grid-template-columns:20px 88px minmax(0,1fr);gap:9px;padding:6px!important}
  #parentHighlightsView .pid-hl-empty{padding:36px 16px 40px}
  #parentHighlightsModal .parent-report-modal-viewport{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  #parentHighlightsModal .parent-report-modal-panel{padding:16px;border-radius:18px}
  #parentHighlightsModal .parent-report-modal-close{width:40px;height:40px;margin:-4px -6px -40px auto}
  #parentHighlightsModal .pid-hl-preview{grid-template-columns:104px minmax(0,1fr);gap:10px}
  #parentHighlightsModal .pid-hl-library{max-height:none}
  #parentHighlightsModal .pid-hl-library-row{grid-template-columns:84px minmax(0,1fr) auto;gap:10px}
  #parentHighlightsModal .pid-hl-library-row>.pid-hl-row-index{display:none}
  #parentHighlightsModal .pid-hl-confirm-item{grid-template-columns:96px minmax(0,1fr)}
  #parentHighlightsModal .pid-hl-actions{flex-direction:column-reverse}
  #parentHighlightsModal .pid-hl-actions .pid-hl-btn{width:100%}
}