/* Calculator widget + static header for the non-React guide pages. Uses the site's theme tokens. */
.ch-calc{border:1px solid hsl(var(--border));background:hsl(var(--card));border-radius:1rem;padding:1.5rem;box-shadow:0 1px 3px rgb(0 0 0/.06);scroll-margin-top:5rem}
@media(min-width:640px){.ch-calc{padding:2rem}}
.ch-calc h2{font-size:1.25rem;font-weight:800;color:hsl(var(--foreground));margin:0 0 1.25rem}
.ch-fields{display:grid;gap:1rem;grid-template-columns:1fr;margin-bottom:1.5rem}
@media(min-width:640px){.ch-fields{grid-template-columns:1fr 1fr}}
.ch-field.ch-wide{grid-column:1/-1}
.ch-field label{display:block;font-size:.75rem;font-weight:600;color:hsl(var(--muted-foreground));margin-bottom:.375rem}
.ch-field input,.ch-field select{width:100%;box-sizing:border-box;height:2.75rem;border-radius:.625rem;border:1px solid hsl(var(--input));background:hsl(var(--background));color:hsl(var(--foreground));padding:0 .75rem;font-size:1rem;font-family:inherit}
.ch-field input:focus,.ch-field select:focus{outline:2px solid hsl(var(--ring));outline-offset:0;border-color:transparent}
.ch-results{display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:640px){.ch-results{grid-template-columns:repeat(2,1fr)}}
.ch-res{border-radius:.75rem;border:1px solid hsl(var(--border));padding:.875rem 1rem;background:hsl(var(--background))}
.ch-res.ch-main{grid-column:1/-1;background:hsl(var(--primary)/.07);border-color:hsl(var(--primary)/.2);text-align:center;padding:1.25rem 1rem}
.ch-lbl{font-size:.75rem;font-weight:500;color:hsl(var(--muted-foreground))}
.ch-val{font-size:1.05rem;font-weight:700;color:hsl(var(--foreground));margin-top:.2rem;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ch-main .ch-val{font-size:1.875rem;font-weight:800;color:hsl(var(--primary))}
.ch-table{overflow-x:auto;margin-top:1rem;border:1px solid hsl(var(--border));border-radius:.75rem;max-height:22rem;overflow-y:auto}
.ch-table table{width:100%;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums}
.ch-table th{position:sticky;top:0;background:hsl(var(--muted));color:hsl(var(--foreground));font-weight:600;text-align:left;padding:.6rem .75rem;white-space:nowrap}
.ch-table td{padding:.55rem .75rem;border-top:1px solid hsl(var(--border));color:hsl(var(--foreground));white-space:nowrap}
.ch-note{font-size:.75rem;color:hsl(var(--muted-foreground));margin:1rem 0 0;line-height:1.5}
.ch-updated{border:1px solid hsl(var(--primary)/.25);background:hsl(var(--primary)/.06);border-radius:.75rem;padding:1rem 1.25rem;color:hsl(var(--foreground));font-size:.875rem;line-height:1.6}
.ch-updated table{width:100%;border-collapse:collapse;margin-top:.5rem}
.ch-updated td,.ch-updated th{padding:.35rem .5rem;border-top:1px solid hsl(var(--border));text-align:left}
.ch-meta{font-size:.75rem;color:hsl(var(--muted-foreground));margin-top:.75rem}
/* static header */
.ch-nav{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;border-top:1px solid hsl(var(--border))}
.ch-nav a{padding:.6rem .75rem;font-size:.8125rem;font-weight:500;color:hsl(var(--muted-foreground));white-space:nowrap;text-decoration:none}
.ch-nav a:hover{color:hsl(var(--primary))}
.ch-theme{border:1px solid hsl(var(--border));background:transparent;color:hsl(var(--foreground));border-radius:.5rem;width:2.25rem;height:2.25rem;cursor:pointer;font-size:1rem}
/* long-tail article pages */
.ch-prose p{margin:0 0 1rem}
.ch-prose a{color:hsl(var(--primary))}
.ch-list{margin:0 0 1rem;padding-left:1.25rem;list-style:disc}
.ch-list li{margin:.5rem 0;line-height:1.65}
.ch-list strong,.ch-prose strong{color:hsl(var(--foreground))}
/* "Embed this calculator" box */
.ch-share{margin-top:1rem;border:1px dashed hsl(var(--border));border-radius:.75rem;padding:.75rem 1rem;font-size:.875rem;color:hsl(var(--muted-foreground))}
.ch-share summary{cursor:pointer;font-weight:600;color:hsl(var(--foreground))}
.ch-share p{margin:.75rem 0 .5rem}
.ch-share textarea{width:100%;box-sizing:border-box;font:12px/1.5 ui-monospace,Consolas,monospace;border:1px solid hsl(var(--input));border-radius:.5rem;padding:.5rem;background:hsl(var(--muted));color:hsl(var(--foreground));resize:vertical}
.ch-share-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.5rem}
.ch-share-row a{color:hsl(var(--primary))}
.ch-copy{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border:0;border-radius:.5rem;padding:.45rem 1rem;font-weight:600;cursor:pointer}