/*
 * Admiralty Chart: base of the content pages (start page, dictionary, calculators, stopwatch, legal pages, error report).
 * Loaded after Bootstrap 3 (lib/extern/bootstrap_v3, untouched) and restyles its classes: typography, links, buttons, forms, tables, alerts, code, lists.
 * Only tokens of css/admiralty.css are used for colors. Scoped to .ac-body (the template sets it) so the shell of the overview pages cannot be hit.
 * Type scale: 12 / 14 / 16 / 18 / 22 / 28 / 36 px, display at most 2.75rem; text measure 68ch; 8 px grid.
 */

:root {
	--ac-fs-xs: 12px;
	--ac-fs-sm: 14px;
	--ac-fs-md: 16px;
	--ac-fs-lg: 18px;
	--ac-fs-xl: 22px;
	--ac-fs-2xl: 28px;
	--ac-fs-3xl: 36px;
	--ac-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
	scrollbar-color: var(--ac-line) var(--ac-water);
}

html { -webkit-text-size-adjust: 100%; }

.ac-body {
	margin: 0;
	background: var(--ac-water);
	color: var(--ac-ink);
	font-family: var(--ac-font);
	font-size: var(--ac-fs-md);
	line-height: 1.5;
	font-feature-settings: var(--ac-num);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.ac-body .ac-main { flex: 1 0 auto; }
.ac-body .ac-footer { flex: none; }

/* browser surfaces */
.ac-body ::selection { background: var(--ac-shallow); color: var(--ac-ink); }
.ac-body input, .ac-body textarea { caret-color: var(--ac-magenta); accent-color: var(--ac-magenta); }
.ac-body select { accent-color: var(--ac-magenta); }
.ac-body :focus { outline: none; }
.ac-body :focus-visible { outline: 2px solid var(--ac-magenta); outline-offset: 2px; }
.ac-body ::placeholder { color: var(--ac-ink-muted); opacity: 1; }

/* the container of Bootstrap 3 becomes the page column (same width as the top bar) */
.ac-body .container.ac-page {
	width: min(1376px, calc(100% - 32px));
	max-width: none;
	margin-inline: auto;
	padding: 32px 0 24px;
}
@media (min-width: 900px) {
	.ac-body .container.ac-page { width: min(1376px, calc(100% - 64px)); }
}
.ac-page::before, .ac-page::after { display: none; } /* no clearfix of Bootstrap: the page is a flow */
.ac-page .row { margin-inline: 0; }
.ac-page .row > [class*="col-"] { padding-inline: 0; }

/* ---------- type ---------- */
.ac-body h1, .ac-body h2, .ac-body h3, .ac-body h4, .ac-body h5, .ac-body h6 {
	margin: 0 0 8px;
	color: var(--ac-ink);
	font-family: var(--ac-font);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.ac-body h1 { font-size: var(--ac-fs-3xl); line-height: 1.2; margin-bottom: 16px; }
.ac-body h2 { font-size: var(--ac-fs-2xl); line-height: 1.25; margin-top: 40px; font-weight: 600; }
.ac-body h3 { font-size: var(--ac-fs-xl); line-height: 1.3; margin-top: 32px; font-weight: 600; }
.ac-body h4 { font-size: var(--ac-fs-lg); line-height: 1.35; margin-top: 24px; font-weight: 600; }
.ac-body h1 small, .ac-body h2 small, .ac-body h3 small { color: var(--ac-ink-muted); font-weight: 400; letter-spacing: 0; }
.ac-page > .row:first-child h1,
.ac-page > .row:first-child h2 { margin-top: 0; }
@media (max-width: 599px) {
	.ac-body h1 { font-size: var(--ac-fs-2xl); }
	.ac-body h2 { font-size: var(--ac-fs-xl); }
	.ac-body h3 { font-size: var(--ac-fs-lg); }
}
.ac-body p { margin: 0 0 16px; }
.ac-body small, .ac-body .small { font-size: var(--ac-fs-sm); }
.ac-body strong, .ac-body b { font-weight: 600; }

.ac-page p, .ac-page ul, .ac-page ol, .ac-page dl, .ac-page address { max-width: var(--ac-measure); }
.ac-page ul, .ac-page ol { margin: 0 0 16px; padding-left: 24px; }
.ac-page li { margin-bottom: 4px; }
.ac-page li > p { margin-bottom: 8px; }
.ac-page address { margin-bottom: 16px; font-style: normal; }
/* the reading pages (legal, calculators, dictionary, error report): text directly in a Bootstrap column also gets the measure */
body[data-page^="Legal_"] .ac-page .row > [class*="col-"],
body[data-page="Index_StakingCalculator"] .ac-page .row > [class*="col-"],
body[data-page="Index_InflationCalculator"] .ac-page .row > [class*="col-"],
body[data-page="Chart_Dictionary"] .ac-page .row > [class*="col-"],
body[data-page="Bot_Telegram"] .ac-page .row > [class*="col-"] { max-width: var(--ac-measure); }
body[data-page="Index_StakingCalculator"] .ac-page .row > [class*="col-"]:has(table),
body[data-page="Index_InflationCalculator"] .ac-page .row > [class*="col-"]:has(table) { max-width: none; }

.ac-body a {
	color: var(--ac-ink);
	text-decoration: underline;
	text-decoration-color: var(--ac-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.ac-body a:hover { text-decoration-color: var(--ac-ink); color: var(--ac-ink); }
.ac-body hr { border: 0; border-top: 1px solid var(--ac-line-soft); margin: 32px 0; }
.ac-body img { max-width: 100%; height: auto; }

/* code and formulas */
.ac-body code, .ac-body kbd, .ac-body samp {
	padding: 1px 6px;
	border-radius: var(--ac-radius);
	background: var(--ac-shallow-soft);
	color: var(--ac-ink);
	font-family: var(--ac-mono);
	font-size: .9em;
}
.ac-body pre {
	padding: 16px;
	border: 1px solid var(--ac-line-soft);
	border-radius: var(--ac-radius);
	background: var(--ac-panel);
	color: var(--ac-ink);
	font-family: var(--ac-mono);
	font-size: var(--ac-fs-sm);
	overflow-x: auto;
}
.ac-body pre code { padding: 0; background: none; }

/* ---------- buttons (Bootstrap 3 classes): the solid ink button, the quiet one for secondary actions ---------- */
.ac-body .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 24px;
	border: 1px solid var(--ac-ink);
	border-radius: var(--ac-radius);
	background: var(--ac-ink);
	color: var(--ac-on-ink);
	font: 700 var(--ac-fs-md)/24px var(--ac-font);
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	white-space: normal;
	cursor: pointer;
}
.ac-body .btn:hover, .ac-body .btn:focus { background: var(--ac-ink-soft); border-color: var(--ac-ink-soft); color: var(--ac-on-ink); text-decoration: none; }
.ac-body .btn-default, .ac-body .btn-link { background: var(--ac-panel); color: var(--ac-ink); border-color: var(--ac-line); }
.ac-body .btn-default:hover { background: var(--ac-shallow-soft); color: var(--ac-ink); border-color: var(--ac-line); }
.ac-body .btn-xs { min-height: 32px; padding: 0 12px; font-size: var(--ac-fs-sm); }
.ac-body .btn-sm { min-height: 36px; padding: 0 16px; font-size: var(--ac-fs-sm); }
.ac-body .btn-lg { min-height: 48px; padding: 0 32px; font-size: var(--ac-fs-lg); }
.ac-body button[type="submit"]:not(.btn):not(.ac-btn),
.ac-body button[name="send"]:not(.btn) {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; padding: 0 24px; border: 1px solid var(--ac-ink); border-radius: var(--ac-radius);
	background: var(--ac-ink); color: var(--ac-on-ink); font: 700 var(--ac-fs-md)/24px var(--ac-font); cursor: pointer;
}
.ac-body button[type="submit"]:not(.btn):not(.ac-btn):hover { background: var(--ac-ink-soft); }
@media (pointer: coarse) {
	.ac-body .btn, .ac-body button[type="submit"]:not(.ac-btn) { min-height: 44px; }
}

/* ---------- forms ---------- */
/* :where() keeps the specificity low, so a component (the search of the start page) can override the field */
.ac-main :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"])),
.ac-main :where(select, textarea),
.ac-body .form-control {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius);
	background: var(--ac-panel);
	color: var(--ac-ink);
	font: 400 var(--ac-fs-md)/24px var(--ac-font);
	font-feature-settings: var(--ac-num);
	box-shadow: none;
}
.ac-main textarea, .ac-body textarea.form-control { height: auto; min-height: 120px; padding: 8px 12px; }
.ac-main select { appearance: auto; }
.ac-main input:focus-visible, .ac-main select:focus-visible, .ac-main textarea:focus-visible { outline: 2px solid var(--ac-magenta); outline-offset: 2px; border-color: var(--ac-ink); }
.ac-main input[aria-invalid="true"], .ac-main select[aria-invalid="true"], .ac-main textarea[aria-invalid="true"],
.ac-main input:user-invalid, .ac-main select:user-invalid { border-color: var(--ac-down); border-width: 2px; }
.ac-main input:disabled, .ac-main select:disabled { background: var(--ac-shallow-soft); color: var(--ac-ink-muted); }
.ac-main label { font-weight: 600; margin-bottom: 4px; }
.ac-body .help-block, .ac-hint { color: var(--ac-ink-muted); font-size: var(--ac-fs-sm); line-height: 20px; }
.ac-body .has-error .help-block, .ac-error { color: var(--ac-down); }

/* a form of the content pages: labels above the inputs, grouped in a calm panel */
.ac-form {
	display: grid;
	gap: 24px;
	max-width: 640px;
	margin: 0 0 32px;
	padding: 24px;
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius);
	background: var(--ac-panel);
}
.ac-form fieldset { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ac-form legend { margin: 0 0 8px; padding: 0; border: 0; color: var(--ac-ink-soft); font-size: var(--ac-fs-sm); font-weight: 600; width: auto; }
.ac-field { display: grid; gap: 4px; min-width: 0; }
.ac-field label { margin: 0; font-weight: 600; }
.ac-field__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.ac-field__unit { color: var(--ac-ink-muted); font-size: var(--ac-fs-md); }
.ac-form__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; align-items: end; }

/* the result: a calm panel, the numbers as sounding numerals (small italic, tabular) */
.ac-result {
	margin: 0 0 32px;
	padding: 24px;
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius);
	background: var(--ac-panel);
}
.ac-result h2 { margin-top: 0; }
.ac-result__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 32px; margin: 0; }
.ac-result__item { margin: 0; padding-top: 8px; border-top: 1px solid var(--ac-ink); }
.ac-result__item dt { margin: 0; color: var(--ac-ink-muted); font-size: var(--ac-fs-sm); font-weight: 600; line-height: 20px; }
.ac-result__item dd { margin: 0; }
.ac-sounding { font-style: italic; font-weight: 600; font-size: var(--ac-fs-2xl); line-height: 36px; font-feature-settings: var(--ac-num); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ac-sounding small { white-space: nowrap; font-style: normal; font-weight: 400; font-size: var(--ac-fs-sm); color: var(--ac-ink-muted); letter-spacing: .02em; margin-left: 4px; }
.ac-sounding--up { color: var(--ac-up); }
.ac-sounding--down { color: var(--ac-down); }

/* ---------- tables: tide tables (aligned figures, hairline rules, a rule in ink under the head) ---------- */
.ac-body .table {
	width: 100%;
	max-width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	background: transparent;
	color: var(--ac-ink);
	font-size: var(--ac-fs-md);
	font-feature-settings: var(--ac-num);
}
.ac-body .table > thead > tr > th,
.ac-body .table > tbody > tr > th,
.ac-body .table > tbody > tr > td,
.ac-body .table > thead > tr > td,
.ac-body .table th,
.ac-body .table td {
	padding: 8px 12px !important; /* beats the old rules of default.css and the generated markup */
	border: 0;
	border-bottom: 1px dotted var(--ac-line);
	line-height: 24px;
	vertical-align: middle;
	background: transparent;
	text-align: left;
}
.ac-body .table th {
	border-bottom: 1px solid var(--ac-ink);
	color: var(--ac-ink-soft);
	font-size: var(--ac-fs-sm);
	font-weight: 600;
	line-height: 20px;
	vertical-align: bottom;
}
.ac-body .table > tbody > tr:hover > td { background: var(--ac-shallow-soft); }
.ac-body .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.ac-body .table td p { margin: 0 0 4px; }
.ac-body .table td p:last-child { margin-bottom: 0; }
.ac-body .table-responsive { border: 0; }
/* a table that is not wrapped by the markup scrolls inside its own box instead of the page */
/* Content panels are flat: hairline border, 4 px corners, no shadow (a shadow is for floating layers only: menus, tooltips) */
.ac-tablewrap {
	overflow-x: auto;
	margin: 0 0 24px;
	border: 1px solid var(--ac-line-soft);
	border-radius: var(--ac-radius);
	/* scroll affordance: a soft edge shadow on the side that has more content (shown only while scrollable).
	   "local" covers (panel colored) scroll with the content and hide the "scroll" shadows at the ends of the scroll range. */
	background:
		linear-gradient(to right, var(--ac-panel) 30%, transparent) left center / 40px 100% no-repeat local,
		linear-gradient(to left, var(--ac-panel) 30%, transparent) right center / 40px 100% no-repeat local,
		linear-gradient(to right, color-mix(in srgb, var(--ac-ink) 28%, transparent), transparent) left center / 14px 100% no-repeat scroll,
		linear-gradient(to left, color-mix(in srgb, var(--ac-ink) 28%, transparent), transparent) right center / 14px 100% no-repeat scroll,
		var(--ac-panel);
}
.ac-tablewrap .table { margin: 0; min-width: 100%; }
.ac-tablewrap .table tr:last-child td { border-bottom: 0; }
.ac-body td.num, .ac-body th.num { text-align: right; }

/* ---------- alerts: a panel with a full border, the state is also in the words ---------- */
.ac-body .alert {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius);
	background: var(--ac-panel);
	color: var(--ac-ink);
}
.ac-body .alert h4 { margin-top: 0; }
.ac-body .alert-danger, .ac-body .alert-error { border-color: var(--ac-down); border-width: 2px; }
.ac-body .alert-success { border-color: var(--ac-up); border-width: 2px; }
.ac-body .alert-info, .ac-body .alert-warning { background: var(--ac-shallow-soft); }

