/* The site around the calculators. Colours, fonts and spacing come from the library's tokens.css. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ec-color-bg); color: var(--ec-color-text); font-family: var(--ec-font-sans); line-height: var(--ec-line-height); }
a { color: inherit; }

.eb-header { background: var(--ec-color-surface); border-bottom: 1px solid var(--ec-color-border); padding: var(--ec-space-3) var(--ec-space-4); }
.eb-brand { display: inline-block; margin-bottom: var(--ec-space-1); color: var(--ec-color-text); font-size: var(--ec-font-size-lg); font-weight: 600; text-decoration: none; }
.eb-nav { display: flex; flex-wrap: wrap; gap: var(--ec-space-1) var(--ec-space-4); font-size: var(--ec-font-size-sm); }
.eb-nav a { color: var(--ec-color-text-muted); text-decoration: none; }
.eb-nav a:hover, .eb-nav a:focus-visible { color: var(--ec-color-accent); text-decoration: underline; }

.eb-crumbs { margin-bottom: var(--ec-space-3); color: var(--ec-color-text-muted); font-size: var(--ec-font-size-sm); }
.eb-hero { margin: var(--ec-space-5) 0 var(--ec-space-2); font-size: var(--ec-font-size-xl); font-weight: 600; line-height: 1.2; }

.eb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--ec-space-3); margin: 0; padding: 0; list-style: none; }
.eb-card { display: block; height: 100%; box-sizing: border-box; padding: var(--ec-space-4); background: var(--ec-color-surface); border: 1px solid var(--ec-color-border); border-radius: var(--ec-radius-md); text-decoration: none; }
.eb-card:hover, .eb-card:focus-visible { border-color: var(--ec-color-accent); }
.eb-card strong, .eb-card span { display: block; }
.eb-card span { color: var(--ec-color-text-muted); font-size: var(--ec-font-size-sm); }

.eb-list { margin: 0; padding: 0; list-style: none; }
.eb-list li { padding: var(--ec-space-3) 0; border-bottom: 1px solid var(--ec-color-border); }
.eb-list a { display: block; font-weight: 600; text-decoration: none; }
.eb-list a:hover, .eb-list a:focus-visible { color: var(--ec-color-accent); text-decoration: underline; }
.eb-list span { color: var(--ec-color-text-muted); font-size: var(--ec-font-size-sm); }

.eb-safety { margin: var(--ec-space-3) 0 var(--ec-space-5); color: var(--ec-color-text-muted); font-size: var(--ec-font-size-sm); }
.eb-author { margin-top: var(--ec-space-5); color: var(--ec-color-text-muted); font-size: var(--ec-font-size-sm); }
.eb-embed { margin-top: var(--ec-space-5); color: var(--ec-color-text-muted); font-size: var(--ec-font-size-sm); }
.eb-embed summary { cursor: pointer; }
.eb-embed textarea { box-sizing: border-box; width: 100%; padding: var(--ec-space-2); border: 1px solid var(--ec-color-border); border-radius: var(--ec-radius-sm); background: var(--ec-color-surface); color: var(--ec-color-text); font-family: var(--ec-font-mono); font-size: var(--ec-font-size-xs); }
.eb-prose h2 { margin-top: var(--ec-space-5); font-size: var(--ec-font-size-lg); font-weight: 600; }

.eb-table { overflow-x: auto; }
.eb-table table { width: 100%; border-collapse: collapse; font-size: var(--ec-font-size-sm); }
.eb-table th, .eb-table td { padding: var(--ec-space-2); border-bottom: 1px solid var(--ec-color-border); text-align: left; white-space: nowrap; }

.eb-footer { padding: var(--ec-space-5) var(--ec-space-4); background: var(--ec-color-surface); border-top: 1px solid var(--ec-color-border); color: var(--ec-color-text-muted); font-size: var(--ec-font-size-sm); }
.eb-footer p { margin: 0 0 var(--ec-space-2); }
.eb-footer nav { display: flex; flex-wrap: wrap; gap: var(--ec-space-1) var(--ec-space-4); margin-bottom: var(--ec-space-2); }
.eb-footer-promise { color: var(--ec-color-text); font-weight: 600; }

/* The calculator is drawn by JavaScript. Until it is, everything below it stays hidden with
   its space reserved, so nothing visible jumps when it appears. The timer reveals the page
   if the script ever fails, and the noscript style in the head covers JavaScript being off. */
#calculator:empty { min-height: 100vh; }
#calculator:empty ~ *,
body:has(#calculator:empty) .eb-footer { visibility: hidden; animation: eb-reveal 0s linear 5s forwards; }
@keyframes eb-reveal { to { visibility: visible; } }

@media print { .eb-header, .eb-footer, .eb-author, #tests { display: none; } }