/* The one layout Pico's .grid doesn't cover: a wrapping card grid for an
   arbitrary, growing number of items (Pico's .grid is a fixed-column row). */
.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;
}

/* Tighter spacing and border-based cards read more like a precision tool
   than Pico's default soft/shadowed/generously-spaced look. */
:root{
  --pico-border-radius:0.125rem;
  --pico-card-box-shadow:none;
  --pico-spacing:0.85rem;
  --pico-typography-spacing-vertical:0.85rem;
}
article{
  border:1px solid var(--pico-muted-border-color);
}
/* Monospace/tabular figures signal precision on calculator results,
   distinct from body text; the emphasized row gets extra size. */
#results td:last-child{
  font-variant-numeric:tabular-nums;
  font-family:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",monospace;
  font-weight:600;
}
#results strong{
  font-size:1.2em;
}

/* A serif/sans pairing for headings reads as a deliberate identity rather
   than unstyled Pico defaults - costs nothing, no font file needed. */
h1,h2{
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
}

/* Icon badges give the home grid visual anchors instead of ten identical
   boxes. Tied to the theme's accent color so it adapts with light/dark.
   display:flex (not inline-flex) forces the title onto its own line below
   the badge instead of wrapping raggedly beside it. */
.tool-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  border-radius:50%;
  background:color-mix(in srgb, var(--pico-primary) 15%, transparent);
  color:var(--pico-primary);
  margin-bottom:0.5rem;
}
.tool-icon svg{
  width:1.4rem;
  height:1.4rem;
}

/* Results fade/slide in on reveal instead of snapping into view. */
#results{
  opacity:0;
  transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
}
#results.reveal-in{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  #results{
    transition:none;
  }
}

/* Brand icon (matches the calculator icon set) sits inline with the wordmark. */
.brand{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
}
.brand-icon{
  width:1.4rem;
  height:1.4rem;
  flex-shrink:0;
  color:var(--pico-primary);
}

/* Borderless icon button (was a bordered .outline.secondary Pico button,
   which looked out of place next to the line-icon system) - a plain sun/moon
   toggle that shows the icon matching the currently-active theme. Meets the
   usual 44x44 minimum tap target (was 38x38). */
#theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0;
  border:none;
  /* Pico's own <button> rule locally redefines --pico-color to white for its
     default filled-button style; --primary isn't affected by that and is
     already used by .tool-icon, so reuse it instead of fighting the reset. */
  background:transparent;
  color:var(--pico-primary);
}
#theme-toggle:hover{
  background:var(--pico-muted-border-color);
  border-radius:50%;
}
#theme-toggle svg{
  width:1.3rem;
  height:1.3rem;
}
#theme-toggle .icon-moon{
  display:none;
}
[data-theme="dark"] #theme-toggle .icon-sun{
  display:none;
}
[data-theme="dark"] #theme-toggle .icon-moon{
  display:block;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #theme-toggle .icon-sun{
    display:none;
  }
  :root:not([data-theme="light"]) #theme-toggle .icon-moon{
    display:block;
  }
}

/* Contact form status message. */
#contact-status.success{
  color:var(--pico-primary);
}
#contact-status.error{
  color:#b3261e;
}

/* A deterministic fix for narrow-viewport header wrap, rather than tuning
   font metrics and hoping - swap to a shorter brand label outright. */
.logo-short{
  display:none;
}
@media (max-width:480px){
  .logo-full{
    display:none;
  }
  .logo-short{
    display:inline;
  }
}