/* Att göra → Mål. Stapeln med idag-strecket, ringar, delmål och formuläret.
   Färger: Energi = framsteg och klart, varning/kritisk när man ligger efter. Status står alltid också i text med symbol. */
.mal-ring{flex:none;transform:rotate(-90deg)}
.mal-ring circle{fill:none;stroke-width:3}
.mal-ring .bg{stroke:var(--grid)}
.mal-ring .fg{stroke:var(--energi);stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1)}
.mal-ring.stor circle{stroke-width:6}
.mal-n{font-size:11px}
.mal-n.s-efter,.mal-n.s-passerat{color:var(--crit)}
.mal-n.s-lite_efter{color:var(--warn)}
.mal-n.s-klart{color:var(--good)}
.mal-nav span{font-size:13px}

.mal-bar{position:relative;height:10px;border-radius:99px;background:var(--grid);overflow:visible}
.mal-bar.stor{height:16px}
.mal-bar .fill{height:100%;border-radius:99px;background:var(--energi);transition:width .8s cubic-bezier(.2,.8,.2,1);min-width:0}
.mal-bar.s-lite_efter .fill{background:var(--warn)}
.mal-bar.s-efter .fill,.mal-bar.s-passerat .fill{background:var(--crit)}
.mal-bar .pace{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--heading);border-radius:2px}
.mal-bar.stor .pace{top:-6px;bottom:-6px;width:3px;margin-left:-1.5px}
.mal-bar .pace span{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;font-size:10.5px;font-weight:700;color:var(--heading);white-space:nowrap;letter-spacing:.03em}
.mal-status{font-size:11.5px}

