/* calcs.vodka — shared stylesheet. One file every page links.
   Tokens describe the visual system; everything below translates the
   calcs.vodka design-system components (Button, Card, NumberField, etc.)
   into plain CSS classes for a framework-free static site. */
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/shape.css";
@import "tokens/motion.css";
@import "tokens/base.css";

/* ---------- layout ---------- */
.wrap{max-width:var(--width-page);margin:0 auto;padding-left:var(--space-8);padding-right:var(--space-8)}
main.wrap{padding-top:var(--space-9);display:grid;gap:var(--section-gap)}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--space-8);align-items:start}
@media (max-width:860px){.calc-grid{grid-template-columns:minmax(0,1fr)}}
.calc-main{min-width:0;display:grid;gap:var(--section-gap)}
.calc-side{display:grid;gap:var(--space-7);align-content:start}
.hero{display:grid;gap:var(--space-5);max-width:var(--measure-prose)}
.hero p{font-size:var(--text-lg);color:var(--text-muted)}
.badge-row{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:5;background:var(--paper-1);border-bottom:1px solid var(--rule-hairline);box-shadow:var(--shadow-raised)}
.site-header .wrap{height:60px;display:flex;align-items:center;gap:var(--space-7)}
.wordmark{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-0.02em;color:var(--text-strong);text-decoration:none}
.wordmark span{color:var(--accent)}
.wordmark.inverse{color:var(--paper-1)}
.wordmark.inverse span{color:var(--cobalt-2)}
.folder-tag{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-faint)}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-6)}
.site-nav a{font-size:var(--text-sm);color:var(--text-body);text-decoration:none}
.site-nav a:hover{color:var(--text-link)}
.market-link{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text-link)!important}
.icon{display:inline-flex;flex:none}
.icon svg{width:100%;height:100%}

/* locale/country selector bar (DE/RU/FR clusters) */
.locale-bar{border-bottom:1px solid var(--rule-hairline);background:var(--surface-sunken)}
.locale-bar .wrap{padding-top:var(--space-4);padding-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.locale-bar .wrap + .wrap{padding-top:0;padding-bottom:var(--space-5)}
.locale-bar-label{font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.chip{display:inline-flex;align-items:baseline;gap:var(--space-3);padding:4px 10px;border-radius:var(--radius-1);text-decoration:none;white-space:nowrap;font-size:13px;cursor:pointer;transition:var(--transition-control);border:1px solid transparent;background:none}
.chip-code{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-caps);text-transform:uppercase;opacity:.65}
.chip.is-on{border-color:var(--ink-1);background:var(--ink-1);color:var(--paper-1)}
.chip.is-off{border-color:transparent;color:var(--text-body)}
.chip.is-off:hover{background:var(--surface-card);border-color:var(--rule-hairline)}
.chip.country.is-on{border-color:var(--cobalt-3);background:var(--cobalt-1);color:var(--cobalt-5)}
.chip.country.is-off{border-color:var(--rule-field);background:var(--surface-card);color:var(--text-body)}
.cluster-note{font-size:var(--text-2xs);color:var(--text-faint);max-width:44ch}

/* ---------- footer ---------- */
.site-footer{margin-top:var(--space-11);background:var(--surface-inverse);color:var(--ink-5)}
.site-footer .wrap{padding-top:var(--space-9);padding-bottom:var(--space-9);display:grid;gap:var(--space-7)}
.footer-top{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.footer-top .tag{font-size:var(--text-sm);color:var(--ink-4)}
.footer-markets{border-top:1px solid var(--ink-2);padding-top:var(--space-6);display:grid;gap:var(--space-4)}
.footer-markets-label{font-family:var(--font-ui);font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-4)}
.footer-market-links{display:flex;gap:var(--space-5);flex-wrap:wrap}
.footer-market-links a{font-size:var(--text-sm);color:var(--ink-5);text-decoration:none}
.footer-market-links a.is-current{color:var(--paper-1)}
.footer-market-links a code{font-family:var(--font-mono);font-size:var(--text-2xs);text-transform:uppercase;opacity:.6;padding-right:6px}
.footer-note{font-size:var(--text-2xs);color:var(--text-inverse-muted);max-width:var(--measure-prose)}

/* ---------- badge / tag ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--space-2);height:22px;padding:0 var(--space-3);border-radius:var(--radius-1);border:1px solid var(--rule-hairline);background:var(--surface-sunken);color:var(--text-muted);font-family:var(--font-ui);font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase}
.badge-accent{background:var(--accent-tint);color:var(--cobalt-5);border-color:var(--cobalt-2)}
.badge-clear{background:var(--zone-clear-bg);color:var(--clear-4);border-color:var(--clear-3)}
.badge-warn{background:var(--zone-warn-bg);color:var(--warn-4);border-color:var(--warn-3)}
.badge-over{background:var(--zone-over-bg);color:var(--over-4);border-color:var(--over-3)}

.tag{display:inline-flex;align-items:center;height:26px;padding:0 var(--space-4);border-radius:var(--radius-1);border:1px solid var(--rule-field);background:var(--surface-card);color:var(--text-body);font-family:var(--font-ui);font-size:var(--text-sm);text-decoration:none;cursor:pointer;transition:var(--transition-control)}
.tag:hover{background:var(--surface-sunken);color:var(--text-body)}
.tag.is-active{border-color:var(--rule-strong);background:var(--surface-inverse);color:var(--text-inverse)}
.tag.is-active:hover{background:var(--surface-inverse)}

/* ---------- card ---------- */
.card{border-radius:var(--radius-card);padding:var(--pad-card);background:var(--surface-card);border:var(--border-hairline)}
.card-tight{padding:var(--pad-card-tight)}
.card-sunken{background:var(--surface-sunken)}
.card-strong{border:var(--border-strong)}
.card-inverse{background:var(--surface-inverse);border:1px solid var(--ink-1);color:var(--text-inverse)}

/* the one primary calculator card per page */
.calculator{background:var(--surface-card);border:var(--border-strong);border-radius:var(--radius-card);padding:var(--pad-card);display:grid;gap:var(--space-7)}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);align-items:start}
@media (max-width:520px){.field-grid{grid-template-columns:1fr}}
.results-row{border-top:var(--border-strong);padding-top:var(--space-7);display:flex;gap:var(--space-9);flex-wrap:wrap;align-items:flex-end}

