@charset "utf-8";
/* =============================================================================================================
	Know the Bible  --  Survey Course  (_Dev1.0/_css/Survey.css)
   ------------------------------------------------------------------------------------------------------------
	Both survey pages, Old and New Testament. Replaces OldTestamentSurvey.css, which laid the course out as
	a column down the middle of a scrolling page.

	The layout here fills the window and the PAGE does not scroll, at every size. The menu and the content
	pane are both on screen and each scrolls inside itself - side by side when the window is wider than it
	is tall, stacked menu-over-content when it is not. That is the whole point: picking the last class should not
	mean scrolling back up past a video to reach the menu again, and on a phone the video should not be
	somewhere below the whole class menu.

	This sheet defines the KtB frame itself (#KtB, #KtB-Background) rather than inheriting it, which is the
	site's convention - each page loads exactly one stylesheet and there is no shared base sheet underneath.
   ============================================================================================================= */
body{
    margin: 0px;
    padding: 0px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.noSelect{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* =============================================================================================================
	The Frame
   ------------------------------------------------------------------------------------------------------------
	The full frame locks the document to the window so the two panes below can own their own scrolling.
	The backdrop sits behind both.
   ============================================================================================================= */
html, body.KtB-Frame-full{
	height: 100%;
	overflow: hidden;
}
#KtB{
    position: relative;
	height: 100%;
    border: thin solid rgba(255,255,255,0.00);
}
/* -----------------------------------------------------------------------------------------------------------
	One of three identical copies - MasterStyle.css, BibleBreakdown.css, Survey.css. CHANGE ALL THREE TOGETHER.
	The reasoning lives once, over the same rule in MasterStyle.css: why the path is build-local, why there is
	no background-attachment, and why this backdrop is a desktop-only element.

	Worth knowing here specifically: this is the `full` frame, where the page does not scroll and the two panes
	scroll on their own. The backdrop sits behind both panes rather than behind a centre column, so how much of
	it shows is decided by those panes, not by #KtB-Content. Check this page separately from the other three.
   ----------------------------------------------------------------------------------------------------------- */
#KtB-Background{
    position: fixed;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
	background: url("../_images/Background-2880.jpg");
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center;
	border: 2px solid rgba(255,255,255,1.00);
    box-shadow: inset 0px 0px 3px 3px rgba(0,0,0,0.25);
}
/* =============================================================================================================
	The Two Panes
   ------------------------------------------------------------------------------------------------------------
	Flex rather than float, so the content pane takes whatever the menu does not and neither needs a width
	in pixels. min-height:0 on the panes is what actually lets them scroll inside a flex parent.

	BOTH PANES ARE ON SCREEN AT EVERY SIZE, and neither ever hands its scrolling back to the page. The build
	this replaces unlocked the frame below 800px - the page scrolled as one document, so a phone got the whole
	class menu first and reached the video only after scrolling past it. The menu and the video were
	never visible together, which is the one thing this page exists to do.

	The direction is decided by ORIENTATION, not by a width breakpoint. The question is "is this window wider
	than it is tall", and a width breakpoint answers it wrong at both ends - an upright tablet is wide enough
	to pass a width test and still has no room for a side-by-side menu, while a sideways phone is narrow
	enough to fail one and is exactly the shape that wants side-by-side. Same switch as the landing page.

	Landscape is the layout that was already here and is deliberately unchanged: a 300px menu on the left,
	the content pane taking the rest. The one addition is max-width, which only ever bites on a small
	landscape phone (300px of a 667px window is nearly half the screen); at 857px and up the menu is 300px
	exactly, so no desktop or tablet size moves.
   ============================================================================================================= */
#Survey{
	position: relative;
	display: -webkit-flex;
	display: flex;
	height: 100%;
	padding: 10px;
}
#Survey-Menu{
	position: relative;
	-webkit-flex: 0 0 300px;
	flex: 0 0 300px;
	max-width: 35%;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	margin-right: 10px;
	padding: 10px;
	background: rgba(0,0,0,0.75);
	border: thin solid rgba(255,255,255,0.65);
	border-radius: 4px;
}
#Survey-Content{
	position: relative;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 20px;
	padding: clamp(12px, 2.6vh, 20px);
	background: rgba(0,0,0,0.75);
	border: thin solid rgba(255,255,255,0.65);
	border-radius: 4px;
}
/* =============================================================================================================
	The Menu
   ------------------------------------------------------------------------------------------------------------
	One button per class. A class with nothing published yet is dimmed rather than hidden, so the shape of
	the course is visible before it is written - which is the whole New Testament course today.
   ============================================================================================================= */
