/* Application layouts on top of the approved codex tokens and components. */
.site-main { padding-block-start: var(--space-10); }
.site-header { padding-block: var(--space-8); gap: var(--space-5) var(--space-6); }
.site-menu { margin-inline-start: auto; gap: var(--space-4) var(--space-5); }
.site-menu a, .nav-button { font-size: var(--text-sm); }
.header-caption { max-inline-size: 13rem; }
.footer-brand { display: flex; align-items: center; gap: var(--space-4); min-inline-size: var(--space-0); }
.site-footer .footer-social { justify-content: center; min-inline-size: var(--height-target); flex-shrink: var(--space-0); }
.site-footer .footer-social:hover { color: var(--color-gold); }
.footer-social svg { display: block; }
.logout-form { margin: var(--space-0); }
.nav-button { min-block-size: var(--height-target); padding: var(--space-0); border: var(--space-0); background: var(--color-transparent); font-family: var(--font-display); color: var(--color-muted); }
.nav-button:hover { color: var(--color-gold); }
.language-switch { align-items: center; gap: var(--space-1); font: var(--text-sm) var(--font-display); }
.language-switch a, .current-language { display: inline-flex; min-inline-size: var(--height-target); min-block-size: var(--height-target); align-items: center; justify-content: center; text-decoration: none; }
.current-language { color: var(--color-gold); box-shadow: inset 0 -2px var(--color-gold); }
.language-switch a { color: var(--color-muted); }
.language-switch a:hover { color: var(--color-gold); }
.messages { list-style: none; margin: var(--space-0) var(--space-0) var(--space-10); padding: var(--space-0); display: grid; gap: var(--space-4); }
.messages .success { --message-accent: var(--color-success); }
.messages .error { --message-accent: var(--color-error); }
.messages .warning { --message-accent: var(--color-warning); }
.messages .message__title { display: block; }
.page-heading { margin-block-end: var(--space-10); }
.page-heading .eyebrow { margin-block-end: var(--space-5); }
.page-heading h1 { font-size: clamp(2rem, 3.6vw, 3.75rem); }
.section-intro { color: var(--color-muted); max-inline-size: var(--width-reading); margin-block: var(--space-5) var(--space-8); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); margin-block-end: var(--space-8); }
.section-heading > * { min-inline-size: var(--space-0); }
.section-heading .eyebrow { margin-block-end: var(--space-5); }
.section-heading > p { max-inline-size: 31rem; color: var(--color-muted); }

/* Django BoundFields retain names, IDs, values and validation attributes. */
.form-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.field { align-content: start; }
.field__label { text-transform: uppercase; }
.required-mark { color: var(--color-gold); }
.field input:not([type="hidden"]):not([type="checkbox"]), .field select, .field textarea {
  display: block; inline-size: var(--width-full); max-inline-size: var(--width-full); min-inline-size: var(--space-0); min-block-size: var(--height-control);
  padding: var(--space-3); border: var(--space-0); border-block-end: var(--border-control) solid var(--color-border); border-radius: var(--radius-none);
  background: var(--color-input); color: var(--color-cream); font-size: var(--text-control); line-height: var(--line-control);
}
.field textarea { min-block-size: 8rem; block-size: 8rem; resize: vertical; }
.field select { padding-inline-end: var(--space-8); }
.field select option { background: var(--color-input); color: var(--color-cream); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-subtle); opacity: var(--opacity-visible); }
.field :is(input,select,textarea):hover:not(:disabled) { border-color: var(--color-gold); background-color: var(--color-surface-hover); }
.field :is(input,select,textarea):focus-visible { border-color: var(--color-gold); }
.field.has-error :is(input,select,textarea) { border-color: var(--color-error); }
.field :is(input,select,textarea):disabled { color: var(--color-disabled); background: var(--color-disabled-bg); }
.field .checkbox { padding-block: var(--space-1); line-height: var(--line-control); }
.field .checkbox label { cursor: pointer; }
.field .checkbox input { appearance: auto; accent-color: var(--color-gold); flex-shrink: var(--space-0); inline-size: var(--size-checkbox); block-size: var(--size-checkbox); margin: var(--space-1) var(--space-0); padding: var(--space-0); cursor: pointer; }
.field input[type="file"] { font-size: var(--text-sm); }
.field input[type="file"]::file-selector-button { max-inline-size: var(--width-full); min-block-size: var(--height-target); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-none); margin: var(--space-0) var(--space-3) var(--space-2) var(--space-0); padding: var(--space-2) var(--space-3); color: var(--color-cream); background: var(--color-surface-raised); white-space: normal; font: inherit; cursor: pointer; }
.field input[type="file"]:hover::file-selector-button { border-color: var(--color-gold); }
.field-errors, .form-errors, .errorlist { color: var(--color-error); font-size: var(--text-sm); }
.errorlist { padding-inline-start: var(--space-5); margin: var(--space-0); }
.form-errors { border-inline-start: var(--border-focus) solid var(--color-error); padding: var(--space-4) var(--space-5); margin-block-end: var(--space-6); background: var(--color-surface); }
.field__hint ul { margin: var(--space-0); padding-inline-start: var(--space-5); }
.turnstile-wrap { max-inline-size: var(--width-full); margin-block: var(--space-6); }
.cf-turnstile { min-block-size: var(--height-target); }
form > .button--primary, form > .form-actions { margin-block-start: var(--space-8); }
.agreement-links, .form-footer { font-size: var(--text-sm); color: var(--color-muted); margin-block-start: var(--space-5); }
.form-footer { text-align: center; }
.agreement-links a { color: var(--color-muted); }
.form-actions { margin-block-end: var(--space-5); }

