/* How to Human document (/model). Sizes are set here because the site's heading styles are display
   sizes for marketing sections; caps are in px because the site's root font size grows on big screens. */

.model-header {
	background-color: var(--base-color-brand--navy);
	background-image: linear-gradient(135deg, #00192e 55%, #003b4d);
	color: var(--text-color--text-alternate);
	padding-top: 8rem;
	padding-bottom: 3.5rem;
}
.model-header_content { max-width: 56rem; }
.model-eyebrow {
	color: var(--base-color-brand--bolt);
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	margin-bottom: 1rem;
}
.model-header .model-title { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.05; margin: 0 0 1.25rem; }
.model-lead { font-size: 1.1875rem; line-height: 1.55; max-width: 44rem; margin: 0; opacity: 0.9; }
.model-meta { margin: 1.25rem 0 0; font-size: 0.875rem; opacity: 0.65; }

.model-main { padding-top: 3rem; padding-bottom: 5rem; color: var(--text-color--text-primary); }

/* Two columns: contents and document */
.htw { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 4rem; align-items: start; }

/* Contents */
.htw-toc { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); display: flex; flex-direction: column; font-size: 0.9375rem; }
.htw-toc_toggle { display: none; }
.htw-toc_panel { overflow-y: auto; overscroll-behavior: contain; padding-right: 0.5rem; }
.htw-progress { margin-bottom: 1.25rem; }
.htw-progress_bar { height: 4px; border-radius: 2px; background: var(--base-color-neutral--neutral-lightest); overflow: hidden; }
.htw-progress_bar span { display: block; height: 100%; width: 0; background: var(--base-color-brand--green); transition: width 0.3s; }
.htw-progress_text { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--text-color--text-secondary); display: flex; gap: 0.5rem; align-items: baseline; }
.htw-reset { margin-left: auto; background: none; border: 0; padding: 0; color: var(--base-color-brand--aqua); font-size: 0.8125rem; cursor: pointer; }
.htw-toc ol { list-style: none; margin: 0; padding: 0; }
.htw-toc_part > a { font-weight: 600; }
.htw-toc a {
	position: relative; display: block; padding: 0.3125rem 0 0.3125rem 1.5rem;
	color: var(--text-color--text-secondary); text-decoration: none; line-height: 1.35;
	border-radius: 0.375rem;
}
.htw-toc a:hover { color: var(--base-color-brand--navy); }
.htw-toc li > ol { display: none; padding-bottom: 0.375rem; }
.htw-toc li.is-open > ol { display: block; }
.htw-toc_part ol a { padding-left: 2.375rem; font-size: 0.875rem; }
.htw-toc_part ol ol a { padding-left: 3.25rem; font-size: 0.8125rem; }
/* Status dot: empty = not read, green tick = read, filled = you are here */
.htw-toc a::before {
	content: ""; position: absolute; left: 0.4375rem; top: 0.75rem;
	width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--border-color--border-primary);
}
.htw-toc_part ol a::before { left: 1.3125rem; top: 0.6875rem; }
.htw-toc_part ol ol a::before { left: 2.1875rem; top: 0.625rem; }
.htw-toc a.is-read { color: var(--text-color--text-primary); }
.htw-toc a.is-read::before {
	border: 0; width: 10px; height: 10px; left: 0.3125rem; top: 0.625rem;
	background: var(--base-color-brand--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 5.2l1.7 1.6 3.3-3.6' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.htw-toc_part ol a.is-read::before { left: 1.1875rem; top: 0.5625rem; }
.htw-toc_part ol ol a.is-read::before { left: 2.0625rem; top: 0.5rem; }
.htw-toc a.is-current { color: var(--base-color-brand--navy); background: var(--base-color-neutral--neutral-lightest); font-weight: 600; }
.htw-toc a.is-current:not(.is-read)::before { background: var(--base-color-brand--aqua); border-color: var(--base-color-brand--aqua); }

/* Document */
/* One base size for the whole document, in px (the site's root size grows on big screens); every heading
   and label is a fixed multiple of it, so a heading is never smaller than the text under it. */
.htw-doc { min-width: 0; font-size: 17px; line-height: 1.7; }
.htw-doc > * { max-width: 48rem; }
.htw-doc > .htw-figure.is-wide, .htw-doc > .htw-table { max-width: none; }
.htw-doc h2, .htw-doc h3, .htw-doc h4 { scroll-margin-top: 1.5rem; color: var(--base-color-brand--navy); font-weight: 700; }
.model-main .htw-doc h2 {
	font-size: 2.1em; line-height: 1.15;
	margin: 4.5rem 0 1.5rem; padding-top: 2rem; border-top: 1px solid var(--border-color--border-primary);
}
.model-main .htw-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.model-main .htw-doc h3 { font-size: 1.5em; line-height: 1.25; margin: 3rem 0 1rem; }
.model-main .htw-doc h4 { font-size: 1.2em; line-height: 1.3; margin: 2.25rem 0 0.75rem; }
.htw-doc p, .htw-doc ul, .htw-doc ol, .htw-doc dl { margin: 0 0 1.125rem; font-size: 1em; }
.htw-doc li { margin-bottom: 0.375rem; }
.htw-doc hr { border: 0; border-top: 1px solid var(--border-color--border-primary); margin: 2rem 0; }
.htw-subhead { display: block; font-size: 1.12em; color: var(--base-color-brand--navy); margin: 1.75rem 0 0.5rem; }
.htw-doc a {
	color: var(--base-color-brand--aqua); text-decoration: underline;
	text-decoration-color: rgba(0, 117, 114, 0.35); text-underline-offset: 3px;
}
.htw-doc a:hover { text-decoration-color: currentColor; }
.htw-callout { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--base-color-brand--green); background: var(--base-color-neutral--neutral-lightest); border-radius: 0 0.5rem 0.5rem 0; }
.htw-callout.is-note { border-left-color: #e0a800; background: #fff9e6; }
.htw-callout p:last-child { margin-bottom: 0; }

/* Tables scroll sideways on small screens instead of squeezing */
.htw-table { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--border-color--border-primary); border-radius: 0.5rem; }
.htw-table table { width: 100%; border-collapse: collapse; font-size: 0.9em; line-height: 1.45; }
.htw-table th, .htw-table td { text-align: left; vertical-align: top; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border-color--border-primary); }
.htw-table tr:last-child td { border-bottom: 0; }
.htw-table th { background: var(--base-color-brand--navy); color: #fff; font-weight: 600; }
.htw-table tr:nth-child(even) td { background: var(--base-color-neutral--neutral-lightest); }
.htw-table ul { margin: 0; padding-left: 1.125rem; }

/* Figures: click to see full size */
.htw-figure { margin: 2rem 0; }
.htw-figure img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: var(--r); margin: 0 auto; border-radius: 0.5rem; border: 1px solid var(--border-color--border-primary); background: #fff; }
.htw-figure a { display: block; cursor: zoom-in; }
.htw-figure figcaption { margin-top: 0.625rem; text-align: center; font-size: 0.85em; color: var(--text-color--text-secondary); }
/* Regular figures stay under 36rem tall; width and height come from the image ratio (--r) so space is reserved before it loads */
.htw-figure:not(.is-wide) img { width: min(100%, calc(36rem * var(--r))); }
.htw-lightbox {
	position: fixed; inset: 0; z-index: 2000; background: rgba(0, 25, 46, 0.92);
	display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; overflow: auto;
}
.htw-lightbox[hidden] { display: none; }
.htw-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 0.5rem; }
.htw-lightbox.is-full { align-items: flex-start; justify-content: flex-start; }
.htw-lightbox.is-full img { max-width: none; max-height: none; }