#Survey-MenuTitle{
	position: relative;
	padding: 6px 8px 12px 8px;
	color: rgba(255,255,255,1.00);
	font-size: 20px;
	font-size: clamp(17px, 2.6vh, 20px);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: thin solid rgba(255,255,255,0.35);
}
.Survey-Button{
	position: relative;
	display: block;
	margin-top: 8px;
	padding: 10px 10px 10px 46px;
	color: rgba(255,255,255,0.85);
	background: rgba(255,255,255,0.05);
	border: thin solid rgba(255,255,255,0.20);
	border-radius: 3px;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.Survey-Button:hover{
	background: rgba(255,255,255,0.15);
	border-color: rgba(255,255,255,0.45);
}
.Survey-ButtonSelected,
.Survey-ButtonSelected:hover{
	color: rgba(0,0,0,1.00);
	background: rgba(255,255,255,0.92);
	border-color: rgba(255,255,255,1.00);
}
.Survey-ButtonNumber{
	position: absolute;
	top: 50%;
	left: 8px;
	width: 30px;
	margin-top: -11px;
	font-size: 18px;
	font-weight: 900;
	text-align: center;
	opacity: 0.55;
}
.Survey-ButtonText{
	position: relative;
	font-size: 15px;
	line-height: 1.25;
}
.Survey-ButtonPending .Survey-ButtonText{
	font-style: italic;
	opacity: 0.55;
}
/* =============================================================================================================
	The Class Panel
   ------------------------------------------------------------------------------------------------------------
	THE HEADING IS SIZED AGAINST THE HEIGHT OF THE WINDOW, because on this page the heading's only real
	competitor is the video underneath it. Measuring found the case: at 320x568 with the longest reading in
	the course, a fixed 30px title over a wrapped four-line reading took 191px of a 332px pane and left the
	video 5.6px of room - a pass, but one that the next long reading string in _data.php would have turned
	into a failure, silently, with nobody editing CSS.

	A breakpoint was written first and thrown away. It fixed the number but stepped: two phones a few
	millimetres apart in size rendered visibly different type, and the boundary had to be guessed. Every
	clamp below reaches its cap by ~768px of height, so no desktop, laptop or tablet size moves at all -
	what changes is only what a short screen gets, and it changes smoothly.
   ============================================================================================================= */
#Survey-Panel{
	position: relative;
	max-width: 1100px;
	margin: 0px auto;
	color: rgba(255,255,255,1.00);
}
.Survey-Loading,
.Survey-Pending,
.Survey-Problem{
	position: relative;
	padding: 40px 10px;
	font-size: 18px;
	font-style: italic;
	text-align: center;
	opacity: 0.75;
}
.Survey-Head{
	position: relative;
	padding-bottom: 12px;
	padding-bottom: clamp(8px, 1.6vh, 12px);
	margin-bottom: 16px;
	margin-bottom: clamp(10px, 2.1vh, 16px);
	border-bottom: thin solid rgba(255,255,255,0.35);
}
.Survey-Number{
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	opacity: 0.6;
}
.Survey-Title{
	font-size: 30px;
	font-size: clamp(20px, 3.9vh, 30px);
	font-weight: 900;
	line-height: 1.15;
}
.Survey-Reading{
	margin-top: 6px;
	font-size: 16px;
	font-size: clamp(13px, 2.1vh, 16px);
	font-style: italic;
	opacity: 0.85;
}
/* =============================================================================================================
	Video
   ------------------------------------------------------------------------------------------------------------
	Padding-bottom of 56.25% is a 16:9 box that holds its shape at any width, so the iframe can fill it
	without the pane reflowing as the video loads. That is the base, and it is what old browsers keep.

	IT IS ALSO WHY THE VIDEO USED TO RUN OFF A SHORT SCREEN, and measuring is what showed it: a 16:9 box
	sized only from the WIDTH has no idea how tall its pane is, so on a landscape phone - a wide pane barely
	300px tall - the heading alone left the video hanging 79px past the bottom. Visible-only-after-scrolling
	is the exact fault this change exists to remove, so the box needs a HEIGHT bound as well as a shape.

	max-height cannot do it on its own: percentage padding resolves against the PARENT's width, so capping
	this element's height leaves the padding untouched and the two disagree. aspect-ratio sizes the box from
	either axis, so a matching max-width lets the box shrink in WIDTH to keep 16:9 rather than stretch out of
	it, and auto margins centre what is left. Behind @supports, so a browser without aspect-ratio renders
	exactly what it renders today rather than something half-applied.

	📝 aspect-ratio is on the ruled-out list in BibleBreakdown.css for costing 2,839ms of layout - that was
	76 of them nested inside 76 grids, not one box in a flex pane. The mechanism does not transfer; the
	warning is about scale.

	svh over vh where it exists, and for the reason it was invented: on iOS vh means the LARGE viewport,
	taller than what is actually on screen, so a vh-derived cap quietly budgets space the reader does not
	have. The frame itself is immune - it is height:100%, the real box - and this cap is the one place on
	the page that asks the window how tall it is.

	The subtracted 175px is the heading above the video plus the pane's own padding, measured rather than
	guessed. Change the heading's type and re-measure it.
   ============================================================================================================= */
