/* 
   unit converter tool css
   dependency on /resources/global.css for all else
 */
.tool-hero {background-image:url('/resources/conversions.webp');}
.cat-tabs {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.cat-tab {padding:9px 16px;border:1px solid var(--line);border-radius:3px;background:var(--paper);font-family:'Barlow',monospace;font-size:12px;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;color:var(--slate);cursor:pointer;transition:border-color .15s ease, background .15s ease, color .15s ease;}
.cat-tab:hover {border-color:var(--spot);}
.cat-tab.active {border-color:var(--spot);background:rgba(229,0,125,0.06);color:var(--spot-dark);}
.dpi-row {display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;margin-bottom:22px;background:var(--panel);border-radius:2px;border:1px solid var(--line);}
.dpi-row label {font-family:'Barlow',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--slate);}
.dpi-row input[type=number] {width:80px;border:1px solid var(--line);border-radius:2px;padding:8px 10px;font-family:'Barlow',sans-serif;font-size:14px;color:var(--ink);background:var(--paper);}
.dpi-row input[type=number]:focus {outline:none;border-color:var(--spot);}
.dpi-unit {font-family:'Barlow',monospace;font-size:12px;color:var(--slate);margin-right:auto;}
.dpi-presets {display:flex;gap:6px;flex-wrap:wrap;}
.dpi-preset {padding:7px 10px;border:1px solid var(--line);border-radius:3px;background:var(--paper);font-family:'Barlow',monospace;font-size:11px;color:var(--slate);cursor:pointer;transition:border-color .15s ease, color .15s ease;}
.dpi-preset:hover {border-color:var(--spot);color:var(--spot-dark);}
.unit-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;}
.unit-row label {display:block;font-family:'Barlow',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--slate);margin-bottom:7px;}
.unit-row input {width:100%;border:1px solid var(--line);border-radius:2px;padding:12px 13px;font-family:'Fraunces',serif;font-size:17px;color:var(--ink);background:var(--paper);}
.unit-row input:focus {outline:none;border-color:var(--spot);}
.unit-row input::-webkit-outer-spin-button, .unit-row input::-webkit-inner-spin-button {opacity:0.4;}
@media (max-width:480px) {.unit-grid {grid-template-columns:1fr;} .dpi-unit {margin-right:0;width:100%;}}
@media (max-width:860px) {.tool-hero {background-image:none;}}