/* ==========================================================================
   HiTOP-SR Language Adaptations
   Everything is scoped under .hitop so it cannot leak into the rest of the
   site, and nothing from the theme can reach in far enough to break it.

   TO RESTYLE: change the variables in the first block only.
   ========================================================================== */

.hitop {
	/* Colours. The two accents are the only ones that carry meaning. */
	--hitop-accent:        #0F5C63;   /* completed, released */
	--hitop-accent-soft:   #E4EEEE;
	--hitop-accent-ink:    #0A4348;

	--hitop-active:        #9A5B12;   /* underway. Needs 4.5:1 on white. */
	--hitop-active-soft:   #F7EAD8;
	--hitop-active-ink:    #7D4A0C;

	--hitop-ink:           #1C1E22;
	--hitop-muted:         #4A4943;
	--hitop-faint:         #6B6A64;

	--hitop-ground:        #F7F5F0;
	--hitop-card:          #FFFFFF;
	--hitop-rule:          #E3DFD6;
	--hitop-rule-soft:     #EDE9E1;
	--hitop-grey:          #C3BFB6;
	--hitop-grey-soft:     #F0EDE6;
	--hitop-line:          #D8D4CB;
	--hitop-land:          #E9E5DB;

	--hitop-radius:        16px;

	/* Body text inherits the theme. Headings use the display face. */
	--hitop-font:          inherit;
	--hitop-display:       "Source Serif 4", Georgia, "Times New Roman", serif;

	font-family: var(--hitop-font);
	color: var(--hitop-ink);
	line-height: 1.5;
	box-sizing: border-box;
}

.hitop *,
.hitop *::before,
.hitop *::after { box-sizing: border-box; }

.hitop p { margin: 0; }
.hitop a { color: var(--hitop-accent); }
.hitop a:hover { color: var(--hitop-accent-ink); }

.hitop-notice {
	padding: 14px 18px;
	border: 1px solid var(--hitop-active);
	border-radius: 10px;
	background: var(--hitop-active-soft);
	color: var(--hitop-active-ink);
	font-size: 14px;
}

/* --------------------------------------------------------------- shells -- */

.hitop-card {
	background: var(--hitop-card);
	border: 1px solid var(--hitop-rule);
	border-radius: var(--hitop-radius);
	padding: 24px 26px;
}

.hitop-card + .hitop-card { margin-top: 22px; }

.hitop-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.hitop-card__title {
	font-family: var(--hitop-display);
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 12px 0;
	line-height: 1.25;
}

.hitop-card__head .hitop-card__title { margin: 0; }

.hitop-card__aside,
.hitop-card__foot {
	font-size: 12px;
	color: var(--hitop-faint);
	line-height: 1.45;
}

.hitop-card__foot {
	border-top: 1px solid var(--hitop-rule-soft);
	margin-top: 12px;
	padding-top: 11px;
}

.hitop-kicker {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hitop-faint);
	margin: 0 0 10px 0;
}

.hitop-empty { font-size: 13px; color: var(--hitop-muted); }

/* ---------------------------------------------------------------- header -- */

.hitop-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 22px;
}

.hitop-head__main .hitop-kicker { margin-bottom: 4px; }

.hitop-head__title {
	font-family: var(--hitop-display);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 6px 0;
	line-height: 1.15;
}

.hitop-head__meta { font-size: 13px; color: var(--hitop-muted); }