/* ---------- form fields ---------- */
.field{display:grid;gap:var(--gap-field);align-content:start;min-width:0}
.field label{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.field-control{display:flex;align-items:stretch;min-width:0;border:1px solid var(--rule-field);border-radius:var(--radius-control);background:var(--surface-field);box-shadow:var(--shadow-inset-field);transition:var(--transition-control)}
.field-control:focus-within{border-color:var(--rule-focus);box-shadow:var(--focus-ring)}
.field-control input,.field-control select{flex:1;min-width:0;height:calc(var(--control-h-md) - 2px);padding:0 var(--space-4);border:none;outline:none;background:transparent;font-family:var(--font-numeric);font-size:var(--text-md);font-variant-numeric:tabular-nums;color:var(--text-strong);width:100%}
.field-control select{font-family:var(--font-ui);font-variant-numeric:normal;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field-unit{display:flex;align-items:center;padding:0 var(--space-4);border-left:1px solid var(--rule-hairline);background:var(--surface-sunken);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}
.field-hint{font-size:var(--text-xs);color:var(--text-faint)}

.segmented{display:grid;gap:var(--gap-field);align-content:start;justify-items:start}
.segmented-label{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.segmented-group{display:inline-flex;border:1px solid var(--rule-field);border-radius:var(--radius-control);background:var(--surface-sunken);padding:2px;gap:2px}
.segmented-group button{height:28px;padding:0 var(--space-4);border:none;border-radius:1px;cursor:pointer;background:transparent;color:var(--text-muted);font-family:var(--font-ui);font-size:var(--text-sm);white-space:nowrap;transition:var(--transition-control)}
.segmented-group button[aria-selected="true"]{background:var(--surface-inverse);color:var(--text-inverse);font-weight:600}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-ui);font-weight:600;border-radius:var(--radius-control);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);transition:var(--transition-control);text-decoration:none;white-space:nowrap;height:var(--control-h-md);padding:0 var(--space-5);font-size:var(--text-md);border:1px solid transparent}
.btn-sm{height:var(--control-h-sm);padding:0 var(--space-4);font-size:var(--text-sm)}
.btn-lg{height:var(--control-h-lg);padding:0 var(--space-7);font-size:var(--text-lg)}
.btn-primary{background:var(--accent);color:var(--paper-0);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-secondary{background:var(--surface-card);color:var(--text-strong);border-color:var(--rule-strong)}
.btn-secondary:hover{background:var(--surface-sunken)}
.btn-ghost{background:transparent;color:var(--text-link);border-color:transparent}
.btn-ghost:hover{background:var(--accent-tint)}
.btn[disabled]{opacity:.42;pointer-events:none}

/* ---------- result readout ---------- */
.readout{display:grid;gap:var(--space-3)}
.readout-label{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.readout-value-row{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.readout-value{font-family:var(--font-numeric);font-size:var(--text-readout-xl);font-weight:500;line-height:var(--lh-readout);letter-spacing:var(--ls-readout);font-variant-numeric:tabular-nums;color:var(--text-strong)}
.readout-value.size-lg{font-size:var(--text-readout-lg)}
.readout-value.size-md{font-size:var(--text-readout-md)}
.readout-value.tone-accent{color:var(--accent)}
.readout-value.tone-clear{color:var(--zone-clear)}
.readout-value.tone-warn{color:var(--zone-warn)}
.readout-value.tone-over{color:var(--zone-over)}
.readout-unit{font-family:var(--font-ui);font-size:var(--text-lg);color:var(--text-muted)}
.readout-secondary{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted)}

/* ---------- formula block ---------- */
.formula-block{background:var(--surface-sunken);border:var(--border-hairline);border-radius:var(--radius-1);padding:var(--pad-card-tight);display:grid;gap:var(--space-4)}
.formula-label{font-family:var(--font-ui);font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.formula-lines{display:grid;gap:var(--space-2)}
.formula-lines code{font-family:var(--font-mono);font-size:var(--text-formula);line-height:1.6;color:var(--text-strong);white-space:pre-wrap;overflow-wrap:anywhere;padding-left:var(--space-5);text-indent:calc(-1 * var(--space-5));display:block;background:none}
.formula-example{border-top:var(--border-hairline);padding-top:var(--space-4);font-size:var(--text-sm);color:var(--text-muted)}
.formula-example strong{font-weight:600;color:var(--text-body)}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--rule-strong)}
.faq-item{border-bottom:var(--border-hairline)}
.faq-item button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-5) 0;border:none;background:transparent;cursor:pointer;text-align:left;font-family:var(--font-ui)}
.faq-item button .q{font-size:var(--text-md);font-weight:600;color:var(--text-strong)}
.faq-item button .mark{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--text-lg);color:var(--accent);line-height:1}
.faq-item .a{display:none;padding:0 0 var(--space-6);font-size:var(--text-sm);line-height:var(--lh-body);color:var(--text-body);max-width:var(--measure-prose)}
.faq-item[data-open="true"] .a{display:block}

