:root {
  /* Hela appen skalas härifrån. 130 % = allt 30 procent större, och eftersom
     längderna nedan är i rem följer typsnitt, ytor, ikoner och radier med.
     Vill du justera storleken senare räcker det att ändra den här siffran. */
  font-size: 130%;

  color-scheme: light;

  --bg: #ffffff;          /* sidans botten */
  --card: #ffffff;        /* fält, kort och paneler */
  --surface: #f7f7f8;     /* nedsänkta ytor, t.ex. sökfältet */
  --surface-2: #f1f1f3;
  --hover: #fcfcfd;

  --ink: #111113;
  --ink-2: #55565b;
  --ink-3: #8b8d94;
  --on-ink: #ffffff;      /* text ovanpå --ink */
  --on-ink-soft: rgba(255, 255, 255, .7);
  --ink-strong: #000000;  /* hover på primärknappen */

  --line: #e8e8ea;
  --line-2: #d8d9dc;

  --topbar: rgba(255, 255, 255, .88);
  --backdrop: rgba(17, 17, 19, .3);
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --link: #2563eb;

  --tint: 8%;             /* hur mycket labelfärg som lyser igenom i aktiva chips */
  --shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 8px 24px rgba(17, 17, 19, .06);

  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

/* Mörkt läge. Bakgrunden är nästan svart men inte helt – lite blåton gör att
   ytorna går att skilja åt utan att kanterna behöver bli hårda. Texten är
   dämpat vit av samma skäl: ren vit på nästan svart flimrar. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d0d0f;
  --card: #141417;
  --surface: #1a1a1e;
  --surface-2: #212127;
  --hover: #17171b;

  --ink: #f1f1f3;
  --ink-2: #a3a4ab;
  --ink-3: #71727a;
  --on-ink: #0d0d0f;
  --on-ink-soft: rgba(13, 13, 15, .6);
  --ink-strong: #ffffff;

  --line: #26262b;
  --line-2: #36363d;

  --topbar: rgba(13, 13, 15, .86);
  --backdrop: rgba(0, 0, 0, .55);
  --danger: #f87171;
  --danger-soft: #2a1719;
  --link: #7ba7ff;

  --tint: 18%;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
}

/* Labelfärgerna är valda för vit bakgrund. På mörkt underlag ljusas de upp,
   annars faller de mörkare tonerna ihop med bakgrunden. */
.chip,
.meta-label,
.meta-sub,
.group-head { --c-eff: var(--c); }

:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .meta-label,
:root[data-theme="dark"] .meta-sub,
:root[data-theme="dark"] .group-head { --c-eff: color-mix(in srgb, var(--c), #fff 30%); }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body { font-size: 0.9375rem; }

h1, h2, h3 { font-weight: 600; margin: 0; }

button { font: inherit; color: inherit; }

svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

input, textarea, select {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
}

input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- knappar ---------- */

.btn {
  border: 1px solid var(--line-2);
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface); }

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.btn-primary:hover { background: var(--ink-strong); }

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
  padding: 0.375rem 0.625rem;
}
.btn-ghost:hover { background: var(--surface); color: var(--ink); }

.btn-danger:hover { color: var(--danger); background: var(--danger-soft); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface); color: var(--ink); }