.Survey-Video{
	position: relative;
	width: 100%;
	height: 0px;
	padding-bottom: 56.25%;
	margin: 0px auto 16px auto;
	background: rgba(0,0,0,1.00);
	border: thin solid rgba(255,255,255,0.35);
}
@supports (aspect-ratio: 16 / 9){
	.Survey-Video{
		height: auto;
		padding-bottom: 0px;
		aspect-ratio: 16 / 9;
		max-height: calc(100vh - 175px);
		max-width: calc((100vh - 175px) * 16 / 9);
		max-height: calc(100svh - 175px);
		max-width: calc((100svh - 175px) * 16 / 9);
	}
}
.Survey-Video iframe{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 0px;
}
/* =============================================================================================================
	Documents
   ------------------------------------------------------------------------------------------------------------
	The handout renders in the pane rather than opening a separate tab, with the tabs switching which
	document is in the viewer. The open-in-a-new-tab link is not a nicety: an embedded PDF is exactly the
	thing some mobile browsers refuse to render, and that link is the way out when they do.
   ============================================================================================================= */
.Survey-DocBar{
	position: relative;
	padding-bottom: 8px;
}
.Survey-DocTab{
	position: relative;
	display: inline-block;
	margin-right: 6px;
	padding: 7px 14px;
	color: rgba(255,255,255,0.85);
	font-size: 14px;
	font-weight: 700;
	background: rgba(255,255,255,0.08);
	border: thin solid rgba(255,255,255,0.25);
	border-radius: 3px;
	cursor: pointer;
}
.Survey-DocTab:hover{
	background: rgba(255,255,255,0.18);
}
.Survey-DocTabSelected,
.Survey-DocTabSelected:hover{
	color: rgba(0,0,0,1.00);
	background: rgba(255,255,255,0.92);
	border-color: rgba(255,255,255,1.00);
}
.Survey-DocOpen{
	position: relative;
	float: right;
	padding: 7px 0px;
	color: rgba(255,255,255,0.75);
	font-size: 13px;
	text-decoration: underline;
}
.Survey-DocOpen:hover{
	color: rgba(255,255,255,1.00);
}
/* -----------------------------------------------------------------------------------------------------------
	The viewer is sized against the WINDOW rather than given a pixel height, because the pane it sits in is a
	scroller with no height of its own to take a percentage of. It used to be a flat 800px, dropping to 500px
	below the old breakpoint; that breakpoint is gone, and 800px on a phone would be a document taller than
	the screen with a video above it. 68vh keeps the whole handout in view on any shape, and the cap keeps a
	tall desktop window from stretching it past the 800px it has always been.
   ----------------------------------------------------------------------------------------------------------- */
.Survey-Doc{
	position: relative;
	width: 100%;
	height: 800px;
	height: clamp(300px, 68vh, 800px);
	background: rgba(255,255,255,1.00);
	border: thin solid rgba(255,255,255,0.35);
}
.Survey-Doc iframe{
	width: 100%;
	height: 100%;
	border: 0px;
}
/* =============================================================================================================
	Upright Screens
   ------------------------------------------------------------------------------------------------------------
	Taller than wide - a phone held normally, an upright tablet, a narrow desktop window. The panes stack
	instead of sitting side by side, but the FRAME STAYS LOCKED: the menu is a band across the top, the
	content pane fills what is left underneath, and each still scrolls inside itself. The page never scrolls,
	so the video can never be below the fold.

	The menu takes a share of the HEIGHT, not a pixel band. flex-basis resolves against the parent's height
	here because #Survey has a definite one, which is what makes a percentage work at all - and a percentage
	is what keeps it honest on a 640px phone and a 1024px tablet alike. vh was avoided on purpose: on iOS it
	means the LARGE viewport, taller than what is actually on screen, so a vh-sized menu quietly overruns the
	space it was budgeted. Percent of a parent that is already height:100% has no such gap.

	The bounds do the rest. 30% of a tall upright tablet is more menu than either course needs (13 and 14), so it caps
	at 260px and gives the surplus to the video; on a short window the floor keeps at least the course title
	and a class or two visible rather than collapsing to a scrollbar.

	max-width is reset because the landscape rule caps the menu at 35% of the WIDTH, which is meaningless
	once it is a full-width band - left in place it would pin the menu to a third of the screen.
   ============================================================================================================= */
@media screen and (orientation: portrait){
	#Survey{
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	#Survey-Menu{
		-webkit-flex: 0 0 30%;
		flex: 0 0 30%;
		max-width: none;
		min-height: 120px;
		max-height: 260px;
		margin: 0px 0px 10px 0px;
	}
}