/* Registration follows the approved open, two-column reference. */
.registration-layout { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); align-items: start; gap: clamp(3rem,7vw,8rem); padding-block: var(--space-12) var(--space-16); }
.registration-story .eyebrow { margin-block-end: var(--space-8); }
.registration-story h1 { font-size: clamp(2.25rem,4.3vw,4.5rem); }
.registration-story p:not(.eyebrow) { max-inline-size: 36rem; margin-block-start: var(--space-6); }
.story-lead { color: var(--color-cream); font: var(--text-lead)/var(--line-control) var(--font-display); }
.registration-steps { counter-reset: registration; display: grid; gap: var(--space-5); list-style: none; padding: var(--space-0); margin: var(--space-10) var(--space-0) var(--space-0); color: var(--color-muted); }
.registration-steps li { counter-increment: registration; display: flex; gap: var(--space-5); align-items: baseline; }
.registration-steps li::before { content: "0" counter(registration); color: var(--color-gold); font: var(--text-label) var(--font-display); }
.registration-form .eyebrow { margin-block-end: var(--space-5); color: var(--color-gold); }
.registration-form h2 { font-size: clamp(2rem,3vw,3rem); margin-block-end: var(--space-8); }
.auth-layout { display: grid; grid-template-columns: minmax(0,38rem) minmax(0,1fr); gap: var(--space-16); min-block-size: 34rem; padding-block: var(--space-8); }
.auth-content h1 { font-size: clamp(2rem,3.5vw,3.75rem); margin-block: var(--space-5) var(--space-8); }
.auth-content > p:not(.eyebrow) { color: var(--color-muted); margin-block: var(--space-6); }
.auth-aside { background: url("assets/game-monkey.1f72809f9b60.webp") center / cover no-repeat; mask-image: linear-gradient(to right,transparent,black 25%), linear-gradient(to top,transparent,black 30%); mask-composite: intersect; opacity: .45; }
.auth-aside span { display: none; }

