:root {
  --paper: #EDF0F3;
  --surface: #FFFFFF;
  --sunk: #E3E8ED;
  --ink: #1D2733;
  --muted: #5F6B78;
  --line: #D3DAE1;
  --teal: #2B7A69;
  --brass: #B9831A;
  --red: #B4433A;
  --blue: #3A5A9E;
  --violet: #6D4FA8;
  --pad-off: #DCE2E8;
  --focus: #3A5A9E;
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-lg: 14px;
  --r-sm: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10161D; --surface: #18212B; --sunk: #141B23; --ink: #E4E9EF; --muted: #93A1AF; --line: #2A3540;
    --teal: #4DB39B; --brass: #E0AC3E; --red: #E2685C; --blue: #7D9BE2; --violet: #A88BE6; --pad-off: #222D38; --focus: #7D9BE2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #10161D; --surface: #18212B; --sunk: #141B23; --ink: #E4E9EF; --muted: #93A1AF; --line: #2A3540;
  --teal: #4DB39B; --brass: #E0AC3E; --red: #E2685C; --blue: #7D9BE2; --violet: #A88BE6; --pad-off: #222D38; --focus: #7D9BE2;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -0.01em; margin: 0; line-height: 1.15; }
h1 { font-size: 30px; font-weight: 750; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.err { color: var(--red); font-size: 14px; }

/* ───── Shell ───── */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 14px; border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 0 8px; font-family: var(--display); font-weight: 750; font-size: 18px; }
.brand svg { width: 26px; height: 26px; }
.brand .p0 { fill: var(--pad-off); } .brand .p1 { fill: var(--brass); } .brand .p2 { fill: var(--teal); } .brand .p3 { fill: var(--blue); }
#nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--muted); font-weight: 500;
}
#nav a .dot { width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--muted)); flex: none; }
#nav a:hover { color: var(--ink); background: var(--sunk); }
#nav a[aria-current="page"] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.rail-foot { margin-top: auto; color: var(--muted); text-decoration: none; padding: 8px 10px; font-size: 14px; }
.rail-foot:hover { color: var(--ink); }

.view { padding: 30px clamp(16px, 4vw, 48px) 80px; max-width: 1240px; width: 100%; outline: none; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head .sub { color: var(--muted); margin-top: 4px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ───── Flader ───── */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; min-width: 0; }
.panel > h2, .panel > .panel-head { margin-bottom: 12px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.panel-head a { font-size: 14px; color: var(--muted); }
.panel.flat { background: transparent; border-style: dashed; }
.section { margin-top: 28px; }
.section > h2 { margin-bottom: 12px; }

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-family: var(--display); font-size: 26px; font-weight: 650; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 13px; }
.stats { display: flex; gap: 28px; flex-wrap: wrap; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; padding-top: 2px; }
.list .grow { flex: 1; min-width: 0; }
.list .when { width: 64px; flex: none; color: var(--muted); font-size: 13px; line-height: 1.35; padding-top: 1px; }
.list .when b { display: block; white-space: nowrap; color: var(--ink); font-size: 15px; font-weight: 600; }
.list .amt { flex: none; text-align: right; font-weight: 600; }
.list .title { font-weight: 500; overflow-wrap: anywhere; }
.list .meta { color: var(--muted); font-size: 13px; }
.empty { color: var(--muted); padding: 6px 0; }

.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--sunk); color: var(--muted); white-space: nowrap; }
.chip.ok { background: color-mix(in srgb, var(--teal) 16%, transparent); color: var(--teal); }
.chip.warn { background: color-mix(in srgb, var(--brass) 18%, transparent); color: var(--brass); }
.chip.bad { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.chip.info { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm);
  padding: 7px 13px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.small { padding: 4px 9px; font-size: 13px; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; }

input[type=text], input[type=number], input[type=date], input[type=password], input[type=url], select, textarea {
  width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px;
}
.form { display: grid; gap: 10px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }

.check {
  width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid var(--muted);
  background: transparent; cursor: pointer; padding: 0; margin-top: 1px;
}
.check:hover { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, transparent); }
.check.done { background: var(--teal); border-color: var(--teal); }

