@charset "utf-8";
/* =============================================================================================================
    Know the Bible  --  Beginning with Jesus Workbook  (_Dev1.0/_css/Workbook.css)
   ------------------------------------------------------------------------------------------------------------
	The stylesheet for the workbook page, _pages/Workbook.php. Three faces of one markup: the student view,
	the leader's view (body class Workbook-Leader) and the printed workbook (the @media print block at the
	foot). There is no shared base sheet on this site - each page loads exactly one - so the frame rules at
	the top are the same ones MasterStyle.css and Survey.css each carry. Change #KtB-Background in all three
	(now four) together; the reasoning is written once over the rule in MasterStyle.css.

	THE FRAME IS THE SURVEY'S, THE LOOK IS THE OVERVIEW'S. 'full' locks the document to the window and hands
	scrolling to the two panes, menu and content, so the menu never scrolls away under a long lesson and the
	lesson never sits below a long menu. (orientation: portrait) decides the arrangement, not a width
	breakpoint, for the reason recorded in Survey.css. But where the survey panes are dark, these are the
	white-on-parchment panels of the Overview page, because this page is for reading and writing - long
	prose, and a reader's own words - and it is the face that gets printed.

	THE SCRIPT ANNOUNCES ITSELF WITH .Workbook-JS ON #Workbook, and every rule that hides something is gated
	on it. With no script every section is visible, the menu list is open, and the leader's answers show:
	the page degrades to one long document, which is also what print wants.

	PORTRAIT: the menu becomes a bar. Brand + title + a toggle button reading the current section, and beside
	it a "Link" button; the list and the footer drop down when the toggle is open (.Workbook-MenuOpen), the
	top (status + link) when Link is (.Workbook-LinkOpen). A phone's whole height is for the lesson.
============================================================================================================= */
body{
	margin: 0px;
	padding: 0px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: rgba(0,0,0,0.85);
}
*{
	-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;
}
html, body.KtB-Frame-full{
	height: 100%;
	overflow: hidden;
}
#KtB{
	position: relative;
	height: 100%;
	border: thin solid rgba(255,255,255,0.00);
}
#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
============================================================================================================= */
#Workbook{
	position: relative;
	display: -webkit-flex;
	display: flex;
	height: 100%;
	padding: 10px;
	gap: 10px;
}
#Workbook-Menu,
#Workbook-Content{
	position: relative;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: rgba(255,255,255,0.75);
	border: 2px solid rgba(255,255,255,1.00);
	border-radius: 10px;
	box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.25);
}
#Workbook-Menu{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex: 0 0 320px;
	flex: 0 0 320px;
	max-width: 36%;
	overflow-x: hidden;
	padding: 12px;
}
#Workbook-Content{
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	padding: clamp(14px, 3vw, 32px);
}
#Workbook-Panel{
	position: relative;
	max-width: 860px;
	margin: 0px auto;
}
/* =============================================================================================================
    Menu: Brand, Title, Toggle
   ------------------------------------------------------------------------------------------------------------
	The brand block holds the one inline logo on the page. On screen it is a small mark beside two lines
	of text; the print block below lifts this same element into a running header. It must stay a direct
	child of #Workbook-Menu for that, and the menu must never be display:none in print.
============================================================================================================= */
#Workbook-Brand{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 10px;
	padding: 2px 4px 10px;
	border-bottom: thin solid rgba(0,0,0,0.20);
}
#Workbook-Mark{
	-webkit-flex: 0 0 52px;
	flex: 0 0 52px;
	width: 52px;
	height: 48px;
}
#Workbook-Mark svg{
	display: block;
	width: 100%;
	height: 100%;
}
#Workbook-BrandText{
	min-width: 0;
	line-height: 1.25;
}
#Workbook-BrandText a{
	display: block;
	font-size: 17px;
	font-weight: bold;
	color: rgba(120,0,0,1.00);
	text-decoration: none;
}
#Workbook-BrandText a:hover,
#Workbook-BrandText a:focus-visible{
	text-decoration: underline;
}
#Workbook-BrandText span{
	display: block;
	font-size: 11px;
	color: rgba(0,0,0,0.60);
}
#Workbook-MenuTitle{
	padding: 12px 4px 8px;
}
#Workbook-MenuName{
	display: block;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.15;
	color: rgba(120,0,0,1.00);
}
#Workbook-MenuSub{
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-style: italic;
	color: rgba(0,0,0,0.60);
}
#Workbook-MenuToggle{
	display: none;
	width: 100%;
	min-height: 44px;
	margin: 4px 0px 6px;
	padding: 8px 40px 8px 12px;
	position: relative;
	font: inherit;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	color: rgba(255,255,255,1.00);
	background: rgba(120,0,0,1.00);
	border: 0px;
	border-radius: 6px;
	cursor: pointer;
}
.Workbook-MenuToggleCaret{
	position: absolute;
	top: 50%;
	right: 14px;
	width: 10px;
	height: 10px;
	margin-top: -8px;
	border-right: 2px solid rgba(255,255,255,0.9);
	border-bottom: 2px solid rgba(255,255,255,0.9);
	transform: rotate(45deg);
}
.Workbook-MenuOpen .Workbook-MenuToggleCaret{
	margin-top: -3px;
	transform: rotate(225deg);
}
/* The band's row (v1.35): the Sections toggle and, in the student view, a "Link" button beside it that opens
   the link panel on its own, so the Sections drawer never has the link block in it. Both are hidden outside
   portrait; the row then has no height. The Link button is the inverse of the toggle - red outline, red text -
   so the two read as two controls, and it fills red while its panel is open. A dot after "Link" says this
   device is using a link. */
