/* --- CSS Table of Contents --- */
/* 1. Self-hosted font (@font-face) */
/* 2. Root Variables (Colours & Fonts) */
/* 3. Accessibility Helpers (skip link, screen-reader status) */
/* 4. General Styles & Structure */
/* 5. Page Header & Title */
/* 6. Navigation & Header Controls (incl. the header dropdowns) */
/* 7. Fixed Footer */
/* 8. Page Intro */
/* 9. Record Grid (DNS Helper hub) */
/* 10. Static & Error Pages */
/* 11. Record Pages (panel selector, data tables, example code blocks) */
/* 12. Dark Mode Theme */
/* 13. Media Queries for Responsiveness */
/* 14. Reduced Motion */
/* ----------------------------- */

/* File: style.css */
/* Spacing rule (docs/design-philosophy.md on hostingdetails.eu): every margin, padding and gap
   is a multiple of 5, in pixels, never em or rem, because spacing belongs
   to the page's layout, not to the size of the text on it. Font sizes are
   the one place em is used. Sizes of things (the 38px toggle button, icon
   dimensions, border widths and radii) are not spacing and are not held to
   the grid. One deliberate exception: `margin: -1px` in .visually-hidden,
   part of the standard technique for hiding text without removing it from
   the accessibility tree. Retrofitted 28 September 2026: the first version
   of this file carried 8px, 12px, 16px, 18px and 24px over from
   expert.hostingdetails.eu's stylesheet, none of them on the grid. */
/* Forked from expert.hostingdetails.eu's style.css, not a shared include,
   same reasoning as lib/sync.md documents there: this file is free to
   drift from its source once copied.
   
   This is deliberately NOT a full copy of that file. Everything specific
   to Expert's own tools (results grids, wizards, the raw JSON viewer,
   comparison tables, rate-limit summaries) is left out, because none of
   it exists on this site yet. Sections get added here exactly when the
   matching feature is built on dnshelper.eu, not before, the same way
   the roadmap adds a phase only when its turn comes.
   
   What changed from the source palette: the accent colour moved from
   purple to blue, values chosen below. Every status colour (ok, warning,
   error) is left untouched, since those aren't a brand choice, they are
   a shared vocabulary this project intentionally keeps in step with
   hostingdetails.eu and expert.hostingdetails.eu. */

/* --- 1. Self-hosted font --- */
/* Same font, same reasoning as the source file: no Google Fonts request,
   no external dependency. Copy lato-v25-latin-regular.woff2 and
   lato-v25-latin-700.woff2 into this project's own /fonts/ folder, they
   are not shared or symlinked from the other two sites.
   Since 0.9 (round 4) the url() is relative to this stylesheet, fonts/
   instead of /fonts/: the stylesheet sits in the site's root, so the
   relative path is right live and in XAMPP, where /fonts/ pointed
   outside this site's folder and Lato silently fell back to the
   system font. */