/* ---------- the dictionary: index of terms, articles ---------- */
.ac-body .breadcrumb {
	margin: 16px 0 32px;
	padding: 16px 0 0;
	border-top: 1px solid var(--ac-ink);
	background: none;
	columns: 3 220px;
	column-gap: 32px;
	list-style: none;
	max-width: none;
}
.ac-body .breadcrumb > li { display: block; margin: 0; padding: 0; break-inside: avoid; font-size: var(--ac-fs-md); line-height: 32px; }
.ac-body .breadcrumb > li + li::before { content: none; padding: 0; }
.ac-body .breadcrumb > li:first-child { font-weight: 600; color: var(--ac-ink-muted); }
.ac-page article { margin: 0 0 32px; }
.ac-page article > h2 { margin-top: 32px; }
/* "Calculation" sections: a calm tide-table panel for the steps and the formulas */
.ac-page article.ac-calc {
	max-width: var(--ac-measure);
	padding: 8px 24px 16px;
	border: 1px solid var(--ac-line-soft);
	border-top: 2px solid var(--ac-ink);
	border-radius: var(--ac-radius);
	background: var(--ac-panel);
	font-feature-settings: var(--ac-num);
}
.ac-page article.ac-calc > h2 { margin-top: 16px; font-size: var(--ac-fs-xl); }
.ac-page article.ac-calc ol { counter-reset: step; list-style: none; padding-left: 0; margin: 0; }
.ac-page article.ac-calc ol > li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; padding: 8px 0; border-bottom: 1px dotted var(--ac-line); margin: 0; }
.ac-page article.ac-calc ol > li:last-child { border-bottom: 0; }
.ac-page article.ac-calc ol > li::before { content: counter(step); font-style: italic; font-weight: 600; color: var(--ac-ink-muted); }
.ac-page article.ac-calc p:empty { display: none; }
.ac-page article img { display: block; margin: 16px 0; border: 1px solid var(--ac-line-soft); border-radius: var(--ac-radius); }

