*,
*:before,
*:after { box-sizing: border-box; }

html,
body { margin: 0; padding: 0; background: var( --bg ); color: var( --ink ); font-family: var( --font-ui ); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; height: 100%; touch-action: pan-x pan-y; }
body { display: grid; grid-template-rows: var( --app-bar-h ) 1fr; overflow: hidden; }

/*html, body { height: 100vh; height: calc( 100lvh + env( safe-area-inset-bottom ) ); }
 main.reader { }*/

button { font-family: inherit; color: inherit; }

a { color: var( --link ); text-decoration: none; }
a:hover { text-decoration: underline; }

/********[ APP BAR ]******************************************/
.app-bar { grid-row: 1; display: flex; align-items: center; gap: 4px; padding: 0 calc( env( safe-area-inset-right ) + 8px ) 0 calc( env( safe-area-inset-left ) + 4px ); background: var( --bg-elev ); border-bottom: 1px solid var( --border ); position: sticky; top: 0; z-index: 65; padding-top: env( safe-area-inset-top ); height: calc( var( --app-bar-h ) + env( safe-area-inset-top ) ); }
.app-title { font-size: 1.245rem; font-weight: 600; margin: 0 4px; padding: 6px 8px; border: 0; background: transparent; color: var( --ink ); cursor: pointer; border-radius: 8px; font-family: Actual; }
.app-title:hover { background: var( --bg-sunken ); }
.app-bar-spacer { flex: 1; }

.icon-btn { background: transparent; border: 0; color: var( --ink-2 ); width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 120ms, color 120ms; }
.icon-btn:hover { background: var( --bg-sunken ); color: var( --ink ); }
.icon-btn:active { backgrond: var( --border ); }

.icon-btn .icon-moon { display: none; }
@media ( prefers-color-scheme: dark ) {
	.icon-btn .icon-sun { display: none; }
	.icon-btn .icon-moon { display: inline-block; }
}
html[data-theme="light"] .icon-btn .icon-sun { display: inline-block; }
html[data-theme="light"] .icon-btn .icon-moon { display: none; }
html[data-theme="dark"] .icon-btn .icon-sun { display: none; }
html[data-theme="dark"] .icon-btn .icon-moon { display: inline-block; }

/********[ SIDEBAR ]******************************************/
.side-nav { position: fixed; top: calc( var( --app-bar-h ) + env( safe-area-inset-top ) ); left: 0; bottom: 0; width: var( --nav-w ); background: var( --bg-elev ); border-right: 1px solid var( --border ); padding: 18px 12px 24px; overflow-y: auto; z-index: 60; transform: translateX( -100% ); transition: transform 200ms ease; }
.side-nav[data-open="true"] { transform: none; }
.nav-section + .nav-section { margin-top: 24px; }
.nav-section h2 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var( --ink-muted ); color: var( --ink-muted ); margin: 0 8px 8px; }
.nav-item,
.book-list > li > button { display: flex; align-items: center; width: 100%; background: transparent; border: 0; text-align: left; padding: 10px 10px; border-radius: 8px; font-size: 0.9375rem; color: var( --ink ); cursor: pointer; }
.nav-iten:hover,
.book-list > li > button:hover { background: var( --bg-sunken ); }
.nav-item[aria-current="true"],
.book-list > li > button[aria-current="true"] { background: var( --accent-soft ); color: var( --accent ); }
.nav-about { font-size: 0.8125rem; color: var( --ink-2 ); padding: 0 8px 0 0; line-height: 1.55; }
.nav-about p { margin: 0 0 .5em 8px; }
.nav-about em { color: var( --ink-muted ); }

.nav-backdrop { display: none; position: fixed; inset: calc( var( --app-bar-h ) + env( safe-area-inset-top ) ) 0 0 0; background: rgba( 0, 0, 0, 0.35 ); z-index: 35; }
.side-nav[data-open="true"] ~ .nav-backdrop { display: block; }