#Workbook-MenuBar{
	display: -webkit-flex;
	display: flex;
	gap: 6px;
}
#Workbook-LinkToggle{
	display: none;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	min-height: 44px;
	margin: 4px 0px 6px;
	padding: 8px 14px;
	font: inherit;
	font-size: 16px;
	font-weight: bold;
	color: rgba(120,0,0,1.00);
	background: rgba(255,255,255,0.90);
	border: 2px solid rgba(120,0,0,1.00);
	border-radius: 6px;
	cursor: pointer;
}
.Workbook-LinkOpen #Workbook-LinkToggle{
	color: rgba(255,255,255,1.00);
	background: rgba(120,0,0,1.00);
}
#Workbook-LinkToggle.Workbook-LinkToggleOn::after{
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 7px;
	vertical-align: middle;
	border-radius: 50%;
	background: currentColor;
}
/* =============================================================================================================
    Menu: Section List
   ------------------------------------------------------------------------------------------------------------
	Real anchors to the section hashes. The dot at the right end is the lesson's progress: empty, half
	(started) or filled (every blank and question answered) - set by the script, so without it every dot is
	simply empty. The number column is the lesson number; front and back matter leave it blank.
============================================================================================================= */
#Workbook-MenuList{
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 4px 0px;
}
.Workbook-Button{
	position: relative;
	display: block;
	margin: 4px 0px;
	padding: 9px 30px 9px 44px;
	min-height: 40px;
	font-size: 15px;
	line-height: 1.25;
	color: rgba(0,0,0,0.85);
	text-decoration: none;
	background: rgba(255,255,255,0.45);
	border: thin solid rgba(0,0,0,0.12);
	border-radius: 5px;
}
.Workbook-Button:hover,
.Workbook-Button:focus-visible{
	background: rgba(120,0,0,0.08);
	border-color: rgba(120,0,0,0.35);
	outline: none;
}
.Workbook-ButtonSelected,
.Workbook-ButtonSelected:hover,
.Workbook-ButtonSelected:focus-visible{
	color: rgba(255,255,255,1.00);
	background: rgba(120,0,0,1.00);
	border-color: rgba(120,0,0,1.00);
}
.Workbook-ButtonNumber{
	position: absolute;
	top: 50%;
	left: 8px;
	width: 30px;
	margin-top: -10px;
	font-size: 16px;
	font-weight: 900;
	line-height: 20px;
	text-align: center;
	opacity: 0.5;
}
.Workbook-ButtonText{
	display: block;
}
.Workbook-ButtonDot{
	position: absolute;
	top: 50%;
	right: 10px;
	width: 11px;
	height: 11px;
	margin-top: -6px;
	border: 1.5px solid rgba(120,0,0,0.45);
	border-radius: 50%;
	background: transparent;
}
.Workbook-ButtonSelected .Workbook-ButtonDot{
	border-color: rgba(255,255,255,0.75);
}
.Workbook-ButtonStarted .Workbook-ButtonDot{
	background: linear-gradient(to right, rgba(120,0,0,0.85) 50%, transparent 50%);
}
.Workbook-ButtonSelected.Workbook-ButtonStarted .Workbook-ButtonDot{
	background: linear-gradient(to right, rgba(255,255,255,0.95) 50%, transparent 50%);
}
.Workbook-ButtonDone .Workbook-ButtonDot{
	background: rgba(120,0,0,0.85);
	border-color: rgba(120,0,0,0.85);
}
.Workbook-ButtonSelected.Workbook-ButtonDone .Workbook-ButtonDot{
	background: rgba(255,255,255,0.95);
	border-color: rgba(255,255,255,0.95);
}
/* =============================================================================================================
    Menu: Foot
============================================================================================================= */
#Workbook-MenuFoot{
	padding: 10px 4px 2px;
	border-top: thin solid rgba(0,0,0,0.20);
	font-size: 14px;
}
#Workbook-SaveState{
	min-height: 18px;
	margin-bottom: 6px;
	font-size: 12px;
	font-style: italic;
	color: rgba(0,0,0,0.55);
}
.Workbook-MenuLink{
	display: block;
	width: 100%;
	margin: 2px 0px;
	padding: 8px 0px;
	font: inherit;
	font-size: 14px;
	text-align: left;
	color: rgba(120,0,0,1.00);
	background: none;
	border: 0px;
	text-decoration: underline;
	cursor: pointer;
}
.Workbook-MenuLink:hover,
.Workbook-MenuLink:focus-visible{
	color: rgba(160,0,0,1.00);
}
.Workbook-MenuLinkQuiet{
	color: rgba(0,0,0,0.50);
}
/* =============================================================================================================
    Menu: Link
   ------------------------------------------------------------------------------------------------------------
	"Create my link", then "Your link" + "Copy link" once there is one (student view only - the guide
	renders none of this). The script puts .Workbook-LinkActive on #Workbook-Link and #Workbook-LinkPrompt
	while the page is using a link, which swaps the two halves of each.
	AT THE TOP OF THE MENU since v1.34 (Nick: "so people realize that it is an option"): #Workbook-MenuTop
	sits under the title and above the section list and holds the status line and this block. And once
	more as #Workbook-LinkPrompt on the Welcome page: a Key Truth-style call-out (the same tint and rule, no
	new colour) with an inline button, hidden in print.
	v1.35 (Nick: on a phone it was in the way every time he switched sections): in portrait the top is its
	OWN panel, opened by the "Link" button beside Sections (.Workbook-LinkOpen) - never part of the Sections
	drawer - and everywhere, once a link exists, the block is one row (see .Workbook-LinkRow below).
	SHOWN ONLY WITH THE SCRIPT - the reverse of every other gate in this sheet. A link is made and kept by
	the script; without it the button would do nothing, so the block stays hidden.
	The two buttons are the page red filled, like the portrait menu toggle - the one action in the foot
	that is not a text link, so it reads as the thing to press. No new colour: the hover red is the menu
	links' own. The address box is 16px for the same reason every input here is (iOS zooms on anything
	smaller) and full width, the button under it rather than beside it, so a 320px menu never squeezes a
	sixty-character address into a sliver.
============================================================================================================= */
#Workbook-MenuTop{
	padding: 8px 4px 12px;
	border-bottom: thin solid rgba(0,0,0,0.20);
	font-size: 14px;
}
#Workbook-Link,
#Workbook-LinkPrompt{
	display: none;
}
.Workbook-JS #Workbook-Link,
.Workbook-JS #Workbook-LinkPrompt{
	display: block;
}
.Workbook-LinkOn,
.Workbook-LinkActive .Workbook-LinkOff{
	display: none;
}
.Workbook-LinkActive .Workbook-LinkOn{
	display: block;
}
.Workbook-LinkButton{
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0px;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	font-weight: bold;
	color: rgba(255,255,255,1.00);
	background: rgba(120,0,0,1.00);
	border: 0px;
	border-radius: 6px;
	cursor: pointer;
}
.Workbook-LinkButton:hover,
.Workbook-LinkButton:focus-visible{
	background: rgba(160,0,0,1.00);
}
.Workbook-LinkButton[disabled]{
	opacity: 0.6;
	cursor: default;
}
/* ONE ROW once a link exists (v1.35): Copy link takes the room, Details sits beside it (outlined, so the
   filled button stays the obvious one), and the address, the warning and Stop open under Details - the
   script puts .Workbook-LinkDetailsOpen on #Workbook-Link. About 44px of block instead of about 160. */