.mal-lista{display:flex;flex-direction:column;gap:10px}
.mal-rad{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--fg);transition:border-color .15s,box-shadow .15s}
.mal-rad:hover{border-color:var(--sky);box-shadow:var(--shadow)}
.mal-rad:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mal-rad-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mal-rad-t{font-weight:700;color:var(--heading);font-size:14.5px}
.mal-rad-m{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.mal-rad-m b{color:var(--heading)}

.mal-d{display:flex;flex-direction:column;gap:14px}
.mal-d-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.mal-d-h h2{font-size:22px;margin-top:2px}
.mal-d-h p{max-width:60ch;margin-top:4px}
.mal-d-kort{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px 18px;display:flex;flex-direction:column;gap:18px}
.mal-d-kort.klart{border-color:var(--energi);box-shadow:inset 0 3px 0 var(--energi)}
.mal-d-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mal-d-siffra{display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--muted)}
.mal-d-siffra b{color:var(--heading)}
.mal-d-pct{font-size:30px;font-weight:800;color:var(--heading);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.mal-d-st{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.mal-d-fot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.mal-tempo{font-size:13.5px;color:var(--fg);font-weight:500}
.mal-plusminus{display:inline-flex;gap:6px}
.mal-auto{font-size:12.5px;color:var(--heading);display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:var(--surface-2);border-radius:8px;padding:8px 10px;margin:0}
.mal-auto svg{color:var(--sky);flex:none}

.mal-delmal{display:flex;flex-direction:column;gap:10px}
.mal-dm{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s}
.mal-dm.klart{border-color:color-mix(in srgb,var(--energi) 55%,var(--line))}
.mal-dm.klart .mal-dm-t b{color:var(--good)}
.mal-dm-h{display:flex;align-items:center;gap:12px}
.mal-dm-h .ag-check[disabled]{cursor:default;opacity:.85}
.mal-dm-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.mal-dm-t b{color:var(--heading);font-size:14px}
.mal-dm-v{display:flex;align-items:center;gap:6px}
.mal-dm-v .x{font-size:17px;opacity:.55}
.mal-dm-v .x:hover{opacity:1}
.x.farlig-x{width:auto;padding:0 8px;font-size:12px;font-weight:700;color:var(--crit);opacity:1}
.mal-upp{border-radius:10px}
.mal-nyupp,.mal-nydm{display:flex;align-items:center;gap:8px;border:1px dashed var(--line);border-radius:10px;padding:4px 6px 4px 10px;background:var(--surface-2)}
.mal-nyupp:focus-within,.mal-nydm:focus-within{border-style:solid;border-color:var(--sky);background:var(--surface)}
.mal-nyupp input,.mal-nydm input[name=t]{flex:1;min-width:0;border:0;background:transparent;padding:7px 0;font-size:13.5px;outline:none}
.mal-nydm select,.mal-nydm .mal-mv{padding:5px 8px;font-size:12.5px}
.mal-nydm .mal-mv{width:70px}
.ag-malchip{display:inline-flex;align-items:center;gap:4px;color:var(--good);font-weight:600}
.mal-hjalp{font-size:13px;color:var(--muted)}
.mal-hjalp summary{cursor:pointer;font-weight:600;color:var(--heading)}
.mal-hjalp ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;line-height:1.5}
.mal-hjalp b{color:var(--heading)}

.mal-tom .mal-exempel{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;max-width:440px;margin:6px 0}
.mal-tom .mal-exempel b{color:var(--heading)}

/* formuläret */
.mal-form .drawer-b{gap:14px}
.mf-l{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}
.mf-l input:not([type=radio]):not([type=checkbox]),.mf-l select,.mf-l textarea{border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:8px 10px;font-size:13.5px;color:var(--fg);font-weight:400}
.mf-l .muted{font-weight:400}
.mf-rad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mf-val{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mf-kort{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 12px 12px 36px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-weight:400;background:var(--surface)}
.mf-kort input{position:absolute;left:12px;top:14px;accent-color:var(--sky)}
.mf-kort b{color:var(--heading);font-size:13.5px}
.mf-kort span{font-size:12px;color:var(--muted);line-height:1.4}
.mf-kort:has(input:checked){border-color:var(--sky);box-shadow:inset 0 0 0 1px var(--sky)}
.mf-kort:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.mf-antal{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:10px;background:var(--surface-2)}
.mf-antal[hidden]{display:none}
.mf-spar{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px}
.mf-spar[hidden]{display:none}
.mf-spar legend{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
.mf-spar label{display:flex;align-items:center;gap:5px}
.mf-snabb{margin-top:-6px}
.mf-dm{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto 28px;gap:6px;align-items:center;margin-bottom:6px}
.mf-dm input,.mf-dm select{border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:7px 8px;font-size:13px;color:var(--fg);min-width:0}
.mf-dm [name=dm_mv]{width:70px}
.mf-dm [hidden]{display:none}
.mf-fot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap}

/* firande: delmål eller mål nått */
.mal-firar{animation:malFira 1.2s ease}
@keyframes malFira{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--energi) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.mal-konfetti{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;z-index:4}
.mal-konfetti i{position:absolute;top:0;width:6px;height:10px;border-radius:2px;opacity:0;animation:malKonf 1.3s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes malKonf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),-46px) rotate(220deg)}}

@media (max-width:860px){
  .mal-d-kort{padding:16px}
  .mal-d-st{margin-left:0;align-items:flex-start}
  .mf-val,.mf-rad{grid-template-columns:1fr}
  .mf-dm{grid-template-columns:minmax(0,1fr) auto 28px}
  .mf-dm [name=dm_mv],.mf-dm [name=dm_auto]{grid-column:1/-1;width:100%}
  .mal-nydm{flex-wrap:wrap}
}
.mal-n{white-space:nowrap}
.mal-bar.stor + .mal-d-fot{margin-top:14px}
.mal-dm-not{margin:-4px 0 0}
.mf-l > .btn{align-self:flex-start}
.ag-klaraidag + .ag-sek{margin-top:10px}