@media ( min-width: 960px ) {
	.menu-btn { display: none; }
	html[data-panel-open="true"] .reader { padding-right: var( --panel-w ); }
	html[data-nav-open="true"] .reader { padding-left: var( --nav-w ); }
	html[data-nav-open="true"] .nav-backdrop { display: none !important; }
}
@media ( max-width: 1420px ) {
	html[data-panel-open="true"][data-split="true"] .reader { padding-right: 0; }
}

/********[ PANES ]********************************************/
.reader { grid-row: 2; overflow: hidden; transition: padding 220ms ease; border-bottom: 1px solid var( --border ); }
.panes { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; height: 100%; }
.pane[hidden] { display: none !important; }
.panes[data-split="true"][data-split-dir="h"] { grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr; }
.panes[data-split="true"][data-split-dir="v"] { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
@media ( max-width: 720px ) {
	.panes[data-split="true"][data-split-dir="h"] { grid-template-columns: 1fr; }
	.panes[data-split="true"][data-split-dir="h"] .pane-divider { display: none; }
	.panes[data-split="true"][data-split-dir="h"] .pane-b { position: fixed; inset: calc( var( --app-bar-h ) + env( safe-area-inset-top ) ) 0 0 0; background: var( --bg ); z-index: 45; }
}
.pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var( --bg ); }
.panes[data-split="true"][data-split-dir="h"] .pane,
.panes[data-split="true"][data-split-dir="v"] .pane { border-right: 0; }

.pane-divider { display: none; background: var( --border ); }
.panes[data-split="true"] .pane-divider { display: block; }
.panes[data-split="true"][data-split-dir="h"] .pane-divider { width: 1px; }
.panes[data-split="true"][data-split-dir="v"] .pane-divider { height: 1px; }

/********[ FLOATING SPLIT DOCK ]******************************/
.split-dock { position: fixed; z-index: 55; display: flex; flex-direction: column; gap: 2px; padding: 3px; background: color-mix( in srgb, color-mix( in srgb, var( --bg-elev ), var( --bg ) 50% ), transparent 15% ); backdrop-filter: blur( 4px ); border: 1px solid var( --border ); border-radius: 999px; box-shadow: var( --shadow-1 ); transition: top 200ms ease, left 200ms ease, right 200ms ease, bottom 200ms ease, transform 200ms ease; right: calc( env( safe-area-inset-right ) + 14px ); top: calc( 50% + ( var( --app-bar-h ) + env( safe-area-inset-top ) ) / 2 ); transform: translateY( -50% ); }
html[data-panel-open="true"] .split-dock { right: calc( 12px + var( --panel-w ) ); }

html[data-split="true"] .split-dock { top: calc( 50% + ( var( --app-bar-h ) + env( safe-area-inset-top ) ) / 2 ); right: auto; bottom: auto; left: 50%; transform: translate( -50%, -50% ); }
html[data-split="true"][data-split-dir="h"] .split-dock { flex-direction: column; }
html[data-split="true"][data-split-dir="v"] .split-dock { flex-direction: row; top: calc( 50% + ( env( safe-area-inset-top ) / 2 ) + var( --app-bar-h ) - 5px ); }
html[data-split="true"][data-nav-open="true"] .split-dock { left: calc( 50% + var( --nav-w ) / 2 ); }
html[data-split="true"][data-panel-open="true"] .split-dock { left: calc( 50% - var( --panel-w ) / 2 ); }
html[data-split="true"][data-panel-open="true"][data-nav-open="true"] .split-dock { left: calc( 50% + ( var( --nav-w ) / 2 ) - ( var( --panel-w ) / 2 ) ); }