/* ---------- related calculators ---------- */
.related{display:grid;gap:var(--space-5)}
.related-title{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.related-grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:var(--space-4)}
@media (max-width:700px){.related-grid{grid-template-columns:1fr}}
.related-card{display:grid;gap:var(--space-2);padding:var(--space-5);border:1px solid var(--rule-hairline);border-radius:var(--radius-1);background:var(--surface-card);text-decoration:none;transition:var(--transition-control)}
.related-card:hover{border-color:var(--rule-strong)}
.related-card .name{font-family:var(--font-ui);font-size:var(--text-md);font-weight:600;color:var(--text-strong)}
.related-card .blurb{font-size:var(--text-xs);color:var(--text-muted)}

/* ---------- source cite ---------- */
.sources{display:grid;gap:var(--space-3)}
.sources-title{font-family:var(--font-ui);font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.sources ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-2)}
.sources li{font-size:var(--text-sm);display:flex;gap:var(--space-3);align-items:baseline}
.sources .n{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-faint)}
.sources .detail{color:var(--text-faint)}

/* ---------- method note ---------- */
.method{border-top:1.5px solid var(--rule-strong);padding-top:var(--space-5);display:grid;gap:var(--space-4)}
.method-title{font-family:var(--font-ui);font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.method-name{font-size:var(--text-sm);color:var(--text-strong);font-weight:600}
.method-constants{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-5);font-size:var(--text-sm)}
.method-constants dt{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}
.method-constants dd{margin:0;color:var(--text-body)}
.method-body{font-size:var(--text-sm);line-height:var(--lh-body);color:var(--text-body);max-width:var(--measure-prose)}

