/* ============================================================
   Pace Calculator — all styling
   ============================================================ */

/* ---------- Variabler & bas ---------- */
:root{
  --paper:#F4F0E6; --paper2:#FBF8EF;
  --ink:#1B1712; --dim:#5F594B;
  --line:#D9D2BE;
  --accent:#C43A0F; --accent-hi:#FF7A4A;
  --board:#201B14; --board-ink:#F4EFE2; --board-dim:#A89F8A; --board-line:rgba(244,239,226,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
body{background:var(--paper);color:var(--ink);font:500 16px/1.55 'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
input{border-radius:0;max-width:100%}
.mono{font-family:'IBM Plex Mono',monospace}
.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-48px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;font-weight:700;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

/* ---------- Gemensam container: alla block delar samma vänsterkant ---------- */
.wrap{max-width:1100px;margin:0 auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}

/* ---------- Hero ---------- */
.hero{padding:20px 0 4px}
.hero h1{font-weight:900;font-size:clamp(34px,7.5vw,72px);line-height:.95;text-transform:uppercase;letter-spacing:-.03em}
.hero h1 span{color:var(--accent)}
.hero-intro{margin-top:14px;max-width:56ch;font-size:15.5px}
.hero-intro strong{font-weight:800}

/* ---------- Sektioner ---------- */
.section{margin:30px 0}
.sec-head{border-top:1.5px solid var(--ink);padding-top:12px;margin-bottom:18px}
.sec-head h2{font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.02em}

.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:0;border:1.5px solid var(--ink);background:var(--paper2)}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(18px,3vw,36px);align-items:start}

/* ---------- Formulär ---------- */
.calc-form{padding:clamp(18px,3vw,30px);min-width:0}
.field{border:0;margin:0 0 20px;min-width:0}
.field-label,.field legend{display:block;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;padding:0}
.field .serif{text-transform:none;letter-spacing:0;font-weight:400}

.segmented{display:inline-flex;flex-wrap:wrap}
.seg-btn{padding:11px 16px;min-height:44px;border:1px solid var(--ink);background:transparent;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.seg-btn+.seg-btn{border-left:0}
.seg-btn:hover{background:rgba(27,23,18,.07)}
.seg-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
#modeGroup{display:flex;width:100%;max-width:440px}
#modeGroup .seg-btn{flex:1 1 auto}
.unit-btn{font:500 13px 'IBM Plex Mono',monospace;padding:12px 14px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip{padding:9px 13px;min-height:44px;border:1px solid var(--ink);background:transparent;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.chip:hover{background:rgba(27,23,18,.07)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

.dist-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.num-input{font:500 20px/1 'IBM Plex Mono',monospace;color:var(--ink);padding:12px 10px;border:1.5px solid var(--ink);background:#FFFEF8;width:100%;min-width:0}
.num-input.small{width:66px;text-align:center;flex:0 0 auto}
.num-input.grow{flex:1 1 120px;width:auto}
.colon{font:500 20px 'IBM Plex Mono',monospace;color:var(--dim);align-self:center}
.time-row{display:flex;align-items:center;gap:6px;min-width:0}
.time-row .num-input.small{flex:1 1 0;width:auto;max-width:84px;min-width:34px}
.micro-hint{margin-top:6px;font:400 12.5px 'IBM Plex Mono',monospace;color:var(--dim)}
.calc-hint{font-size:15.5px;color:var(--accent);min-height:1.4em}

/* ---------- Resultatpanel ---------- */
.result-panel{background:var(--board);color:var(--board-ink);padding:clamp(18px,3vw,30px);display:flex;flex-direction:column;min-width:0;container-type:inline-size}
.result-panel.is-empty .panel-main,.result-panel.is-empty .panel-rows dd{opacity:.35}
.panel-label{display:flex;align-items:center;gap:10px;font:600 11px 'IBM Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--board-dim)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-hi);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.panel-main{display:flex;align-items:baseline;gap:12px;margin:18px 0 16px;font:500 clamp(40px,16cqi,72px)/1 'IBM Plex Mono',monospace;letter-spacing:-.02em;font-variant-numeric:tabular-nums;flex-wrap:wrap;min-width:0}
.panel-unit{font:400 15px 'IBM Plex Mono',monospace;color:var(--board-dim)}
.panel-rows div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--board-line);flex-wrap:wrap}
.panel-rows dt{font:600 10.5px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--board-dim)}
.panel-rows dd{font:500 14.5px 'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.panel-rows .is-hot dd{color:var(--accent-hi);font-weight:600}
.result-panel.flash{animation:flashK .7s ease}
@keyframes flashK{from{box-shadow:inset 0 0 0 3px var(--accent-hi)}to{box-shadow:inset 0 0 0 0 transparent}}
@media (min-width:921px){.result-panel{position:sticky;top:24px}}

/* ---------- Splits & fakta ---------- */
.two-col p{font-size:14.5px;color:var(--dim)}
.two-col p+p{margin-top:12px}
.facts div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.facts dt{font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.facts dd{font:500 13.5px 'IBM Plex Mono',monospace;text-align:right}

.table-wrap{max-height:430px;overflow:auto;border:1px solid var(--line);background:var(--paper2);-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse}
.tbl th{position:sticky;top:0;background:var(--paper2);font:700 10.5px 'Archivo';letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:left;padding:10px 12px;border-bottom:1.5px solid var(--ink)}
.tbl td{font:500 13.5px 'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;padding:9px 12px;border-bottom:1px solid var(--line)}
.tbl th:nth-child(2),.tbl td:nth-child(2),.tbl th:nth-child(3),.tbl td:nth-child(3){text-align:right}
.empty-note{font-size:17px;color:var(--dim);padding:14px 2px}

/* ---------- Prognoser ---------- */
.pred-row{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);text-align:left;padding:0}
.pred-row:hover{background:rgba(27,23,18,.05)}
.pred-inner{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) minmax(64px,86px);gap:clamp(8px,2vw,16px);align-items:center;width:100%;padding:12px 8px}
.pred-name{font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;overflow-wrap:anywhere}
.tag{background:var(--accent);color:#fff;font:600 9.5px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;margin-left:6px;white-space:nowrap}
.pred-bar{display:block;height:12px;background:rgba(27,23,18,.08)}
.pred-fill{display:block;height:100%;background:var(--ink)}
.pred-row.is-base .pred-fill{background:var(--accent)}
.pred-time{font:500 15px 'IBM Plex Mono',monospace;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Tooltip (Riegel-formeln) ---------- */
.tip{position:relative;border-bottom:2px dotted var(--accent);cursor:help;color:var(--ink)}
.tip-box{
  position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;width:min(280px,74vw);
  background:var(--ink);color:var(--paper);font-size:13px;line-height:1.5;font-style:normal;
  padding:10px 12px;box-shadow:0 4px 14px rgba(0,0,0,.2);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease;
}
.tip-box .mono{font-size:12.5px;color:var(--accent-hi)}
.tip:hover .tip-box,.tip:focus .tip-box,.tip:focus-within .tip-box{opacity:1;visibility:visible;transform:none}

/* ---------- Reducerad rörelse ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}