/* Approved chrome and blue-violet glass, shared across all four pages.
   Decorative surfaces only; original content, responsive grids and behavior stay intact. */
:root {
  --glass-ink: #f4f5ff;
  --glass-copy: #bec2ce;
  --glass-accent: #b8c6f5;
  --glass-line: #424b63;
  --glass-surface: linear-gradient(145deg, #252d3c 0%, #1a1e29 40%, #15171e 100%);
  --glass-rim: linear-gradient(135deg, #aebed27d 0%, #5d6a873b 35%, #46486b33 65%, #898cbd66 100%);
  --glass-shadow: 0 18px 35px -24px #000b, inset 0 1px 0 #e1e9ff0a;
}

/* Every existing button gets the approved small-scale glass artwork. */
.button, .button.secondary, .button.light, .header-brief,
.menu-button, .menu-close, .connection-switch button {
  --control-art: url('images/explore-creator-glass.svg');
  color: var(--glass-ink);
  border-color: transparent;
  border-radius: 12px;
  background: transparent var(--control-art) center / 100% 100% no-repeat;
  text-shadow: 0 1px 2px #090b14;
  transition: filter .2s ease, transform .2s ease;
}
.button.secondary, .connection-switch button[data-side='logistics'], .menu-close {
  --control-art: url('images/explore-logistics-glass.svg');
  background-image: var(--control-art);
}
.connection-switch button[aria-pressed='true'] {
  color: #fff;
  border-color: transparent;
  background-color: #778dcc20;
  background-image: var(--control-art);
  box-shadow: inset 0 0 0 1px #b7c9ff55, 0 3px 14px -6px #8999ff66;
}
.connection-switch button[aria-pressed='false'] { color: #bac1d3; }
.button:disabled { opacity: .55; cursor: not-allowed; }
@media (hover: hover) {
  .button:hover, .button.secondary:hover, .button.light:hover, .header-brief:hover,
  .menu-button:hover, .menu-close:hover, .connection-switch button:hover {
    color: var(--glass-ink);
    background-color: transparent;
    background-image: var(--control-art);
    border-color: transparent;
    filter: brightness(1.2);
    transform: translateY(-1px);
  }
  .connection-switch button[aria-pressed='true']:hover { background-color: #778dcc20; }
  .button:disabled:hover { transform: none; filter: none; }
}
.button:active, .menu-button:active, .menu-close:active, .connection-switch button:active {
  transform: translateY(0);
  filter: brightness(1.08);
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, .blue-surface :focus-visible, .site-footer :focus-visible {
  outline: 2px solid #b5c4fa;
  outline-offset: 4px;
}

/* Large cards share the same reflective rim and a quieter glass interior. */
.world-row:nth-child(n), .connection-card, .tool-form, .tool-aside,
.checklist-panel, .interest, .question-list details, .profile-facts > div,
.contact-grid .contact-links, .menu-dialog {
  border: 1px solid transparent;
  border-radius: 18px;
  background: var(--glass-surface) padding-box, var(--glass-rim) border-box;
  box-shadow: var(--glass-shadow);
  color: var(--glass-ink);
}
.world-row:nth-child(2), .tool-aside, .profile-facts > div:nth-child(2) {
  --glass-surface: linear-gradient(145deg, #2b293d 0%, #1d1d2b 42%, #16171e 100%);
}
.world-row p, .connection-card p, .tool-aside > p, .tool-aside li,
.interest p, .question-list details > p, .contact-grid .contact-links p,
.checklist-note, .checklist-items label, .tool-note, .save-choice {
  color: var(--glass-copy);
}
.world-row .number, .world-symbol, .interest > span,
.connection-card .eyebrow, .tool-aside .eyebrow, .checklist-panel .eyebrow,
.profile-facts .eyebrow, .brief-completion span:nth-child(2),
.status, .checklist-items label:has(input:checked) span,
.contact-links a, .question-list summary::after {
  color: var(--glass-accent);
}
.world-rows { border-color: transparent; gap: 16px; }
.world-row, .world-row:first-child { padding-inline: 26px; }
.world-row + .world-row { border-left-color: transparent; }
.world-row { transition: filter .2s ease, transform .2s ease; }
@media (hover: hover) {
  .world-row:hover { filter: brightness(1.12); transform: translateY(-2px); }
}
.world-symbol { top: 29px; right: 23px; }
.connection-switch, .brief-output, .brief-completion,
.tool-aside .contact-links, .checklist-items label { border-color: #42485c; }
.interest-list, .question-list { border-color: transparent; }
.interest-list { gap: 12px; }
.interest { padding-inline: 22px; }
.question-list details + details { margin-top: 12px; }
.question-list summary { padding-inline: 22px 53px; }
.question-list summary::after { right: 22px; }
.question-list details > p { padding-inline: 22px; }
.profile-facts { border-color: transparent; gap: 16px; }
.profile-facts > div + div { border-left-color: transparent; }

/* Form fields stay simple and clearly editable inside the larger glass cards. */
input:not([type='checkbox']), select, textarea, .brief-output textarea {
  background: #10141df0;
  border-color: #515c76;
  border-radius: 9px;
  color: var(--glass-ink);
  box-shadow: inset 0 1px 3px #0003;
}
input::placeholder, textarea::placeholder { color: #a2abbd; }
input[type='checkbox'] { accent-color: #a9b9ed; }
select option { background: #161c28; color: #f4f5ff; }
progress { accent-color: #abbaf0; background: #30384d; }
progress::-webkit-progress-bar { background: #30384d; }
progress::-webkit-progress-value { background: linear-gradient(90deg, #91b0dc, #a89bd6); }
progress::-moz-progress-bar { background: linear-gradient(90deg, #91b0dc, #a89bd6); }

/* Mobile navigation is a matching glass sheet; hero artwork is intentionally untouched. */
.menu-dialog { color: var(--glass-ink); }
.menu-dialog::backdrop { background: #070911c7; backdrop-filter: blur(8px); }
.menu-dialog nav a { border-color: #454d64; }
.menu-dialog nav a span { color: var(--glass-accent); }
.menu-dialog .menu-bottom { color: var(--glass-copy); }

@media (max-width: 680px) {
  .world-rows { gap: 14px; }
  .world-row, .world-row:first-child { padding: 27px 23px; }
  .world-row + .world-row { border-top-color: transparent; }
  .world-symbol { right: 23px; }
  .interest { padding-inline: 18px; gap: 13px; grid-template-columns: 30px 1fr; }
  .profile-facts { gap: 12px; }
  .profile-facts > div + div { border-top-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .menu-button, .menu-close, .connection-switch button, .world-row { transition: none; }
  .button:hover, .menu-button:hover, .menu-close:hover, .connection-switch button:hover, .world-row:hover { transform: none; }
}
@media (forced-colors: active) {
  .button, .button.secondary, .button.light, .menu-button, .menu-close,
  .connection-switch button, .world-row:nth-child(n), .connection-card,
  .tool-form, .tool-aside, .checklist-panel, .interest, .question-list details,
  .profile-facts > div, .contact-grid .contact-links, .menu-dialog {
    background: Canvas; border: 1px solid ButtonText; color: CanvasText;
    box-shadow: none; text-shadow: none;
  }
  .connection-switch button[aria-pressed='true'] { border: 2px solid Highlight; color: Highlight; }
}
@media print {
  .button, .button.secondary, .button.light, .menu-button, .menu-close,
  .connection-switch button, .world-row:nth-child(n), .connection-card,
  .tool-form, .tool-aside, .checklist-panel, .interest, .question-list details,
  .profile-facts > div, .contact-grid .contact-links, .menu-dialog {
    color: #111211; background: none; border-color: #999; box-shadow: none; text-shadow: none;
  }
  input:not([type='checkbox']), select, textarea, .brief-output textarea { background: #fff; color: #111211; }
  .world-row p, .connection-card p, .tool-aside > p, .tool-aside li, .interest p,
  .question-list details > p, .contact-grid .contact-links p, .checklist-note,
  .checklist-items label, .tool-note, .save-choice, .status { color: #333; }
}