/* ---------- login ---------- */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.gate-card {
  width: 100%;
  max-width: 18.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.gate-card h1 { font-size: 1.625rem; }
.gate-card input {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 0.6875rem 0.8125rem;
  background: var(--card);
}
.gate-card input:focus { border-color: var(--ink-3); }
.offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

.gate-error { color: var(--danger); font-size: 0.8125rem; min-height: 1.125rem; margin: 0; }

/* ---------- topbar ---------- */

.app { padding-bottom: 4rem; }

/* Fast, inte sticky: innehållet ska glida in bakom topbaren istället för att
   tryckas ner av den. Då kan den nedre halvan fällas ihop utan att något
   flyttar sig – man ser bara mer av listan. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--topbar);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: 47.5rem;
  margin: 0 auto;
  padding: 0.875rem 1.25rem 0.625rem;
}

/* Vyflikar, sök och filter fälls ihop vid scroll neråt */
.topbar-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .22s ease, opacity .16s ease;
}
.topbar-collapse-inner {
  min-height: 0;
  overflow: hidden;
}
.topbar.is-collapsed .topbar-collapse {
  grid-template-rows: 0fr;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .topbar-collapse { transition: none; }
}
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  min-width: 0;
}
.brand-mark {
  width: 1.375rem;
  height: auto;
  flex: none;
  fill: currentColor;
  stroke: none;
  color: var(--ink);
}
.brand-lg { margin-bottom: 0.5rem; }
.brand-lg .brand-mark { width: 1.75rem; }

.wordmark { font-size: 1.25rem; }
.topbar-actions { display: flex; gap: 0.125rem; }