@font-face {
	font-family: 'Lato';
	src: url('fonts/lato-v25-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Lato';
	src: url('fonts/lato-v25-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --- 2. Root Variables --- */
:root {
	--font-family: 'Lato', sans-serif;

	--colour-background-light: #f4f6f9;
	--colour-surface-light: #ffffff;
	--colour-text-primary-light: #212529;
	--colour-text-secondary-light: #656d75;
	--colour-border-light: #dee2e6;

	/* Blue accent, replacing hostingdetails.eu's purple. Contrast
	   checked by hand against white button text: accent-light reaches
	   roughly 6.5:1, accent-hover-light roughly 8.9:1, accent-dark
	   (used as a dark-mode button background) roughly 5.2:1. All clear
	   the WCAG AA minimum of 4.5:1 for normal text, by hand-calculated
	   relative luminance rather than a browser tool, so spot-check
	   these with an actual contrast checker before treating them as
	   final, the same care the source file's own comments show for its
	   purple values. */
	--colour-accent-light: #1c5eab;
	--colour-accent-hover-light: #164a86;
	--colour-title-bg-light: #eaf1fa;

	--colour-background-dark: #121212;
	--colour-surface-dark: #1e1e1e;
	--colour-text-primary-dark: #e0e0e0;
	--colour-text-secondary-dark: #adb5bd;
	--colour-border-dark: #3a3a3a;
	--colour-accent-dark: #2f6fb0;
	--colour-accent-hover-dark: #9cc4ec;
	--colour-title-bg-dark: #16212c;
	/* Lighter than --colour-accent-dark specifically for text links on
	   the dark surface, same reasoning as the source file: reaches
	   roughly 7.5:1 against the dark background, comfortably clearing
	   the 4.5:1 minimum. Buttons keep using --colour-accent-dark. */
	--colour-link-dark: #6fa8e0;

	/* --- Status colours ---
	   Unchanged from hostingdetails.eu and expert.hostingdetails.eu on
	   purpose. Green means the same thing everywhere in this family;
	   only the brand accent is allowed to differ per site. */
	--colour-ok-solid-light: #28a745;
	--colour-ok-solid-border-light: #23903c;
	--colour-ok-text-light: #208838;
	--colour-ok-solid-dark: #2a7d3f;
	--colour-ok-solid-border-dark: #3ca957;
	--colour-ok-text-dark: #28a745;

	--colour-warning-solid-light: #fd7e14;
	--colour-warning-solid-border-light: #e36b07;
	--colour-warning-text-light: #a5490b;
	--colour-warning-surface-light: #fff6ed;
	--colour-warning-solid-dark: #b3590d;
	--colour-warning-solid-border-dark: #ff9a40;
	--colour-warning-text-dark: #ff9a40;
	--colour-warning-surface-dark: #2b1d10;

	--colour-error-solid-light: #dc3545;
	--colour-error-solid-border-light: #c82333;
	--colour-error-text-light: #dc3545;
	--colour-error-surface-light: #f8d7da;
	--colour-error-surface-border-light: #f5c6cb;
	--colour-error-on-surface-light: #721c24;
	--colour-error-solid-dark: #a52834;
	--colour-error-solid-border-dark: #f15261;
	--colour-error-text-dark: #fa3c4e;
	--colour-error-surface-dark: #4d2124;
	--colour-error-surface-border-dark: #6e3539;
	--colour-error-on-surface-dark: #f5c6cb;

	--colour-divider-light: #f0f0f0;
	--colour-code-surface-light: #f8f9fa;
	--colour-input-surface-dark: #333333;
	--colour-muted-light: #6c757d;
	--colour-muted-dark: #9aa0a6;
}

/* --- 3. Accessibility Helpers --- */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 10px;
	z-index: 100;
	padding: 10px 15px;
	background-color: var(--colour-accent-light);
	color: white;
	text-decoration: none;
	border-radius: 0 0 5px 5px;
	transition: top 0.15s;
}

.skip-link:focus {
	top: 0;
}

body.dark-mode .skip-link {
	background-color: var(--colour-surface-dark);
	color: var(--colour-text-primary-dark);
	border: 2px solid var(--colour-accent-dark);
	border-top: none;
}

/* --- 4. General Styles & Structure --- */
body {
	font-family: var(--font-family);
	margin: 0;
	padding: 15px;
	background-color: var(--colour-background-light);
	color: var(--colour-text-primary-light);
	font-size: 0.9em;
	line-height: 1.4;
	padding-bottom: 70px;
}

.container {
	max-width: 1400px;
	margin: 0 auto;
}

a {
	color: var(--colour-accent-light);
}

body.dark-mode {
	background-color: var(--colour-background-dark);
	color: var(--colour-text-primary-dark);
}

body.dark-mode a {
	color: var(--colour-link-dark);
}

body.dark-mode a:hover {
	color: var(--colour-accent-hover-dark);
}

/* h1 is used only for the site title inside .page-header (every other
   heading on this site starts at h2), so colouring it with the brand
   accent is safe everywhere it appears. Contrast checked against the
   header's own background: accent-light on title-bg-light reaches
   roughly 5.7:1, link-dark on title-bg-dark roughly 6.5:1, both clear
   the WCAG AA minimum of 4.5:1 for normal text (h1 is large text
   besides, so even 3:1 would have been enough). link-dark is used
   here rather than accent-dark, since accent-dark is only verified as
   a background colour with white text on it, not as text itself. */
h1 {
	font-size: 1.6em;
	margin: 0;
	padding: 15px 0;
	color: var(--colour-accent-light);
	background-color: transparent;
	text-align: left;
}

body.dark-mode h1 {
	color: var(--colour-link-dark);
}

/* --- 5. Page Header & Title --- */
/* Pinned to the top of the window rather than scrolling away. This site
   did it first; hostingdetails.eu and expert.hostingdetails.eu followed
   on 13 October 2026. z-index keeps it above the record cards and page
   content that scroll underneath; the skip link (z-index 100) still sits
   above it. The shadow is always present, not only once something has
   scrolled underneath (an earlier version of this comment said so, which
   was never true).

   html's scroll-padding-top keeps the skip link's jump to #main-content
   from landing underneath the header. Measured on 16 October 2026
   without it: the top of main ended at -0.5px, behind a header 73.5px
   tall. 90px is the header plus room to breathe, the same value the
   other two sites use. On narrow screens the header is unpinned and the
   padding goes back to 0, see section 13. Added in 0.9 (roundup to 1.0,
   round 1). */
html {
	scroll-padding-top: 90px;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	background-color: var(--colour-title-bg-light);
	padding: 0 10px 0 20px;
	border-radius: 8px;
	border-bottom: 3px solid var(--colour-accent-light);
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

body.dark-mode .page-header {
	background-color: var(--colour-title-bg-dark);
	border-bottom-color: var(--colour-accent-dark);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.page-header h1 a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.header-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* The same logo as hostingdetails.eu and expert.hostingdetails.eu, the
   same path, copied rather than linked. Since 0.9 (round 4) it is an
   inline SVG in _partials/header.php with fill="currentColor", so it
   takes the colour of the h1 it sits in: the accent in light mode, the
   lighter link colour in dark mode (about 2.5:1 against the dark header
   as a fixed-colour image, about 6.5:1 now). An inline SVG has no
   intrinsic width, hence a width as well as a height; the logo is
   square. */
.site-logo {
	height: 1.4em;
	width: 1.4em;
	flex-shrink: 0;
}

/* --- 6. Navigation & Header Controls --- */
.header-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.nav-link {
	font-size: 0.9em;
	font-weight: bold;
	color: var(--colour-text-secondary-light);
	text-decoration: none;
	padding: 10px 15px;
	border-radius: 5px;
	transition: background-color 0.2s, color 0.2s;
}

.nav-link:hover {
	background-color: rgba(0,0,0,0.05);
	color: var(--colour-text-primary-light);
}

.nav-link.button-style {
	background-color: var(--colour-title-bg-light);
	border: 1px solid var(--colour-border-light);
}

.nav-link.button-style:hover {
	border-color: var(--colour-text-secondary-light);
}

/* The toggle button itself: theme.js fills it with an inline sun or moon
   icon, but that icon has no size, border or colour of its own without
   this rule. Missing from the first version of this file, the button
   rendered with no visible shape at all. */
#darkModeToggle {
	height: 38px;
	width: 38px;
	padding: 5px;
	background-color: transparent;
	border: 1px solid var(--colour-border-light);
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s, border-color 0.2s;
}

#darkModeToggle:hover {
	background-color: rgba(0,0,0,0.05);
}

/* Forked from a pattern that used --colour-border-light here, the same
   near-white grey as the header background it sits on: measured by
   hand at roughly 1.1:1 contrast against .page-header, well under the
   3:1 WCAG minimum for a meaningful UI icon (SC 1.4.11), effectively
   invisible rather than merely subtle. --colour-text-secondary-light
   reaches roughly 4.6:1 against the same background instead, and is
   already the token this family uses everywhere else a readable grey
   is needed, so this reuses it rather than inventing a new one. */
#darkModeToggle svg {
	width: 20px;
	height: 20px;
	stroke: var(--colour-text-secondary-light);
	stroke-width: 2;
	fill: none;
	transition: stroke 0.2s;
}

#darkModeToggle:hover svg {
	stroke: var(--colour-accent-light);
}

