/* ---------------------------------------------------------------------------
   quiettime_layout.css
   Replaces the "sBibleCommenterLayout = dualpane and sPhoneType <> ipad"
   server-side check. That check tried to answer a layout question (is the
   screen wide enough for two side-by-side iframes?) with a device question
   (is this an iPad?) -- which stopped working once iPadOS 13 made Safari's
   default user-agent indistinguishable from desktop Safari.

   Now both iframes are always rendered in the markup; this decides side-by-
   side vs. stacked purely from the available width, so it's correct for
   iPads, phones, a narrowed desktop browser window, split-screen -- anything.
--------------------------------------------------------------------------- */

.qt-dualpane {
	display: grid;
	grid-template-columns: 42% 58%;
	width: 100%;
	height: 100%;
}

/* Used for the prayer/praise pane, which was 65/35 instead of 42/58 */
.qt-dualpane.qt-dualpane-65 {
	grid-template-columns: 65% 35%;
}

.qt-dualpane iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Below this width, showing both panes at once -- even stacked -- leaves
   each one too short to actually read or write in. Below this breakpoint,
   show one pane at a time, full height, with a tab toggle to switch.
   Desktop/tablet keeps the side-by-side split above; nothing here touches
   that, this block is scoped entirely to narrow screens. */
@media (max-width: 900px) {
	.qt-dualpane,
	.qt-dualpane.qt-dualpane-65 {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
	}

	.qt-dualpane-tabs {
		display: flex;
		flex: 0 0 auto;
	}
	.qt-dualpane-tabs button {
		flex: 1;
		padding: 12px;
		border: 0;
		background: var(--qt-nav-bg, #000000);
		color: var(--qt-nav-text, #d3d3d3);
		font-weight: bold;
		font-size: 14px;
		cursor: pointer;
	}
	.qt-dualpane-tabs button.qt-tab-active {
		background: var(--qt-nav-bg-hover, #1F509F);
		color: var(--qt-nav-text-hover, #CC9966);
	}

	.qt-dualpane iframe {
		display: none;
		flex: 1 1 auto;
	}
	/* Pane 1 shows by default from CSS alone -- content is never blank
	   even if the tab-toggle JS is slow, blocked, or errors for any
	   reason. JS only needs to handle switching TO pane 2; showing pane
	   1 was never something that should have depended on JS at all. */
	.qt-dualpane iframe:nth-of-type(1) {
		display: block;
	}
	.qt-dualpane.qt-show-second iframe:nth-of-type(1) {
		display: none;
	}
	.qt-dualpane.qt-show-second iframe:nth-of-type(2) {
		display: block;
	}
}

/* The tab bar only makes sense on the narrow layout above -- on desktop/
   tablet, both panes are already visible side by side. */
.qt-dualpane-tabs {
	display: none;
}

/* ---------------------------------------------------------------------------
   Admin member table (quiettime_admin.asp). 8 columns of real data never
   fits a phone screen, and this page is desktop-oriented by nature -- it's
   a data table, not content. Rather than force it to reflow (which would
   make a wide table illegible), this lets it scroll horizontally within
   its own box instead of breaking the whole page, and hides the four
   least-essential columns on narrow screens so the actual admin actions
   (approve/edit/delete) are usable without scrolling at all.
--------------------------------------------------------------------------- */
.qt-scroll-table {
	width: 100%;
	max-width: 100vw;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.qt-admin-table {
		font-size: 12px;
	}
	/* Email Delivery, Join Date, Total Posts, Last Post */
	.qt-admin-table tr td:nth-child(3),
	.qt-admin-table tr td:nth-child(4),
	.qt-admin-table tr td:nth-child(5),
	.qt-admin-table tr td:nth-child(6) {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Safety net: nothing on this site should ever be wider than the viewport,
   but given mobile edge-cutoff has happened more than once already, this
   is a deliberate backstop rather than relying on every element getting
   its own sizing exactly right.
--------------------------------------------------------------------------- */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
   Header (title bar, quick links, pane toggle, account status).
   This used to be an HTML <table>, forced into a stacked layout on mobile
   by overriding display:block on its cells. That's a well-known fragile
   pattern in Safari -- table cells can retain their original sizing
   behavior even after the display override, which showed up as elements
   overlapping and the page still scrolling horizontally on iPhone.
   The header is now plain flexbox markup, full stop, so there's no table
   layout to fight in the first place -- this CSS controls it directly on
   every screen size, not just as a mobile patch.
--------------------------------------------------------------------------- */
.qt-header {
	background: #0000FF;
	width: 100%;
	box-sizing: border-box;
}
.qt-header-title {
	padding: 8px 10px;
}
.qt-header-title img {
	display: block;
}
.qt-header-divider {
	display: block;
	width: 100%;
	height: 2px;
}

.qt-header-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0 10px 8px;
	box-sizing: border-box;
	width: 100%;
}
.qt-header-navcell {
	flex: 1 1 auto;
	min-width: 0;
	order: 1;
}
.qt-header-account {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
	order: 2;
}
.qt-header-hiddenframe {
	width: 0;
	height: 0;
	overflow: hidden;
	order: 3;
}
.qt-header-toggle {
	/* Pulled onto its own row directly below the quick-links (navcell),
	   left-aligned to sit under the Reading link, instead of sharing
	   the top row over on the right next to the login/account area. */
	flex: 0 0 100%;
	white-space: nowrap;
	order: 4;
	text-align: left;
}

.qt-topbar-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
}
.qt-topbar-links > *:not(:last-child)::after {
	content: "|";
	margin: 0 8px;
	color: rgba(255, 255, 255, 0.5);
	font-weight: normal;
}
.qt-read-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #FFFFFF;
}
.qt-read-checkbox input {
	margin: 0;
}

/* Below this width, every part of the header stacks full-width instead of
   competing for space in a row -- this is what actually fixes cramped/
   overlapping text and horizontal scroll on a phone, since nothing is
   being forced into a fixed-width column anymore. */
@media (max-width: 900px) {
	.qt-header-row {
		flex-direction: column;
		align-items: stretch;
	}
	.qt-header-toggle,
	.qt-header-account {
		text-align: left;
		white-space: normal;
		overflow-wrap: break-word;
	}
	.qt-header-toggle {
		/* The dualpane/singlepane toggle only makes sense once you're
		   already viewing a reading or comments page, and adds a step
		   mobile doesn't need -- the persistent Reading/Comments links
		   in the quick-links bar go straight to a single-pane view
		   instead. Desktop above 900px keeps this toggle unchanged. */
		display: none;
	}
	.qt-header-account br {
		display: none;
	}
	.qt-header-account strong {
		display: block;
		margin-bottom: 4px;
	}

	.qt-topbar-links a,
	.qt-read-checkbox {
		background: rgba(255, 255, 255, 0.14);
		border-radius: 4px;
		padding: 8px 10px;
		font-size: 13px;
		line-height: 1.2;
	}
	.qt-read-checkbox {
		font-weight: bold;
	}
	.qt-read-checkbox input {
		width: 16px;
		height: 16px;
	}
	.qt-header-toggle a {
		display: inline-block;
		padding: 6px 4px;
	}
}