:root {
  color-scheme: light dark;
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #1b1f24;
  --muted: #6b7280;
  --border: #e2e5ea;
  --accent: #2563eb;
  --accent-fg: #ffffff;
  --green: #16a34a;
  --red: #dc2626;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --card: #1e2126;
    --text: #e7e9ec;
    --muted: #9aa1ab;
    --border: #2c3038;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}
#app {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}
.logo { border-radius: 22%; margin-bottom: 8px; }
h1, h2, h3 { margin: 0 0 8px; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
p { color: var(--muted); margin: 0 0 12px; }
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}
/* A <select> made to read as plain text/a heading rather than a form
   field — used for the family name and current user in the topbar, which
   double as "switch to a different one" dropdowns without looking like an
   input box sitting in the middle of the page title. */
.plain-select {
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  max-width: 100%;
}
#family-switch.plain-select {
  font-size: 1.6rem;
  font-weight: bold;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
/* Marks the boundary in Settings between account-level sections (join a
   family) and the sections scoped to whichever family is currently open. */
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0 20px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: none; }
.row.expandable { cursor: pointer; }
.row.expandable:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.row .chevron { color: var(--muted); flex: none; }
/* The panel a .row.expandable reveals when toggled open — indented and
   set off from the row above it so it reads as "belonging to" that row
   rather than as the next item in the list. */
.row-detail {
  padding: 4px 0 16px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid var(--border);
  margin-left: 4px;
}
.row-detail:last-child { border-bottom: none; }
.row-detail .field:first-child { margin-top: 10px; }
/* The first child is usually a text block and the rest are buttons/controls.
   Letting the text grow and giving it a wrap point (rather than a fixed
   width) means a row degrades gracefully as its container narrows: buttons
   stay alongside the text as long as there's room, then drop to their own
   line below it — without a breakpoint tied to any specific device width. */
.row > *:first-child {
  flex: 1 1 220px;
  min-width: 0;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 12px;
}
.input-full { width: 100%; }
button, select, input, textarea {
  font: inherit;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 8px 10px;
  background: var(--card);
  color: var(--text);
  max-width: 100%;
}
button {
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
button.secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
button.danger {
  background: var(--red);
  border-color: var(--red);
}
button:disabled { opacity: 0.5; cursor: default; }
label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.field { margin-bottom: 12px; }
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--border);
  color: var(--text);
}
.pill.parent { background: #dbeafe; color: #1e40af; }
.pill.child { background: #dcfce7; color: #166534; }
.pill.notcompleted { background: #fee2e2; color: #991b1b; }
@media (prefers-color-scheme: dark) {
  .pill.parent { background: #1e3a8a55; color: #93c5fd; }
  .pill.child { background: #14532d55; color: #86efac; }
  .pill.notcompleted { background: #7f1d1d55; color: #fca5a5; }
}
/* History rows for occurrences that were due but never completed — dimmed
   so a glance at the list still reads as "mostly done things", with the
   pill above doing the explicit labeling. */
.history-row-incomplete { opacity: 0.65; }
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tabs button { background: transparent; color: var(--muted); border-color: var(--border); }
.tabs button.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.icon-type-toggle { display: flex; gap: 6px; margin: 6px 0; }
.icon-type-toggle button.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.icon-choices { display: flex; flex-wrap: wrap; gap: 4px; }
.icon-choices button { padding: 4px 8px; }
.repeat-mode-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.repeat-mode-toggle button.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.hint { color: var(--muted); }
.stat {
  text-align: center;
}
.stat .value { font-size: 1.6rem; font-weight: 600; }
.stat .label { font-size: 0.8rem; color: var(--muted); }
.task-title { font-weight: 600; }
.task-meta { font-size: 0.8rem; color: var(--muted); }
/* Fixed rather than in normal document flow: inserted at the top of the
   page like this used to push everything below it down the moment an
   error appeared. On a real click (not just a re-render), that shift
   between mousedown/touchstart and mouseup/touchend could land the second
   half of the click on whatever control had shifted into its place — e.g.
   a validation error on the task form's Save button pushing "select all
   children" up underneath the cursor. Overlaying it instead means showing
   or clearing an error never moves anything else on the page. */
.error {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  max-width: 860px;
  margin: 0 auto;
  background: #fee2e2;
  color: #991b1b;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.empty { color: var(--muted); font-style: italic; padding: 12px 0; }
.checkbtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex: none;
}
.checkbtn.done { background: var(--green); border-color: var(--green); }
.checkbtn.todo { background: transparent; color: var(--muted); }
/* A fixed-width icon button — used for pause/resume so toggling between
   the two doesn't change the button's width and shove its neighbors
   sideways, the way swapping "Pause" for "Gjenoppta"/"Resume" text did. */
.btn-icon {
  width: 40px;
  padding: 8px 0;
  text-align: center;
  flex: none;
}
.btn-icon .material-symbols-outlined {
  font-size: 20px;
  vertical-align: middle;
}
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.child-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.child-toggle {
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.child-toggle.done {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.task-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.task-row:last-child { border-bottom: none; }
.task-row-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
/* Deliberately narrow on desktop, where there's plenty of spare width to
   leave unused; on a narrow viewport that same fixed width just wastes the
   little room there is; full width there is both easier to tap and easier
   to read what's typed. */
.input-icon { width: 12em; }
.input-price { width: 8em; }
.input-date { width: 10em; }
.input-interval { width: 5em; }
.input-cron { width: 14em; }
@media (max-width: 480px) {
  .input-icon,
  .input-price,
  .input-date,
  .input-interval,
  .input-cron {
    width: 100%;
  }
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}