/*
 * The redesign's chrome (phase 1, 2026-10-30): tokens, fonts, header, menus,
 * footer - and, while the old page bodies live on under it, the few rules
 * that fit those bodies to the new grid. Loaded only with the new chrome
 * (chrome.php), after the old stylesheets.
 *
 * Source: design/projects/chrome/chrome.css and design/DESIGN.md in the
 * project folder. Classes keep the prototype's ch- prefix so nothing here
 * meets the page styles by accident.
 */

:root {
	--paper: #fff;
	--field: #f1f6f2;
	--rule: #cfe2d6;
	--form: #137045;
	--form-deep: #0d5634;
	--graphite: #1b221f;
	--graphite-2: #4b5852;
	--sans: 'Geologica', system-ui, sans-serif;
	--mono: 'Martian Mono', ui-monospace, monospace;
	--ease: cubic-bezier(.16, 1, .3, 1);
	--ch-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	--ch-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	--ch-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Geologica for every word on the site, Montserrat gone. The old rules set
   the family on body and button inside their media queries; these win by
   specificity, not by !important. */
body.wg-v2, .wg-v2 button, .wg-v2 input, .wg-v2 select, .wg-v2 textarea {font-family: var(--sans);}
.wg-v2 ::selection {background: #cde8d7; color: var(--graphite);}

/* The system's primary button (DESIGN.md, Buttons) - the test, the home
   page and wherever else a page needs one. */
.tp-btn {display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 8px; background: var(--form); color: #fff !important; font: 600 17px/1.2 var(--sans); text-align: center; text-decoration: none !important; cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease);}
.tp-btn:hover {background: var(--form-deep);}
.tp-btn:active {transform: translateY(1px);}
.tp-btn .ch-ico {width: 18px; height: 18px;}

/* ---------- header, menus, footer ---------- */

.ch-hd, .ch-ft {font-family: var(--sans); color: var(--graphite); line-height: 1.45;}
.ch-hd *, .ch-ft * {box-sizing: border-box;}
.ch-hd ul, .ch-ft ul {list-style: none; margin: 0; padding: 0;}
.ch-hd li, .ch-ft li {margin: 0; padding: 0; background: none;}
.ch-hd p, .ch-ft p, .ch-hd h3 {margin: 0; padding: 0; text-align: left; line-height: inherit;}
.ch-hd a, .ch-ft a {color: inherit; text-decoration: none;}
.ch-hd button {font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;}
.ch-hd :focus-visible, .ch-ft :focus-visible {outline: 2px solid var(--form); outline-offset: 3px; border-radius: 4px;}
.ch-ico {display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor;}
.ch-chev {-webkit-mask: var(--ch-chev); mask: var(--ch-chev); transition: transform .25s var(--ease);}
.ch-arrow {-webkit-mask: var(--ch-arrow); mask: var(--ch-arrow);}
.ch-globe {-webkit-mask: var(--ch-globe); mask: var(--ch-globe);}
.ch-wrap {padding: 0 16px;}

/* The logo is the wordmark in curves; its box is the letters' ink, so the
   sizes are the prototype's 22px / 25px type measured as drawn. */
.ch-logo {display: inline-flex; align-items: center; flex: none;}
.ch-logo img {display: block; width: auto; height: 18px;}

/* Header */
.ch-hd {position: relative; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--rule);}
.ch-hd-in {display: flex; align-items: center; gap: 8px; height: 56px;}
.ch-hd-in > .ch-logo {margin-right: auto;}
.ch-nav {display: none;}
.ch-menu {display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px 0 12px; font-size: 15px; font-weight: 500;}
.ch-burger {position: relative; width: 20px; height: 14px;}
.ch-burger i {position: absolute; left: 0; width: 20px; height: 1.6px; border-radius: 1px; background: var(--graphite); transition: transform .3s var(--ease), opacity .2s;}
.ch-burger i:nth-child(1) {top: 0;}
.ch-burger i:nth-child(2) {top: 6.2px;}
.ch-burger i:nth-child(3) {top: 12.4px;}
.is-open .ch-burger i:nth-child(1) {transform: translateY(6.2px) rotate(45deg);}
.is-open .ch-burger i:nth-child(2) {opacity: 0;}
.is-open .ch-burger i:nth-child(3) {transform: translateY(-6.2px) rotate(-45deg);}

/* Phone menu: a sheet under the header, to the bottom of the screen, the
   sections as an accordion. Its top is set by chrome.js to wherever the
   header ends on screen. */
.ch-mm {position: fixed; left: 0; right: 0; bottom: 0; top: var(--ch-mm-top, 57px); z-index: 45; display: none; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--paper);}
.is-open .ch-mm {display: flex; animation: ch-drop .35s var(--ease);}
@keyframes ch-drop {from {opacity: 0; transform: translateY(-8px);}}
.ch-all {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 16px 6px; min-height: 56px; padding: 0 18px; border-radius: 10px; background: var(--form); color: #fff !important; font-weight: 600; flex: none;}
.ch-all:hover {background: var(--form-deep);}
.ch-groups {margin: 0 16px; border-top: 1px solid var(--rule);}
.ch-g {border-bottom: 1px solid var(--rule);}
.ch-g > summary {display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; font-size: 17px; font-weight: 600; list-style: none; cursor: pointer;}
.ch-g > summary::-webkit-details-marker {display: none;}
.ch-g[open] > summary .ch-chev {transform: rotate(180deg);}
.ch-g ul {padding: 0 0 12px;}
.ch-g li a {display: flex; align-items: center; min-height: 44px; padding: 0 0 0 14px; border-left: 1.5px solid var(--rule); font-size: 16px; line-height: 1.3;}
.ch-g li a.is-here {border-left-color: var(--form); color: var(--form-deep); font-weight: 600;}
.ch-g .ch-tag {color: var(--form-deep); font-weight: 600;}
.ch-svc {display: flex; flex-wrap: wrap; gap: 0 20px; margin: 22px 16px 0; padding: 0 0 calc(24px + env(safe-area-inset-bottom)); flex: none;}
.ch-svc a {display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--graphite-2);}
.ch-mega {display: none;}

/* Language: only in the footer; the list opens upwards. */
.ch-lang {position: relative;}
.ch-lang summary {display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--form-deep); cursor: pointer; font-size: 15px; font-weight: 500; list-style: none;}
.ch-lang summary::-webkit-details-marker {display: none;}
.ch-lang summary .ch-globe {width: 16px; height: 16px; color: var(--form);}
.ch-lang summary .ch-chev {width: 14px; height: 14px;}
.ch-lang[open] summary .ch-chev {transform: rotate(180deg);}
.ch-lang ul {position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5; display: grid; gap: 2px; min-width: 100%; padding: 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.08); white-space: nowrap;}
.ch-lang ul a {display: block; padding: 8px 12px; border-radius: 6px; font-size: 15px;}
.ch-lang ul a:hover {background: var(--field);}

