/* clock-v2.css — dygnshjulets egen layout. Rör inte styles.css. */
.cv-wrap{display:flex;flex-direction:column;max-width:var(--gcol);margin:0 auto}
.cv-lbl{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.cv-now{margin-bottom:12px;border:1px solid rgba(255,77,109,.25);border-radius:16px;padding:10px 11px;background:rgba(255,77,109,.04)}
.cv-now-hd{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap}
.cv-badge{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.15em;background:rgba(255,77,109,.2);color:#FF8FA3}
.cv-badge.sel{background:rgba(79,140,255,.15);color:#9CC6FF;letter-spacing:.1em}
.cv-badge.now{background:rgba(255,77,109,.15);color:#FF8FA3}
.cv-now-t{font-size:11px;font-weight:600;color:var(--ink-2)}
.cv-now-sub{font-size:10px;color:var(--ink-3)}
.cv-cards,.cv-grid{display:grid;gap:6px}
.cv-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.cv-card{border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.28);padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cv-v{display:flex;align-items:baseline;gap:5px;min-width:0}
.cv-v b{font-size:20px;font-weight:700;line-height:1;color:var(--ink)}
.cv-v span{font-size:9px;color:var(--ink-3);white-space:nowrap}
.cv-diff{font-size:11px;font-weight:700;font-family:'Geist Mono',ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-diff.none{color:var(--ink-3);font-weight:500}
/* Fristående sida: fäster mot viewport-toppen. I appen ligger vyn i ett
   .coll-wrap-kort under en sticky topbar (60 px, z-index 10) — se överstyrningen
   längst ned i filen. */
.cv-sticky{position:sticky;top:0;z-index:30;border-bottom:2px solid rgba(79,140,255,.3);background:rgba(10,15,26,.97);backdrop-filter:blur(8px);padding:8px 0 7px}
.cv-selrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;flex-wrap:wrap}
.cv-selnav{display:flex;align-items:center;gap:6px}
.cv-selnav button{border:1px solid var(--line);border-radius:7px;background:rgba(0,0,0,.3);color:var(--ink-2);font:inherit;font-size:14px;line-height:1;padding:3px 8px;cursor:pointer}
.cv-selnav button:hover{color:var(--ink);border-color:rgba(79,140,255,.4)}
.cv-selq{font-size:15px;font-weight:700;color:var(--ink)}
.cv-selmode{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;min-width:0}
.cv-dot{width:6px;height:6px;border-radius:50%;flex:none}
.cv-price{color:var(--ink)}
.cv-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.cv-cell{min-width:0;border-radius:9px;background:rgba(0,0,0,.3);padding:5px 4px;text-align:center}
.cv-cell-l{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-cell-v{display:flex;align-items:baseline;justify-content:center;gap:2px}
.cv-cell-v b{font-size:14px;font-weight:700;line-height:1}
.cv-cell-v span{font-size:9px;color:var(--ink-3)}
.cv-cell-s{font-size:9px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-bats{display:grid;gap:6px;margin-top:6px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.cv-bat{min-width:0;border-radius:9px;background:rgba(0,0,0,.3);padding:5px 9px}
.cv-bat-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cv-bat-hd span{font-size:9.5px;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-bat-hd b{font-size:11px;font-weight:700;color:#3FCC8B;flex:none}
.cv-bat-s{font-size:9.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-tabs{display:flex;align-items:center;gap:9px;margin:12px 0 7px}
.cv-seg{display:flex;gap:4px;border:1px solid var(--line);border-radius:999px;padding:4px;background:rgba(0,0,0,.25)}
.cv-seg button{border:0;border-radius:999px;padding:5px 16px;font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);background:transparent;cursor:pointer}
.cv-seg button:hover:not(:disabled){color:var(--ink)}
.cv-seg button.on{background:rgba(255,255,255,.09);color:var(--ink)}
.cv-seg button:disabled{color:var(--ink-3);cursor:default;opacity:.5}
.cv-nowbtn{flex:none;border:1px solid rgba(79,140,255,.4);border-radius:999px;background:rgba(79,140,255,.1);color:#9CC6FF;font:inherit;font-size:12px;font-weight:600;padding:6px 14px;cursor:pointer}
.cv-nowbtn:hover{background:rgba(79,140,255,.2)}
/* Kortet följer hjulets bredd (svg + 2×4 px padding), annars ligger den döda
   zonen kvar i kortet i stället för i svg:n. */
.cv-wheel{width:min(100%,calc(86vh + 8px),728px);margin:0 auto;overflow:hidden;border:1px solid var(--line);border-radius:16px;padding:4px;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  background:radial-gradient(120% 90% at 50% 42%,#131C2E 0%,#0C1220 58%,#080D16 100%)}
.cv-svg{display:block;margin:0 auto;width:min(100%,86vh,720px);aspect-ratio:1/1;height:auto;user-select:none;cursor:pointer;touch-action:pan-y}
.cv-devs{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.cv-devs-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px 2px}
.cv-devs-sub{font-size:10px;color:var(--ink-3)}
.cv-dev{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;background:rgba(0,0,0,.25);
  padding:8px 11px;font:inherit;text-align:left;cursor:pointer;color:var(--ink-2)}
.cv-dev:hover{border-color:rgba(79,140,255,.35)}
.cv-dev.on{border-color:rgba(79,140,255,.55);background:rgba(79,140,255,.07)}
.cv-dev-bar{width:4px;height:22px;border-radius:2px;flex:none}
.cv-dev-n{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink);display:flex;align-items:baseline;gap:7px}
.cv-dev-n i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cv-dev-v{font-size:11px;color:var(--ink-2);flex:none;white-space:nowrap}
@media(max-width:640px){
  .cv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cv-cards{gap:5px}
  .cv-card{padding:7px 8px}
  .cv-v b{font-size:17px}
  .cv-selq{font-size:14px}
  .cv-dev-v{font-size:10px}
}

/* ---- Inuti appens kortskal -------------------------------------------
   Två standalone-antaganden måste bort när vyn ligger i ett kort:
   1. Den klistrade raden fäste på topp 0 med z-index 30 och lade sig över
      appens topbar, som då blev oklickbar. Den fäster nu UNDER topbaren och
      hamnar bakom den i stackningen — båda behövs.
   2. max-width 660 px centrerade innehållet inne i ett 882 px kort, så
      fäll-ihop-knappen (absolut, right:14px) hamnade utanför innehållets kant
      och kolumnbredden bröts mot sidans övriga kort. */
.coll-wrap .cv-sticky{top:60px;z-index:5}
@media(max-width:640px){.coll-wrap .cv-sticky{top:56px}}

/* SoC-subraden bär nu "11,7 av 25,6 kWh" — ett tecken mer än förut, och
   mätningen visade att raden redan låg exakt på sin bredd (97/97). Tabellsiffror
   smalnar av den utan att byta typsnitt. */
.cv-cell-s{font-variant-numeric:tabular-nums;letter-spacing:0}
.cv-fcnote{margin-top:5px;font-size:9.5px;line-height:1.35;color:var(--ink-3)}

/* Vald kvart får aldrig radbrytas: "16:45–17:00" kan brytas vid tankstrecket, och
   på mobil räcker bredden ibland — skillnaden är "= NU"-chippet som dyker upp när
   vald kvart är den pågående. Bröts tiden växte raden och hjulet hoppade under
   dragning. tabular-nums håller bredden konstant mellan olika klockslag. */
.cv-selq{white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.cv-badge{flex:none;white-space:nowrap}

/* Samma tvåradsbrytning som läge Ny (gc.css): under 380 px kolumnbredd flyttar
   läge + pris till egen rad i stället för att lägesnamnet krymper till en
   bokstav. Klassnamnen finns i markupen: .cv-sticky > raden > .cv-selq m.fl. */
.cv-sticky{container-type:inline-size}
@container (max-width: 379px){
  .cv-sticky > div:first-child{flex-wrap:wrap;row-gap:4px}
  .cv-sticky > div:first-child > *:last-child{width:100%;justify-content:flex-start}
}
@supports not (container-type: inline-size){
  @media (max-width: 400px){
    .cv-sticky > div:first-child{flex-wrap:wrap;row-gap:4px}
    .cv-sticky > div:first-child > *:last-child{width:100%;justify-content:flex-start}
  }
}