/* article page: the article left, the index of all terms right (a contents panel); one column on narrow screens */
@media (min-width: 1000px) {
	.ac-dict--article { display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 1fr); gap: 0 64px; align-items: start; grid-template-rows: auto auto auto 1fr; }
	.ac-dict--article > div { display: contents; } /* the grid helper wraps the rows in a div */
	.ac-dict--article .row:first-child { grid-column: 1; grid-row: 1 / span 4; }
	.ac-dict--article .row:not(:first-child) { grid-column: 2; }
	.ac-dict--article .row:not(:first-child) h1:first-child, .ac-dict--article .row:not(:first-child) h2:first-child { margin-top: 0; } /* the heading of the index starts on the top line of the article's h1 */
	.ac-dict--article .breadcrumb { columns: 2 200px; }
	body[data-page="Chart_Dictionary"] .ac-dict--article .row > [class*="col-"] { max-width: none; }
	.ac-dict--article .row:first-child [class*="col-"] { max-width: var(--ac-measure); }
}

/* ---------- calculator pages (inflation, staking): the tool first, the form beside the result ----------
   The rows carry a placement class (set in the views): .ac-cx--form (the form), .ac-cx--out (summary, result, table), .ac-cx--about (the explanation text,
   below the tool, in two columns), .ac-cx--foot (links). Below 1100 px everything is one column in that order. */