/* Delmål med datum och detaljer. Milstolparna (◆) ligger på målets stapel där delmålets datum infaller. */
.mal-bar-wrap{position:relative}
.mal-milstolpar{position:absolute;inset:0;pointer-events:none}
.mal-milstolpe{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;transform:rotate(45deg);background:var(--surface);border:2px solid var(--heading);border-radius:2px;pointer-events:auto;cursor:help}
.mal-milstolpe.klart{background:var(--energi);border-color:var(--energi)}
.mal-milstolpe.sen{background:var(--crit);border-color:var(--crit)}
.mal-milstolpe-not{margin:-6px 0 0}
.mal-dm-namn{all:unset;cursor:pointer;color:var(--heading);border-radius:4px}
.mal-dm-namn:hover b{text-decoration:underline}
.mal-dm-namn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mal-dm-info{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:4px}
.mal-dm-datum{font-size:11px}
.mal-dm-besk{font-size:12.5px;color:var(--fg);white-space:pre-wrap;max-width:70ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mal-nydm-d{display:inline-flex;align-items:center;gap:6px}
.mal-rad-nasta{font-size:12px;color:var(--muted)}
.mal-rad-nasta b{color:var(--heading)}
.mal-rad-nasta.s-sen{color:var(--crit)}
.dmf-besk{min-height:130px}

/* anteckningar på mål och delmål */
.mal-ant-yta{display:flex;flex-direction:column;gap:10px}
.mal-ant-ny{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mal-ant-ny textarea,.mal-ant-t textarea{width:100%;min-height:56px;resize:vertical}
.mal-ant-lista{display:flex;flex-direction:column;gap:8px}
.mal-ant{border:1px solid var(--line);border-left:3px solid var(--sky);border-radius:8px;padding:8px 10px;background:var(--surface)}
.mal-ant-h{display:flex;align-items:center;gap:4px}
.mal-ant-h .x{font-size:13px}
.mal-ant-t{white-space:pre-wrap;font-size:13.5px;color:var(--fg);font-weight:400;margin-top:2px;overflow-wrap:anywhere}
.mal-ant-t .row{margin-top:6px;gap:6px}
.mal-ant-tom{margin:0}
.mal-dm-antn{font-size:12px}

/* Kommande: milstolpar i tidslinjen */
.ag-milstolpe{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 12px;border:1px dashed var(--line);border-radius:10px;text-decoration:none;color:var(--fg);font-size:13px;background:color-mix(in srgb,var(--energi) 6%,var(--surface))}
.ag-milstolpe:hover{border-color:var(--sky)}
.ag-milstolpe b{color:var(--heading);font-weight:600}
.ag-ms-ikon{color:var(--energi);font-size:14px}

/* detaljvyn i två kolumner: målet till vänster, bergsgeten till höger */
.mal-d-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:18px;align-items:start}
.mal-d-v{display:flex;flex-direction:column;gap:14px;min-width:0}
.mal-berg-kol{position:sticky;top:12px}
@media (max-width:980px){.mal-d-grid{grid-template-columns:minmax(0,1fr)}.mal-berg-kol{position:static;order:-1}.mal-berg svg{max-height:260px}}

/* delmål: sortering och dra och släpp */
.mal-dm-sek{align-items:center;flex-wrap:wrap}
.mal-dm-sort button{padding:5px 12px;font-size:12px}
.mal-dm-tips{margin:-6px 4px 0}
.mal-dm-grip{all:unset;cursor:grab;touch-action:none;color:var(--muted);font-size:14px;letter-spacing:-3px;padding:6px 6px 6px 2px;margin-left:-6px;border-radius:6px;line-height:1;user-select:none}
.mal-dm-grip:hover{color:var(--heading);background:var(--surface-2)}
.mal-dm-grip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.mal-dm.mal-dm-drar{box-shadow:0 12px 28px rgba(0,30,70,.22);border-color:var(--sky);position:relative;z-index:2;transform:scale(1.01)}
.mal-dm.mal-dm-drar .mal-dm-grip{cursor:grabbing;color:var(--sky)}
.mal-dm-fraga{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);border:1px dashed var(--sky);border-radius:12px;padding:10px 14px;margin-top:-4px}
.mal-dm-fraga b{color:var(--heading);font-size:13.5px}
.mal-dm-fraga .row{gap:8px;flex-wrap:wrap;align-items:center}