/* ---------- callout (legal disclaimer) ---------- */
.callout{display:grid;grid-template-columns:3px 1fr;border-radius:var(--radius-1);overflow:hidden;background:var(--paper-2);border:1px solid var(--rule-field)}
.callout-bar{background:var(--ink-1)}
.callout-body{padding:var(--space-5);display:grid;gap:var(--space-2)}
.callout-label{font-family:var(--font-ui);font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-strong)}
.callout-text{font-size:var(--text-sm);line-height:var(--lh-body);color:var(--text-body);max-width:var(--measure-prose)}
.callout-info{background:var(--accent-tint);border-color:var(--cobalt-2)}
.callout-info .callout-bar{background:var(--accent)}
.callout-info .callout-label{color:var(--cobalt-5)}
.callout-warn{background:var(--zone-warn-bg);border-color:var(--warn-3)}
.callout-warn .callout-bar{background:var(--warn-3)}
.callout-warn .callout-label{color:var(--warn-4)}

/* ---------- trust strip ---------- */
.trust-strip{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:0.04em;text-transform:uppercase}
.trust-strip .sep{color:var(--text-faint)}
.trust-strip a{font-family:var(--font-mono);font-size:var(--text-2xs)}

/* ---------- limit gauge ---------- */
.limit-gauge{display:grid;gap:var(--space-3)}
.limit-gauge-track{position:relative;height:10px;border-radius:999px;background:linear-gradient(to right,var(--clear-3) 0 60%,var(--warn-3) 60% 80%,var(--over-3) 80% 100%)}
.limit-gauge-marker{position:absolute;top:-4px;width:2px;height:18px;background:var(--ink-1)}
.limit-gauge-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-faint)}

/* ---------- locale index (homepage) ---------- */
.calc-section{display:grid;gap:var(--space-5)}
.calc-section-head{display:flex;align-items:baseline;gap:var(--space-4);border-bottom:1.5px solid var(--rule-strong);padding-bottom:var(--space-3)}
.calc-section-head h2{font-size:var(--text-display-3)}
.calc-section-count{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-faint);white-space:nowrap}
.calc-tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
@media (max-width:900px){.calc-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.calc-tile-grid{grid-template-columns:1fr}}
.calc-tile{display:grid;gap:var(--space-3);padding:var(--space-6);background:var(--surface-card);border:1px solid var(--rule-hairline);text-decoration:none;transition:var(--transition-control)}
.calc-tile:hover{border-color:var(--rule-strong)}
.calc-tile .name{font-family:var(--font-ui);font-size:var(--text-md);font-weight:600;color:var(--text-strong)}
.calc-tile .blurb{font-size:var(--text-xs);color:var(--text-muted)}
.calc-tile .slug{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-faint)}
.calc-tile.is-soon{opacity:.5;cursor:default;pointer-events:none}

/* ---------- splash page ---------- */
.splash{min-height:100vh;display:grid;place-items:center;padding:var(--space-11) var(--space-8)}
.splash-inner{width:100%;max-width:800px;display:grid;gap:var(--space-9)}
.splash-lang{display:grid;gap:var(--space-2)}
.splash-lang-head{display:flex;align-items:baseline;gap:var(--space-4)}
.splash-lang-head h2{font-size:var(--text-display-3)}
.splash-lang-tag{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-faint)}
.splash-rows{display:grid;border-bottom:var(--border-hairline)}
.splash-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto 18px;align-items:center;gap:var(--space-5);padding:var(--space-4) var(--space-3);border-top:var(--border-hairline);text-decoration:none;transition:var(--transition-control)}
.splash-row:hover{background:var(--accent-tint)}
.splash-row .code{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-faint)}
.splash-row .country{font-family:var(--font-ui);font-size:var(--text-md);color:var(--text-strong)}
.splash-row .note{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted)}
.splash-row.is-soon{opacity:.45;cursor:default;pointer-events:none}
.splash-row .arrow{color:var(--text-faint)}
.splash-row:hover .arrow{color:var(--accent)}

/* ---------- utility ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--space-5);top:-40px;background:var(--ink-1);color:var(--paper-1);padding:8px 14px;border-radius:var(--radius-1);z-index:10;transition:top var(--dur-fast) var(--ease-out)}
.skip-link:focus{top:var(--space-5)}