.Workbook-LinkRow{
	display: -webkit-flex;
	display: flex;
	gap: 8px;
}
.Workbook-LinkRow .Workbook-LinkButton{
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}
.Workbook-LinkMore{
	position: relative;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 8px 30px 8px 12px;
	font: inherit;
	font-size: 14px;
	font-weight: bold;
	color: rgba(120,0,0,1.00);
	background: transparent;
	border: thin solid rgba(120,0,0,0.45);
	border-radius: 6px;
	cursor: pointer;
}
.Workbook-LinkMore:hover,
.Workbook-LinkMore:focus-visible{
	background: rgba(120,0,0,0.08);
}
.Workbook-LinkMoreCaret{
	position: absolute;
	top: 50%;
	right: 12px;
	width: 7px;
	height: 7px;
	margin-top: -6px;
	border-right: 2px solid rgba(120,0,0,0.85);
	border-bottom: 2px solid rgba(120,0,0,0.85);
	transform: rotate(45deg);
}
.Workbook-LinkDetailsOpen .Workbook-LinkMoreCaret{
	margin-top: -2px;
	transform: rotate(225deg);
}
#Workbook-LinkDetails{
	display: none;
	margin-top: 10px;
}
.Workbook-LinkDetailsOpen #Workbook-LinkDetails{
	display: block;
}
.Workbook-LinkLabel{
	display: block;
	margin: 0px 0px 4px;
	font-size: 12px;
	font-weight: bold;
	color: rgba(0,0,0,0.60);
}
.Workbook-LinkURL{
	display: block;
	width: 100%;
	margin: 0px 0px 8px;
	padding: 8px 10px;
	font: inherit;
	font-size: 16px;
	color: rgba(0,0,0,0.85);
	background: rgba(255,255,255,0.85);
	border: thin solid rgba(0,0,0,0.25);
	border-radius: 5px;
}
.Workbook-LinkHelp{
	margin: 6px 0px 0px;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(0,0,0,0.60);
}
#Workbook-LinkPrompt{
	margin: 0px 0px 18px;
	padding: 10px 16px;
	background: rgba(120,0,0,0.06);
	border-left: 4px solid rgba(120,0,0,0.65);
	border-radius: 0px 6px 6px 0px;
}
#Workbook-Panel #Workbook-LinkPrompt p{
	margin: 0px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}
