/* Layout layer for the exported boards. The boards carry their design as inline
   styles drawn at 1440px; this file scales the side gutter, the large type and the
   big gaps through three variables, and reflows rows and grids on narrow screens.
   Classes added by tools/build.py:
     fs   a flex row with a wide gap: stacks into a column on narrow screens
     fw   a flex row with a small gap: wraps on narrow screens
     fi   an icon beside its text: never wraps; the text shrinks
     g2…g6  a grid with that many columns                                    */

:root { --gx: 120px; --vs: 1; --tk: 1; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #F6F4EF; color: #171A24; overflow-x: hidden; }
img, svg, video { max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

.fi > :not(svg):not(img) { min-width: 0; }
.fi > svg, .fi > img { flex-shrink: 0; }
.page { width: 100%; max-width: 1440px; margin-inline: auto; min-height: 100vh; }
main { display: flex; flex-direction: column; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #E0A13A; outline-offset: 3px; border-radius: 6px;
}

.skip-link { position: absolute; left: -10000px; top: 0; }
.skip-link:focus { left: 16px; top: 16px; z-index: 30; background: #FFFFFF; color: #171A24;
  padding: 8px 14px; border-radius: 8px; box-shadow: 0 8px 24px rgba(14,18,32,.18); }

/* forms */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.ts-slot:empty { display: none; }
.ts-slot { min-height: 0; }
.form-status { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.ok { color: #1F7A6D; }
.form-status.err { color: #B3261E; }
.form-note { margin: 0; font-size: 13px; line-height: 1.5; color: #5B6070; }
.form-note a { font-weight: 700; }
.api-form button[disabled] { opacity: .6; cursor: progress; }
.api-form--sub { flex-wrap: wrap; }
.sub-extra { flex-basis: 100%; display: flex; flex-direction: column; gap: 10px; }
.sub-extra:has(.ts-slot:empty):has(.form-status:empty) .form-note { margin-top: -16px; }

/* site header: a menu button on narrow screens */
.nav-toggle { display: none; }
.nav-toggle {
  align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid rgba(23,26,36,.18); background: #FFFFFF; color: #171A24;
  font: 700 15px 'Manrope', system-ui, sans-serif; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; position: relative;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); background: #171A24; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); background: #171A24; }

@media (max-width: 1280px) {
  :root { --gx: 64px; --vs: .85; --tk: .85; }
  .site-nav { gap: 22px !important; }
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 1100px) {
  .site-header { height: auto !important; min-height: 72px; flex-wrap: wrap; gap: 12px 20px;
    padding-block: 14px !important; position: relative; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none !important; }
  .js .site-nav.open { display: flex !important; flex-direction: column; align-items: stretch !important;
    width: 100%; gap: 0 !important; padding-bottom: 8px; }
  .js .site-nav.open a { padding: 13px 2px; border-top: 1px solid rgba(23,26,36,.08); }
  .js .site-nav.open a:last-child { justify-content: center; margin-top: 12px; border-top: 0; padding: 0 22px; }
  html:not(.js) .site-nav { flex-wrap: wrap; gap: 10px 20px !important; }
}

@media (max-width: 900px) {
  :root { --gx: 32px; --vs: .7; --tk: .7; }
  .fs { flex-direction: column !important; align-items: stretch !important; }
  .fs > * { flex-basis: auto !important; max-width: 100% !important; }
  .fs > img { width: 100% !important; }
  .g2, .g3 { grid-template-columns: minmax(0, 1fr) !important; }
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .g6 { grid-template-columns: minmax(0, 1fr) !important; }
  .g6 > * { grid-column: auto !important; }
  .fw { flex-wrap: wrap !important; }
  .sub-extra:has(.ts-slot:empty):has(.form-status:empty) .form-note { margin-top: 0; }
  .cover-box { height: auto !important; aspect-ratio: 1200 / 630; }
}

@media (max-width: 600px) {
  :root { --gx: 20px; --vs: .55; --tk: .55; }
  .g4, .g5 { grid-template-columns: minmax(0, 1fr) !important; }
  .site-footer [class*="fw"] { gap: 8px 16px !important; }
  .site-header { flex-wrap: wrap; }
  .site-header > a:first-child { flex-direction: column; align-items: flex-start !important; gap: 2px !important; flex-wrap: nowrap !important; }
  input, select, textarea { font-size: 16px !important; } /* no zoom on focus in iOS */
}