/* Compact slide rule widget for the homepage - a smaller version of the
 * interactive slide rule on the Evolution page. Reuses that page's exact
 * HTML structure, element IDs, and JavaScript (assets/js/calculator-
 * evolution.js) completely unmodified - only these CSS values differ,
 * scoped under .hm-mini-slide so the original evolution page is never
 * affected by this file at all. */

.hm-mini-slide{margin-top:44px}
.hm-mini-slide .hm-mini-slide-heading{text-align:center;max-width:560px;margin:0 auto 20px}
.hm-mini-slide .hm-mini-slide-kicker{display:block;color:#a05a1f;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.hm-mini-slide h2{font-size:1.2rem;margin:0 0 6px}
.hm-mini-slide .hm-mini-slide-sub{color:#5b6b82;font-size:.82rem;margin:0}

.hm-mini-slide .slide-rule-lab{max-width:520px;margin:18px auto 0}
.hm-mini-slide .slide-rule-controls{display:grid;grid-template-columns:86px minmax(120px,1fr);gap:8px 14px;max-width:520px;margin:0 auto 16px;font-size:.76rem}
.hm-mini-slide .slide-rule-controls label{font-weight:800}
.hm-mini-slide .slide-rule-controls output{float:right;color:#245cff}
.hm-mini-slide .slide-rule-controls input{width:100%;accent-color:#245cff}

.hm-mini-slide .slide-rule-shell{position:relative;background:linear-gradient(#d8a653,#bd7925);border:3px solid #835018;border-radius:8px;padding:9px 14px 14px;box-shadow:inset 0 1px 0 #f4cb79,0 8px 16px rgba(78,48,15,.18);overflow:hidden}
.hm-mini-slide .slide-rule-brand{display:flex;justify-content:space-between;color:#56320d;font-size:.5rem;letter-spacing:.1em;margin:0 4px 6px}
.hm-mini-slide .slide-window{position:relative;height:78px;background:#f3e5c7;border:2px solid #714415;box-shadow:inset 0 2px 6px rgba(77,46,15,.2);overflow:hidden}
.hm-mini-slide .slide-scale{position:absolute;left:20px;right:20px;height:31px;background:linear-gradient(#fffaf0,#e8d7b6);border:1px solid #8a6538;overflow:visible}
.hm-mini-slide .slide-scale-a{top:7px}
.hm-mini-slide .slide-scale-b{bottom:7px;transition:transform .25s ease}
.hm-mini-slide .scale-letter{position:absolute;left:-14px;top:9px;font-family:Georgia,serif;font-weight:900;font-size:.72rem;color:#3b2b18}
.hm-mini-slide .scale-track{position:absolute;inset:0}
.hm-mini-slide .scale-tick{position:absolute;top:0;height:8px;border-left:1px solid #4e3c27}
.hm-mini-slide .scale-tick.major{height:15px;border-left-width:1px}
.hm-mini-slide .scale-tick.mid{height:11px}
.hm-mini-slide .scale-tick em{position:absolute;top:16px;left:-4px;font:700 6px Georgia,serif;color:#3e2e1c;font-style:normal}
.hm-mini-slide .slide-cursor{position:absolute;top:1px;bottom:1px;width:9px;transform:translateX(-4.5px);border:1px solid rgba(177,26,26,.65);background:rgba(255,255,255,.22);box-shadow:0 0 0 1px rgba(255,255,255,.65);pointer-events:none;transition:left .25s ease}
.hm-mini-slide .slide-cursor span{position:absolute;left:3.5px;top:0;bottom:0;border-left:1px solid #c21f27}

.hm-mini-slide .slide-rule-answer{max-width:520px;margin:14px auto 0;text-align:center}
.hm-mini-slide .slide-rule-answer span:first-child{display:block;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#5b6b82;margin-bottom:2px}
.hm-mini-slide .slide-rule-answer strong{font-size:1.1rem;color:#10213f}
.hm-mini-slide .slide-rule-answer p{margin:4px 0 0;font-size:.72rem;color:#5b6b82}

.hm-mini-slide .hm-mini-slide-more{display:block;text-align:center;margin-top:16px;font-size:.82rem;font-weight:700}

@media(prefers-reduced-motion:reduce){.hm-mini-slide .slide-scale-b,.hm-mini-slide .slide-cursor{transition:none}}

@media(max-width:600px){
  .hm-mini-slide .slide-rule-controls{grid-template-columns:1fr;gap:4px}
  .hm-mini-slide .slide-rule-controls input{margin-bottom:8px}
  .hm-mini-slide .slide-rule-brand span{display:none}
  .hm-mini-slide .slide-rule-brand{justify-content:flex-end}
}