body.dark-mode .nav-link,
body.dark-mode .site-footer a {
	color: var(--colour-link-dark);
}

body.dark-mode .nav-link:hover {
	background-color: rgba(255,255,255,0.05);
	color: var(--colour-text-primary-dark);
}

body.dark-mode .nav-link.button-style {
	background-color: var(--colour-title-bg-dark);
	border-color: var(--colour-border-dark);
}

body.dark-mode .nav-link.button-style:hover {
	border-color: var(--colour-text-secondary-dark);
}

body.dark-mode #darkModeToggle {
	border-color: var(--colour-border-dark);
}

body.dark-mode #darkModeToggle:hover {
	background-color: rgba(255,255,255,0.05);
}

/* Same fix as the light-mode rule above: --colour-border-dark against
   --colour-title-bg-dark measured at roughly 1.4:1, --colour-text-
   secondary-dark reaches the 4.5:1+ this family already relies on for
   readable text against a dark surface, comfortably clearing the 3:1
   icon minimum too. */
body.dark-mode #darkModeToggle svg {
	stroke: var(--colour-text-secondary-dark);
}

body.dark-mode #darkModeToggle:hover svg {
	stroke: var(--colour-link-dark);
}

/* Header dropdowns (16 October 2026): "Tools" (external) on the left next
   to the "Hosting Details" button, "Pages" (internal) on the right next to
   the theme toggle. Forked from the "Tools" dropdown of
   expert.hostingdetails.eu, with two changes: the lists are grouped under
   headings, and there are two of them. Each list opens below its button,
   the external one aligned to its button's left edge, the internal one to
   its right edge, and is capped in height and scrollable, so every entry
   stays reachable on a short screen. Spacing follows the five-pixel grid;
   the 4px beside the icon is an optical correction next to an inline
   icon, exempt under the rule at the top of this file. */
