/* InnerView WithIn, from the "InnerView WithIn · Video library" / "· Phone" boards.
   Loads after home.css (shared resets). */

body .ivl, body .ivl *, body .ivl-hero, body .ivl-hero * { box-sizing: border-box; }
body .ivl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Banner ---------- */

body .iv-frame:has(.ivl-hero) { border-radius: 32px; }
body .ivl-hero { position: relative; border-radius: 32px; }
body .ivl-hero-bg { position: absolute; inset: 0; border-radius: 32px; overflow: hidden; pointer-events: none; }
body .ivl-hero-bg img { position: absolute; right: -160px; top: -140px; width: 720px; max-width: none; opacity: .45; border-radius: 0; }
body .ivl-banner { position: relative; max-width: 1280px; margin: 0 auto; padding: 136px 24px 28px; }
body .ivl-banner img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 60px -40px rgba(0, 64, 110, .45); }
body .ivl-hero h1:not(.ivl-sr) { margin: 0; font: 700 48px/1.1 var(--iv-font); color: var(--iv-navy); }

/* ---------- Player + recently opened ---------- */

body .ivl-lib-wrap { background: var(--iv-white); }
body .ivl-lib { max-width: 1280px; margin: 0 auto; padding: 48px 40px 0; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 32px; align-items: start; scroll-margin-top: 110px; }
body .ivl-lib-wrap { scroll-margin-top: 80px; }
body .ivl-main { min-width: 0; }
body .ivl-player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--iv-tint); box-shadow: 0 40px 80px -48px rgba(0, 64, 110, .5); }
body .ivl-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body .ivl .ivl-poster,
body .ivl .ivl-poster:is(:hover, :focus) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
body .ivl .ivl-poster:focus-visible { outline: 3px solid var(--iv-accent); outline-offset: -3px; }
body .ivl-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .8s cubic-bezier(.22, 1, .36, 1); animation: ivl-fade .6s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ivl-fade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
body .ivl-poster:hover img { transform: scale(1.03); }
body .ivl-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 64, 110, .35), rgba(0, 64, 110, 0) 45%); }
body .ivl-pbtn, body .ivl-pring { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 999px; }
body .ivl-pbtn { background: rgba(255, 255, 255, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .9); color: var(--iv-navy); display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px -20px rgba(0, 64, 110, .6); transition: transform .4s cubic-bezier(.22, 1, .36, 1), background .3s ease; }
body .ivl-pbtn svg { margin-left: 4px; }
body .ivl-poster:hover .ivl-pbtn { transform: scale(1.08); background: rgba(255, 255, 255, .9); }
body .ivl-pring { border: 2px solid rgba(255, 255, 255, .9); animation: ivl-pring 2.4s cubic-bezier(.2, .6, .2, 1) infinite; }
@keyframes ivl-pring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

body .ivl-ptitle { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
body .ivl-ptitle > div { min-width: 0; flex: 1 1 360px; }
body .ivl .ivl-ptitle h2 { margin: 0; font: 600 30px/1.2 var(--iv-font); letter-spacing: -0.01em; color: var(--iv-slate); }
body .ivl .ivl-ptitle p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--iv-text); }
body .ivl .ivl-copy,
body .ivl .ivl-copy:focus { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--iv-line-2); background: var(--iv-white); color: var(--iv-navy); font: 500 14px var(--iv-font); text-transform: none; letter-spacing: normal; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
body .ivl .ivl-copy:hover { background: var(--iv-tint); border-color: var(--iv-navy); color: var(--iv-navy); }

body .ivl-recent { min-width: 0; border: 1px solid var(--iv-line); border-radius: 24px; background: var(--iv-white); overflow: hidden; }
body .ivl-recent-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--iv-line); }
body .ivl .ivl-recent-h h3 { margin: 0; font: 600 15px/1.4 var(--iv-font); letter-spacing: normal; color: var(--iv-slate); }
body .ivl-recent-h span { font-size: 12px; color: var(--iv-text); }
body .ivl-plist { max-height: 520px; overflow-y: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: var(--iv-line-2) transparent; }
body .ivl .ivl-vrow,
body .ivl .ivl-vrow:focus { position: relative; display: flex; gap: 14px; align-items: center; width: 100%; margin: 0; text-align: left; border: 0; background: transparent; border-radius: 14px; padding: 8px; cursor: pointer; font-family: var(--iv-font); text-transform: none; letter-spacing: normal; transition: background .25s ease; animation: ivl-in .45s cubic-bezier(.22, 1, .36, 1) both; }
body .ivl .ivl-vrow:hover { background: var(--iv-tint); }
body .ivl .ivl-vrow.is-on { background: var(--iv-tint); box-shadow: inset 3px 0 0 var(--iv-navy); }
body .ivl-vrow img { width: 128px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: var(--iv-line); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
body .ivl-vrow:hover img { transform: scale(1.04); }
body .ivl-vrow > span { min-width: 0; }
body .ivl-vt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--iv-slate); }
body .ivl-vd { display: flex; align-items: center; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--iv-text); }
body .ivl-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-right: 6px; }
body .ivl-eq i { display: block; width: 3px; background: var(--iv-navy); border-radius: 2px; animation: ivl-eq 1s ease-in-out infinite; }
body .ivl-eq i:nth-child(2) { animation-delay: .2s; }
body .ivl-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes ivl-eq { 0%, 100% { height: 4px; } 50% { height: 12px; } }
@keyframes ivl-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Browse ---------- */