/* Footer */
.ch-ft {background: var(--field); border-top: 1px solid var(--rule); font-size: 15px;}
.ch-ft-in {display: grid; gap: 22px; padding: 32px 16px calc(28px + env(safe-area-inset-bottom));}
.ch-ft-h {margin-bottom: 6px !important; font-size: 14px; font-weight: 650; color: var(--form-deep);}
.ch-ft-links {display: flex; flex-wrap: wrap; gap: 0 18px;}
.ch-ft-links a {display: inline-flex; align-items: center; min-height: 40px;}
.ch-ft-tags {display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;}
.ch-ft-tags a {display: flex; align-items: center; min-height: 40px; line-height: 1.25;}
.ch-ft a:hover, .ch-svc a:hover {color: var(--form-deep); text-decoration: underline; text-underline-offset: .18em;}
.ch-ft-bottom {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid var(--rule);}
.ch-copy {font-size: 13px; color: var(--graphite-2);}

/* Breadcrumbs on articles and tests, in the new style: soft graphite, the
   slashes between them in the rule colour (they are text in the markup, so
   they take the box's colour and the links their own). */
.wg-v2 .breadcrumbs {display: block; width: auto; margin: 0; padding: 12px 16px 0; border: 0;}
.wg-v2 .breadcrumbs_in {width: auto;}
.wg-v2 .breadcrumbs_box {display: block; font-size: 13px; line-height: 1.4; color: var(--rule);}
.wg-v2 .breadcrumbs a, .wg-v2 .breadcrumbs a:hover {margin: 0 4px; font-size: 13px; line-height: 1.4; color: var(--graphite-2); text-decoration: none;}
.wg-v2 .breadcrumbs a:hover {text-decoration: underline; text-underline-offset: .18em;}
.wg-v2 .breadcrumbs .breadcrumbs_domain {margin-left: 0 !important;}

