/* Below the fold styles. Loaded non-blocking:
   <link rel="stylesheet" href="/assets/css/main.css" media="print" onload="this.media='all'"> */

/* Ruled section breaks: a 1px rule with 48px above and below. No cards, no gaps.
   The content column matches the tool panel width, so dividers, tables, and
   lists share the panel's right edge. Body text stays at the 68ch measure. */
.content { max-width: var(--maxw-panel); }
.block {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--rule);
}
.block:first-child { margin-top: var(--sp-6); }

/* The measure applies to children so section rules always span the full page width. */
.prose > * { max-width: var(--measure); }
.prose > .table-wrap { max-width: none; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.prose h2 + * { margin-top: var(--sp-4); }
.prose h3 {
  margin-top: var(--sp-5);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
}
.prose h3 + * { margin-top: var(--sp-2); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--ink-soft); }
.prose strong { font-weight: 600; }

/* Direct answer: the only place bold appears inside a paragraph. */
.direct-answer {
  max-width: var(--measure);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-4);
  border-left: 2px solid var(--ink);
}
.direct-answer strong { font-weight: 600; }

.byline {
  margin-top: var(--sp-4);
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Calculator key names inside prose. Plain text weight, no monospace.
   Named key-name so it never picks up the keypad's .key button styles. */
.key-name { font-weight: 500; white-space: nowrap; }

/* Tables: full width, ruled, no zebra, no rounding. Numeric columns right aligned in mono. */
.table-wrap { overflow-x: auto; max-width: 100%; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}
caption {
  padding-bottom: var(--sp-2);
  color: var(--ink-soft);
  font-size: 0.875rem;
  text-align: left;
}
th, td {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
th { font-weight: 500; }
td.num, th.num {
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
}
tbody, thead { background: var(--paper); }

/* Error box: ink on a ruled box with an inline SVG warning icon. */
.error-box {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}
.error-box svg { margin-top: 3px; }

/* FAQ accordion */
.faq { max-width: var(--measure); margin-top: var(--sp-4); border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 44px;
  padding: var(--sp-3) 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
}
.faq summary:hover h3 { color: var(--accent); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .faq-a { padding-bottom: var(--sp-4); }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq-a { animation: faq-open 150ms ease-out; }
}
@keyframes faq-open {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Related calculators: plain two column list with ruled separators. Not a card grid. */
.related {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-6);
  margin-top: var(--sp-4);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}
.related li { border-top: 1px solid var(--rule); }
.related a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--sp-2) 0;
}

/* Footer */
.site-footer {
  margin-top: var(--sp-8);
  border-top: 1px solid var(--rule);
  background: var(--paper);
  font-size: 0.875rem;
  line-height: 1.5;
}
.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: var(--sp-7) var(--gutter);
}
.footer-h {
  margin-bottom: var(--sp-3);
  font-size: 0.875rem;
  font-weight: 600;
}
.footer-list {
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--sp-6);
}
.footer-list.single { columns: 1; }
.footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink);
  text-decoration: none;
}
.footer-list a:hover { color: var(--accent); text-decoration: underline; }
.footer-legal {
  grid-column: 1 / -1;
  max-width: var(--measure);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
.footer-legal p + p { margin-top: var(--sp-2); }

@media (max-width: 720px) {
  .related { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-6) var(--gutter); }
  .footer-list a { min-height: 44px; }
  .block { margin-top: var(--sp-6); padding-top: var(--sp-6); }
}

@media (max-width: 480px) {
  .footer-list { columns: 1; }
}

/* Hub pages: a ruled list of tools, each with a one line description. Not a card grid. */
.hub-list {
  margin-top: var(--sp-4);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
  max-width: var(--measure);
}
.hub-list li { padding: var(--sp-3) 0; border-top: 1px solid var(--rule); }
.hub-list a { font-weight: 500; }
.hub-list p { margin-top: var(--sp-1); color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.5; }

/* External link marker: 16px inline icon after links that leave the site. */
.ext svg { display: inline; vertical-align: -2px; margin-left: 2px; }