/* Account navigation and content stay open, without nested dashboard cards. */
.account-layout { display: grid; grid-template-columns: 13.5rem minmax(0,1fr); gap: clamp(2rem,5vw,5rem); padding-block: var(--space-8); }
.account-content { min-inline-size: var(--space-0); }
.account-sidebar .eyebrow { margin-block-end: var(--space-6); }
.account-nav { display: grid; gap: var(--space-3); }
.account-nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: var(--height-target); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-inline-start: var(--border-focus) solid var(--color-transparent); text-decoration: none; color: var(--color-muted); font: var(--text-label)/var(--line-control) var(--font-display); }
.account-nav a span { font: var(--text-xs) var(--font-code); color: var(--color-subtle); }
.account-nav a[aria-current="page"], .account-nav a:hover { color: var(--color-gold); border-color: var(--color-gold); }
.sidebar-note { color: var(--color-subtle); font-size: var(--text-sm); margin-block-start: var(--space-16); }
.dashboard-heading h1 { margin-block: var(--space-6) var(--space-8); font-size: clamp(2rem,3.7vw,4rem); }
.dashboard-heading .eyebrow { color: var(--color-muted); }
.steps { margin-block: var(--space-8) var(--space-12); }
.steps .done { text-decoration: none; }
.steps strong { font-size: var(--text-sm); }
.steps small { font-size: var(--text-xs); }
.email-notice { margin-block: var(--space-8); }
.email-notice h2 { color: var(--color-gold); font-size: var(--text-h3); margin-block-end: var(--space-3); }
.key-section { padding-block: var(--space-4) var(--space-12); }
.key-section h2 { margin-block: var(--space-4) var(--space-6); }
.key-waiting { max-inline-size: 44rem; margin-block-end: var(--space-6); color: var(--color-muted); font-size: var(--text-lead); }
.key-label { color: var(--color-muted); font-size: var(--text-sm); }
.key-value { color: var(--color-gold); font: clamp(1.25rem,2.3vw,2rem)/var(--line-control) var(--font-display); margin-block: var(--space-2) var(--space-8); }
.key-value code { font: inherit; }
.build-info { margin-block-end: var(--space-5); }
.build-info h3 { font-size: var(--text-label); margin-block-end: var(--space-3); }
.build-info p { color: var(--color-muted); }
.download-button { min-inline-size: min(25rem,100%); }
.feedback-section { border-block-start: var(--border-thin) solid var(--color-divider); padding-block: var(--space-10); display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: var(--space-10); }
.feedback-section h2 { font-size: var(--text-h3); margin-block: var(--space-4) var(--space-5); }
.feedback-section p:not(.eyebrow) { color: var(--color-muted); margin-block-end: var(--space-6); }
.dashboard-links { display: grid; align-content: center; gap: var(--space-4); }
.dashboard-links a { display: inline-flex; align-items: center; min-block-size: var(--height-target); }
.account-settings { padding-block-start: var(--space-8); }
.account-settings h2 { color: var(--color-muted); font-size: var(--text-label); margin-block-end: var(--space-4); }
.account-settings > div { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); font-size: var(--text-sm); }
.account-settings a { display: inline-flex; align-items: center; min-block-size: var(--height-target); color: var(--color-muted); }
.pc-form .form-fields, .report-form .form-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6); }
.report-form h2 { font-size: var(--text-h3); margin-block-end: var(--space-6); }
.report-form .field:has(input[type="file"]) { grid-column: 1 / -1; }
.report-form .bugs-section { margin-block-start: var(--space-12); }
.bugs-section .section-heading { align-items: center; }
.bugs-section .section-heading h2 { margin-block-end: var(--space-0); }
.bugs-section .section-heading a { font-size: var(--text-sm); }
.bug { min-inline-size: var(--space-0); padding: var(--space-6) var(--space-0) var(--space-8); margin: var(--space-8) var(--space-0); border: var(--space-0); border-block-start: var(--border-thin) solid var(--color-divider); }
.bug legend { color: var(--color-gold); padding-inline-end: var(--space-5); font: var(--text-h3) var(--font-display); }
.bug-status { margin-block-start: var(--space-4); }
.report-document h1 { font-size: clamp(2rem,3.6vw,3.75rem); margin-block-end: var(--space-8); }
.report-document > p { color: var(--color-muted); margin-block: var(--space-5); }
.report-list { list-style: none; padding: var(--space-0); margin-block: var(--space-8); }
.report-list li { border-block-end: var(--border-thin) solid var(--color-divider); padding-block: var(--space-5); }
.report-list a { display: block; padding-block: var(--space-3); }
.report-document dl { display: grid; gap: var(--space-4); margin-block: var(--space-10); }
.report-document dt { font: var(--text-label) var(--font-display); color: var(--color-cream); margin-block-start: var(--space-5); }
.report-document dd { margin: var(--space-0); color: var(--color-muted); }
.report-document .bug h2, .report-document .bug h3 { margin-block: var(--space-5) var(--space-3); }
.legal-document { max-inline-size: 56rem; margin-inline: auto; padding-block: var(--space-8); }
.legal-document h1 { font-size: clamp(2rem,3.5vw,4rem); margin-block-end: var(--space-10); overflow-wrap: normal; word-break: normal; }
.legal-document h2 { font-size: var(--text-h3); margin-block: var(--space-10) var(--space-5); }
.legal-document li { padding-inline-start: var(--space-2); margin-block: var(--space-4); }
.legal-document ul, .legal-document ol { padding-inline-start: var(--space-6); color: var(--color-muted); }
.legal-document > p { margin-block: var(--space-8); }