.views {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.views::-webkit-scrollbar { display: none; }
.view-tab {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0.375rem;
  border: none;
  background: transparent;
  color: var(--ink-3);
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.view-tab:hover { background: var(--surface); color: var(--ink-2); }
.view-tab.is-active { background: var(--ink); color: var(--on-ink); }
.count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.view-tab.is-active .count { color: var(--on-ink-soft); }
.count:empty { display: none; }

.toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.625rem;
  margin-top: 0.75rem;
}
.toolbar-top {
  display: flex;
  /* stretch, inte center: då kan kontrollerna aldrig få olika höjd, oavsett
     vad som händer med typografin i dem */
  align-items: stretch;
  gap: 0.5rem;
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  flex: none;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 0.4375rem 0.875rem;
  font-size: 0.8438rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.toggle:hover { border-color: var(--line-2); }
.toggle svg { width: 0.9375rem; height: 0.9375rem; }
.toggle.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.4375rem 0.875rem;
  color: var(--ink-3);
  /* Samma typografi som Gruppera-knappen bredvid. Pillrens höjd kommer från
     textens radhöjd, så delar de inte teckenstorlek blir de aldrig lika höga
     hur mycket man än pillar med paddingen. 0.8438rem är ~17,5px med 130 %
     rotstorlek – över iOS gräns på 16px, under den zoomar fältet in vid
     fokus. */
  font-size: 0.8438rem;
}
.search:focus-within { border-color: var(--line-2); background: var(--card); }
.search svg { width: 0.9375rem; height: 0.9375rem; flex: none; }
/* input[type=search] har 1px 2px i webbläsarens egen stilmall, och de 2px
   i höjd är precis vad som skiljde pillret från knappen. */
.search input { flex: 1; min-width: 0; color: var(--ink); padding: 0; }

/* ---------- personer ---------- */

/* Rund bricka med initialen. Labels och sub-labels är pillrar, personer är
   cirklar – tre dimensioner i samma filterrad måste gå att skilja åt med
   formen, inte bara färgen. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 700;
  flex: none;
}
.chip.chip-person { padding-left: 0.3125rem; gap: 0.4375rem; }
.chip.chip-person.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.chip.chip-person.is-on .avatar { background: var(--on-ink); color: var(--ink); }
.chips-person { margin-bottom: 0.375rem; }

.meta-people-badge { display: inline-flex; gap: 0.1875rem; }
.meta-people-badge .avatar {
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.625rem;
  background: var(--ink);
  color: var(--on-ink);
}
/* delad: dämpad, för då ligger den på mig också och är ingen delegering */
.meta-people-badge .avatar.is-shared { background: var(--surface-2); color: var(--ink-2); }

.label-admin .avatar { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }

/* ---------- prio ---------- */

.prio-picker { display: flex; gap: 0.375rem; }
.prio-btn {
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  cursor: pointer;
}
.prio-btn:hover { border-color: var(--line-2); }
.prio-btn.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

/* ---------- chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.chip {
  --c: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 0.3125rem 0.6875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--line-2); }
.chip .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-eff);
  flex: none;
}
.chip.is-on {
  color: var(--c-eff);
  border-color: color-mix(in srgb, var(--c-eff) 40%, var(--card));
  background: color-mix(in srgb, var(--c-eff) var(--tint), var(--card));
}

.chips-filter .chip { font-size: 0.8125rem; }

/* Sub-labels är en annan sorts sak än bolagen, så de ser annorlunda ut:
   fylld pill utan prick istället för kontur med prick. */
.chip.chip-sub {
  border-color: transparent;
  background: color-mix(in srgb, var(--c-eff) var(--tint), var(--card));
  color: var(--c-eff);
  padding: 0.25rem 0.625rem;
}
.chip.chip-sub:hover { border-color: color-mix(in srgb, var(--c-eff) 35%, var(--card)); }
.chip.chip-sub.is-on {
  background: var(--c-eff);
  border-color: var(--c-eff);
  color: #fff;
}
:root[data-theme="dark"] .chip.chip-sub.is-on { color: #0d0d0f; }

.chips-sub { margin-top: 0.375rem; }

/* ---------- lista ---------- */

.main {
  max-width: 47.5rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 2.5rem;
  /* --topbar-h mäts i JS och är alltid den utfällda höjden */
  padding-top: calc(var(--topbar-h, 0px) + 1rem);
}

.date-field {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.date-field input {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.3125rem 0.5625rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

/* ---------- lista ---------- */

.list { list-style: none; margin: 0; padding: 0; }

.task {
  border-bottom: 1px solid var(--line);
}
.task:first-child { border-top: 1px solid var(--line); }

.task-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.25rem;
  cursor: pointer;
}
.task-head:hover { background: var(--hover); }

/* Cirkeln är knappen som byter läge. Tecknet inuti visar vilket läge
   tasken har: tomt = open, tre prickar = waiting, bock = done. */
.check {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.check:hover { border-color: var(--ink-3); color: var(--ink-2); }
.check svg { width: 0.75rem; height: 0.75rem; stroke-width: 2.4; }
.task.is-waiting .check { border-color: var(--ink-3); }
.task.is-done .check {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.task.is-waiting .task-title { color: var(--ink-2); }

/* ---------- lägesmeny ---------- */

.state-menu {
  position: fixed;
  z-index: 50;
  min-width: 10.5rem;
  padding: 0.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
}
.state-menu button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
}
.state-menu button:hover { background: var(--surface); color: var(--ink); }
.state-menu button.is-current { color: var(--ink); font-weight: 500; }
.state-menu .mark {
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  flex: none;
  color: var(--ink-3);
}
.state-menu button.is-current .mark { border-color: var(--ink); color: var(--ink); }
.state-menu .mark svg { width: 0.6875rem; height: 0.6875rem; stroke-width: 2.4; }
.state-menu .spacer { flex: 1; }
.state-menu .tick { width: 0.875rem; height: 0.875rem; opacity: 0; color: var(--ink); }
.state-menu button.is-current .tick { opacity: 1; }

.task-main { flex: 1; min-width: 0; }
.task-title {
  font-size: 0.9375rem;
  color: var(--ink);
  word-break: break-word;
}
.task.is-done .task-title { color: var(--ink-3); text-decoration: line-through; }

.task-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  margin-top: 0.3125rem;
  font-size: 0.7812rem;
  color: var(--ink-3);
}
.meta-label {
  --c: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  color: var(--c-eff);
  font-weight: 500;
}
.meta-label .dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--c-eff); }
/* Prio står först i metaraden, för det är den man scannar efter när listan
   är sorterad på den. Fyrkantig, till skillnad från de runda labelmärkena –
   en siffra bland namn och datum ska inte kunna läsas som något annat. */
.meta-prio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 0.3125rem;
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.meta-prio.is-high {
  background: var(--ink);
  color: var(--on-ink);
}
.task.is-done .meta-prio,
.task.is-paused .meta-prio { opacity: .5; }

.meta-sub {
  --c: #64748b;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.0625rem 0.4375rem;
  font-weight: 600;
  color: var(--c-eff);
  background: color-mix(in srgb, var(--c-eff) var(--tint), var(--card));
}
.task.is-paused .meta-sub { opacity: .5; }

.meta-people { display: inline-flex; gap: 0.375rem; flex-wrap: wrap; }
.meta-person { cursor: pointer; }
.meta-person:hover { color: var(--ink-2); text-decoration: underline; }
.meta-due.is-overdue { color: var(--danger); }
.meta-note svg { width: 0.875rem; height: 0.875rem; vertical-align: -0.125rem; }

.task-expand {
  flex: none;
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0.125rem;
  border-radius: 0.375rem;
  display: grid;
  place-items: center;
}
.task-expand svg { transition: transform .15s ease; }

/* ---------- expanderad task ---------- */

.task-body {
  padding: 0.25rem 0.25rem 1.125rem 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field > span {
  font-size: 0.75rem;
  color: var(--ink-3);
}

.title-input {
  width: 100%;
  font-size: 0.9375rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.625rem;
  background: var(--card);
}
.title-input:focus { border-color: var(--line-2); }

.stakeholders {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.5rem;
  background: var(--card);
}
.stakeholders:focus-within { border-color: var(--line-2); }
.person {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0.1875rem 0.3125rem 0.1875rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.person button {
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
}
.person button:hover { color: var(--ink); background: var(--card); }
.person svg { width: 0.625rem; height: 0.625rem; stroke-width: 2.2; }
.stakeholders input { flex: 1; min-width: 6.25rem; padding: 0.1875rem 0; font-size: 0.875rem; }

.notes {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  min-height: 5.625rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.9062rem;
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: break-word;
}
.notes:focus { border-color: var(--line-2); }
.notes:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-3);
}
.notes p { margin: 0 0 0.5rem; }
.notes p:last-child { margin-bottom: 0; }
.notes ul, .notes ol { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.notes img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display: block;
  margin: 0.5rem 0;
}
.notes a { color: var(--link); }
.notes blockquote {
  margin: 0.5rem 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--line-2);
  color: var(--ink-2);
}
.notes blockquote blockquote { margin: 0.375rem 0; }
.notes h3 {
  font-size: 1rem;
  margin: 0.75rem 0 0.25rem;
}
.notes h3:first-child { margin-top: 0; }

