/* Shared page chrome for every tool under /tools/. Tool-specific widget
   styles (charts, sliders, tables, form fields, ...) stay inline in each
   tool's own <style> block — see website/tools/CLAUDE.md. */

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--surface-page);font-family:var(--font-sans);min-height:100vh}
a{color:var(--text-accent)}
a:hover{color:var(--rp-teal-dark)}
#root{padding:48px 20px 80px}
.wrap{max-width:var(--page-max-width);margin:0 auto}

.tools-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-16)}
.tools-nav .logo{display:flex;align-items:center;gap:8px;font-weight:var(--weight-semibold);color:var(--text-heading);text-decoration:none;font-size:var(--text-body)}
.tools-nav .logo img{display:block;width:24px;height:24px;border-radius:6px}
.tools-nav .back{font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-accent);text-decoration:none}

.eyebrow{font-size:var(--text-eyebrow);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-accent)}
h1{font-size:var(--text-h1);font-weight:var(--weight-bold);color:var(--text-heading);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);margin-top:var(--space-4)}
.sub{font-size:var(--text-body-lg);color:var(--text-body);line-height:var(--leading-relaxed);margin-top:var(--space-6);max-width:520px}

.tool{background:var(--rp-white);border-radius:var(--radius-lg);margin-top:var(--space-16);overflow:hidden}
.tool-section{padding:var(--space-10) var(--space-12)}
.tool-section+.tool-section{border-top:1px solid var(--border-hairline)}
.section-label{font-size:var(--text-micro);font-weight:var(--weight-semibold);color:var(--text-body);text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-bottom:var(--space-6)}

.footer-note{font-size:var(--text-body-sm);color:var(--text-body);margin-top:var(--space-10);line-height:var(--leading-relaxed)}
.tools-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:var(--space-24);padding-top:var(--space-10);border-top:1px solid var(--border-hairline)}
.tools-footer,.tools-footer a{font-size:var(--text-body-sm);color:var(--text-body)}
.tools-footer .footer-links{display:flex;gap:20px}
.tools-footer a{text-decoration:none;font-weight:var(--weight-semibold)}