@media ( max-width: 1420px ) {
	html[data-split="true"][data-panel-open="true"] .split-dock { left: 50%; }
	html[data-split="true"][data-panel-open="true"][data-nav-open="true"] .split-dock { left: calc( 50% + ( var( --nav-w ) / 2 ) ); }
}
@media ( max-width: 720px ) {
	.split-dock { right: auto; left: 50%; top: auto; bottom: calc( 16px + env( safe-area-inset-bottom ) ); transform: translateX( -50% ); flex-direction: row; }
	html[data-panel-open="true"] .split-dock { display: none; }
	html[data-split="true"][data-split-dir="v"] .split-dock { background: none; border: none; box-shadow: none; backdrop-filter: none; left: auto; right: 87px; transform: translateY( -50% ); gap: 4px; padding: 0; align-items: center; }
	.split-dock .dock-rotate .icon-rotate-h { display: none !important; }
	.split-dock .dock-rotate .icon-rotate-v { display: inline-block !important; }
	html[data-split="true"][data-split-dir="v"] .split-dock .dock-rotate { display: none !important; }
	html[data-split="true"][data-split-dir="v"] .split-dock .dock-btn { background: var( --bg-elev ); border: 1px solid var( --border ); color: var( --ink-2 ); padding: 2px 10px 5px; font-size: 0.8125rem; line-height: normal; border-radius: 999px; cursor: pointer; display: inline-block; width: auto; height: auto; text-align: center; }
	html[data-split="true"][data-split-dir="v"] .split-dock .dock-btn:hover { background: var( --bg-sunken ); color: var( --ink ); }
	html[data-split="true"][data-split-dir="v"] .split-dock .dock-btn svg { width: 0.8125rem; height: 0.8125rem; vertical-align: middle; }
}