.notes-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.notes-bar .spacer { flex: 1; }

.task-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.task-footer .spacer { flex: 1; }

.inbox-hint {
  font-size: 0.8125rem;
  color: var(--ink-2);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.625rem;
}

/* ---------- tom vy ---------- */

.empty {
  text-align: center;
  color: var(--ink-3);
  font-size: 0.875rem;
  padding: 3rem 0;
}

/* ---------- sheet ---------- */

.sheet { position: fixed; inset: 0; z-index: 40; }
.sheet-backdrop { position: absolute; inset: 0; background: var(--backdrop); }
.sheet-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(27.5rem, calc(100vw - 2rem));
  max-height: 82dvh;
  overflow: auto;
  background: var(--card);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  padding: 1.125rem 1.25rem 1.25rem;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.sheet-head h2 { font-size: 1.0625rem; }

.label-admin { list-style: none; margin: 0 0 1rem; padding: 0; }
.label-admin li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.label-admin .swatch {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  flex: none;
  border: none;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .4);
}
.label-admin input {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0;
  font-size: 0.875rem;
}
.label-count { font-size: 0.75rem; color: var(--ink-3); }

.sheet-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.label-form { display: flex; flex-direction: column; gap: 0.625rem; }
.label-form input {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 0.5625rem 0.6875rem;
}
.color-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.color-picker button {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  outline-offset: 0.125rem;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .4);
}
.color-picker button.is-on { border-color: var(--ink); }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.8438rem;
  padding: 0.5625rem 1rem;
  border-radius: 999px;
  z-index: 60;
  box-shadow: var(--shadow);
}

/* ---------- mobil ---------- */