.header-menu {
	position: relative;
}

.header-menu-icon {
	width: 16px;
	height: 16px;
	vertical-align: -3px;
	margin-right: 4px;
}

.header-menu-list {
	position: absolute;
	top: calc(100% + 5px);
	width: 260px;
	max-width: calc(100vw - 40px);
	max-height: min(70vh, 500px);
	overflow-y: auto;
	padding: 5px;
	background-color: var(--colour-surface-light);
	border: 1px solid var(--colour-border-light);
	border-radius: 6px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	z-index: 1;
}

.header-menu-external .header-menu-list {
	left: 0;
}

.header-menu-internal .header-menu-list {
	right: 0;
}

.header-menu-list.hidden {
	display: none;
}

.header-menu-heading {
	margin: 0;
	padding: 10px 10px 5px;
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--colour-text-secondary-light);
}

.header-menu-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-menu-list li {
	margin: 0;
}

.header-menu-list a {
	display: block;
	padding: 10px;
	border-radius: 4px;
	color: var(--colour-text-primary-light);
	text-decoration: none;
	font-weight: bold;
	font-size: 0.9em;
}

.header-menu-list a:hover {
	background-color: var(--colour-title-bg-light);
}

body.dark-mode .header-menu-list {
	background-color: var(--colour-surface-dark);
	border-color: var(--colour-border-dark);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

body.dark-mode .header-menu-heading {
	color: var(--colour-text-secondary-dark);
}

body.dark-mode .header-menu-list a {
	color: var(--colour-text-primary-dark);
}

body.dark-mode .header-menu-list a:hover {
	background-color: var(--colour-title-bg-dark);
}

/* The page the visitor is on, in the Pages list: marked rather than
   removed, and never by colour alone (italic as well). The dark-mode text
   colour is the lighter link token, since the accent itself reaches only
   about 3.2:1 on this surface. */
.header-menu-list a[aria-current="page"] {
	color: var(--colour-accent-light);
	font-style: italic;
}

body.dark-mode .header-menu-list a[aria-current="page"] {
	color: var(--colour-link-dark);
}

/* --- 7. Fixed Footer --- */
.site-footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: var(--colour-surface-light);
	border-top: 1px solid var(--colour-border-light);
	padding: 10px 20px;
	text-align: center;
	font-size: 0.8em;
	z-index: 100;
	box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
}