@media (min-width: 1280px) {
	.ch-wrap {width: min(1280px, 100% - 48px); margin: 0 auto; padding: 0;}
	.ch-hd-in {height: 72px; gap: 4px;}
	.ch-logo img {height: 20px;}
	.ch-mm, .ch-menu {display: none !important;}
	.ch-nav {display: flex; align-items: center; gap: 4px; margin-right: -14px;}
	.ch-link {display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 8px; font-size: 16px; font-weight: 500;}
	.ch-link:hover, .is-open .ch-tests {background: var(--field); color: var(--form-deep);}
	.is-open .ch-tests .ch-chev {transform: rotate(180deg);}
	/* The "Tests" panel: every section and its tests. Closed by a second
	   press, Esc, or a click outside (chrome.js). */
	.ch-mega {position: absolute; left: 0; right: 0; top: 100%; display: block; visibility: hidden; opacity: 0; transform: translateY(-6px); background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 18px 40px rgba(0,0,0,.08); transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s .25s;}
	.is-open .ch-mega {visibility: visible; opacity: 1; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease);}
	.ch-mega-in {display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px; padding: 32px 0 30px;}
	.ch-mega-g h3 {margin-bottom: 8px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--form-deep);}
	.ch-mega-g h3 a {color: var(--form-deep);}
	.ch-mega-g li a {display: block; padding: 5px 0; font-size: 15.5px; line-height: 1.35;}
	.ch-mega-g a:hover {color: var(--form-deep); text-decoration: underline; text-underline-offset: .18em;}
	.ch-mega-g li a.is-here {color: var(--form-deep); font-weight: 600;}
	.ch-mega-foot {grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--rule);}
	.ch-mega .ch-all {display: inline-flex; margin: 0; min-height: 46px; padding: 0 20px; border-radius: 8px; font-size: 16px;}
	.ch-ft-in {grid-template-columns: 1.3fr 2fr 1fr; gap: 28px 64px; padding: 48px 0 36px;}
	.ch-ft-tags {gap: 0 40px;}
	.ch-ft-bottom {grid-column: 1 / -1;}
	.ch-lang ul {left: auto; right: 0;}

	.wg-v2 .breadcrumbs {padding: 22px 0 0; margin: 0 0 40px;}
	.wg-v2 .breadcrumbs_in {width: min(1280px, 100% - 48px); margin: 0 auto;}
	.wg-v2 .breadcrumbs_box, .wg-v2 .breadcrumbs a {font-size: 13.5px;}

	/* ---------- the old page bodies on the new grid ----------
	   The container is min(1280px, 100% - 48px) instead of a fixed 1280:
	   at exactly 1280 the scrollbar took 15px and the page ran off sideways.
	   The sidebar is 300 instead of 330, with a 48px gap. Minimal fixes only,
	   until each page gets its own redesign. */
	.wg-v2 .main {width: min(1280px, 100% - 48px);}
	.wg-v2 .single_layout {width: min(1280px, 100% - 48px); gap: 48px;}
	.wg-v2 .single_layout .content {flex: 0 1 870px; min-width: 0;}
	.wg-v2 .single_layout .endpost {flex: 0 0 300px;}
	.wg-v2 .content ol {width: auto; max-width: 830px;}
	.wg-v2 .youtube {width: 100%; height: auto; aspect-ratio: 16 / 9;}
	.wg-v2 .cat_title {width: auto;}
	/* Three 330px cards to a row, the leftover width shared out as the two
	   gaps - what the fixed 144px gaps did at 1280, at any container width. */
	.wg-v2 .posts_grid {column-gap: max(24px, calc((100% - 990px) / 2));}
	.wg-v2 .endpost .posts_grid {gap: 0;}
	/* Sidebar cards at the sidebar's 300px, the picture kept at 3:2. */
	.wg-v2 .endpost .cat_post_block, .wg-v2 .endpost .post_block, .wg-v2 .endpost .post_block_thumb_bg {width: 300px;}
	.wg-v2 .endpost .post_block_thumb_bg, .wg-v2 .endpost .post_block_thumb {height: 200px;}
	.wg-v2 .endpost .post_block_thumb {width: 300px; background-size: 300px 200px;}
	.wg-v2 .endpost .post_block_tag {top: 154px;}
}

@media (prefers-reduced-motion: reduce) {
	.ch-hd *, .ch-ft * {animation: none !important; transition: none !important;}
}