.Workbook-LinkInline{
	display: inline-block;
	min-height: 44px;
	margin: 4px 0px 4px 6px;
	padding: 8px 14px;
	font: inherit;
	font-size: 15px;
	font-weight: bold;
	vertical-align: middle;
	color: rgba(255,255,255,1.00);
	background: rgba(120,0,0,1.00);
	border: 0px;
	border-radius: 6px;
	cursor: pointer;
}
.Workbook-LinkInline:hover,
.Workbook-LinkInline:focus-visible{
	background: rgba(160,0,0,1.00);
}
.Workbook-LinkInline[disabled]{
	opacity: 0.6;
	cursor: default;
}
#Workbook-Panel #Workbook-LinkPrompt .Workbook-LinkPromptNote{
	font-size: 13px;
	font-weight: 400;
	font-style: italic;
	color: rgba(0,0,0,0.60);
}
#Workbook-Panel #Workbook-LinkPrompt .Workbook-LinkPromptNote:empty{
	display: none;
}
/* =============================================================================================================
    Sections
   ------------------------------------------------------------------------------------------------------------
	Hidden only when the script is present; it shows one at a time. Without it, they stack with a rule
	between them.
============================================================================================================= */
.Workbook-Section{
	position: relative;
	padding-bottom: 10px;
}
.Workbook-Section + .Workbook-Section{
	margin-top: 40px;
	padding-top: 30px;
	border-top: 3px double rgba(120,0,0,0.35);
}
.Workbook-JS .Workbook-Section{
	display: none;
}
.Workbook-JS .Workbook-Section.Workbook-Current{
	display: block;
}
.Workbook-JS .Workbook-Section + .Workbook-Section{
	margin-top: 0px;
	padding-top: 0px;
	border-top: 0px;
}
/* =============================================================================================================
    Type
============================================================================================================= */
#Workbook-Panel p{
	margin: 0px 0px 12px;
	font-size: 17px;
	font-size: clamp(16px, 1.05vw + 12px, 17.5px);
	line-height: 1.55;
}
.Workbook-Head{
	padding-bottom: 12px;
	margin-bottom: 18px;
	border-bottom: thin solid rgba(0,0,0,0.25);
}
.Workbook-Number{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(0,0,0,0.55);
}
.Workbook-Title{
	margin: 2px 0px 0px;
	font-size: 30px;
	font-size: clamp(24px, 2.2vw + 14px, 32px);
	font-weight: 900;
	line-height: 1.15;
	color: rgba(120,0,0,1.00);
}
.Workbook-Subtitle{
	margin-top: 4px;
	font-size: 17px;
	font-style: italic;
	color: rgba(0,0,0,0.65);
}
.Workbook-Block{
	margin: 18px 0px;
}
.Workbook-Block h3{
	margin: 0px 0px 10px;
	padding-bottom: 4px;
	font-size: 19px;
	font-weight: 900;
	color: rgba(120,0,0,1.00);
	border-bottom: thin solid rgba(0,0,0,0.18);
}
.Workbook-Block h4{
	margin: 0px 0px 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(0,0,0,0.65);
}
.Workbook-List{
	margin: 0px;
	padding-left: 24px;
}
.Workbook-List li{
	margin: 6px 0px;
	font-size: 17px;
	line-height: 1.5;
}
.Workbook-Truth{
	margin: 0px 0px 18px;
	padding: 12px 16px;
	background: rgba(120,0,0,0.06);
	border-left: 4px solid rgba(120,0,0,0.65);
	border-radius: 0px 6px 6px 0px;
}
.Workbook-Label{
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(120,0,0,1.00);
}
.Workbook-Truth p{
	margin: 0px;
	font-weight: 600;
}
.Workbook-Scriptures{
	font-style: italic;
}
.Workbook-Verse{
	margin: 0px 0px 12px;
	padding: 12px 16px;
	background: rgba(255,255,255,0.70);
	border: thin solid rgba(120,0,0,0.30);
	border-radius: 6px;
}
#Workbook-Panel .Workbook-Verse p{
	margin: 0px 0px 6px;
	font-style: italic;
}
.Workbook-Verse cite{
	display: block;
	font-size: 15px;
	font-style: normal;
	font-weight: bold;
	text-align: right;
	color: rgba(120,0,0,1.00);
}
.Workbook-Plan{
	margin: 0px;
}
.Workbook-Plan dt{
	margin-top: 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(120,0,0,1.00);
}
.Workbook-Plan dd{
	margin: 2px 0px 0px;
	font-size: 17px;
	line-height: 1.5;
}
.Workbook-Closing{
	font-weight: bold;
	line-height: 1.7;
}
.Workbook-Key{
	margin: 0px;
	padding-left: 24px;
}
.Workbook-Key li{
	margin: 8px 0px;
	font-size: 16px;
	line-height: 1.45;
}
.Workbook-Key a{
	font-weight: bold;
	color: rgba(120,0,0,1.00);
}
.Workbook-KeyAnswers{
	display: block;
	color: rgba(0,0,0,0.70);
}
/* =============================================================================================================
    Cover
============================================================================================================= */
.Workbook-Cover{
	padding: 16px 0px 18px;
	margin-bottom: 18px;
	text-align: center;
	border-bottom: thin solid rgba(0,0,0,0.25);
}
.Workbook-CoverMark{
	width: clamp(120px, 24vw, 190px);
	margin: 0px auto 10px;
}
.Workbook-CoverMark svg{
	display: block;
	width: 100%;
	height: auto;
}
.Workbook-CoverTitle{
	font-size: 34px;
	font-size: clamp(26px, 3vw + 12px, 38px);
	font-weight: 900;
	letter-spacing: 3px;
	line-height: 1.1;
	color: rgba(120,0,0,1.00);
}
.Workbook-CoverSub{
	margin-top: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: rgba(0,0,0,0.60);
}
.Workbook-CoverStrap{
	margin: 14px 0px 16px;
	font-size: 14px;
	color: rgba(0,0,0,0.75);
}
.Workbook-CoverDot{
	margin: 0px 8px;
	color: rgba(120,0,0,1.00);
}
.Workbook-Cover .Workbook-Verse{
	max-width: 520px;
	margin: 0px auto;
	text-align: left;
}
#Workbook-Panel .Workbook-CoverLine{
	margin: 4px 0px;
	font-size: 15px;
	color: rgba(0,0,0,0.70);
}
.Workbook-Cover .Workbook-Line{
	max-width: 420px;
	margin: 16px auto 0px;
}
/* =============================================================================================================
    Inputs
   ------------------------------------------------------------------------------------------------------------
	Every input is at least 16px, because below that iOS zooms the page on focus and the reader loses the
	frame. Blanks sit INSIDE their sentence; a textarea grows with its text (the script sets its height, so
	overflow is hidden and resize is off - with no script it is a plain 3-row box). The .Workbook-Lines
	mirror under each textarea is for print only and never shows on screen.
============================================================================================================= */
.Workbook-Blanks,
.Workbook-Questions{
	margin: 0px;
	padding-left: 24px;
}
.Workbook-Blanks li{
	margin: 10px 0px;
	font-size: 17px;
	line-height: 2;
}
.Workbook-Blank{
	display: inline-block;
	width: 9em;
	max-width: 100%;
	margin: 0px 2px;
	padding: 1px 8px;
	font: inherit;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	color: rgba(120,0,0,1.00);
	vertical-align: baseline;
	background: rgba(255,255,255,0.65);
	border: 0px;
	border-bottom: 2px solid rgba(120,0,0,0.55);
	border-radius: 4px 4px 0px 0px;
}
.Workbook-Blank:focus{
	outline: none;
	background: rgba(255,255,255,1.00);
	border-bottom-color: rgba(120,0,0,1.00);
}
.Workbook-Questions li{
	margin: 14px 0px;
	font-size: 17px;
	line-height: 1.5;
}
.Workbook-Question{
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}
/* Important Doctrines (2026-10-10). The verses after each Key Verses question sit INSIDE its label, in
   brackets as the document has them - lighter and not bold, so the question still reads first. The one
   instruction line over the four questions is a p, so it needs the panel's id to beat #Workbook-Panel p. */