/* Landing uses the original zoo art and game screenshots. */
.page-home .site-main { padding-block-start: var(--space-0); }
.home-hero { position: relative; isolation: isolate; min-block-size: 48rem; display: grid; place-items: center; text-align: center; padding: var(--space-12) var(--space-0) var(--space-16); }
.hero-art { position: absolute; z-index: var(--z-art); inset: var(--space-0) calc(-1 * var(--space-gutter)); overflow: hidden; }
.hero-art img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; opacity: .55; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,var(--color-bg),#171d1377 50%,#171d1399); }
.hero-copy { max-inline-size: 65rem; }
.home-hero h1 { font-size: clamp(3rem,7vw,7.5rem); margin-block: var(--space-6); }
.hero-lead { font: var(--text-lead)/var(--line-control) var(--font-display); color: var(--color-cream); margin-block-end: var(--space-5); }
.hero-copy > p:not(.eyebrow):not(.hero-lead) { color: var(--color-cream); }
.hero-copy .eyebrow { color: var(--color-cream); }
.hero-cta { display: flex; max-inline-size: 36rem; margin: var(--space-8) auto var(--space-4); font-size: clamp(1.125rem,1.6vw,1.75rem); min-block-size: 6rem; }
.hero-more { display: inline-flex; min-block-size: var(--height-target); align-items: center; color: var(--color-cream); font-size: var(--text-sm); }
.hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-0) var(--space-6); }
.hero-youtube { color: var(--color-muted); }
.home-section { padding-block: var(--space-section); }
.roles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-10); }
.roles article { min-inline-size: var(--space-0); }
.roles img { inline-size: var(--width-full); aspect-ratio: 16/11; object-fit: cover; mask-image: linear-gradient(black 75%,transparent); }
.roles article > div { padding: var(--space-4) var(--space-0); }
.roles h3 { margin-block: var(--space-4); }
.roles p:not(.eyebrow) { color: var(--color-muted); }
.mechanics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-10); margin-block-start: var(--space-10); }
.mechanics h3 { font-size: var(--text-lead); margin-block: var(--space-4); }
.mechanics p { color: var(--color-muted); }
.menu-gallery details, .faq details { border-block-end: var(--border-thin) solid var(--color-divider); }
summary { cursor: pointer; min-block-size: var(--height-target); color: var(--color-cream); padding-block: var(--space-6); font: var(--text-lead)/var(--line-control) var(--font-display); }
summary:hover { color: var(--color-gold); }
.menu-gallery summary span { color: var(--color-subtle); font-size: var(--text-label); margin-inline-end: var(--space-5); }
.menu-gallery img { inline-size: var(--width-full); margin-block-end: var(--space-6); }
.menu-gallery + p { margin-block-start: var(--space-5); }
.faq h2 { margin-block-end: var(--space-8); }
.faq p { padding-block: var(--space-0) var(--space-6); max-inline-size: var(--width-reading); color: var(--color-muted); }
.beta-callout { text-align: center; }
.beta-callout h2 { max-inline-size: 54rem; margin: var(--space-5) auto; }
.beta-callout > p:not(.eyebrow) { color: var(--color-muted); margin-block-end: var(--space-6); }
.beta-callout .button { min-inline-size: min(32rem,100%); }
.contacts { max-inline-size: 54rem; }
.contacts h2 { margin-block: var(--space-5); }
.contacts p:not(.eyebrow) { color: var(--color-muted); }
.contacts .button { margin-block-start: var(--space-6); }

@media (max-width: 70rem) {
  .header-caption { display: none; }
  .account-layout { grid-template-columns: 11rem minmax(0,1fr); gap: var(--space-8); }
}
@media (max-width: 48rem) {
  .site-header { padding-block: var(--space-5); }
  .site-main { padding-block-start: var(--space-6); }
  .site-brand { max-inline-size: 60%; }
  .site-menu { order: 3; inline-size: 100%; margin: var(--space-0); gap: var(--space-2) var(--space-6); }
  .language-switch { margin-inline-start: auto; }
  .registration-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-12); padding-block-start: var(--space-6); }
  .registration-story h1 { font-size: clamp(2rem,7vw,3.5rem); }
  .registration-story .eyebrow { margin-block-end: var(--space-5); }
  .registration-story .story-lead { font-size: var(--text-body); }
  .registration-steps { display: none; }
  .registration-form h2 { font-size: var(--text-h2); }
  .auth-layout { grid-template-columns: minmax(0,1fr); min-block-size: auto; }
  .auth-aside { display: none; }
  .account-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-8); padding-block-start: var(--space-2); }
  .account-sidebar .eyebrow { margin-block-end: var(--space-3); }
  .account-nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); }
  .account-nav a { font-size: var(--text-xs); padding-inline: var(--space-2); }
  .account-nav a span, .sidebar-note { display: none; }
  .dashboard-heading h1 { margin-block: var(--space-4) var(--space-6); }
  .steps { gap: var(--space-4); margin-block: var(--space-6) var(--space-8); }
  .feedback-section, .pc-form .form-fields, .report-form .form-fields { grid-template-columns: minmax(0,1fr); }
  .feedback-section { gap: var(--space-6); }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .bugs-section .section-heading { align-items: flex-start; }
  .report-form .button--primary { inline-size: 100%; }
  .bug { padding-block-end: var(--space-5); }
  .roles, .mechanics { grid-template-columns: minmax(0,1fr); }
  .home-hero { min-block-size: 42rem; padding-block-start: var(--space-8); }
  .home-hero h1 { font-size: clamp(2.5rem,10vw,4.5rem); }
  .hero-cta { min-block-size: 5.5rem; }
  .hero-art img { object-position: 65% center; }
  .site-footer nav { gap: var(--space-2); }
}
@media (max-width: 30rem) {
  .turnstile-wrap { inline-size: calc(100% + var(--space-gutter) * 2); max-inline-size: none; margin-inline: calc(-1 * var(--space-gutter)); display: flex; justify-content: center; }
  .site-menu a, .nav-button { font-size: var(--text-xs); }
  .site-menu { gap: var(--space-2) var(--space-5); }
  .registration-story > p:not(.eyebrow):not(.story-lead) { font-size: var(--text-body); }
  .home-hero .eyebrow { letter-spacing: var(--tracking-label); }
  .key-value { font-size: 1.25rem; }
  .auth-layout { padding-block-start: var(--space-0); }
  .legal-document { padding-block-start: var(--space-2); }
  .legal-document h1 { font-size: var(--text-h2); }
}