.hitop-head__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.hitop-pill {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.hitop-pill--done   { background: var(--hitop-accent-soft); color: var(--hitop-accent-ink); }
.hitop-pill--active { background: var(--hitop-active-soft); color: var(--hitop-active-ink); }
.hitop-pill--wait   { background: var(--hitop-grey-soft); color: var(--hitop-faint); font-weight: 500; }

/* ----------------------------------------------------------------- stats -- */

.hitop-stats {
	display: flex;
	align-items: stretch;
	background: var(--hitop-card);
	border: 1px solid var(--hitop-rule);
	border-radius: var(--hitop-radius);
	padding: 18px 26px;
	margin-bottom: 22px;
}

.hitop-stats--soft {
	background: var(--hitop-ground);
	border-color: var(--hitop-rule-soft);
	border-radius: 12px;
	padding: 15px 22px;
	margin-bottom: 16px;
}

.hitop-stat {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 24px;
	min-width: 0;
}

.hitop-stat:first-child { padding-left: 0; }
.hitop-stat:last-child  { padding-right: 0; }
.hitop-stat + .hitop-stat { border-left: 1px solid var(--hitop-rule-soft); }

.hitop-stat__n {
	font-family: var(--hitop-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--hitop-accent);
	line-height: 1.1;
}

.hitop-stats--soft .hitop-stat__n { font-size: 22px; }

.hitop-stat__label { font-size: 11.5px; color: var(--hitop-muted); }

/* ---------------------------------------------------------------- phases -- */

.hitop-phases { display: flex; gap: 6px; margin-bottom: 16px; }

.hitop-phase {
	flex: 1 1 0;
	border-radius: 8px;
	padding: 9px 8px;
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
}

.hitop-phase.is-done     { background: var(--hitop-accent-soft); color: var(--hitop-accent-ink); }
.hitop-phase.is-active   { background: var(--hitop-active-soft); color: var(--hitop-active-ink); }
.hitop-phase.is-upcoming { background: var(--hitop-grey-soft); color: var(--hitop-faint); }

/* ------------------------------------------------------------ loop label -- */

.hitop-loop { display: flex; gap: 6px; height: 26px; margin-bottom: 8px; }

.hitop-loop__spacer { flex: 5 1 0; }
.hitop-loop__tail   { flex: 1 1 0; }

.hitop-loop__bracket {
	flex: 4 1 0;
	border: 1.5px dashed #C79A5C;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hitop-loop__text {
	background: var(--hitop-card);
	padding: 0 10px;
	transform: translateY(-13px);
	font-size: 11px;
	font-weight: 600;
	color: var(--hitop-active-ink);
	text-align: center;
	line-height: 1.2;
}

/* ------------------------------------------------------------- the track -- */

.hitop-rail {
	display: flex;
	align-items: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hitop-rail li::marker { content: none; }

.hitop-step {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.hitop-step__track {
	display: flex;
	align-items: center;
	width: 100%;
}

.hitop-step__line {
	flex: 1 1 auto;
	height: 3px;
	background: var(--hitop-line);
}

.hitop-step__line.is-done   { background: var(--hitop-accent); }
.hitop-step__line.is-active { background: var(--hitop-active); }

.hitop-step:first-child .hitop-step__line--in,
.hitop-step:last-child  .hitop-step__line--out { background: transparent; }

.hitop-step__node {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	background: var(--hitop-card);
	border: 2px solid var(--hitop-grey);
	color: var(--hitop-faint);
}

.hitop-step.is-complete .hitop-step__node {
	background: var(--hitop-accent);
	border-color: var(--hitop-accent);
	color: #FFFFFF;
}

.hitop-step.is-underway .hitop-step__node {
	width: 44px;
	height: 44px;
	border: 4px solid var(--hitop-active);
	color: var(--hitop-active-ink);
	font-size: 16px;
}

.hitop-step.is-skipped .hitop-step__node { border-style: dashed; border-color: #A9A59B; }
.hitop-step.is-paused  .hitop-step__node { background: var(--hitop-grey-soft); }

.hitop-step__flag {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 13px;
	height: 13px;
	background: var(--hitop-card);
	border: 1.5px solid var(--hitop-ink);
	transform: rotate(45deg);
}

.hitop-step__node--release {
	border-radius: 12px;
	width: 44px;
	height: 44px;
}

.hitop-step__node--release svg { width: 20px; height: 20px; }

.hitop-step__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-align: center;
	padding: 0 4px;
}

.hitop-step__label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.hitop-step.is-upcoming .hitop-step__label,
.hitop-step.is-skipped  .hitop-step__label { color: var(--hitop-faint); }

.hitop-step.is-underway .hitop-step__label { color: var(--hitop-active-ink); font-weight: 700; }

.hitop-chip {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.25;
	border-radius: 4px;
	padding: 3px 6px;
	background: var(--hitop-grey-soft);
	color: var(--hitop-muted);
}

.hitop-chip--sample { background: var(--hitop-accent-soft); color: var(--hitop-accent-ink); }
.hitop-chip--active { background: var(--hitop-active-soft); color: var(--hitop-active-ink); font-weight: 600; }

.hitop-meter {
	display: block;
	width: 74px;
	height: 5px;
	border-radius: 3px;
	background: #EBE7DE;
	overflow: hidden;
}

.hitop-meter__fill { display: block; height: 100%; background: var(--hitop-active); }

/* ------------------------------------------------------------------ next -- */

.hitop-next {
	background: #FDF7EE;
	border: 1px solid #EFDCC2;
	border-radius: 10px;
	padding: 13px 18px;
	margin-top: 18px;
	font-size: 13px;
	line-height: 1.45;
}

/* ---------------------------------------------------------------- legend -- */

.hitop-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-top: 1px solid var(--hitop-rule-soft);
	margin-top: 16px;
	padding-top: 14px;
}

.hitop-legend__item {
	display: inline-flex;
	align-items: center;
	font-size: 11.5px;
	color: var(--hitop-muted);
	margin: 5px 20px 5px 0;
}

.hitop-legend__item .hitop-key { margin-right: 7px; }

.hitop-legend__note {
	margin-left: auto;
	font-size: 11.5px;
	color: var(--hitop-faint);
}

.hitop-key {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: var(--hitop-card);
	border: 1.5px solid var(--hitop-grey);
}

.hitop-key--complete,
.hitop-key--released    { background: var(--hitop-accent); border-color: var(--hitop-accent); }
.hitop-key--adapted     { background: var(--hitop-accent); border: 2px solid var(--hitop-ink); }
.hitop-key--testing     { border: 3px solid var(--hitop-active); }
.hitop-key--translation { border: 2.5px solid #A9A59B; }
.hitop-key--skipped     { border: 1.5px dashed #A9A59B; }
.hitop-key--paused      { background: #DCD8CF; border-color: #A9A59B; }
.hitop-key--release     { border-radius: 4px; background: var(--hitop-accent); border-color: var(--hitop-accent); }
.hitop-key--flag        { border-radius: 0; border: 1.5px solid var(--hitop-ink); transform: rotate(45deg); width: 12px; height: 12px; }

/* --------------------------------------------------------------- columns -- */

.hitop-columns { display: flex; gap: 22px; align-items: stretch; margin-top: 22px; }

.hitop-record { flex: 1.45 1 0; }
.hitop-column { flex: 1 1 0; display: flex; flex-direction: column; gap: 22px; }
.hitop-column .hitop-card + .hitop-card { margin-top: 0; }

.hitop-record__item {
	display: flex;
	gap: 14px;
	padding-bottom: 13px;
	margin-bottom: 13px;
	border-bottom: 1px solid var(--hitop-rule-soft);
}

.hitop-record__item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.hitop-record__step {
	flex: 0 0 62px;
	height: 21px;
	border-radius: 4px;
	background: var(--hitop-accent-soft);
	color: var(--hitop-accent-ink);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	line-height: 21px;
}

.hitop-record__body { display: flex; flex-direction: column; gap: 3px; }
.hitop-record__title { font-size: 13.5px; font-weight: 600; }
.hitop-record__note  { font-size: 12.5px; color: var(--hitop-muted); line-height: 1.45; }
.hitop-record__tier  { font-size: 11.5px; font-weight: 500; color: var(--hitop-faint); }

/* --------------------------------------------------------------- outputs -- */

.hitop-output {
	padding-bottom: 13px;
	margin-bottom: 13px;
	border-bottom: 1px solid var(--hitop-rule-soft);
}

.hitop-output:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.hitop-output__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 5px;
}

.hitop-output__name { font-size: 14px; font-weight: 600; }
.hitop-output__note { font-size: 12px; color: var(--hitop-muted); line-height: 1.45; }

.hitop-tag {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 600;
	white-space: nowrap;
}

.hitop-tag--rigorous { background: var(--hitop-accent-soft); color: var(--hitop-accent-ink); }
.hitop-tag--plain    { background: var(--hitop-grey-soft); color: var(--hitop-muted); }

.hitop-caution {
	margin-top: 8px;
	background: #FAF8F4;
	border: 1px solid var(--hitop-rule-soft);
	border-radius: 8px;
	padding: 9px 11px;
	font-size: 11.5px;
	color: var(--hitop-muted);
	line-height: 1.4;
}

/* ---------------------------------------------------------------- tables -- */

.hitop-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.hitop-table th,
.hitop-table td {
	text-align: left;
	padding: 8px 8px 8px 0;
	border: none;
	border-bottom: 1px solid #F1EEE8;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--hitop-muted);
	vertical-align: middle;
	background: none;
}

.hitop-table thead th {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hitop-faint);
	border-bottom: 1.5px solid var(--hitop-rule);
	padding-bottom: 9px;
}

.hitop-table tbody th { font-weight: 600; color: var(--hitop-ink); }
.hitop-table tbody tr:last-child th,
.hitop-table tbody tr:last-child td { border-bottom: none; }

.hitop-table .is-right  { text-align: right; padding-right: 0; }
.hitop-table .is-centre { text-align: center; }
.hitop-table .is-num    { font-variant-numeric: tabular-nums; }

.hitop-table .is-done-text   { color: var(--hitop-accent-ink); font-weight: 600; font-size: 11.5px; }
.hitop-table .is-active-text { color: var(--hitop-active-ink); font-weight: 600; font-size: 11.5px; }

.hitop-overview__note {
	font-size: 11.5px;
	color: var(--hitop-faint);
	line-height: 1.5;
	margin-bottom: 10px;
}

/* --------------------------------------------------------- mini tracks --- */

.hitop-mini { display: inline-flex; align-items: center; }
.hitop-mini__cell + .hitop-mini__cell { margin-left: 7px; }

.hitop-mini__cell {
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: var(--hitop-card);
	border: 1.5px solid var(--hitop-grey);
}

.hitop-mini__cell.is-complete { background: var(--hitop-accent); border-color: var(--hitop-accent); }
.hitop-mini__cell.has-departure { border: 2px solid var(--hitop-ink); }
.hitop-mini__cell.is-underway { border: 3px solid var(--hitop-active); }
.hitop-mini__cell.is-skipped  { border: 1.5px dashed #A9A59B; }
.hitop-mini__cell.is-paused   { background: var(--hitop-grey-soft); }
.hitop-mini__cell--release    { border-radius: 4px; }
.hitop-mini__cell--release.is-released { background: var(--hitop-accent); border-color: var(--hitop-accent); }

/* ------------------------------------------------------------------- map -- */

.hitop-map { }

.hitop-map__panels { display: flex; gap: 24px; align-items: flex-start; }

.hitop-map__world { flex: 1 1 62%; min-width: 0; }
.hitop-map__detail { flex: 1 1 36%; min-width: 0; }

.hitop-map svg { width: 100%; height: auto; display: block; overflow: visible; }

.hitop-map__land {
	fill: var(--hitop-land);
	stroke: #FFFFFF;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.hitop-map__detail-frame {
	background: #FAF8F4;
	border: 1px solid var(--hitop-rule-soft);
	border-radius: 10px;
	padding: 4px;
	overflow: hidden;
}

.hitop-map__note {
	font-size: 11.5px;
	color: var(--hitop-faint);
	line-height: 1.45;
	margin-top: 8px;
}

.hitop-map__label {
	font-size: 15px;
	fill: var(--hitop-muted);
	font-family: var(--hitop-font);
}

.hitop-marker circle { cursor: pointer; }
.hitop-marker:focus  { outline: none; }
.hitop-marker:focus-visible circle { stroke: var(--hitop-ink); }

.hitop-marker--released circle    { fill: var(--hitop-accent); stroke: #FFFFFF; }
.hitop-marker--testing circle     { fill: #FFFFFF; stroke: var(--hitop-active); }
.hitop-marker--translation circle { fill: #FFFFFF; stroke: #A9A59B; }
.hitop-marker--paused circle      { fill: #DCD8CF; stroke: #A9A59B; }

.hitop-marker:hover circle { fill: var(--hitop-active); stroke: #FFFFFF; }

/* ---------------------------------------------------------------- people -- */

.hitop-people__cols { display: flex; gap: 32px; align-items: flex-start; }

.hitop-people__col { flex: 1 1 0; min-width: 0; }
.hitop-people__col--wide { flex: 1.8 1 0; }
.hitop-people__col + .hitop-people__col { border-left: 1px solid var(--hitop-rule-soft); padding-left: 32px; }

.hitop-people__grid {
	display: flex;
	flex-wrap: wrap;
	margin-right: -20px;
}

.hitop-people__grid .hitop-person {
	flex: 0 0 auto;
	width: 130px;
	margin: 0 20px 12px 0;
}

.hitop-person { display: flex; flex-direction: column; gap: 1px; margin-bottom: 11px; }
.hitop-people__grid .hitop-person { margin-bottom: 0; }

.hitop-person__name  { font-size: 13px; font-weight: 600; }
.hitop-person__meta  { font-size: 12px; color: var(--hitop-muted); }
.hitop-person__role  { font-size: 11.5px; color: var(--hitop-accent-ink); }
.hitop-person__email { font-size: 12px; font-weight: 500; word-break: break-all; }

/* ============================ NARROWER SCREENS ============================ */

@media (max-width: 1100px) {
	.hitop-head__title { font-size: 30px; }
	.hitop-step__label { font-size: 11px; }
	.hitop-step__node  { width: 34px; height: 34px; font-size: 13px; }
	.hitop-step.is-underway .hitop-step__node { width: 38px; height: 38px; font-size: 14px; }
}

@media (max-width: 900px) {
	/* The track turns vertical. Phase bands and the loop bracket only make
	   sense horizontally, so they are replaced by the badge in the header. */
	.hitop-phases,
	.hitop-loop { display: none; }

	.hitop-rail { display: block; }

	.hitop-step {
		flex-direction: row;
		align-items: stretch;
		gap: 14px;
		min-height: 58px;
	}

	.hitop-step__track {
		flex-direction: column;
		width: auto;
		flex: 0 0 auto;
	}

	.hitop-step__line {
		width: 3px;
		height: auto;
		min-height: 10px;
		flex: 1 1 auto;
	}

	.hitop-step__body {
		align-items: flex-start;
		text-align: left;
		padding: 2px 0 18px 0;
	}

	.hitop-step__node,
	.hitop-step.is-underway .hitop-step__node { width: 34px; height: 34px; font-size: 13px; }

	.hitop-step__label { font-size: 13.5px; }

	.hitop-columns,
	.hitop-people__cols,
	.hitop-map__panels { flex-direction: column; }

	.hitop-people__col + .hitop-people__col {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid var(--hitop-rule-soft);
		padding-top: 18px;
		margin-top: 18px;
	}

	.hitop-stats { flex-wrap: wrap; }
	.hitop-stat { flex: 1 1 45%; padding: 10px 0; }
	.hitop-stat + .hitop-stat { border-left: none; }

	.hitop-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.hitop-head__badges { justify-content: flex-start; }

	.hitop-legend__note { margin-left: 0; }

	/* Wide tables scroll inside their own box rather than the page. */
	.hitop-overview .hitop-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 600px) {
	.hitop-card { padding: 20px 18px; }
	.hitop-stats { padding: 16px 18px; }
	.hitop-head__title { font-size: 26px; }
	.hitop-people__grid .hitop-person { width: 100%; }
	.hitop-stat { flex: 1 1 100%; }
}

@media print {
	.hitop-card, .hitop-stats { break-inside: avoid; }
}