/* JAVCMS Modern skin: coral header bar + graphite navigation, rounded gallery cards.
   Dark (default) = navy graphite with coral accents; light = the original coral-on-white gallery. */
:root{
 --jc-bg:#f6f7f8;--jc-surface:#fff;--jc-surface-2:#f2f4f6;--jc-ink:#202329;--jc-ink-soft:#30343b;--jc-muted:#626872;--jc-line:#dde1e5;
 --jc-accent:#e0503b;--jc-accent-grad:linear-gradient(135deg,#c9402f 0%,#ad3024 100%);--jc-accent-ink:#fff;--jc-link:#ad3024;
 --jc-thumb-bg:#1d242e;--jc-skel-hi:rgba(255,255,255,.08);--jc-spot:rgba(255,140,120,.24);--jc-thumb-shadow:0 1px 0 rgba(0,0,0,.04);
 --jc-radius:8px;--jc-btn-radius:8px;--jc-pill:8px;--jc-h-weight:800;--jc-h1-size:28px;--jc-h2-size:21px;--jc-card-weight:650;--jc-title-size:24px;--jc-gutter-m:16px
}
html[data-color-mode="dark"]{
 --jc-bg:#11161d;--jc-surface:#1b232e;--jc-surface-2:#232d3a;--jc-ink:#eef2f8;--jc-ink-soft:#d5dce6;--jc-muted:#b3becc;--jc-line:#374354;
 --jc-accent:#f05c47;--jc-accent-grad:linear-gradient(135deg,#cb4532 0%,#b13427 100%);--jc-accent-ink:#fff;--jc-link:#ffb4a8;
 --jc-thumb-bg:#1d2530;--jc-skel-hi:rgba(255,255,255,.06);--jc-thumb-shadow:none
}