.site-footer a {
	color: var(--colour-accent-light);
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

body.dark-mode .site-footer {
	background-color: var(--colour-surface-dark);
	border-top-color: var(--colour-border-dark);
}

/* --- 8. Page Intro --- */
.page-intro {
	text-align: center;
	padding: 20px;
	background-color: var(--colour-surface-light);
	border: 1px solid var(--colour-border-light);
	border-radius: 8px;
	margin: 0 auto 30px auto;
	max-width: 800px;
}

.page-intro h2 {
	font-size: 2em;
	background: none;
	border: none;
	padding: 0;
	margin-top: 10px;
	text-align: center;
}

.page-intro p {
	max-width: 700px;
	margin: 10px auto;
}

.page-intro-disclaimer {
	font-size: 0.85em;
	color: var(--colour-text-secondary-light);
}

body.dark-mode .page-intro {
	background-color: var(--colour-surface-dark);
	border-color: var(--colour-border-dark);
}

body.dark-mode .page-intro-disclaimer {
	color: var(--colour-text-secondary-dark);
}

/* --- 9. Record Grid (DNS Helper hub) --- */
/* Same card language and grouping mechanism as expert.hostingdetails.eu's
   .protocol-grid, renamed to "record" throughout since these cards
   explain a DNS record rather than run a live protocol check. Structure
   and behaviour are otherwise identical. Expert's "upcoming" state for a
   card whose page does not exist yet was used here while the site was
   being built, and removed in 0.9 once every card was live: new cards
   are only added when their page exists. */
.record-group {
	max-width: 1020px;
	margin: 0 auto 25px auto;
}

.record-group-title {
	margin: 0 0 10px;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--colour-text-secondary-light);
}

body.dark-mode .record-group-title {
	color: var(--colour-text-secondary-dark);
}

.record-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 0;
}

.record-card {
	border: 1px solid var(--colour-border-light);
	border-radius: 6px;
	background-color: var(--colour-surface-light);
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	padding: 15px 20px;
	display: flex;
	flex-direction: column;
}

.record-card h4 {
	margin: 0 0 10px;
	font-size: 1.1em;
	color: var(--colour-text-primary-light);
}

.record-card p {
	color: var(--colour-text-secondary-light);
	flex-grow: 1;
	margin: 0 0 15px;
}

.record-card .button {
	display: inline-block;
	align-self: center;
	padding: 10px 20px;
	background-color: var(--colour-accent-light);
	color: white;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;
	transition: background-color 0.2s;
}

.record-card .button:hover {
	background-color: var(--colour-accent-hover-light);
}

body.dark-mode .record-card {
	background-color: var(--colour-surface-dark);
	border-color: var(--colour-border-dark);
}

body.dark-mode .record-card h4 {
	color: var(--colour-text-primary-dark);
}

body.dark-mode .record-card p {
	color: var(--colour-text-secondary-dark);
}

body.dark-mode .record-card .button {
	background-color: var(--colour-accent-dark);
}

body.dark-mode .record-card .button:hover {
	background-color: var(--colour-accent-light);
	color: white;
}

/* --- 10. Static & Error Pages --- */
/* Used by privacy.php, terms.php, about.php (.static-page-content) and
   403/404/50x.php (.error-page-content). */
.error-page-content,
.static-page-content {
	padding: 20px;
	background-color: var(--colour-surface-light);
	border: 1px solid var(--colour-border-light);
	border-radius: 8px;
	margin: 0 auto 30px auto;
	max-width: 800px;
}