/* bergsgeten */
.mal-berg{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.mal-berg svg{display:block;width:100%;height:auto;margin:0 auto}
.mal-berg-t{margin:0;padding:10px 14px 0;font-size:13px}
.mal-berg-t b{color:var(--heading)}
.mal-berg-not{margin:4px 0 0;padding:0 14px 12px}
.mal-berg .bs1{stop-color:#8FD3F4}.mal-berg .bs2{stop-color:#E9F7FF}
.berg-sol{fill:#FFD76A}
.berg-moln{fill:#fff;opacity:.85}
.berg-bak{fill:#B9D3E4}
.berg-fram{fill:#7D93A8}
.berg-skuggsida{fill:#000;opacity:.13}
.berg-sno{fill:#F7FBFF}
.berg-gras{fill:#7CC08A}
.berg-gran{fill:#2F7D55}
.berg-stig{fill:none;stroke:#EADFC8;stroke-width:3.2;stroke-dasharray:5 5;stroke-linecap:round;stroke-linejoin:round}
.berg-stig-gjord{fill:none;stroke:var(--energi);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.berg-stang{stroke:#4A5563;stroke-width:1.6}
.berg-duk{fill:#C9D2DE;stroke:#8A94A3;stroke-width:.8}
.berg-flagga text{font:800 8.5px Inter,Arial,sans-serif;fill:#3A4252}
.berg-flagga.klar .berg-duk{fill:var(--energi);stroke:#00897F}.berg-flagga.klar text{fill:#fff}
.berg-flagga.sen .berg-duk{fill:#F6C1C1;stroke:var(--crit)}
.berg-toppduk{fill:#D40F7D}
.mal-berg.klart .berg-toppduk{fill:#FFC93C}
.berg-idag circle{fill:none;stroke:var(--heading);stroke-width:1.6;stroke-dasharray:3 2.5}
.berg-idag text{font:700 9px Inter,Arial,sans-serif;fill:var(--heading)}
.berg-skugga{fill:rgba(0,0,0,.2)}
.berg-ben{stroke:#5A4A3A;stroke-width:2.3;stroke-linecap:round;fill:none}
.berg-svans,.berg-ora{stroke:#8C7B66;stroke-width:2;stroke-linecap:round;fill:none}
.berg-kropp{fill:#FBF7EF;stroke:#8C7B66;stroke-width:1.2;stroke-linejoin:round}
.berg-horn{stroke:#6B5844;stroke-width:2.2;stroke-linecap:round;fill:none}
.berg-oga{fill:#1E1E1E}
.berg-skagg{stroke:#8C7B66;stroke-width:1.8;stroke-linecap:round;fill:none}
.berg-glitter path{fill:#FFE27A;animation:berg-blink 1.6s ease-in-out infinite}
@keyframes berg-blink{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes berg-gungar{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes berg-hopp{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}}
.berg-get.klattrar{animation:berg-gungar 1.4s ease-in-out infinite}
.berg-get.jublar{animation:berg-hopp 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.berg-get,.berg-glitter path{animation:none!important}}
:root[data-theme="dark"] .mal-berg .bs1{stop-color:#0B1A3A}:root[data-theme="dark"] .mal-berg .bs2{stop-color:#2A4A78}
:root[data-theme="dark"] .berg-sol{fill:#E8EEF7}:root[data-theme="dark"] .berg-moln{opacity:.25}
:root[data-theme="dark"] .berg-bak{fill:#1F3554}:root[data-theme="dark"] .berg-fram{fill:#3F5670}
:root[data-theme="dark"] .berg-gras{fill:#2E5E45}:root[data-theme="dark"] .berg-gran{fill:#1C4A33}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="mellan"]) .mal-berg .bs1{stop-color:#0B1A3A}:root:not([data-theme="light"]):not([data-theme="mellan"]) .mal-berg .bs2{stop-color:#2A4A78}
  :root:not([data-theme="light"]):not([data-theme="mellan"]) .berg-sol{fill:#E8EEF7}:root:not([data-theme="light"]):not([data-theme="mellan"]) .berg-moln{opacity:.25}
  :root:not([data-theme="light"]):not([data-theme="mellan"]) .berg-bak{fill:#1F3554}:root:not([data-theme="light"]):not([data-theme="mellan"]) .berg-fram{fill:#3F5670}
  :root:not([data-theme="light"]):not([data-theme="mellan"]) .berg-gras{fill:#2E5E45}:root:not([data-theme="light"]):not([data-theme="mellan"]) .berg-gran{fill:#1C4A33}}