/*
@media ( max-width: 720px ) {
	.split-dock { right: auto; left: 50%; top: auto; bottom: calc( 16px + env( safe-area-inset-bottom ) ); transform: translateX( -50% ); flex-direction: row; }
	html[data-panel-open="true"] .split-dock { display: none; }
}
@media ( min-width: 960px ) {
	html[data-panel-open="true"]:not([data-split="true"]) .split-dock { right: calc( 12px + var( --panel-w ) ); }
	html[data-split="true"][data-panel-open="true"] .split-dock { left: calc( 50% - var( --panel-w ) / 2 ); }
	html[data-split="true"][data-nav-open="true"] .split-dock { left: calc( 50% + var( --nav-w ) / 2 ); }
	html[data-split="true"][data-nav-open="true"][data-panel-open="true"] .split-dock { left: calc( 50% + ( var( --nav-w ) - var( --panel-w ) ) / 2 ); }
}*/
.dock-btn { width: 30px; height: 30px; border: 0; background: transparent; color: var( --ink-muted ); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dock-btn:hover { background: var( --bg-sunken ); color: var( --ink ); }
.dock-btn[data-linked="true"] .icon-unlink { display: none; }
.dock-btn[data-linked="false"] .icon-link { display: none; }
.dock-btn[data-linked="false"] { opacity: .55; }
html[data-split="true"][data-split-dir="h"] .dock-btn .icon-rotate-h { display: none; }
html[data-split="true"][data-split-dir="v"] .dock-btn .icon-rotate-v { display: none; }
html:not( [data-split="true"] ) .dock-btn .icon-rotate-v { display: none; }
html:not( [data-split="true"] ) .dock-sync,
html:not( [data-split="true"] ) .dock-close { display: none; }
.pane-header { position: absolute; top: 0; right: 0; left: 0; display: flex; align-items: center; gap: 8px; padding: 8px calc( env( safe-area-inset-right ) ) 8px calc( env( safe-area-inset-left ) ); border-bottom: 1px solid var( --border ); background: color-mix( in srgb, color-mix( in srgb, var( --bg-elev ), var( --bg ) 50% ), transparent 15% ); min-height: 40px; z-index: 40; backdrop-filter: blur( 8px ); box-shadow: var( --shadow-1); }
.pane-header__inner { width: 100%; display: flex; max-width: min( 720px, 100% ); margin: auto; padding: 0 clamp( 16px, 5vw, 48px ); }
.pane-title { font-size: 0.9375rem; font-weight: 600; color: var( --ink ); margin-right: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: transparent; border: 0; text-align: left; padding: 4px 8px; margin-left: -8px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.pane-title:hover { background: var( --bg-sunken ); }
.pane-title:focus-visible { outline: 2px solid var( --accent ); outline-offset: -1px; }
.pane-controls { display: flex; gap: 4px; }
.chip { background: transparent; border: 1px solid var( --border ); color: var( --ink-2 ); padding: 4px 10px; font-size: 0.8125rem; border-radius: 999px; cursor: pointer; }
.pane-header .chip { background: var( --bg-elev ); }
.chip:hover { background: var( --bg-sunken ); color: var( --ink ); }

.pane-body { flex: 1; overflow-y: auto; padding: 75px clamp( 16px, 5vw, 48px ) 120px; /*scroll-behavior: smooth;*/ scrollbar-width: none; -ms-overflow-style: none; }
.pane-body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/********[ QUICKNAV ]*****************************************/
.quicknav-btn { position: absolute; left: calc( env( safe-area-inset-left ) + 14px ); bottom: calc( env( safe-area-inset-bottom ) + 15px ); width: 38px; height: 38px; border: 0; background: color-mix( in srgb, color-mix( in srgb, var( --bg-elev ), var( --bg ) 50% ), transparent 15% ); backdrop-filter: blur( 4px ); border: 1px solid var( --border ); color: var( --ink-muted ); border-radius: 999px; cursor: pointer; z-index: 48; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; transition: color 120ms, background 120ms; }
.quicknav-btn svg,
.quicknav-inner { display: block; height: 19px; width: 19px; }
.quicknav-inner > svg { display: none; }
.quicknav-inner > svg text { font-family: var( --font-ui ); font-weight: 700; }
.quicknav-inner[data-mode="compass"] .quicknav-icon-compass,
.quicknav-inner[data-mode="C"] .quicknav-icon-c,
.quicknav-inner[data-mode="V"] .quicknav-icon-v,
.quicknav-inner[data-mode="return"] .quicknav-icon-return { display: inline-block; }
.quicknav-btn .quicknav-icon-compass { /*transform: rotate( 20deg );*/ }
.quicknav-btn { transition: transform 160ms ease, color 120ms, background 120ms; }
.quicknav-btn:hover { color: var( --ink ); }
.quicknav-btn:active,
.pane.quicknav-active .quicknav-btn { color: var( --accent ); background: var( --bg-sunken ); }

/* place pane B's button on the right when in side-by-side split on wide screens */
@media ( min-width: 721px ) {
	.panes[data-split="true"][data-split-dir="h"] .pane[data-pane="b"] .quicknav-btn { left: auto; right: calc( env( safe-area-inset-right ) + 14px ); }
}

.quicknav-thumb { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; border-radius: 999px; transition: transform 180ms cubic-bezier( .2, .8, .2, 1 ); }
.pane.quicknav-active .quicknav-thumb { transition: none; }

.quicknav-line { position: absolute; left: calc( env( safe-area-inset-left ) + 14px + 15px ); bottom: calc( env( safe-area-inset-bottom ) + 14px + 15px ); width: 3px; height: 0; background: linear-gradient( to top, color-mix( in srgb, var( --accent ), transparent 60% ), color-mix( in srgb, var( --accent ), transparent 85% ) ); border-radius: 999px; transform: translateX( -50% ); transition: height 180ms ease, opacity 180ms ease; z-index: 47; opacity: 0; pointer-events: none; }
.quicknav-line[data-open="true"] { height: var( --qn-line-len, 200px ); opacity: 1; }

@media ( min-width: 721px ) {
	.panes[data-split="true"][data-split-dir="h"] .pane[data-pane="b"] .quicknav-line { left: auto; right: calc( env( safe-area-inset-right ) + 14px + 15px ); transform: translateX( 50% ); }
}

.quicknav-tooltip { position: absolute; left: calc( env( safe-area-inset-left ) + 14px + 30px + 12px ); bottom: calc( env( safe-area-inset-bottom ) + 14px + 4px ); padding: 6px 10px; border-radius: 8px; background: var( --bg-elev ); border: 1px solid var( --border ); box-shadow: var( --shadow-1 ); color: var( --ink ); font-size: 0.8125rem; white-space: nowrap; z-index: 49; opacity: 0; pointer-events: none; transition: opacity 140ms ease; max-width: calc( 100% - 80px ); overflow: hidden; text-overflow: ellipsis; }
.quicknav-tooltip[data-open="true"] { opacity: 1; }
.quicknav-tooltip[data-flash="true"] { background: var( --accent-soft ); color: var( --accent ); border-color: var( --accent ); }

@media ( min-width: 721px ) {
	.panes[data-split="true"][data-split-dir="h"] .pane[data-pane="b"] .quicknav-tooltip { left: auto; right: calc( env( safe-area-inset-right ) + 14px + 30px + 12px ); }
}

.quicknav-curtain { position: absolute; inset: 0; background: radial-gradient( circle at var( --qn-origin-x, 30px ) var( --qn-origin-y, 90% ), color-mix( in srgb, var( --bg ), transparent 10% ) 0%, color-mix( in srgb, var( --bg ), transparent 30% ) 60%, color-mix( in srgb, var( --bg ), transparent 55% ) 100% ); backdrop-filter: blur( 2px ); opacity: 0; pointer-events: none; transition: opacity 180ms ease; z-index: 46; }
.quicknav-curtain[data-open="true"] { opacity: 1; }
.quicknav-curtain[data-cancel="true"] { opacity: 0.35; }

/* quicknav */
.quicknav-menu-scrim { position: absolute; inset: 0; background: color-mix( in srgb, var( --bg ), transparent 35% ); backdrop-filter: blur( 2px ); opacity: 0; transition: opacity 160ms ease; z-index: 55; }
.quicknav-menu-scrim[data-open="true"] { opacity: 1; }

.quicknav-menu { position: absolute; left: calc( env( safe-area-inset-left ) + 14px ); bottom: calc( env( safe-area-inset-bottom ) + 14px + 38px + 10px ); display: flex; flex-direction: column; gap: 6px; max-width: calc( 100% - 28px ); z-index: 56; opacity: 0; transform: translateY( 6px ); transition: opacity 160ms ease, transform 160ms ease; pointer-events: auto; align-items: flex-start; }
.quicknav-menu[data-open="true"] { opacity: 1; transform: none; }
.quicknav-menu[data-side="right"] { left: auto; right: calc( env( safe-area-inset-right ) + 14px ); align-items: flex-end; }

.quicknav-menu-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var( --border ); background: color-mix( in srgb, var( --bg-elev ), transparent 10% ); backdrop-filter: blur( 8px ); color: var( --ink ); font-family: var( --font-ui ); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: var( --shadow-1 ); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background 120ms, color 120ms; }
.quicknav-menu-item:hover { background: var( --bg-sunken ); }
.quicknav-menu-item:active { background: var( --border ); }

.quicknav-clear-all { color: var( --ink-muted ); font-weight: 600; font-size: .75rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 12px; }
.quicknav-menu-sep { height: 4px; }
.quicknav-return { color: var( --accent ); border-color: color-mix( in srgb, var( --accent ), transparent 70% ); }
.quicknav-return-icon { display: inline-flex; width: 16px; height: 16px; }
.quicknav-return-icon svg { width: 100%; height: 100%; }

/* Toast */
.app-toast { position: fixed; left: 50%; bottom: calc( env( safe-area-inset-bottom ) + 24px ); transform: translate( -50%, 12px ); padding: 10px 16px; border-radius: 999px; background: var( --bg-elev ); border: 1px solid var( --border ); box-shadow: var( --shadow-1 ); color: var( --ink ); font-family: var( --font-ui ); font-size: 0.8125rem; opacity: 0; pointer-events: none; z-index: 200; transition: opacity 200ms ease, transform 200ms ease; max-width: calc( 100vw - 32px ); text-align: center; }
.app-toast[data-visible="true"] { opacity: 1; transform: translate( -50%, 0 ); }