.ac-page .ac-cx::before, .ac-page .ac-cx::after { display: none; } /* no clearfix: it would clear the floated form */
body[data-page] .ac-page .ac-cx > [class*="col-"] { max-width: none; float: none; width: auto; }
.ac-page .ac-result__grid { max-width: none; }

.ac-page .ac-cx--about h2, .ac-page .ac-cx--about h3 { break-after: avoid; }
.ac-page .ac-cx--about p, .ac-page .ac-cx--about ul { break-inside: avoid; }
.ac-page .ac-cx--about > [class*="col-"] > :first-child { margin-top: 0; }
.ac-page .ac-cx--about { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--ac-line-soft); }
.ac-page .ac-cx--form .ac-form { max-width: none; }
.ac-page .ac-cx--out .ac-tablewrap, .ac-page .ac-cx--out .ac-result { max-width: none; }
@media (min-width: 1100px) {
	body[data-page="Index_StakingCalculator"] .ac-page > div,
	body[data-page="Index_InflationCalculator"] .ac-page > div { display: flow-root; }
	.ac-page .ac-cx--form { float: left; width: 420px; }
	.ac-page .ac-cx--out { margin-left: 468px; }
	.ac-page .ac-cx--form h2, .ac-page .ac-cx--form + .ac-cx--out h2 { margin-top: 0; }
	.ac-page .ac-cx--about, .ac-page .ac-cx--foot { clear: both; }
	.ac-page .ac-cx--about > [class*="col-"] { column-count: 2; column-gap: 64px; }
}

/* ---------- stopwatch ---------- */
body[data-page="Index_StopWatch"] .ac-page #txt {
	display: block;
	width: min(100%, 360px);
	height: auto;
	margin: 16px 0;
	padding: 24px 16px;
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius);
	background: var(--ac-panel);
	color: var(--ac-ink);
	font: italic 600 clamp(64px, 14vw, 120px)/1 var(--ac-font);
	font-feature-settings: var(--ac-num);
	text-align: center;
}
body[data-page="Index_StopWatch"] .ac-page .row > [class*="col-"] { width: auto; float: none; }

/* utility */
.ac-body .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

@media (prefers-reduced-motion: reduce) {
	.ac-body * { scroll-behavior: auto !important; }
}
@media print {
	.ac-body { background: white; color: black; }
}