@media (max-width: 720px) {
  .topbar-inner { padding: 0.75rem 0.875rem 0.5rem; }
  .views { gap: 0.125rem; }
  .view-tab { padding: 0.375rem 0.5rem; }
  .brand { gap: 0.5rem; }
  .brand-mark { width: 1.25rem; }
  .main {
    padding: 0.875rem 0.875rem 3rem;
    padding-top: calc(var(--topbar-h, 0px) + 0.875rem);
  }
  .task-body { padding-left: 2rem; }
  .task-head { padding: 0.8125rem 0.125rem; }
  /* Tre kontroller med text får inte plats på en telefon – sökfältet
     klämdes ihop till ett par tecken. Texten finns kvar för skärmläsare,
     och höjden kommer från raden, så knapparna följer sökfältet. */
  .toolbar-top .toggle {
    width: 2.75rem;
    padding: 0 0.4375rem;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }
  .toolbar-top .toggle svg { width: 1.125rem; height: 1.125rem; }

  /* Två rader chips som radbryts åt varsitt håll äter halva telefonskärmen.
     Här ligger de på en rad var och dras i sidled istället. Kanten klipper
     mitt i en chip, vilket är det som visar att det finns mer. */
  .chips-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: -0.875rem;
    padding-inline: 0.875rem;
  }
  .chips-filter::-webkit-scrollbar { display: none; }
}

/* ---------- läsläge: övriga tasks tonas ner ---------- */

.list .task { transition: opacity .15s ease; }

/* ---------- rutiner ---------- */

.task.is-paused .task-title { color: var(--ink-3); }
.task.is-paused .meta-label { opacity: .5; }

.rule-summary { color: var(--ink-2); }
.meta-next { color: var(--ink-3); }
.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ink-3);
}
.meta-tag svg { width: 0.8125rem; height: 0.8125rem; }

.rule-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rule-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8438rem;
  color: var(--ink-2);
}
.rule-row select,
.rule-row input[type="number"],
.rule-row input[type="date"] {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.5625rem;
  font-size: 0.8438rem;
  background: var(--card);
}
.rule-row input[type="number"] { width: 4.125rem; }

.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.125rem;
  gap: 0.125rem;
}
.seg button {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
  cursor: pointer;
}
.seg button.is-on { background: var(--ink); color: var(--on-ink); }

.weekdays { display: flex; gap: 0.3125rem; flex-wrap: wrap; }
.weekdays button {
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 50%;
  font-size: 0.8125rem;
  color: var(--ink-2);
  cursor: pointer;
}
.weekdays button.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.rule-preview {
  font-size: 0.8438rem;
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 0.5625rem 0.6875rem;
}
.rule-preview strong { font-weight: 600; }

/* ---------- pekskärm ---------- */

/* Här låg en regel som satte 16px på alla fält, för att iOS zoomar in på
   fält med mindre text än så. Deklarationen försvann men selektorerna blev
   kvar, och hakade i regeln under – alla fält fick alltså dess padding.
   Sökfältet blev då högre än Gruppera-knappen, eftersom input:en la på egen
   padding inuti pillret.

   Regeln behövs inte: med 130 % rotstorlek är minsta fälttexten 0.9375rem,
   alltså ~19px, och zoomen slår till först under 16px. */
@media (pointer: coarse) {
  /* behåll proportionerna trots den större texten */
  .date-field input,
  .rule-row select,
  .rule-row input[type="number"],
  .rule-row input[type="date"] { padding: 0.4375rem 0.625rem; }
  .rule-row input[type="number"] { width: 4.75rem; }
  .notes { line-height: 1.55; }
}

/* ---------- gruppering per label ---------- */

.group-head {
  padding-top: 1.125rem;
  border-bottom: 1px solid var(--line);
}
.list .group-head:first-child { padding-top: 0; }