.skeleton { color: var(--muted); }
.note { font-size: 13px; color: var(--muted); }
.callout { border-left: 3px solid var(--brass); padding: 10px 14px; background: color-mix(in srgb, var(--brass) 8%, var(--surface)); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ───── Ugens sequencer (forsiden) ───── */
.seq { display: grid; grid-template-columns: 96px repeat(7, minmax(0, 1fr)); gap: 8px 8px; align-items: center; }
.seq .colhead { text-align: center; font-size: 13px; color: var(--muted); padding-bottom: 2px; }
.seq .colhead b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink); font-weight: 650; }
.seq .colhead.today b { color: var(--paper); background: var(--ink); border-radius: 7px; width: fit-content; min-width: 30px; padding: 0 6px; margin: 0 auto; }
.seq .rowhead { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; text-decoration: none; }
.seq .rowhead i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.pad {
  height: 46px; border-radius: 10px; background: var(--pad-off); border: 0; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  font-size: 12px; font-weight: 600; color: transparent; position: relative; overflow: hidden;
}
.pad.on { background: var(--c); color: #fff; }
.pad.half { background: color-mix(in srgb, var(--c) 35%, var(--pad-off)); color: var(--ink); }
.pad.future.on { background: transparent; box-shadow: inset 0 0 0 2px var(--c); color: var(--c); }
.pad.today { outline: 2px solid var(--ink); outline-offset: 2px; }
.pad span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seq-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.seq-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; background: var(--muted); }
.seq-legend .f { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.seq-legend .h { opacity: .4; }
@media (prefers-reduced-motion: no-preference) {
  .seq.boot .pad.on { animation: hit .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 28ms); }
  @keyframes hit { 0% { transform: scale(.82); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
}

/* ───── Workouts ───── */
.wo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.wo { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.wo h3 { font-size: 17px; }
.wo .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }

/* ───── Afspiller ───── */
.player {
  position: fixed; inset: 0; z-index: 50; background: var(--paper);
  display: flex; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.pl { width: 100%; max-width: 520px; display: flex; flex-direction: column; }
.pl header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pl .bar { height: 4px; background: var(--pad-off); border-radius: 2px; margin-top: 12px; overflow: hidden; }
.pl .bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .25s linear; }
.pl .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 0; }
.pl .phase { font-weight: 600; color: var(--c); }
.pl .name { font-family: var(--display); font-weight: 750; font-size: clamp(30px, 8vw, 44px); line-height: 1.05; margin: 4px 0 6px; }
.pl .cue { color: var(--muted); max-width: 34ch; min-height: 2.8em; }
.pl .ring { position: relative; width: min(64vw, 270px); aspect-ratio: 1; margin: 16px 0 10px; }
.pl .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pl .ring circle { fill: none; stroke-width: 10; }
.pl .ring .bg { stroke: var(--pad-off); }
.pl .ring .fg { stroke: var(--c); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.pl .count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 750; font-size: clamp(56px, 18vw, 84px); color: var(--c); }
.pl .next { color: var(--muted); min-height: 1.5em; }
.pl .ctrl { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; }
.pl .ctrl .side { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font-size: 17px; }
.pl .ctrl .main { height: 62px; min-width: 150px; border-radius: 31px; border: 0; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 17px; cursor: pointer; }
.pl .foot { display: flex; justify-content: space-between; margin-top: 14px; color: var(--muted); font-size: 13px; }
.pl .done-box { display: grid; gap: 10px; justify-items: center; }

/* ───── Login + toast ───── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(360px, 100%); display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.login-card h1 { margin-bottom: 8px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; font-weight: 500; transition: .2s; z-index: 60; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.has-action { pointer-events: auto; }
.toast-btn { background: none; border: 0; color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; margin-left: 8px; padding: 0; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.mn-del { margin-left: auto; }
.lt-del { flex: none; }

/* ───── Mobil ───── */
@media (max-width: 900px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 20;
    flex-direction: row; padding: 6px 6px max(6px, env(safe-area-inset-bottom)); gap: 0;
    border-right: 0; border-top: 1px solid var(--line); background: var(--surface);
  }
  .brand, .rail-foot { display: none; }
  #nav { flex-direction: row; width: 100%; justify-content: space-between; overflow-x: auto; }
  #nav li { flex: 1; min-width: 0; }
  #nav a { flex-direction: column; gap: 4px; font-size: 10.5px; padding: 6px 1px; white-space: nowrap; letter-spacing: -0.01em; }
  #nav a[aria-current="page"] { box-shadow: none; background: var(--sunk); }
  .view { padding: 20px 16px 110px; }
  h1 { font-size: 25px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .seq { grid-template-columns: 30px repeat(7, minmax(0, 1fr)); gap: 6px 5px; }
  .seq .rowhead span { display: none; }
  .seq .rowhead { justify-content: center; }
  .pad { height: 38px; font-size: 0; }
  .stats { gap: 18px; }
  .list .when { width: 58px; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .pl .bar i, .pl .ring .fg, .toast { transition: none; }
}

.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ───── Musiknoter ───── */
.pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pills.sub { padding-left: 12px; border-left: 2px solid var(--line); }
.pill { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 4px 11px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--muted); }
.pill span { opacity: .65; margin-left: 2px; }
.pill:hover { color: var(--ink); }
.pill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mn-search { max-width: 260px; }
.mn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; align-items: start; }
.mn { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.mn.tried { opacity: .7; }
.mn-thumb { display: block; position: relative; width: 100%; border: 0; padding: 0; background: var(--sunk); cursor: pointer; overflow: hidden; }
.mn-thumb.yt, .mn-thumb.video { aspect-ratio: 16 / 9; }
.mn-thumb.ig { aspect-ratio: 4 / 5; max-height: 300px; background: linear-gradient(135deg, var(--violet), var(--brass)); }
.mn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.mn-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.mn-badge { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mn-title { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.mn-title:hover { text-decoration: underline; }
.mn-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.mn-actions { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.week-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wd { display: grid; gap: 6px; justify-items: center; font-size: 12px; color: var(--muted); }
.wd b { font-weight: 600; }
.wd i { width: 100%; height: 34px; border-radius: 9px; background: var(--pad-off); }
.wd.on i { background: var(--blue); }
.wd.today i { outline: 2px solid var(--ink); outline-offset: 2px; }

.latest { padding: 6px 18px; }
.latest > li { align-items: center; }
.lt-thumb { width: 64px; height: 64px; flex: none; border-radius: 10px; overflow: hidden; position: relative; background: var(--sunk); display: block; text-decoration: none; }
.lt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.lt-thumb span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.lt-cat { flex: none; width: 230px; }
@media (max-width: 760px) {
  .latest > li { flex-wrap: wrap; }
  .lt-cat { width: 100%; }
}

.latest-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

/* ───── Min dag ───── */
.brief-head { font-size: 22px; line-height: 1.25; max-width: 40ch; margin: 4px 0 12px; }
.acts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.acts li { display: grid; gap: 4px; border-top: 2px solid var(--line); padding-top: 8px; }
.acts b { font-family: var(--display); font-weight: 650; }
.acts span { color: var(--muted); font-size: 14px; }
.allday { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.allday .chip i { width: 7px; height: 7px; border-radius: 2px; background: var(--cc); }
.plan > li { align-items: center; }
.plan .when { width: 92px; }
.plan .dotc { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.plan li.past { opacity: .5; }
.plan li.nowline { padding: 2px 0; border-top: 0; }
.plan li.nowline span { font-size: 12px; font-weight: 600; color: var(--red); display: flex; align-items: center; gap: 8px; width: 100%; }
.plan li.nowline span::after { content: ""; flex: 1; height: 2px; background: var(--red); border-radius: 1px; }
.plan li.nowline + li { border-top: 0; }
.wk-table { display: grid; gap: 0; font-size: 14px; }
.wk-row { display: grid; grid-template-columns: 1.3fr repeat(5, 1fr); padding: 7px 0; border-top: 1px solid var(--line); }
.wk-row.head { color: var(--muted); font-size: 12px; border-top: 0; padding-top: 0; }
.wk-row span:not(:first-child) { text-align: right; }
.j-form { gap: 14px; }
.j-form textarea { resize: vertical; min-height: 58px; font: inherit; }
.j-scales { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.j-scale { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.j-scale > div { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.j-scale button { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 6px 0; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); }
.j-scale button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.j-habits { display: grid; gap: 8px; }
.j-habits .pills { margin: 4px 0 0; }
@media (max-width: 760px) {
  .acts { grid-template-columns: 1fr; }
  .j-scales { grid-template-columns: 1fr; }
  .wk-row { grid-template-columns: 1.2fr repeat(4, 1fr); }
  .wk-row span:last-child { display: none; }
  .plan .when { width: 88px; }
  .plan .when b { font-size: 13.5px; }
  .wk-row span:first-child { white-space: nowrap; }
}

.j-text { width: 100%; min-height: 180px; resize: vertical; font: inherit; line-height: 1.6; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); }