.error-page-content {
	text-align: center;
}

.static-page-content h2 {
	margin-bottom: 20px;
	border-bottom: 1px solid var(--colour-border-light);
	padding-bottom: 10px;
}

.static-page-content h3 {
	margin-top: 25px;
}

/* Sub-headings inside a section, added in 0.7 for examples.php, which
   splits its larger setup into several small tables. On the grid
   instead of the browser's default em-based margins. */
.static-page-content h4 {
	margin: 20px 0 10px;
}

.error-page-content .error-code {
	font-size: 5em;
	font-weight: bold;
	color: var(--colour-accent-light);
	margin: 0;
	opacity: 0.6;
}

.error-page-content p,
.static-page-content p {
	color: var(--colour-text-secondary-light);
	max-width: 650px;
	margin: 15px auto;
	text-align: left;
}

/* Lists in running text follow the paragraphs: same 650px column, same
   colour. Added in 0.7, found while building ssl-tls.php: without it a
   list ran the full width of the page in the primary text colour, and
   had done so unnoticed on interface.php and alias-aname.php. The
   padding keeps the bullets inside the column instead of hanging to
   the left of it.
   ol joined the same rule in 0.9 (round 4): the one numbered list on
   the site, the TTL steps on interface.php, still ran the full width
   in the primary colour, seen on Joost's dark-mode screenshots of
   27 October 2026. */
.static-page-content ul,
.static-page-content ol {
	color: var(--colour-text-secondary-light);
	max-width: 650px;
	margin: 15px auto;
	padding-left: 20px;
	box-sizing: border-box;
}

.static-page-content li {
	margin-bottom: 5px;
}

.error-page-content .button,
.static-page-content .button {
	display: inline-block;
	padding: 10px 25px;
	background-color: var(--colour-accent-light);
	color: white;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;
	margin-top: 20px;
	transition: background-color 0.2s;
}

.error-page-content .button:hover,
.static-page-content .button:hover {
	background-color: var(--colour-accent-hover-light);
}

/* Inline code in running text may break anywhere when it has to. Added
   in 0.7: one unbroken record name on dmarc.php,
   yourdomain.com._report._dmarc.thatotherdomain.com, made the whole page
   385px wide at viewport widths of 360px and 320px, so the page itself
   scrolled sideways. Measured, not guessed: the example table on that
   page was not the cause, it already scrolled inside .table-scroll.
   A <pre> keeps white-space: pre and is therefore not affected. */
.static-page-content code {
	overflow-wrap: anywhere;
}

body.dark-mode .error-page-content,
body.dark-mode .static-page-content {
	background-color: var(--colour-surface-dark);
	border-color: var(--colour-border-dark);
}

/* Missed in the first version: .static-page-content h2's own
   border-bottom stayed hardcoded to --colour-border-light regardless
   of theme, showing as a too-light divider under "Privacy Policy" /
   "Terms of Service" / "About This Project" in dark mode. Caught from
   a screenshot of terms.php, not spotted by reading the rule itself. */
body.dark-mode .static-page-content h2 {
	border-bottom-color: var(--colour-border-dark);
}

body.dark-mode .error-page-content .error-code {
	color: var(--colour-accent-dark);
}

body.dark-mode .error-page-content p,
body.dark-mode .static-page-content p,
body.dark-mode .static-page-content ul,
body.dark-mode .static-page-content ol {
	color: var(--colour-text-secondary-dark);
}

body.dark-mode .error-page-content .button,
body.dark-mode .static-page-content .button {
	background-color: var(--colour-accent-dark);
}

body.dark-mode .error-page-content .button:hover,
body.dark-mode .static-page-content .button:hover {
	background-color: var(--colour-accent-light);
}

/* --- 11. Record Pages --- */
/* Used by interface.php first; every future record page that needs the
   panel selector or a data table reuses these same classes rather than
   each page inventing its own. */
.panel-select-wrapper {
	margin: 20px 0;
	padding: 10px 15px;
	background-color: var(--colour-code-surface-light);
	border: 1px solid var(--colour-border-light);
	border-radius: 6px;
}