.group-btn {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
}
.group-btn:hover { background: var(--hover); }
.group-head .dot {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--c-eff, var(--ink-3));
  flex: none;
}
.group-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.group-chevron {
  margin-left: auto;
  color: var(--ink-3);
  transition: transform .15s ease;
}
.group-head.is-collapsed .group-chevron { transform: rotate(-90deg); }
.group-head.is-collapsed { border-bottom-color: transparent; }
.group-count {
  font-size: 0.7812rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.group-head + .task { border-top: none; }

/* ---------- inställningar ---------- */

.sheet-section + .sheet-section {
  margin-top: 1.625rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--line);
}
.sheet-section h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 0.625rem;
}
.sheet-note {
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin: 0 0 0.75rem;
  line-height: 1.55;
}
.sheet-note code,
.copy-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7812rem;
}
.sheet-note code {
  background: var(--surface-2);
  border-radius: 0.3125rem;
  padding: 0.0625rem 0.3125rem;
}

.copy-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0;
  border-bottom: 1px solid var(--line);
}
.copy-row:last-of-type { border-bottom: none; }
.copy-label {
  font-size: 0.7812rem;
  color: var(--ink-3);
  width: 3.25rem;
  flex: none;
}
.copy-row code {
  flex: 1;
  min-width: 0;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy-row code.is-secret { letter-spacing: 0; }
.copy-row .btn { flex: none; }

/* ---------- flytande plusknapp ---------- */

.fab {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 30;
  width: 3.5rem;
  height: 3.5rem;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, .18);
  transition: transform .12s ease, background .12s ease;
}
.fab:hover { background: var(--ink-strong); transform: translateY(-1px); }
.fab:active { transform: translateY(0); }
.fab svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.8; }

/* ---------- dialogruta ---------- */

/* Elementet <dialog> med showModal() ger fokuslås, bakgrundsspärr och
   Escape utan egen kod. Vi fångar Escape ändå, för att kunna kasta
   ändringarna istället för att bara stänga. */
.dialog {
  padding: 0;
  border: none;
  border-radius: 1rem;
  background: var(--card);
  color: var(--ink);
  width: min(38rem, calc(100vw - 2.5rem));
  max-height: 88vh;
  max-height: min(46rem, 88dvh);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dialog[open] {
  display: flex;
  flex-direction: column;
}
.dialog::backdrop { background: var(--backdrop); }

/* Golv, inte layout: skulle någon webbläsare räkna fel på höjden igen blir
   rutan liten men användbar istället för en remsa. Alla dialoger här har
   fler fält än så, så i praktiken syns det aldrig. */
@media (min-width: 721px) {
  .dialog[open] { min-height: min(20rem, 55vh); }
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.125rem 0.75rem;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.dialog-head h2 { font-size: 1rem; }

.dialog-body {
  padding: 1.125rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  /* flex-basis auto, inte 0. Rutan har ingen egen höjd utan växer med
     innehållet, och WebKit räknar en flexbox med basis 0 som tom när
     höjden ska bestämmas av innehållet – då blev dialogrutan i Safari en
     remsa med bara rubrikfältet. Grow behålls för fullskärmsläget på
     telefonen, där höjden är given och foten ska ligga kvar i botten. */
  flex: 1 1 auto;
  min-height: 0;
}

.dialog-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.875rem 1.125rem;
  border-top: 1px solid var(--line);
  flex: none;
}
.dialog-foot .spacer { flex: 1; }
.dialog-hint {
  font-size: 0.75rem;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  /* Full skärm på telefonen. Inga viewport-enheter, inga procent och ingen
     auto-marginal: höjden kommer helt från inset. Viewport-enheter inuti
     top layer är opålitliga i iOS Safari, och rutan kollapsade då till en
     remsa längst ner utan synliga fält. */
  .dialog {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .dialog-head { padding-top: calc(1rem + env(safe-area-inset-top)); }
  .dialog-body { padding: 1rem; }
  .dialog-foot { padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom)); }
  .dialog-hint { display: none; }   /* ingen tangentbordsgenväg att visa här */
  .fab { width: 3.25rem; height: 3.25rem; }
}