/*
 * Admiralty Chart: the start page. Hero band (headline, search, quick open, tide table of Bitcoin), the featured markets as tide curves,
 * the full lists as tide tables, the text below the markets. Tokens: css/admiralty.css, shell: css/admiralty-shell.css, base: css/admiralty-base.css.
 *
 * The tide curve rule: every tile has the same field, 96 px high = 8 bands of 12 px. The baseline is in the middle (the open of the window), one band = 1 percent
 * (prices) or 1 percentage point / 2 points (inflation / sentiment, named in the note of the tab). The height is never scaled, only the width stretches.
 * Line form carries the state: solid = live, dashed = stale or periodic, triangles = high and low of the window.
 */

/* ---------- hero band: shallow water ---------- */
.ac-hero {
	position: relative;
	overflow: hidden;
	background: var(--ac-shallow);
	border-bottom: 1px solid var(--ac-line);
}
.ac-hero__iso { /* contour lines: the only texture of the page; they fill the middle of the band between the text and the tide table */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 38%;
	width: 62%;
	height: 100%;
	fill: none;
	stroke: var(--ac-line);
	stroke-width: 1.25;
	opacity: .85;
	pointer-events: none;
}
.ac-hero__iso path { vector-effect: non-scaling-stroke; }
.ac-hero__in {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 376px;
	gap: 48px;
	align-items: start;
	padding: 40px 0 48px;
}
.ac-hero__main { min-width: 0; }
.ac-hero h1 {
	margin: 0;
	font-size: clamp(32px, 4.2vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
}
.ac-hero h1 small {
	display: block;
	margin-top: 8px;
	color: var(--ac-ink-soft);
	font-size: var(--ac-fs-lg);
	font-weight: 400;
	line-height: 28px;
}

/* search: wide, prominent, the field and the ink button form one bar */
.ac-search { display: flex; max-width: 760px; margin-top: 24px; }
.ac-search__box {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
	height: 56px;
	padding: 0 16px;
	border: 2px solid var(--ac-ink);
	border-right: 0;
	border-radius: var(--ac-radius) 0 0 var(--ac-radius);
	background: var(--ac-panel);
	color: var(--ac-ink);
}
.ac-search__box:focus-within { outline: 2px solid var(--ac-magenta); outline-offset: 2px; }
.ac-search__ico { flex: none; }
.ac-search__box input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ac-ink);
	font: 400 17px/24px var(--ac-font);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}
.ac-search__box input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.ac-btn--lg { height: 56px; padding: 0 32px; font-size: 17px; border-radius: 0 var(--ac-radius) var(--ac-radius) 0; }
.ac-btn.ac-btn--ghost, .ac-body a.ac-btn.ac-btn--ghost { background: transparent; color: var(--ac-ink); border-color: var(--ac-ink); }
.ac-btn.ac-btn--ghost:hover, .ac-body a.ac-btn.ac-btn--ghost:hover { background: var(--ac-ink); color: var(--ac-on-ink); }
.ac-search__msg { max-width: 760px; margin: 12px 0 0; padding: 8px 12px; border: 1px solid var(--ac-down); border-radius: var(--ac-radius); background: var(--ac-panel); color: var(--ac-ink); font-size: var(--ac-fs-sm); }

.ac-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--ac-ink-soft); font-size: var(--ac-fs-sm); }
.ac-chips__label { margin-right: 4px; }
.ac-body a.ac-chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius);
	background: var(--ac-water);
	color: var(--ac-ink);
	font-weight: 600;
	text-decoration: none;
}
.ac-body a.ac-chip:hover { background: var(--ac-panel); border-color: var(--ac-ink); }
.ac-intro { max-width: 68ch; margin: 0 0 16px; font-size: var(--ac-fs-md); line-height: 24px; }

/* ---------- the tide table of Bitcoin (hero, right) ---------- */
.ac-tt {
	padding: 16px 24px 12px;
	background: var(--ac-panel);
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius);
}
.ac-body .ac-tt h2 { margin: 0; font-size: var(--ac-fs-sm); line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--ac-ink-soft); }
.ac-body .ac-tt table { width: 100%; margin: 8px 0 0; border-collapse: collapse; font-size: var(--ac-fs-sm); }
.ac-body .ac-tt th { padding: 0 0 4px; border-bottom: 1px solid var(--ac-ink); color: var(--ac-ink-muted); font-size: var(--ac-fs-xs); line-height: 20px; font-weight: 600; text-align: left; }
.ac-body .ac-tt td { padding: 0; border-bottom: 1px dotted var(--ac-line); line-height: 28px; }
.ac-body .ac-tt th:last-child, .ac-body .ac-tt td:last-child { text-align: right; }
.ac-body .ac-tt td.ac-sound { font-size: var(--ac-fs-md); line-height: 28px; }
.ac-tt tr.is-now td { font-weight: 700; color: var(--ac-magenta); }
.ac-tt__src { margin: 8px 0 0; color: var(--ac-ink-muted); font-size: var(--ac-fs-xs); line-height: 16px; }

