/* Page frame: header, main column, footer, and the calculator grid. */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header__inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  max-width: 1320px; margin: 0 auto; padding: 10px 16px;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none;
}
.brand__mark { width: 26px; height: 26px; color: var(--accent); }
.site-nav { display: flex; flex-wrap: wrap; gap: 2px; margin-right: auto; }
.site-nav a {
  padding: 6px 10px; border-radius: var(--radius-2);
  color: var(--text-2); font-size: 0.9375rem; font-weight: 550; text-decoration: none;
}
.site-nav a:hover { background: var(--surface-3); color: var(--text); }
.site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
.theme-toggle { gap: 6px; }

.page { max-width: 1320px; margin: 0 auto; padding: 20px 16px 48px; }
.page-head { display: grid; gap: 6px; margin-bottom: 18px; max-width: 72ch; }
.page-lede { color: var(--text-2); }

.site-footer { border-top: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 0.875rem; }
.site-footer__inner { display: grid; gap: 6px; max-width: 1320px; margin: 0 auto; padding: 18px 16px 28px; }

/* Calculator: inputs left, results right; on phones the key results come
   first, then the drawing, then the inputs, then the details. */
.tool-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.tool-grid > .area-summary { order: 1; }
.tool-grid > .area-visual { order: 2; }
.tool-grid > .area-inputs { order: 3; }
.tool-grid > .area-details { order: 4; }

@media (min-width: 960px) {
  .tool-grid {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    grid-template-areas: "inputs summary" "inputs visual" "inputs details";
    align-items: start;
  }
  .tool-grid > .area-inputs { grid-area: inputs; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
  .tool-grid > .area-summary { grid-area: summary; }
  .tool-grid > .area-visual { grid-area: visual; }
  .tool-grid > .area-details { grid-area: details; }
}

/* Phones: brand and theme toggle share the top row; the nav wraps below. */
@media (max-width: 720px) {
  .theme-toggle { order: 2; margin-left: auto; }
  .site-nav { order: 3; flex-basis: 100%; margin-right: 0; }
}