/* Password fields: eye button that shows / hides the password (static/ppp/password_toggle.js). */
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-inline-end: 3.25rem; }
.password-toggle { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 3rem; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--color-muted); cursor: pointer; }
.password-toggle:hover, .password-toggle.is-active { color: var(--color-gold); }
.password-toggle:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -4px; }

/* Text pages and shared facts on home, game and press. */
.page-text .site-art { display: none; }
.game-facts { display: grid; grid-template-columns: repeat(2, minmax(var(--space-0), var(--ratio-grid))); column-gap: var(--space-6); margin: var(--space-8) var(--space-0); padding: var(--space-6); background: var(--color-surface); border-radius: var(--radius-none); }
.game-facts > div { display: flex; align-items: baseline; gap: var(--space-4); min-inline-size: var(--space-0); padding-block: var(--space-4); }
.game-facts > div:nth-child(n+3) { border-block-start: var(--border-thin) solid color-mix(in srgb, var(--color-border) var(--width-half), var(--color-transparent)); }
.game-facts dt { flex: var(--flex-grow); min-inline-size: var(--space-0); font: var(--text-sm)/var(--line-body) var(--font-body); color: var(--color-subtle); }
.game-facts dd { flex: calc(var(--flex-grow) * 2); min-inline-size: var(--space-0); margin: var(--space-0); font-size: var(--text-body); color: var(--color-cream); }
.game-more { margin-block: var(--space-0) var(--space-8); }
.breadcrumbs { font-size: var(--text-sm); color: var(--color-muted); margin-block-end: var(--space-6); }
.breadcrumbs a { color: var(--color-muted); }
.game-page img { display: block; inline-size: var(--width-full); max-inline-size: 40rem; block-size: auto; margin-block: var(--space-6) var(--space-4); }

/* News: list items and the YouTube embed (16:9). */
.news-item { margin-block-end: var(--space-8); }
.news-item h2 { margin-block-end: var(--space-2); }
.video-embed { position: relative; aspect-ratio: 16 / 9; margin-block: var(--space-6); }
.video-embed iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

/* Downloadable press images; the original files keep their own dimensions. */
.press-images { display: grid; grid-template-columns: repeat(2, minmax(var(--space-0), var(--ratio-grid))); gap: var(--space-6); margin-block: var(--space-6); }
.press-images a { display: block; min-inline-size: var(--space-0); background: var(--color-surface); border-radius: var(--radius-none); color: var(--color-cream); text-decoration: none; }
.press-images a:hover { background: var(--color-surface-hover); }
.press-images img { inline-size: var(--width-full); max-inline-size: var(--width-full); block-size: auto; aspect-ratio: var(--aspect-card); object-fit: cover; background: var(--color-bg); margin: var(--space-0); }
.press-images .press-logo { object-fit: contain; padding: var(--space-4); }
.press-images a > span { display: block; padding: var(--space-4); }
.press-images small { display: block; margin-block-start: var(--space-1); font-size: var(--text-sm); color: var(--color-subtle); }
@media (max-width: 48rem) {
  .game-facts, .press-images { grid-template-columns: minmax(var(--space-0), var(--ratio-grid)); }
  .game-facts > div { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .game-facts > div:nth-child(2) { border-block-start: var(--border-thin) solid color-mix(in srgb, var(--color-border) var(--width-half), var(--color-transparent)); }
}