/* triangles: high and low, and the dot of "now" */
.ac-mark { display: inline-block; width: 8px; height: 7px; background: var(--ac-ink); clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.ac-mark--lo { transform: rotate(180deg); }
.ac-mark--now { height: 8px; background: var(--ac-magenta); clip-path: circle(50%); }
.ac-mark--static { margin-right: 8px; vertical-align: middle; }

/* sounding numeral: small italic tabular figures */
.ac-sound { font-style: italic; font-weight: 600; font-feature-settings: var(--ac-num); letter-spacing: -.01em; }
.ac-sound small { margin-left: 4px; color: var(--ac-ink-muted); font-size: var(--ac-fs-xs); font-style: normal; font-weight: 400; letter-spacing: .04em; }

/* ---------- tabs (both strips: featured markets, all markets) ---------- */
.ac-featured { padding-top: 32px; }
.ac-lists { padding-top: 56px; }
.ac-tabs { margin-top: 0; }

/* ---------- featured markets: grid of tide tiles ---------- */
.ac-note { margin: 16px 0 0; color: var(--ac-ink-muted); font-size: var(--ac-fs-sm); line-height: 20px; max-width: none !important; text-align: right; }
.ac-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 16px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}
.ac-tiles__item { margin: 0; min-width: 0; }
.ac-body a.ac-tile {
	position: relative;
	display: block;
	height: 100%;
	padding: 14px 16px 12px;
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius);
	background: var(--ac-panel);
	color: var(--ac-ink);
	text-decoration: none;
}
.ac-body a.ac-tile:hover { border-color: var(--ac-ink); }
.ac-body a.ac-tile--active { border: 2px solid var(--ac-magenta); padding: 13px 15px 11px; }
.ac-tile__flag {
	position: absolute;
	top: -11px;
	left: 14px;
	padding: 0 8px;
	border-radius: 2px;
	background: var(--ac-magenta);
	color: var(--ac-on-ink);
	font-size: var(--ac-fs-xs);
	font-weight: 700;
	line-height: 18px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.ac-tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ac-tile__id { display: block; min-width: 0; }
.ac-tile__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ac-fs-md); font-weight: 700; line-height: 20px; }
.ac-tile__sym { display: block; color: var(--ac-ink-muted); font-size: var(--ac-fs-xs); line-height: 16px; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-tile__src { flex: none; padding: 0 6px; border: 1px solid var(--ac-line); border-radius: 2px; background: var(--ac-water); color: var(--ac-ink-muted); font-size: var(--ac-fs-xs); line-height: 16px; white-space: nowrap; }

/* the field of the tide curve */
.ac-tide {
	position: relative;
	display: block;
	box-sizing: content-box;
	height: 96px;
	margin: 10px 0 8px;
	border: 1px solid var(--ac-line);
	background:
		repeating-linear-gradient(to bottom, transparent 0 11px, var(--ac-line-soft) 11px 12px),
		repeating-linear-gradient(to bottom, var(--ac-panel) 0 12px, var(--ac-shallow-soft) 12px 24px); /* depth contours: one band = one unit of the scale */
}
.ac-tide svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
.ac-tide__base { stroke: var(--ac-ink); stroke-width: .8; stroke-dasharray: 1 3; fill: none; }
.ac-tide__line { fill: none; stroke: var(--ac-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ac-tide--stale .ac-tide__line { stroke-width: 1.6; stroke-dasharray: 5 3; }
.ac-tide .ac-mark { position: absolute; margin-left: -4px; }
.ac-dot { position: absolute; box-sizing: border-box; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ac-ink); }
.ac-tide--stale .ac-dot { border: 1.5px solid var(--ac-ink); background: var(--ac-panel); }

.ac-tile__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; }
.ac-tile__foot .ac-sound { font-size: 30px; line-height: 36px; }
.ac-chg { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ac-fs-sm); font-weight: 700; white-space: nowrap; }
.ac-chg--up { color: var(--ac-up); }
.ac-chg--down { color: var(--ac-down); }
.ac-chg--flat { color: var(--ac-ink-soft); }
.ac-arrow { flex: none; }

.ac-featured__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 24px; color: var(--ac-ink-muted); font-size: var(--ac-fs-sm); line-height: 20px; }
.ac-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.ac-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.ac-legend__item .ac-mark + .ac-mark { margin-left: 8px; }