/* ----- header ----- */
.gallery-header{position:relative;z-index:50}
.gallery-header .header-top{min-height:64px}
.gallery-brand{min-width:0;max-width:min(640px,46vw);flex:0 1 auto}
.gallery-brand>span{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal!important}
.gallery-brand-image{flex:none}
.gallery-search button{white-space:nowrap;flex:none}
html[data-color-mode="dark"] .gallery-brand-image{filter:brightness(1.6) saturate(1.1)}
html[data-color-mode="light"] .gallery-brand-image{background:#fff;border-radius:8px;padding:3px 8px;height:40px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.gallery-header .jc-icon-btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--header-ink);cursor:pointer}
.gallery-header .jc-icon-btn .jc-ico{width:22px;height:22px}
.gallery-header .menu-toggle{display:none;align-items:center;justify-content:center;gap:0}
.gallery-header .menu-toggle .tui-menu-icon{display:none!important}
.gallery-navigation .nav-inner .jc-nav-account{display:none}
.language-menu{margin-left:0;margin-right:0;margin-inline-start:auto}
.gallery-navigation .language-menu>summary{display:inline-flex;align-items:center;gap:6px}
.gallery-navigation .language-menu>summary .jc-ico{width:18px;height:18px}
.language-links a[aria-current]{color:var(--jc-link);font-weight:700}
.language-links{left:auto!important;right:auto!important;inset-inline-end:0!important;inset-inline-start:auto!important;max-width:calc(100vw - 24px)}
@media(max-width:1180px){
 .gallery-brand>span{display:none}
 .gallery-navigation .nav-inner{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:visible;scrollbar-width:none;gap:1.25rem}
 .gallery-navigation .nav-inner::-webkit-scrollbar{display:none}
}
@media(min-width:768px) and (max-width:1180px){
 .gallery-navigation .nav-inner{position:relative}
 html[data-template-variant="modern"] .gallery-header .header-top{flex-wrap:nowrap;gap:1rem}
 html[data-template-variant="modern"] .gallery-header .header-top .gallery-search{order:0;flex:1 1 auto;width:auto;min-width:0;max-width:none;margin-inline:0}
 html[data-template-variant="modern"] .gallery-header .gallery-header-actions{margin-inline-start:auto;flex:none}
 .gallery-navigation .gallery-history-panel,.gallery-navigation .gallery-qr-panel,.gallery-navigation .language-links{position:fixed;top:auto;margin-top:6px}
}
@media(min-width:768px) and (max-width:1023px){
 .gallery-header .tui-color-toggle{width:42px;min-width:42px;padding:0!important;justify-content:center}
 .gallery-header .tui-color-toggle [data-color-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:767px){
 .gallery-header .header-top{display:flex!important;flex-wrap:nowrap;align-items:center;gap:4px;min-height:60px;height:60px;padding:0 10px 0 14px!important}
 .gallery-brand{flex:1 1 auto;max-width:none;min-height:40px}
 .gallery-brand-image{height:32px!important;max-width:120px!important}
 html[data-color-mode="light"] .gallery-brand-image{height:36px!important;padding:3px 7px}
 .gallery-header .gallery-search{display:none!important}
 .gallery-header.is-search-open .gallery-search{display:flex!important;position:absolute;top:60px;left:0;right:0;z-index:60;margin:0;padding:10px 12px;background:var(--header-bg);box-shadow:0 10px 24px rgba(0,0,0,.25)}
 .gallery-header .jc-icon-btn{display:inline-flex}
 .gallery-header .gallery-header-actions{display:flex!important;align-items:center;gap:2px!important;flex:none}
 .gallery-header .tui-color-toggle{width:42px;min-width:42px;height:42px;padding:0!important;justify-content:center;border:0!important;background:transparent!important;color:var(--header-ink)!important}
 .gallery-header .tui-color-toggle [data-color-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .gallery-header .gallery-header-actions .account-link{display:inline-flex!important;align-items:center;justify-content:center;width:42px;min-width:42px;height:42px;padding:0;font-size:0!important;color:var(--header-ink)!important}
 .gallery-header .gallery-header-actions .account-link .tui-icon{display:block!important;width:22px;height:22px}
 .gallery-header .menu-toggle{display:inline-flex!important;width:42px;min-width:42px;height:42px;padding:0!important;border:0;border-radius:10px;background:transparent!important;color:var(--header-ink)!important;font-size:0}
 .gallery-navigation{position:absolute;left:0;right:0;top:60px;z-index:55;max-height:calc(100vh - 60px);overflow:auto;box-shadow:0 18px 40px rgba(0,0,0,.35)}
 .gallery-navigation .nav-inner{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem!important;padding:.5rem 1rem 1rem!important;overflow:visible}
 .gallery-navigation .nav-inner .jc-nav-account{display:flex;align-items:center;gap:8px}
 .gallery-navigation .nav-inner>a{padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
 .gallery-navigation .language-menu,.gallery-navigation .gallery-history,.gallery-navigation .gallery-qr{grid-column:1/-1}
 .gallery-navigation .language-links{position:static!important;width:100%;max-width:none}
}

/* ----- layout: category sidebar on wide screens, chip strip below 1280px ----- */
@media(max-width:1279px){
 .wrapped>main{display:flex!important;flex-direction:column;gap:1.25rem}
 .wrapped>main>*{width:100%}
 .wrapped .sidebar{border:0!important;padding:0!important;margin:0}
 .wrapped .sidebar .sidebar-heading{display:none}
 .wrapped .sidebar .list-link{display:flex;overflow-x:auto;gap:.5rem;padding:6px 6px .4rem;margin:-6px -6px 0;scroll-padding-inline:6px;scrollbar-width:thin}
 .wrapped .sidebar .list-link li{flex:none}
 .wrapped .sidebar .list-link a{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;box-sizing:border-box;padding:.45rem .8rem;border:1px solid var(--jc-line);border-radius:999px;background:var(--jc-surface);font-size:.85rem;white-space:nowrap}
 .wrapped .sidebar .list-link a[aria-current=page]{border-color:var(--jc-accent)}
 .wrapped .sidebar .browse-all{display:none}
}
@media(max-width:767px){
 .wrapped{padding:1rem 1rem 0!important}
 body.film-play .wrapped .sidebar{display:none}
 .wrapped>.tui-footer[data-template-footer]{margin-inline:-1rem!important;width:auto!important;max-width:none!important}
 body.film-play .wrapped{padding-top:0!important}
 .comment-section{grid-column:auto}
}
.wrapped>main>.content,.wrapped>main>section{min-width:0}
.comment-section{min-width:0}

/* ----- headings, intro ----- */
.gallery-intro h1{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em}
@media(max-width:767px){.gallery-intro{margin-bottom:1rem;padding-bottom:1rem}.gallery-intro h1{font-size:22px}.gallery-intro p{font-size:.85rem}}
@media(hover:hover){.jc-head .jc-h2 a:hover{color:var(--jc-link)}}

/* ----- cards: gallery look (rounded thumb, bold titles) ----- */
.jc-card-meta{justify-content:space-between}
.jc-card-meta .jc-like{display:none}
.jc-thumb{border:1px solid color-mix(in srgb,var(--jc-line) 60%,transparent)}
.jc-play{border-radius:10px}
html[data-color-mode="light"] .jc-meta,html[data-color-mode="light"] .jc-desc{box-shadow:0 1px 2px rgba(16,24,40,.05)}

/* ----- footer heading kept for screen readers only ----- */
.tui-footer .tui-footer-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ----- dark header search: a visible field edge on the navy bar (round 2) ----- */
html[data-color-mode="dark"] .gallery-header .gallery-search input{background:rgba(255,255,255,.07)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
html[data-color-mode="dark"] .gallery-header .gallery-search input:focus{box-shadow:inset 0 0 0 1px var(--jc-accent)}

/* ----- tablet nav strip (768-1180px): the language menu stays pinned at the end edge and a fade shows that the strip scrolls ----- */
@media(min-width:768px) and (max-width:1180px){
 .gallery-navigation .nav-inner>.language-menu{position:sticky;inset-inline-end:0;z-index:2;flex:none;padding-inline-start:6px;background:var(--graphite,#24272b);box-shadow:2rem 0 0 var(--graphite,#24272b)}
 html[dir="rtl"] .gallery-navigation .nav-inner>.language-menu{box-shadow:-2rem 0 0 var(--graphite,#24272b)}
 .gallery-navigation .nav-inner>.language-menu::before{content:"";position:absolute;top:0;bottom:0;inset-inline-end:100%;width:28px;background:linear-gradient(to left,var(--graphite,#24272b),rgba(36,39,43,0));pointer-events:none}
 html[dir="rtl"] .gallery-navigation .nav-inner>.language-menu::before{background:linear-gradient(to right,var(--graphite,#24272b),rgba(36,39,43,0))}
}

/* ----- landscape phones (round 2): compact header rows, no category strip on the watch page, the whole player fits ----- */
@media(orientation:landscape) and (max-height:500px) and (min-width:768px){
 html[data-template-variant="modern"] .gallery-header .header-top{min-height:0;padding-top:.4rem;padding-bottom:.4rem}
 .gallery-navigation .nav-inner>a,.gallery-navigation .nav-inner>details>summary{padding-top:.55rem;padding-bottom:.55rem}
 .jc-watch-page .wrapped{padding-top:12px}
 .jc-watch-page .wrapped>main>.sidebar{display:none}
 html .jc-watch{max-width:calc((100vh - 124px) * 1.7778);max-width:calc((100svh - 124px) * 1.7778)}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:767px){
 html .jc-watch{max-width:calc((100vh - 85px) * 1.7778);max-width:calc((100svh - 85px) * 1.7778)}
 html .jc-watch .jc-player{margin-inline:0;width:100%;border-radius:var(--jc-radius)}
}

/* ----- round 3 (review F3-P1-4): keyboard focus ring per surface in light mode, at least 3:1 against what it sits on.
   The light page ring (--focus #126baf; colour toggle --tui-focus #b93635) fades into the coral header (1.7:1) and the
   graphite nav strip (2.7:1): near-black ring on the coral header (5.7:1), white ring on the graphite strip (15.9:1),
   the page blue again inside the white panels that open from the strip (5.6:1). Dark mode keeps its own rings. ----- */
html[data-color-mode="light"] .gallery-header{--focus:#111;--tui-focus:#111}
html[data-color-mode="light"] .gallery-navigation{--focus:#fff;--tui-focus:#fff}
html[data-color-mode="light"] .gallery-navigation :is(.language-links,.gallery-history-panel,.gallery-qr-panel){--focus:#126baf;--tui-focus:#126baf}

/* ----- round 3 (review F2-P2-1): the footer band runs edge to edge on tablets and desktops, as it does on phones.
   border-image paints the 3px coral line and the graphite band out to the viewport edges without changing the layout
   (no 100vw margins, so no horizontal scroll next to a scrollbar). ----- */
@media(min-width:768px){
 html[data-template-variant="modern"] .wrapped>.tui-footer[data-template-footer]{border-image:linear-gradient(var(--coral,#f05c47) 0 3px,var(--graphite,#24272b) 3px) fill 0/0/0 100vmax}
}
/* ----- sweep item 2: white text on the coral gradient needs >= 4.5:1 on every stop (the first stops were 4.29 dark / 4.47 light,
   now 4.73 / 4.93). The shared hover (brightness 1.06) lowered it to 3.87, so the modern primary button turns to a deeper coral on hover (5.8:1). ----- */
@media(hover:hover){html[data-template-variant="modern"] .jc-btn-primary:hover{filter:none;background:linear-gradient(135deg,#b8382b 0%,#962a1e 100%)}}

/* ----- fix round (P2-3): findpass_msg has one H1; the second form heading is an H2 with the H1 look ----- */
html[data-template-variant="modern"] .fed-list-head h2.jc-form-h{font-size:24px;font-weight:750;line-height:1.2;margin:0 0 .67em}