/* Footnotes */
.htw-doc sup.reference { font-size: 0.7em; line-height: 0; }
.htw-doc sup.reference a { text-decoration: none; }
.htw-doc ol.references { font-size: 0.85em; line-height: 1.5; padding-left: 1.5rem; color: var(--text-color--text-secondary); }
.htw-doc ol.references li { margin-bottom: 0.5rem; scroll-margin-top: 1.5rem; }
.htw-doc ol.references li:target, .htw-doc sup.reference:target { background: #fff9e6; }

@media screen and (max-width: 991px) {
	.model-header { padding-top: 6.5rem; padding-bottom: 2.5rem; }
	.htw { grid-template-columns: 1fr; gap: 0; }
	/* Contents becomes a bar that stays at the top while reading, and opens as a panel */
	.htw-toc { top: 0; z-index: 50; max-height: none; margin: 0 -5.6% 1.5rem; background: #fff; border-bottom: 1px solid var(--border-color--border-primary); }
	.htw-toc.is-open { box-shadow: 0 16px 32px rgba(0, 25, 46, 0.18); }
	.htw-toc_toggle {
		display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.875rem 5.6%;
		background: none; border: 0; text-align: left; font: inherit; color: var(--base-color-brand--navy); cursor: pointer;
	}
	.htw-toc_label { font-weight: 600; flex: none; }
	.htw-toc_label::after { content: " ▾"; font-size: 0.75em; }
	.htw-toc_toggle[aria-expanded="true"] .htw-toc_label::after { content: " ▴"; }
	.htw-toc_current { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-color--text-secondary); font-size: 0.875rem; }
	.htw-toc_panel { display: none; max-height: 70vh; padding: 0 5.6% 1rem; }
	.htw-toc.is-open .htw-toc_panel { display: block; }
	.htw-doc h2, .htw-doc h3, .htw-doc h4, .htw-doc ol.references li { scroll-margin-top: 4rem; }

}
@media screen and (max-width: 479px) {
	.htw-doc { font-size: 16px; }
	.htw-table table { font-size: 0.85em; }
}

/* 2026 review notes: corrections and context added alongside the original text */
.htw-review {
	margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: 0 0.5rem 0.5rem 0;
	border-left: 4px solid var(--base-color-brand--aqua); background: #eaf5f4; font-size: 0.96em;
}
.htw-review > p:last-child { margin-bottom: 0; }
.htw-review b:first-child { color: var(--base-color-brand--aqua); }

/* Selected Liber8 slides */
.htw-slide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; margin: 1.5rem 0 2rem; }
.htw-doc > .htw-slide-grid { max-width: none; }
.htw-slide-grid .htw-figure { margin: 0; }
.htw-slide-grid .htw-figure img { width: 100%; }
@media screen and (max-width: 767px) { .htw-slide-grid { grid-template-columns: 1fr; } }

/* Resource library appendix */
.htw-doc > .htw-library { max-width: none; }
.htw-liber8 { color: var(--text-color--text-secondary); font-size: 0.85em; }
.htw-library .htw-table td:first-child { min-width: 16rem; }

/* About this document (disclaimer above the contents and document) */
.htw-about { margin: 0 0 2.5rem; padding: 1.25rem 1.5rem; border-radius: 0.75rem; background: var(--base-color-neutral--neutral-lightest); border: 1px solid var(--border-color--border-primary); font-size: 15px; line-height: 1.6; color: var(--text-color--text-secondary); }
.htw-about p { margin: 0 0 0.625rem; }
.htw-about p:last-child { margin-bottom: 0; }
.htw-about b { color: var(--base-color-brand--navy); }
.htw-about a { color: var(--base-color-brand--aqua); }