/* the one authored motion: the curves draw in once (700 ms, exponential ease-out), not with prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
	.ac-tide:not(.ac-tide--stale) .ac-tide__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ac-draw 700ms cubic-bezier(.16, 1, .3, 1) forwards; }
	.ac-tide--stale svg { animation: ac-wipe 700ms cubic-bezier(.16, 1, .3, 1) both; }
	.ac-tide .ac-mark, .ac-tide .ac-dot { animation: ac-appear 200ms ease-out 550ms both; }
	.ac-panel[data-seen] .ac-tide__line, .ac-panel[data-seen] .ac-tide svg, .ac-panel[data-seen] .ac-tide .ac-mark, .ac-panel[data-seen] .ac-tide .ac-dot { animation: none; }
	.ac-panel[data-seen] .ac-tide:not(.ac-tide--stale) .ac-tide__line { stroke-dashoffset: 0; }
}
@keyframes ac-draw { to { stroke-dashoffset: 0; } }
@keyframes ac-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ac-appear { from { opacity: 0; } to { opacity: 1; } }

/* ---------- all markets: the tables as tide tables ---------- */
.ac-lists .ac-panel { padding-top: 8px; }
.ac-lists .ac-panel > h2 { margin-top: 24px; }
.ac-lists .ac-panel > p { max-width: var(--ac-measure); }
.ac-table a.ac-thumb { display: block; box-sizing: content-box; width: 250px; max-width: 100%; overflow: hidden; border: 1px solid var(--ac-line-soft); border-radius: var(--ac-radius); background: var(--ac-panel); }
/* The box of the chart image is reserved: the 1x1 placeholder and the loaded 250x100 chart take the same 5:2 box (the class lazy-load is removed when the
   image starts to load, so the rule must not depend on it). Without it, the placeholder grows to a square and the row jumps when the chart arrives. */
.ac-table img.ac-thumb__img, .ac-table .ac-thumb img { display: block; width: 250px; max-width: 100%; height: auto; aspect-ratio: 5 / 2; border: 0; }
/* The chart images are PNGs with a white ground. Night chart: invert and turn the hue back (lines keep their color, the ground turns dark), then "screen" lets
   the dark ground fall away onto the panel, so the line chart sits on the night ground like everything else. */
:root[data-theme="dark"] .ac-thumb img, :root[data-theme="dark"] .ac-previews img, :root[data-theme="dark"] .ac-preview img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.ac-table td a { color: var(--ac-ink); }
.ac-change { display: inline-block; }
.ac-change small { color: var(--ac-ink-muted); }
.ac-body .ac-lists h2 { font-size: var(--ac-fs-xl); }

/* ---------- the text below the markets ---------- */
.ac-about { margin-top: 64px; padding: 48px 0 56px; background: var(--ac-panel); border-top: 1px solid var(--ac-line-soft); border-bottom: 1px solid var(--ac-line-soft); }
.ac-about__grid { display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 1fr); gap: 48px 64px; }
.ac-body .ac-prose h2 { margin-top: 0; }
.ac-body .ac-prose h3 { margin-top: 32px; }
.ac-prose p { max-width: 68ch; }
.ac-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: none !important; margin: 24px 0 8px; }
.ac-previews img, .ac-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--ac-line-soft); border-radius: var(--ac-radius); }
.ac-about__side { display: grid; gap: 16px; align-content: start; }
.ac-body a.ac-preview { display: block; padding: 8px; border: 1px solid var(--ac-line); border-radius: var(--ac-radius); background: var(--ac-water); color: var(--ac-ink); text-decoration: none; }
.ac-body a.ac-preview:hover { border-color: var(--ac-ink); }
.ac-preview span { display: block; padding-top: 8px; font-weight: 600; }
.ac-about__links { margin: 0; padding: 0; list-style: none; color: var(--ac-ink-soft); font-size: var(--ac-fs-sm); }
.ac-about__links li { margin-bottom: 8px; line-height: 24px; }
body[data-page="Index_Default"] .ac-footer { margin-top: 0; }

/* ---------- narrower screens ---------- */
@media (max-width: 1099px) {
	.ac-hero__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.ac-tt { max-width: 560px; }
	.ac-about__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 799px) {
	.ac-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
	.ac-note { text-align: left; }
	.ac-tile__foot .ac-sound { font-size: 22px; line-height: 28px; }
	.ac-body a.ac-tile { padding: 12px 12px 10px; }
	.ac-body a.ac-tile--active { padding: 11px 11px 9px; }
	.ac-tile__head { display: block; } /* name, symbol and source are three lines in every tile: the curves stay aligned */
	.ac-tile__src { display: inline-block; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
	.ac-tabs { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
	.ac-tabs .tab { flex: none; scroll-snap-align: start; }
}
@media (max-width: 599px) {
	.ac-hero__in { padding: 24px 0 32px; }
	.ac-search { flex-wrap: wrap; }
	.ac-search__box { flex: 1 0 100%; border: 2px solid var(--ac-ink); border-radius: var(--ac-radius); }
	.ac-btn--lg { width: 100%; margin-top: 8px; border-radius: var(--ac-radius); }
	.ac-previews { grid-template-columns: 1fr; }
	.ac-about { padding: 32px 0 40px; }
	.ac-hero__iso { left: 0; width: 100%; opacity: .4; }
}
@media (pointer: coarse) {
	.ac-body a.ac-chip { min-height: 44px; }
}