.Workbook-Refs{
	font-weight: 400;
	font-style: italic;
	color: rgba(120,0,0,0.85);
}
#Workbook-Panel .Workbook-Hint{
	margin: 0px 0px 8px;
	font-size: 15px;
	font-style: italic;
	color: rgba(0,0,0,0.65);
}
.Workbook-Field{
	position: relative;
}
.Workbook-FieldLabel{
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}
.Workbook-Area{
	display: block;
	width: 100%;
	min-height: 3.6em;
	padding: 8px 10px;
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(0,0,0,0.85);
	background: rgba(255,255,255,0.75);
	border: thin solid rgba(0,0,0,0.30);
	border-radius: 5px;
	resize: vertical;
}
.Workbook-JS .Workbook-Area{
	overflow: hidden;
	resize: none;
}
.Workbook-Area:focus{
	outline: none;
	background: rgba(255,255,255,1.00);
	border-color: rgba(120,0,0,0.80);
}
.Workbook-Lines{
	display: none;
}
.Workbook-Checks{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.Workbook-Check{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	gap: 10px;
	margin: 8px 0px;
	font-size: 17px;
	line-height: 1.5;
}
.Workbook-Check input{
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 3px 0px 0px;
	accent-color: rgba(120,0,0,1.00);
	cursor: pointer;
}
.Workbook-Check label{
	cursor: pointer;
}
.Workbook-Line{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: baseline;
	align-items: baseline;
	gap: 8px;
	margin: 8px 0px;
	font-size: 17px;
}
.Workbook-Line label{
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	font-weight: 600;
}
.Workbook-LineInput{
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 6px;
	font: inherit;
	font-size: 16px;
	color: rgba(0,0,0,0.85);
	background: transparent;
	border: 0px;
	border-bottom: thin solid rgba(0,0,0,0.45);
}
.Workbook-LineInput:focus{
	outline: none;
	border-bottom: 2px solid rgba(120,0,0,0.80);
	background: rgba(255,255,255,0.75);
}
/* =============================================================================================================
    Study & Apply, and the Leader's Answers
   ------------------------------------------------------------------------------------------------------------
	The answers exist only in the leader's markup. There they are hidden until the section's "Show suggested
	answers" button adds .Workbook-Revealed - the guide's own tip is to let the student answer first. The
	gate is on .Workbook-JS, so with no script (and on paper) they show.
============================================================================================================= */
.Workbook-Apply{
	margin-top: 22px;
	padding: 4px 16px 10px;
	background: rgba(255,255,255,0.45);
	border: thin solid rgba(0,0,0,0.12);
	border-radius: 8px;
}
.Workbook-ApplyHead{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	gap: 10px;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 8px 0px 4px;
	border-bottom: thin solid rgba(0,0,0,0.18);
}
.Workbook-ApplyHead h3{
	margin: 0px;
	font-size: 19px;
	font-weight: 900;
	color: rgba(120,0,0,1.00);
}
.Workbook-Reveal{
	min-height: 40px;
	padding: 6px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: bold;
	color: rgba(120,0,0,1.00);
	background: rgba(255,255,255,0.7);
	border: thin solid rgba(120,0,0,0.45);
	border-radius: 6px;
	cursor: pointer;
}
.Workbook-Reveal:hover,
.Workbook-Reveal:focus-visible{
	background: rgba(120,0,0,0.08);
}
.Workbook-AnswerBlank{
	display: inline-block;
	margin-left: 6px;
	padding: 0px 9px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.7;
	color: rgba(120,0,0,1.00);
	background: rgba(120,0,0,0.10);
	border-radius: 10px;
	vertical-align: middle;
}
.Workbook-AnswerResponse{
	margin: 4px 0px 8px;
	padding: 8px 12px;
	font-size: 15px;
	line-height: 1.5;
	background: rgba(120,0,0,0.06);
	border-left: 3px solid rgba(120,0,0,0.55);
	border-radius: 0px 5px 5px 0px;
}
.Workbook-AnswerResponse::before{
	content: "Suggested: ";
	font-weight: bold;
	color: rgba(120,0,0,1.00);
}
.Workbook-JS .Workbook-Section-lesson:not(.Workbook-Revealed) .Workbook-Answer{
	display: none;
}
.Workbook-LeaderNotes{
	padding-top: 10px;
	border-top: thin dashed rgba(120,0,0,0.35);
}
/* =============================================================================================================
    Previous / Next
============================================================================================================= */
.Workbook-Nav{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	gap: 10px;
	margin-top: 28px;
	padding-top: 14px;
	border-top: thin solid rgba(0,0,0,0.20);
}
.Workbook-Nav a{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	max-width: 48%;
	min-height: 48px;
	padding: 8px 14px;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.3;
	color: rgba(120,0,0,1.00);
	text-decoration: none;
	background: rgba(255,255,255,0.65);
	border: thin solid rgba(120,0,0,0.35);
	border-radius: 6px;
}
.Workbook-Nav a:hover,
.Workbook-Nav a:focus-visible{
	background: rgba(120,0,0,0.08);
	outline: none;
}
.Workbook-NavNext{
	margin-left: auto;
	text-align: right;
}
.Workbook-NavLabel{
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(0,0,0,0.50);
}
/* =============================================================================================================
    Portrait: the menu is a bar
   ------------------------------------------------------------------------------------------------------------
	Same markup, stacked. The list and the foot are hidden until the Sections toggle opens them; the top
	(status + link) until the Link button beside it does (v1.35) - and only when the script is there to open
	them; with no script the list is simply visible in the band.
============================================================================================================= */
@media screen and (orientation: portrait){
	#Workbook{
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	#Workbook-Menu{
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		max-width: none;
		max-height: 55%;
		padding: 8px 10px;
	}
	#Workbook-Content{
		padding: 14px;
	}
	#Workbook-Brand{
		padding-bottom: 6px;
	}
	#Workbook-Mark{
		-webkit-flex-basis: 40px;
		flex-basis: 40px;
		width: 40px;
		height: 37px;
	}
	#Workbook-BrandText a{
		font-size: 15px;
	}
	#Workbook-MenuTitle{
		padding: 6px 2px 4px;
	}
	#Workbook-MenuName{
		font-size: 17px;
	}
	#Workbook-MenuSub{
		font-size: 12px;
	}
	.Workbook-JS #Workbook-MenuToggle{
		display: block;
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
	}
	.Workbook-JS #Workbook-LinkToggle{
		display: block;
	}
	.Workbook-JS #Workbook-MenuTop,
	.Workbook-JS #Workbook-MenuList,
	.Workbook-JS #Workbook-MenuFoot{
		display: none;
	}
	/* Sections opens the list and the foot only; Link opens the top (status + link block) only. The guide
	   has no Link button, so its top - just the status line - opens with its Sections drawer, as before. */
	.Workbook-JS.Workbook-MenuOpen #Workbook-MenuList,
	.Workbook-JS.Workbook-MenuOpen #Workbook-MenuFoot,
	.Workbook-JS.Workbook-Leader.Workbook-MenuOpen #Workbook-MenuTop,
	.Workbook-JS.Workbook-LinkOpen #Workbook-MenuTop{
		display: block;
	}
	.Workbook-JS.Workbook-LinkOpen #Workbook-MenuTop{
		border-bottom: 0px;
	}
	.Workbook-Nav a{
		max-width: none;
		-webkit-flex: 1 1 0px;
		flex: 1 1 0px;
	}
	.Workbook-Blank{
		width: 7.5em;
	}
}
@media screen and (max-width: 400px){
	.Workbook-Apply{
		padding: 4px 10px 8px;
	}
	.Workbook-Blanks,
	.Workbook-Questions,
	.Workbook-List,
	.Workbook-Key{
		padding-left: 20px;
	}
}
/* =============================================================================================================
    Print
   ------------------------------------------------------------------------------------------------------------
	The same page as a document. Everything shows; nothing is a control.

	THIRD VERSION, AND THE ONE BUILT ON EVIDENCE. Nick printed the first two (2026-09-27) and his print
	previews settled three things that reading the spec could not:
	  - Chromium keeps position: fixed content INSIDE the page area. A header pushed into the top margin
	    with a negative offset wrapped to the bottom of every sheet, and the footer to the top, over the
	    text. Nothing paints in a page margin, so a running header cannot live there, and nothing pushes
	    the flow down on page two except a page margin. There is no running header or footer now: the cover
	    is a title page with the mark large, and that is the branding on paper.
	  - With the dialog's default margins the parchment stopped at the margin edge and left white bands,
	    because a root background covers the page AREA, not the sheet. So @page is margin: 0 - the page
	    area is the sheet and the parchment reaches its edges whatever the dialog says - and THE INSET
	    COMES FROM #Workbook-Panel'S OWN PADDING WITH box-decoration-break: clone, which gives every page's
	    fragment its own top and bottom padding rather than only the first page's. Proven in this engine
	    with a multicolumn probe before it was written here (_reference/workbook-harness/clone.html): the
	    second fragment's first line sat 60px down with clone and at 0 with slice. Printing fragments
	    through the same engine. If a browser lacks clone, pages two onward lose their top inset only.
	  - The second print was darker than the first because the first washed #KtB-Background to 45% and the
	    second painted the root image at full strength. A white overlay layer over the image is the wash
	    now - a gradient layer, so no second image and nothing to cache-bust.
	Colours are forced on (print-color-adjust) or the wash and the red would print as white and grey.

	ANSWERS ON PAPER. A textarea does not print well - it is a box that clips - so each one is hidden and
	its .Workbook-Lines mirror shows instead: the reader's words when the script has copied them there,
	ruled lines otherwise, as many as the document had. The rules are TILES, one 1.6em tile with the rule
	in its last point, so N lines is exactly N - a repeating gradient drew one extra at the top. The count
	comes from data-lines; the script sets the exact height, and the attribute rules cover every count the
	data file uses in case it has not. A fill-in blank prints as its value on a line, or the line alone.

	The leader's suggested answers always print in the guide view: a printed Leader's Guide with the
	answers hidden is a printed workbook.
============================================================================================================= */
@page{
	size: letter;
	margin: 0;
}
@media print{
	html, body, body.KtB-Frame-full, #KtB{
		height: auto;
		overflow: visible;
	}
	html{
		background-color: rgba(245,240,228,1.00);
		background-image: linear-gradient(rgba(255,255,255,0.50), rgba(255,255,255,0.50)), url("../_images/Background-2880.jpg");
		background-repeat: repeat;
		background-size: 8.5in auto;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	body{
		color: rgba(0,0,0,1.00);
		background: transparent;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	#KtB{
		border: 0px;
	}
	#KtB-Background{
		display: none;
	}
	/* The menu is NOT display: none in print, and the third print (v1.31) is why. The cover's big logo is a
	   <use> of the SVG that lives in the menu, and that SVG also holds the drop-shadow FILTER its red script,
	   cross and HE are drawn through. display: none takes the whole subtree out of the render tree, filter
	   included, so the <use> copy drew only the unfiltered ring and book - the script vanished from the
	   title page. visibility: hidden keeps the subtree rendered and the filter resolvable while painting
	   nothing; zero height and overflow hidden keep it out of the flow. */
	#Workbook-Menu{
		display: block;
		height: 0px;
		margin: 0px;
		padding: 0px;
		border: 0px;
		overflow: hidden;
		visibility: hidden;
		background: transparent;
		box-shadow: none;
	}
	#Workbook{
		display: block;
		height: auto;
		padding: 0px;
	}
	#Workbook-Content{
		display: block;
		padding: 0px;
		overflow: visible;
		background: transparent;
		border: 0px;
		box-shadow: none;
	}
	#Workbook-Panel{
		max-width: none;
		padding: 0.75in 0.8in 0.85in;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
	.Workbook-Section,
	.Workbook-JS .Workbook-Section{
		display: block;
		margin: 0px;
		padding: 0px;
		border: 0px;
		break-before: page;
		page-break-before: always;
	}
	.Workbook-Section:first-child{
		break-before: auto;
		page-break-before: auto;
	}
	.Workbook-Cover{
		padding: 1in 0pt 0pt;
		margin: 0pt;
		border: 0px;
		break-after: page;
		page-break-after: always;
	}
	.Workbook-CoverMark{
		width: 2.8in;
		height: 2.55in;
		margin: 0pt auto 18pt;
	}
	#Workbook-Panel p,
	.Workbook-List li,
	.Workbook-Blanks li,
	.Workbook-Questions li,
	.Workbook-Check,
	.Workbook-Line,
	.Workbook-Plan dd,
	.Workbook-Key li{
		font-size: 11pt;
		line-height: 1.45;
	}
	#Workbook-Panel .Workbook-Hint{
		font-size: 10pt;
	}
	.Workbook-Title{
		font-size: 20pt;
	}
	.Workbook-CoverTitle{
		font-size: 28pt;
	}
	.Workbook-CoverSub{
		font-size: 11pt;
	}
	.Workbook-CoverStrap{
		font-size: 11pt;
		margin: 16pt 0pt 18pt;
	}
	.Workbook-Subtitle{
		font-size: 12pt;
	}
	.Workbook-Block h3,
	.Workbook-ApplyHead h3{
		font-size: 13pt;
	}
	.Workbook-Block h4{
		font-size: 9.5pt;
	}
	.Workbook-Number,
	.Workbook-Label,
	.Workbook-Plan dt{
		font-size: 8.5pt;
	}
	.Workbook-Verse cite{
		font-size: 10pt;
	}
	.Workbook-Truth,
	.Workbook-Verse,
	.Workbook-Blanks li,
	.Workbook-Questions li,
	.Workbook-Check,
	.Workbook-Line,
	.Workbook-Head,
	.Workbook-AnswerResponse{
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.Workbook-Block h3,
	.Workbook-Block h4,
	.Workbook-ApplyHead{
		break-after: avoid;
		page-break-after: avoid;
	}
	.Workbook-Apply{
		padding: 0pt;
		background: transparent;
		border: 0px;
	}
	.Workbook-Verse{
		background: rgba(255,255,255,0.55);
	}
	.Workbook-Blank{
		display: inline-block;
		min-width: 1.7in;
		width: auto;
		padding: 0pt 4pt;
		font-size: 11pt;
		background: transparent;
		border-radius: 0px;
		border-bottom: 1pt solid rgba(0,0,0,0.70);
	}
	.Workbook-Area{
		display: none;
	}
	.Workbook-Lines{
		display: block;
		width: 100%;
		min-height: 1.6em;
		font-size: 11pt;
		line-height: 1.6em;
		white-space: pre-wrap;
		word-wrap: break-word;
		color: rgba(0,0,0,1.00);
		background-image: linear-gradient(to bottom, transparent calc(1.6em - 1pt), rgba(0,0,0,0.45) calc(1.6em - 1pt));
		background-size: 100% 1.6em;
		background-repeat: repeat-y;
	}
	.Workbook-Lines[data-lines="3"]{  height: 4.8em; }
	.Workbook-Lines[data-lines="4"]{  height: 6.4em; }
	.Workbook-Lines[data-lines="5"]{  height: 8em; }
	.Workbook-Lines[data-lines="6"]{  height: 9.6em; }
	.Workbook-Lines[data-lines="7"]{  height: 11.2em; }
	.Workbook-Lines[data-lines="15"]{ height: 24em; }
	.Workbook-LinesFilled{
		height: auto !important;
		padding: 2pt 4pt;
		background: transparent;
		border: 1pt solid rgba(0,0,0,0.30);
		border-radius: 3pt;
	}
	.Workbook-Check input{
		width: 11pt;
		height: 11pt;
		margin-top: 2pt;
	}
	.Workbook-LineInput{
		font-size: 11pt;
		background: transparent;
		border-bottom: 1pt solid rgba(0,0,0,0.60);
	}
	.Workbook-Nav,
	.Workbook-Reveal,
	.Workbook-JS #Workbook-LinkPrompt{
		display: none;
	}
	.Workbook-JS .Workbook-Section-lesson:not(.Workbook-Revealed) .Workbook-Answer{
		display: block;
	}
	.Workbook-JS .Workbook-Section-lesson:not(.Workbook-Revealed) .Workbook-AnswerBlank{
		display: inline-block;
	}
	.Workbook-AnswerBlank{
		font-size: 9.5pt;
	}
	.Workbook-AnswerResponse{
		font-size: 10pt;
	}
	.Workbook-Key a{
		text-decoration: none;
		color: rgba(120,0,0,1.00);
	}
}