.panel-select-wrapper label {
	font-weight: bold;
	margin-right: 10px;
}

.panel-select-wrapper select {
	font-family: var(--font-family);
	font-size: 1em;
	padding: 5px 10px;
	border: 1px solid var(--colour-border-light);
	border-radius: 4px;
	background-color: var(--colour-surface-light);
	color: var(--colour-text-primary-light);
}

.panel-select-note {
	margin: 10px 0 0;
	font-size: 0.85em;
	color: var(--colour-text-secondary-light);
}

/* Wide content scrolls inside its own container rather than the page
   itself ever scrolling sideways. */
.table-scroll {
	overflow-x: auto;
	margin: 20px 0;
}

/* No min-width here on purpose. An earlier version used `min-width:
   max-content`, which forbids any text in the table from wrapping: a
   long header such as cPanel's or Plesk's value label pushed the whole
   table past its container, and a table with long sentences in its
   cells (the SOA table) would have been forced just as wide. Cells wrap
   instead, and .table-scroll around it stays as the safety net for
   content that genuinely cannot wrap (a very narrow screen, one long
   unbroken string). */
.data-table {
	width: 100%;
	border-collapse: collapse;
}

/* Column widths for the panel field table on interface.php, so the value
   column, whose header label is the longest (cPanel, Plesk), gets enough
   room to wrap onto two lines instead of three or four. */
.data-table--fields th:nth-child(1) {
	width: 30%;
}

.data-table--fields th:nth-child(2) {
	width: 15%;
}

.data-table--fields th:nth-child(3) {
	width: 40%;
}

.data-table--fields th:nth-child(4) {
	width: 15%;
}

.data-table th,
.data-table td {
	text-align: left;
	padding: 10px 15px;
	border: 1px solid var(--colour-border-light);
}

.data-table th {
	background-color: var(--colour-code-surface-light);
	color: var(--colour-text-primary-light);
}

/* overflow-wrap: anywhere, added in 0.7, lets a long value such as
   rua=mailto:reports@example.com break inside the cell. Unlike
   break-word it also lowers the cell's minimum width, so a two or three
   column table now fits a 360px screen instead of scrolling inside
   .table-scroll. A few tables with more columns (srv.php,
   special-records.php, and at 320px also interface.php, a-aaaa.php and
   mx.php) still scroll there, which is what .table-scroll is for. The break is visual only, copying
   the value still gives the unbroken text. */
.data-table td {
	color: var(--colour-text-secondary-light);
	font-family: monospace;
	overflow-wrap: anywhere;
}

body.dark-mode .panel-select-wrapper {
	background-color: var(--colour-input-surface-dark);
	border-color: var(--colour-border-dark);
}

body.dark-mode .panel-select-wrapper select {
	background-color: var(--colour-surface-dark);
	border-color: var(--colour-border-dark);
	color: var(--colour-text-primary-dark);
}

body.dark-mode .panel-select-note {
	color: var(--colour-text-secondary-dark);
}

body.dark-mode .data-table th,
body.dark-mode .data-table td {
	border-color: var(--colour-border-dark);
}

body.dark-mode .data-table th {
	background-color: var(--colour-input-surface-dark);
	color: var(--colour-text-primary-dark);
}

body.dark-mode .data-table td {
	color: var(--colour-text-secondary-dark);
}

/* A data table whose cells hold sentences rather than DNS values: the
   five-column overview on special-records.php, the SOA field table on
   zone-file.php and the tag table on for-sale.php (the last two added
   later the same day, when "Serial" and "furi" were found broken in
   half even at 1280px), and the schedule on ssl-tls.php. overflow-wrap:
   anywhere on .data-table td lets such a table shrink until every word
   breaks letter by letter on a phone ("OpenP GP"). break-word keeps
   words whole and only breaks a word that cannot fit on a line of its
   own; it does not lower the cell's minimum width, so on a narrow screen
   this table scrolls inside .table-scroll instead, as it did before 0.7. */
