/* unit_converter v1_modern */
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body>header{border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;margin:0;padding-block:var(--s-3);font:800 var(--t-lg)/1 var(--sans)}
.mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
main{display:grid;gap:var(--s-5);padding-block:var(--s-6) var(--s-8)}
main>*{min-width:0}
#page-h{max-width:20ch;font-size:clamp(2rem,1.2rem + 2.4vw,3rem)}
.cats{display:flex;gap:4px;width:fit-content;max-width:100%;padding:4px;border-radius:var(--r-pill);background:var(--sunk);overflow-x:auto}
.cats button{display:flex;flex:none;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);font:600 var(--t-sm)/1 var(--sans)}
.cats button,.acts button,.step button{border:0;background:none;color:var(--ink-2);cursor:pointer}
.cats svg,.swap svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cats [aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop)}
.cats [aria-pressed=true] svg,.acts button{color:var(--accent)}
.panel{padding:var(--s-6);border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow-card)}
.conv{display:grid;gap:var(--s-3)}
@media (min-width:760px){.conv{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s-5)}.swap{margin-top:46px}}
.side,.amount{display:grid;gap:var(--s-2);align-content:start;min-width:0}
.amount{font-size:clamp(2rem,1.4rem + 1.6vw,2.75rem)}
.select{position:relative;font-size:1rem}
.side>label,th,.hist time{color:var(--ink-2);font:700 var(--t-xs)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase}
#from-val,.result{display:flex;align-items:center;min-height:96px;height:96px;padding:0 var(--s-5);border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg);font:700 1em/1.1 var(--sans)}
.result{height:auto;background:var(--wash);border-color:var(--accent-line);color:var(--accent);overflow-wrap:anywhere}
main{font-variant-numeric:tabular-nums lining-nums}
.swap{display:grid;place-items:center;justify-self:center;width:48px;height:48px;border:1px solid var(--accent-line);border-radius:50%;background:var(--surface);color:var(--accent);box-shadow:var(--shadow-pop);cursor:pointer}
@media (max-width:759px){.swap{transform:rotate(90deg)}}
.hint,.from,.empty{margin:0}
.hint,.from,.empty,.c-footer{color:var(--ink-2);font-size:var(--t-sm)}
.select select{appearance:none;min-height:48px;padding:0 44px 0 var(--s-5);border-color:var(--line);border-radius:var(--r-pill);font-weight:600;cursor:pointer}
.select::after{content:"";position:absolute;right:20px;top:50%;width:7px;height:7px;border:solid var(--ink-2);border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.opts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line);font:600 var(--t-sm)/1 var(--sans)}
.step{display:flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:var(--r-pill)}
.step button{width:44px;height:44px;border:0;border-radius:50%;background:var(--sunk);color:var(--ink);font-size:22px}
.step button:disabled{background:none;color:var(--ink-2)}
#prec{min-width:9.5ch;text-align:center}
.opts .btn{margin-left:auto;min-height:48px;border-radius:var(--r-pill)}
@media (max-width:600px){.panel{padding:var(--s-4)}.opts .btn{flex:1 1 100%}}
.cols{display:grid;gap:var(--s-5);align-items:start}
@media (min-width:900px){.cols{grid-template-columns:1fr 1fr}}
.cols h2{font-size:var(--t-lg)}
.ref h2{margin-bottom:var(--s-3)}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
td{height:48px;padding:0 var(--s-3);border-top:1px solid var(--line)}
th{padding:0 var(--s-3) var(--s-2);text-align:left}
td:last-child,th:last-child{text-align:right;font-weight:650}
tr{cursor:pointer}
tr.on{background:var(--wash)!important;color:var(--accent)}
.hist-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-3)}
.hist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:var(--s-3);margin:0;padding:0;list-style:none}
.hist li{display:grid;gap:4px;padding:var(--s-4) var(--s-4) var(--s-2);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.hist b{font-size:var(--t-xl);line-height:1.15;overflow-wrap:anywhere}
.acts{display:flex;gap:4px;padding-top:4px;border-top:1px solid var(--line)}
.acts button{min-height:44px;padding:0 var(--s-3);border-radius:var(--r);font:650 var(--t-sm)/1 var(--sans)}
.acts button:hover,.step button:hover:enabled{background:var(--wash)}
.empty{max-width:none;margin:0;padding:var(--s-6);border:1.5px dashed var(--line);border-radius:var(--r-card);text-align:center}
.c-footer{padding-block:var(--s-2) var(--s-6);border-top:1px solid var(--line)}


/* tap-targets: comfortable phone taps -- the sizes win on phones, the page's own layout stays */
@media (max-width: 600px) {
  a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a), button, [role=button], [onclick], summary, select, input:not([type=hidden], [type=checkbox], [type=radio], [type=range]) { min-height: 44px !important; min-width: 44px !important; }
  :where(a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a)) { display: inline-flex; align-items: center; justify-content: center; }
  input, select, textarea { font-size: max(16px, 1em) !important; }
}