/* The library sits on a blue band for contrast; it fades to white at the foot so it never meets the footer on a hard edge. */
body .ivl-band { margin-top: 56px; background: linear-gradient(to bottom, var(--iv-line) calc(100% - 160px), var(--iv-white)); }
body .ivl-browse { max-width: 1280px; margin: 0 auto; padding: 56px 40px 168px; }
body .ivl-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body .ivl-search { position: relative; flex: 1 1 320px; min-width: 0; }
body .ivl-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--iv-text); pointer-events: none; }
body .ivl .ivl-ctl :is(input[type="search"], select) { height: 44px; margin: 0; border-radius: 999px; border: 1px solid var(--iv-line-2); background: var(--iv-white); padding: 0 14px; font: 14px var(--iv-font); color: var(--iv-slate); box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
body .ivl .ivl-ctl input[type="search"] { width: 100%; padding-left: 40px; }
body .ivl .ivl-ctl select { padding-right: 36px; cursor: pointer; }
body .ivl .ivl-ctl :is(input, select):focus { outline: none; background: var(--iv-white); border-color: var(--iv-navy); box-shadow: 0 0 0 4px rgba(37, 173, 227, .18); }
body .ivl-range { margin-left: auto; padding: 10px 16px; border-radius: 999px; background: var(--iv-white); font-size: 14px; font-weight: 500; color: var(--iv-slate); }
body .ivl .ivl-none, body .ivl .ivl-empty { margin: 28px 0 0; padding: 48px; text-align: center; border: 1px dashed var(--iv-line-2); border-radius: 20px; color: var(--iv-text); }
body .ivl-band .ivl-none { background: var(--iv-white); }
body .ivl .ivl-empty { max-width: 1200px; margin: 48px auto 112px; }
body .ivl-none[hidden], body .ivl-card[hidden], body .ivl-pages[hidden] { display: none; }

body .ivl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }
body .ivl .ivl-card { display: block; border: 1px solid var(--iv-line); border-radius: 20px; background: var(--iv-white); overflow: hidden; color: inherit; text-decoration: none; transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1), border-color .3s ease; }
body .ivl .ivl-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(0, 64, 110, .45); color: inherit; }
body .ivl .ivl-card.is-on { border: 2px solid var(--iv-navy); }
body .ivl .ivl-card.is-on .ivl-vt { color: var(--iv-navy); }
body .ivl .ivl-card:focus-visible { outline: 3px solid var(--iv-accent); outline-offset: 3px; }
body .ivl-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--iv-line); }
body .ivl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
body .ivl-card:hover .ivl-thumb img { transform: scale(1.05); }
body .ivl-vplay { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 999px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--iv-navy); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.8); transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
body .ivl-vplay svg { margin-left: 2px; }
body .ivl-card:hover .ivl-vplay, body .ivl-card:focus-visible .ivl-vplay { opacity: 1; transform: none; }
body .ivl-cbody { display: block; padding: 18px 20px 22px; }
body .ivl-card .ivl-vt { font-size: 17px; }
body .ivl-card .ivl-vd { display: block; margin-top: 10px; font-size: 14px; }

body .ivl-pages { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
body .ivl .ivl-pg,
body .ivl .ivl-pg:focus { min-width: 44px; height: 44px; margin: 0; padding: 0 12px; border-radius: 12px; border: 1px solid var(--iv-line); background: var(--iv-white); color: var(--iv-slate); font: 500 15px var(--iv-font); text-transform: none; letter-spacing: normal; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
body .ivl .ivl-pg:hover { background: var(--iv-tint); border-color: var(--iv-line-2); color: var(--iv-slate); }
body .ivl .ivl-pg.is-on, body .ivl .ivl-pg.is-on:is(:hover, :focus) { background: var(--iv-navy); border-color: var(--iv-navy); color: var(--iv-white); }
body .ivl .ivl-pg:disabled { opacity: .45; cursor: default; }

/* ---------- Breakpoints ---------- */

@media (max-width: 1100px) {
	body .ivl-lib { grid-template-columns: 1fr; }
	body .ivl-plist { max-height: none; }
	body .ivl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 700px) {
	body .ivl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	body .ivl-hero, body .ivl-hero-bg, body .iv-frame:has(.ivl-hero) { border-radius: 26px; }
	body .ivl-banner { padding: 100px 16px 20px; }
	body .ivl-banner img { border-radius: 14px; }
	body .ivl-lib { padding: 32px 16px 0; }
	body .ivl-band { margin-top: 36px; background: linear-gradient(to bottom, var(--iv-line) calc(100% - 96px), var(--iv-white)); }
	body .ivl-browse { padding: 36px 16px 104px; }
	body .ivl .ivl-ptitle h2 { font-size: 24px; }
	body .ivl-pbtn, body .ivl-pring { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
	body .ivl-range { margin-left: 0; }
}
@media (max-width: 600px) {
	body .ivl-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	body .ivl-pring, body .ivl-eq i, body .ivl-poster img, body .ivl-vrow { animation: none; }
}

/* Hero foot fades into the page instead of ending on a rounded tinted edge (as on Home/About). */
body .iv-frame:has(.ivl-hero) { background: linear-gradient(to bottom, var(--iv-tint) calc(100% - 220px), rgba(238, 246, 252, 0)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body .ivl-hero, body .ivl-hero-bg { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body .ivl-hero-bg { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 220px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 220px), transparent); }
@media (max-width: 640px) {
	body .iv-frame:has(.ivl-hero), body .ivl-hero, body .ivl-hero-bg { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
	body .iv-frame:has(.ivl-hero) { background: linear-gradient(to bottom, var(--iv-tint) calc(100% - 140px), rgba(238, 246, 252, 0)); }
}