
.comic-frame{
    display: flexbox;
    justify-self: center;
    margin: 0 auto;
	position: relative;
}

.jumpers{
    display: flex;
    margin-left: 12px;
    margin-right: 12px;
}
.jumper-label{
    margin-right: 8px;
    margin-left: 8px;
}
.jumper-btn{
    font-family: poco;
    font-size: 20px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 7px;
    border-radius: 8px;
    border: none;
}

#fitToggle{
    display: flex;
	position: fixed;
    justify-self: start;
    float: right;
    top: 32px;
	z-index: 50;
    border: hidden;
	transition: transform .08s ease;
}
/* default image: your native 1080px but responsive on small screens */
#comicImg{
	display:block;
	margin:0 auto;
	width:1080px;
	max-width:100%;
	height:auto;
	padding: 0;
}
:root{
	--fitTweak: 20px;   /* +px = smaller image, -px = larger image */
}
/* fit mode: limit by available viewport height that JS sets in --fitH */
#comicImg.fit{
	width:auto;                   /* let height control scale */
	max-height: calc(var(--fitH, 70vh) - var(--fitTweak));
}

.page-stage{
	display: flex;
	margin: 0;
	padding: 0;
	gap: 0;
}

.open-scroll{
	display:block;
	text-align:center;
	margin:0;
	padding:0;
}

.nav-row.bottom{
	margin-top: 2px;
}

.bm-btn.reader{
	position: absolute;
	right: -5px;
	top: -5px;
	z-index: 6;
	width: 20px;
	height: 20px;
    border: none;
	border-radius: 50%;
	background: var(--bg);
	color: var(--accent-2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.bm-btn.reader.active{
	background: var(--accent);
	color: var(--bg);
    border: none;
}
/* Reader dropdown row under bottom nav */
.bm-row{
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin: 8px 0 12px;
}
.bm-select{
    display: flex;
    justify-self: center;
    font-family: poco;
    font-size: 20px;
    margin-right: 6px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 7px;
    border-radius: 8px;
    border: none;
    min-width: 16vw;
}

.tx-wrap{
	width:100%;
	max-width: 720px;
	margin:8px auto 12px;
	border-radius:12px;
}
.tx-head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:8px 12px;
	border-bottom:1px solid var(--panel-border);
	color:var(--fg);
}
.tx-head small{ color:var(--muted); }
.tx-box{
	font-size: 20px;
	padding:10px 12px;
	max-height:280px;
	overflow:auto;
	white-space:pre-wrap;
	line-height:1.55;
	color:var(--fg);
	scrollbar-width:thin;
	resize:vertical;
}