.data-table--prose td {
	overflow-wrap: break-word;
}

/* "Checked <date>" line under a status, added in 0.7. First used in the
   table on special-records.php, as a second line in the same cell rather
   than a column of its own, so the table keeps its five columns on a
   phone, and because the date belongs to that status: it is when that
   status was last read in its source. Also used at the end of a
   paragraph whose facts are still changing (the DNS-PERSIST-01 section
   on ssl-tls.php). The site's own font instead of a table cell's
   monospace, since a date is not something you copy into a panel. No
   colour of its own, it inherits the surrounding secondary text colour,
   so light and dark mode need no separate rule. */
.status-checked {
	display: block;
	margin-top: 5px;
	font-family: var(--font-family);
	font-size: 0.85em;
}

/* A block of literal example text, such as a zone file excerpt. Wide
   lines scroll inside their own container rather than the page itself
   ever scrolling sideways, same reasoning as .table-scroll above. */
.code-block-scroll {
	overflow-x: auto;
	margin: 20px 0;
}

.code-block-scroll pre {
	margin: 0;
	padding: 15px 20px;
	background-color: var(--colour-code-surface-light);
	border: 1px solid var(--colour-border-light);
	border-radius: 6px;
	font-family: monospace;
	font-size: 0.9em;
	line-height: 1.6;
	color: var(--colour-text-primary-light);
	white-space: pre;
}

body.dark-mode .code-block-scroll pre {
	background-color: var(--colour-input-surface-dark);
	border-color: var(--colour-border-dark);
	color: var(--colour-text-primary-dark);
}

/* --- 12. Dark Mode Theme --- */
/* Section kept for anything that doesn't fit neatly under a component
   above. Most dark-mode rules on this file sit directly beside their
   light-mode counterpart instead, unlike the source file's single large
   dark-mode block, since this file is short enough that splitting them
   apart would cost more than it saves. */

/* --- 13. Media Queries for Responsiveness --- */
@media (max-width: 720px) {
	/* The header is unpinned below this width (see the header rules
	   further down), so the skip link needs no room for it. */
	html {
		scroll-padding-top: 0;
	}

	.record-grid {
		grid-template-columns: 1fr;
	}

	/* Header on a narrow screen (added with the dropdowns, 16 October
	   2026). Two dropdown buttons next to the title no longer fit on one
	   row at phone width. The header becomes a grid of two rows: the
	   title with the theme toggle at its right, then the "Hosting
	   Details" button and the Pages button, one at each edge.
	   display: contents on the two wrapper elements hands their children
	   to that grid. Buttons and header padding are tighter here (10px
	   instead of 15px and 20px). The header
	   is also unpinned (relative instead of sticky), as on the other two
	   sites: two rows of it would otherwise stay in front of the content
	   while reading. Both lists are positioned against the whole header,
	   not against their buttons, so each opens as a panel under the
	   header at the full width available instead of running off an edge. */
	.page-header {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"title toggle"
			"tools pages";
		column-gap: 10px;
		row-gap: 10px;
		align-items: center;
		padding: 10px;
		position: relative;
	}

	.header-brand,
	.header-controls {
		display: contents;
	}

	.page-header h1 {
		grid-area: title;
		margin: 0;
		white-space: nowrap;
	}

	.header-menu-external {
		grid-area: tools;
	}

	.header-menu-internal {
		grid-area: pages;
		justify-self: end;
	}

	#darkModeToggle {
		grid-area: toggle;
		justify-self: end;
	}

	.nav-link.button-style {
		padding: 10px;
		white-space: nowrap;
	}

	.header-menu {
		position: static;
	}

	.header-menu-external .header-menu-list,
	.header-menu-internal .header-menu-list {
		left: 10px;
		right: 10px;
		width: auto;
		max-width: none;
	}
}


/* --- 14. Reduced Motion --- */
/* None of the transitions on this page are large or essential to how
   anything works, they only ever ease a colour or border change on
   hover. Someone with vestibular sensitivity gets the same end state
   instantly instead. */
@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
	}
}