/* =========================================================
   Tasks — what is its own, over the suite's web kit
   (/suite/tokens.css and /suite/kit.css, linked before this file):
   the frame, sign-in, Settings, dialogs of the suite, notices and the
   brand's colours and fonts are the kit's. What is here is the
   sidebar's lists, the list, the tasks and their detail, and Tasks'
   own dialogs. Visual reference: Microsoft To Do. Mobile first.
   ========================================================= */

/*
 * Tasks' tokens, mapped to the kit's: the accent is Tasks' coral from
 * tokens.css (#CC3718 on light, #F0694B with ink on dark: deeper than the
 * coral of before, so that it reads as a link and carries its text), the
 * greys have the coral's hue, and yolk marks «now» (My Day) and nothing else.
 * Both themes come from the kit, which follows <html data-theme>.
 */
:root {
  /* Inside a list its own colour rules (views.js sets --accent there, with
     white on it); this is the outer one: buttons, My Day, the views. */
  --accent: var(--kit-accent);
  --accent-soft: var(--kit-accent-soft);
  --on-accent: var(--kit-on-accent);

  /* "Important" is the app's coral; "My Day" is yolk (flat: it is small), and
     the "Tomorrow" text a deeper yolk to read on the page; on the yolk the
     text is written in ink. The swipe strip carries the accent, with its own
     text over it. */
  --star: var(--app);
  --star-strong: var(--kit-accent);
  --sun: var(--kit-now);
  --sun-text: var(--kit-now-text);
  --on-sun: var(--cr-ink);

  --bg: var(--kit-bg);
  --surface: var(--kit-panel);
  --surface-2: var(--kit-hover);
  --sidebar-bg: var(--kit-side);
  --text: var(--kit-text);
  --text-dim: var(--kit-muted);
  --text-faint: color-mix(in oklab, var(--kit-muted) 78%, var(--kit-bg));
  --border: var(--kit-border);
  --border-strong: color-mix(in oklab, var(--kit-border) 82%, var(--kit-text));
  --danger: var(--kit-danger);
  --warning: var(--kit-warn);
  --success: var(--kit-ok);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(40, 24, 16, .06), 0 1px 3px rgba(40, 24, 16, .1);
  --shadow-2: var(--kit-shadow);
  --shadow-3: var(--kit-shadow-high);

  /* Gaps the device asks to be respected: the clock at the top, the home
     indicator at the bottom. It declares them itself (62 and 34 on an iPhone with a
     dynamic island, 0 and 0 on one with nothing), so this works for any screen
     without knowing it. At the bottom it is reserved with `max(fixed, this)`,
     never by adding: the design margin only acts when there is nothing to avoid.
     The top one is the kit's bar's business now. */
  --safe-b: var(--kit-safe-bottom);
  --safe-t: var(--kit-safe-top);

  --font: var(--kit-font);
}

:root[data-theme="dark"] {
  --star: var(--kit-accent);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
}
/* Cronum Work's Clean look (suite-core kit.css): the rows' shadow without the warm brown. */
:root[data-look="clean"]:not([data-theme="dark"]) { --shadow-1: 0 1px 2px rgba(0, 0, 0, .04); }

* { box-sizing: border-box; }

/* Makes the native controls (calendar, dropdowns, scroll bars) paint in the same
   tone as the chosen theme. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

html, body {
  margin: 0;
  /* Removes the double-tap-to-zoom delay: taps respond instantly and accidental
     zoom goes away along the way. */
  touch-action: manipulation;
  /* The app behaves like an app, not like a document: its frame is fixed
     (the kit's), only the marked zones scroll, and pulling past an edge
     does not drag the page. */
  overscroll-behavior: none;
  position: relative;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--look-body, 15px);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;  /* no blue flash when tapping */
}

/* Controls are not selected on long press; the text of the tasks is. */
.kit-side, .kit-bar, .list-header, .add-task, .group-title, .list-group-head, .kit-nav__item,
.task-actions, .check, .kit-head, .detail-foot, .tabs, .seg, .swipe-bg {
  user-select: none;
  -webkit-user-select: none;
}

.hidden { display: none !important; }

/* The browser hides what is marked `hidden` through `[hidden]{display:none}`,
   but any rule of our own that sets `display` beats it: `.icon-btn` is
   `display: grid`, so its buttons were never hidden no matter how much the
   code asked for it. It is easy to see when it happens —the suggestions clock
   was still there in lists that do not suggest— and impossible to suspect
   from reading the JS. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Default look of any control, so that none stays white in dark mode. The
   ones that go "bare" (search, title, add task) override it with their own
   class. */
input, select, textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  outline: none;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
select { cursor: pointer; }
input[disabled], select[disabled], textarea[disabled] { opacity: .6; cursor: not-allowed; }

/* Selected text has to show on either theme. The list's colour at a tenth
   (`--accent-soft`) was lost on the dark one, above all inside the fields. The
   iPhone does not paint `::selection` in a field: it tints the selection with the
   caret's colour, which by default is the text's, almost white in dark mode. */
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
:root[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--accent) 48%, transparent); }
input, textarea { caret-color: var(--accent); }

/* --------------------------- base controls ---------------------------- */

.btn {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s, border-color .15s, transform .06s;
  /* Some buttons are links inside (downloading a file requires it). Without
     this they come out underlined and stop looking like a button and look like text. */
  text-decoration: none;
  /* And an <a> is inline text: without this the padding does not match that of a
     <button> next to it and they end up at different heights. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.985); }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.danger { color: var(--danger); border-color: transparent; background: transparent; }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 12px; font-size: var(--look-subhead, 14px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--look-r-sm, 8px);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: var(--look-callout, 16px);
  color: var(--text-dim);
  flex: 0 0 auto;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  font-size: var(--look-footnote, 12.5px);
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 5px;
  letter-spacing: .01em;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { resize: vertical; min-height: 84px; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }

/* ------------------------------- frame -------------------------------- */

/*
 * The kit's frame (shell.js) with Tasks in it (frame.js). From 960 px the
 * task opens as a column on the right of the list, and the list takes the
 * whole width while none is open: in Tasks the list is what is read, the task
 * what is touched now and then. Below, the kit's two screens.
 *
 * The sidebar's width is the kit's (--kit-side-width): 260px on its own, and
 * wider in a host (suite-core host.js), which adds the rail of its modules
 * beside it.
 */
@container kit-app (min-width: 960px) {
  .kit-app.tasks-frame[data-layout="side"][data-panes="split"] .kit-shell {
    grid-template-columns: var(--kit-side-width, 260px) minmax(0, 1fr);
    grid-template-areas: "side banners" "side list";
  }
  .kit-app.tasks-frame[data-layout="side"][data-panes="split"][data-task] .kit-shell {
    grid-template-columns: var(--kit-side-width, 260px) minmax(0, 1fr) minmax(340px, 400px);
    grid-template-areas: "side banners banners" "side list detail";
  }
  .kit-app.tasks-frame:not([data-task]) .kit-pane--detail { display: none; }
  /* The sidebar folded away (the kit's): the list, and the task when one is open, under the bar. */
  .kit-app.tasks-frame[data-folded][data-layout="side"][data-panes="split"] .kit-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "bar" "banners" "list";
  }
  .kit-app.tasks-frame[data-folded][data-layout="side"][data-panes="split"][data-task] .kit-shell {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    grid-template-areas: "bar bar" "banners banners" "list detail";
  }
}

/* The list and the task fill their pane, and scroll inside it themselves. */
.kit-app .kit-pane.tasks-pane { overflow: hidden; }

/* Tasks keeps the floating button out: the add bar is the phone's way to create. */
.kit-app.tasks-frame .kit-fab { display: none; }

/* Settings → Your AI: an ask for each kind of person, who it is for first; the guide under them. */

/* A probe of Settings → About, measured and taken away at once. */
.tasks-probe { position: fixed; left: 0; top: 0; width: 0; visibility: hidden; }
.tasks-screen summary { cursor: pointer; color: var(--kit-muted); font-weight: 600; }
.tasks-screen p { margin: 6px 0 0; font-size: var(--look-footnote, 13px); overflow-wrap: anywhere; }

/* Settings → Lists: one's own category templates, the name to rename it in place. */
.tasks-template-row { display: flex; align-items: center; gap: 10px; }
.tasks-template-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.tasks-template-main .kit-input { width: 100%; min-width: 0; }

/* The start failed: a notice over everything, with a reload. */
.boot-failed { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px; background: var(--kit-bg); }

/* ------------------------------ sidebar ------------------------------- */

/*
 * What Tasks puts in the kit's sidebar (#nav-parts): the search and the views
 * stay at the top and the groups of lists scroll under them; the views and
 * the lists are the kit's entries (kit-nav__item), with Tasks' grip, emoji and
 * shared mark on the lists. The kit's nav is the box; the lists, the scroller.
 */
.kit-side__nav.tasks-side { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.tasks-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: var(--look-caption, 13px);
  flex: 0 0 auto;
  text-transform: uppercase;
}
.avatar.xs { width: 20px; height: 20px; font-size: var(--look-caption2, 9.5px); }
.avatar.sm { width: 26px; height: 26px; font-size: var(--look-caption2, 11px); }

.search-wrap { position: relative; padding: 2px 0 8px; flex: 0 0 auto; }
.search-icon {
  position: absolute;
  inset-inline-start: 10px; top: 0; bottom: 8px;
  display: grid; place-items: center;
  color: var(--kit-muted);
  pointer-events: none;
}
.search-icon .kit-icon { width: 16px; height: 16px; }
.search-input {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px 8px 34px;
  border-radius: var(--look-r-md, 10px);
  border: 1px solid var(--kit-border);
  background: var(--kit-panel);
  outline: none;
}
.search-input:focus { border-color: var(--kit-accent); box-shadow: 0 0 0 3px var(--kit-accent-soft); }

.smart-views { display: grid; gap: 1px; flex: 0 0 auto; padding-bottom: 4px; }
.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0 12px;
  margin-inline: -8px;
  padding-inline: 8px;
  scrollbar-width: thin;
  /* Same as the task area: this is where the gesture that closes the menu starts. */
  touch-action: pan-y;
}
.sidebar-scroll::-webkit-scrollbar { width: 8px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--look-r-sm, 8px); }

/* A list of Tasks in the kit's entry: the grip, its emoji, its name, how many are left. */
.nav-item { position: relative; }

/* Lists are indented under their group, so that the hierarchy shows. */
.list-group-lists .nav-item { width: calc(100% - 10px); margin-inline-start: 10px; }
.nav-item .nav-icon { font-size: var(--look-callout, 16px); width: 22px; text-align: center; flex: 0 0 auto; position: relative; line-height: 1; }
/* A shared list: a small mark on the corner of its icon (nº70). On the icon and
   not by the count, so it lines up with the other lists whatever the number. */
.nav-shared {
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--look-caption2, 10px);
  color: var(--text-dim);
  background: var(--sidebar-bg);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.nav-shared .ico { stroke-width: 2.2; }

.list-group { margin-top: 10px; }

/* Group header: with the group's own colour, to visually separate the blocks of
   the sidebar. */
.list-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: var(--look-item-y, 4px) 6px var(--look-item-y, 4px) 8px;
  margin-bottom: 2px;
  border-radius: var(--look-r-sm, 9px);
  border-inline-start: 3px solid var(--group-color, var(--border-strong));
  background: color-mix(in srgb, var(--group-color, var(--text-faint)) 13%, transparent);
  color: color-mix(in srgb, var(--group-color, var(--text-faint)) 55%, var(--text));
  font-size: var(--look-callout, 15px);
  font-weight: 700;
  letter-spacing: .01em;
}
:root[data-theme="dark"] .list-group-head {
  background: color-mix(in srgb, var(--group-color, var(--text-faint)) 18%, transparent);
  color: color-mix(in srgb, var(--group-color, var(--text-faint)) 45%, #ffffff);
}
.list-group-empty {
  padding: 4px 12px 6px;
  font-size: var(--look-footnote, 12px);
  color: var(--text-faint);
}
.list-group-head .list-group-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.list-group-head .kit-nav__count { font-weight: 400; }
.list-group-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 2px 4px 0;
  color: inherit;
  font: inherit;
  border-radius: var(--look-r-sm, 6px);
  min-height: 28px;
}
.list-group-toggle:hover { color: var(--text-dim); }
.list-group-toggle .kit-icon { width: 16px; height: 16px; }
/* The kit's chevron, pointing at the lists while the group is open. */
.list-group-caret { display: inline-grid; place-items: center; }
.list-group-caret .kit-icon { width: 14px; height: 14px; transition: transform .15s; }
.list-group-toggle[aria-expanded="true"] .list-group-caret .kit-icon { transform: rotate(90deg); }

.list-group-head .icon-btn { width: 28px; height: 28px; opacity: 0; }
.list-group-head .icon-btn .kit-icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .list-group:hover .list-group-head .icon-btn { opacity: 1; }
}

/* One row under the lists: the + that creates on the left, the trash on the right. */
.sidebar-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 6px;
  border-top: 1px solid var(--kit-border);
}
.sidebar-foot .kit-icon-btn[aria-expanded="true"] { background: var(--kit-hover); color: var(--kit-text); }


/* ------------------------------ content ------------------------------- */

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;          /* nothing in here can widen the screen */
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 220px),
    var(--bg);
}
/* The Clean look keeps the list's colour for its accents only: a plain page under the header. */
:root[data-look="clean"] .content { background: var(--bg); }

.list-header {
  /* It holds the kit's head (shell.head), which keeps the clock's gap and its own room. */
  flex: 0 0 auto;            /* fixed: it never goes away with the scroll */
  min-width: 0;
}
/* Over the list's tint, as the header always was; the list's name is the head's title. */
.list-header > .kit-head { background: transparent; }
.list-header .kit-head__title:empty { display: none; }
.list-header .header-title { flex: 1 1 auto; font-size: var(--look-large-title, 21px); }
.list-header .header-title .h-icon .kit-icon { width: 22px; height: 22px; }
.list-header .header-sub { margin-top: 6px; }
.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--kit-font-display);
  font-size: var(--look-large-title, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  min-width: 0;
}
.header-title .h-icon { font-size: var(--look-title1, 24px); display: inline-grid; place-items: center; color: var(--accent); }
.header-title .h-icon .kit-icon { width: 26px; height: 26px; }
.header-title .h-icon.kit-now { color: var(--kit-now); }
.header-title .h-name {
  flex: 1 1 auto;
  min-width: 0;              /* lets it shrink on narrow screens */
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 4px;
  border-radius: var(--look-r-sm, 6px);
  font: inherit;
  color: inherit;
  box-shadow: none;
}
.header-title .h-name:focus { outline: 2px solid var(--accent); background: var(--surface); }
.header-sub {
  color: var(--text-dim);
  font-size: var(--look-subhead, 13px);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: var(--look-caption, 12px);
  color: var(--text-dim);
}
/* The list's group, tinted like its heading in the sidebar. */
.chip.group-chip {
  border-color: color-mix(in srgb, var(--group-color) 45%, transparent);
  background: color-mix(in srgb, var(--group-color) 13%, transparent);
  color: color-mix(in srgb, var(--group-color) 55%, var(--text));
  font-weight: 600;
  max-width: min(100%, 16em);  /* a long name is cut, and the count stays beside it */
  min-width: 0;
}
.group-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="dark"] .chip.group-chip {
  background: color-mix(in srgb, var(--group-color) 18%, transparent);
  color: color-mix(in srgb, var(--group-color) 45%, #ffffff);
}
.menu-btn .kit-icon { width: 22px; height: 22px; }

.task-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;        /* the only zone that scrolls, and only vertically */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* It only scrolls vertically, so it has to be said: without this it inherits
     `manipulation` from `body`, which lets the browser keep the horizontal gestures
     too. And the gesture that opens the menu starts right here, on the left edge —
     the system took it away at 40 or 50 pixels and the panel went back in. The
     rows already had their `pan-y`; the gap between them did not, which is why it
     failed sometimes and not others. */
  touch-action: pan-y;
  padding: 0 var(--look-gutter, 26px) 12px;
  scrollbar-width: thin;
}
.task-area::-webkit-scrollbar { width: 10px; }
.task-area::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--look-r-sm, 8px); }

.group-title {
  font-size: var(--look-footnote, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  margin: var(--look-section, 18px) 2px 8px;
}

/* Sections of a list (bakery, cleaning, Home Assistant…).
   Each one with its category's colour, to see at a glance where it
   starts and where it ends. */
.section-group {
  margin: var(--look-section, 22px) 0 6px;
  border-radius: var(--look-r-lg, 12px);
  background: color-mix(in srgb, var(--section) 6%, transparent);
  padding: 0 0 8px;
  border: 1px solid color-mix(in srgb, var(--section) 22%, transparent);
  overflow: hidden;
}
.section-group:first-child { margin-top: 6px; }

.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: color-mix(in srgb, var(--section) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--section) 20%, transparent);
  margin-bottom: 8px;
  /* It is a <button>: its button-ness has to be removed and its width given back,
     or the header shrinks to the size of its text. */
  width: 100%;
  border-top: none;
  border-left: none;
  border-right: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Folded, the band does not need the gap below. */
.section-head[aria-expanded="false"] { margin-bottom: 0; }
.section-head .caret {
  font-size: var(--look-footnote, 13px);
  width: 13px;
  text-align: center;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--section) 55%, var(--text));
}
.section-name {
  flex: 1;
  min-width: 0;
  font-size: var(--look-headline, 14px);
  font-weight: 700;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--section) 55%, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-count {
  flex: 0 0 auto;
  font-size: var(--look-caption, 12px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--section);
  border-radius: 999px;
  padding: 1px 9px;
  opacity: .9;
}
.section-group .task-list { padding: 0 8px; }

/* In dark mode, the section's colour has to lighten to read well. */
:root[data-theme="dark"] .section-name {
  color: color-mix(in srgb, var(--section) 55%, #ffffff);
}
:root[data-theme="dark"] .section-group {
  background: color-mix(in srgb, var(--section) 10%, transparent);
}

/* -------------------------------- tasks -------------------------------- */

.task-list { display: flex; flex-direction: column; gap: 6px; }

.task-row {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  touch-action: pan-y;
  animation: pop-in .18s ease;
}
/* Drawn again the same, a row stays still: only what is new comes in (views.js, renderMain). */
.task-row.stays { animation: none; }
/* Ticked, then it goes: it fades and folds and the rows below slide up into its place (views.js, leave). */
.task-row.leaving, .sub-row.leaving {
  height: 0 !important; opacity: 0; border-width: 0; padding-block: 0; pointer-events: none; overflow: hidden;
  transition: height .24s cubic-bezier(.32, .72, 0, 1), opacity .16s ease, margin .24s cubic-bezier(.32, .72, 0, 1),
    border-width .24s, padding .24s;
}
/* The list's gap goes with it, or the row below would stop short. */
.task-list > .task-row.leaving { margin-block-start: -6px; }
.sub-list > .sub-row.leaving { margin-block-start: -2px; }
/* A folded Completed whose count grew: a nod, so the task is seen arriving somewhere. */
.group-title.bump { animation: group-bump .5s ease; transform-origin: 0 50%; }
@keyframes group-bump { 40% { transform: scale(1.06); color: var(--accent); } }

.task-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--look-row-gap, 12px);
  padding: var(--look-row-y, 11px) 14px;
  background: var(--surface);
  position: relative;
  z-index: 1;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.task-row.swiping .task-inner { transition: none; }

/* Background that peeks out when swiping: left highlights, right deletes. */
.swipe-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  font-size: var(--look-body, 17px);
  color: #fff;
  background: var(--surface-2);
  transition: background .18s;
}
.swipe-action {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .35;
  transition: opacity .15s, transform .15s;
}
.swipe-label { font-size: var(--look-footnote, 13px); font-weight: 600; letter-spacing: .01em; }
/* The swipe icons measure 1em: without a size of their own they would inherit that of the
   row's text and come out smaller than before. */
.swipe-icon { display: grid; place-items: center; font-size: var(--look-title3, 20px); line-height: 1; }
.swipe-action.armed { opacity: 1; transform: scale(1.06); }

.task-row.sw-star .swipe-bg { background: var(--star-strong); }
.task-row.sw-sun .swipe-bg { background: var(--sun); color: var(--on-sun); }
.task-row.sw-delete .swipe-bg { background: var(--danger); }

.check {
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  margin-top: 2px;
  display: grid;
  place-items: center;
  transition: border-color .15s, background .15s, transform .12s;
  position: relative;
}
.check:hover { border-color: var(--accent); }
/* The tick is an "L" turned 45°. Turned, its box hangs below its own centre
   (2.1px at this size, 1.8px in a subtask's): it is centred in the circle and
   lifted exactly that much, so it sits in the middle (nº67). */
.check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px; height: 6px;
  border-left: 2.2px solid #fff;
  border-bottom: 2.2px solid #fff;
  --tick-lift: 2.1px;
  transform: translate(-50%, calc(-50% - var(--tick-lift))) rotate(-45deg) scale(.2);
  opacity: 0;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.4), opacity .12s;
}
.check.done { background: var(--accent); border-color: var(--accent); }
.check.done::after { opacity: 1; transform: translate(-50%, calc(-50% - var(--tick-lift))) rotate(-45deg) scale(1); }
.check.pulse { animation: check-pop .32s ease; }
/* The circle is small and the finger is not: a margin that can't be seen takes
   the taps around it. A step's circle is 17px, with its text right beside it,
   and a tap a little off went to the text (on an iPhone it took up to three). */
.check::before { content: ""; position: absolute; inset: -10px; }
.check:disabled::before { content: none; }

.task-body { flex: 1; min-width: 0; cursor: pointer; }
.task-title {
  word-break: break-word;
  transition: color .2s;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
/* The text must be able to shrink so as to wrap onto several lines by itself.
   Without this it keeps its natural width, does not fit next to the number and
   `flex-wrap` drops it whole: the number was left alone on top and the text
   below. With `align-items: baseline`, the number lines up with the first line. */
.task-title .task-text { flex: 1; min-width: 0; }

/* Quantity of the entry: "3 ud", "200 g". It lives with the sun and the star, on the
   right of the row, and is tapped to adjust it. */
.qty {
  flex: 0 0 auto;
  font-size: var(--look-caption, 12.5px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--accent-soft);
  border: none;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  cursor: pointer;
  min-height: 26px;
}
.qty:active { transform: scale(.94); }
.qty:disabled { cursor: default; }
/* No quantity yet: a discreet invitation, not one more element to read. */
.qty.vacio {
  color: var(--text-faint);
  background: transparent;
  border: 1px dashed var(--border-strong);
  font-weight: 600;
  padding: 3px 8px;
}
.task-row.done .qty { color: var(--text-faint); background: var(--surface-2); }

/* Quantity editor anchored to the bubble. */
.qty-pop {
  position: fixed;
  z-index: 120;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fade-in .12s ease;
}
.qty-pop-row { display: flex; align-items: center; gap: 6px; }
.qty-step {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--look-r-md, 10px);
  font-size: var(--look-title3, 20px);
  line-height: 1;
  cursor: pointer;
  color: var(--text);
}
.qty-step:active { transform: scale(.94); }
.qty-pop .qty-amount {
  width: 72px;
  text-align: center;
  font-size: var(--look-body, 17px);          /* below 16 the iPhone zooms in */
  font-variant-numeric: tabular-nums;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: var(--look-r-md, 10px);
  background: var(--surface);
}
.qty-pop select {
  padding: 8px 6px;
  border: 1px solid var(--border);
  border-radius: var(--look-r-md, 10px);
  background: var(--surface);
  max-width: 92px;
}
.qty-clear { align-self: stretch; }

/* Quantity row: the number rules and the unit takes just what it needs.
   With more specificity than ".detail-section select { width: 100% }", which otherwise
   took all the width and pushed the number (and the panel) out of view. */
.detail-section .qty-row { display: flex; gap: 10px; align-items: center; }
.detail-section .qty-row input[type="number"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  font-size: var(--look-body, 17px);              /* comfortable for typing on mobile */
  font-variant-numeric: tabular-nums;
  padding: 10px 12px;
}
.detail-section .qty-row select {
  flex: 0 0 auto;
  width: auto;
  min-width: 96px;
  max-width: 42%;
  padding: 10px 10px;
}
.detail-section .qty-row .btn { flex: 0 0 auto; }

/* Units editor of the list's settings */
.units-editor {
  margin: 10px 0 4px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.units-label { display: block; font-size: var(--look-footnote, 12px); color: var(--text-faint); margin-bottom: 8px; }
.unit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px 6px 3px 11px;
  font-size: var(--look-footnote, 13px);
  font-weight: 600;
}
.unit-chip .unit-x {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-faint);
  font-size: var(--look-caption2, 11px);
  line-height: 1;
  padding: 3px 4px;
  border-radius: 50%;
}
.unit-chip .unit-x:hover { color: var(--danger); background: var(--surface-2); }
.unit-new { flex: 1 1 auto; min-width: 0; }
.task-row.done .task-title { color: var(--text-faint); text-decoration: line-through; }
.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 3px;
  font-size: var(--look-footnote, 12px);
  color: var(--text-dim);
  align-items: center;
}
.task-meta .due.overdue { color: var(--danger); font-weight: 600; }
.task-meta .due.today { color: var(--accent); font-weight: 600; }
.task-meta .remind { color: var(--text-dim); }
/* Whom a task is for (#62): edged in the list's colour, so it is not taken for the
   bubble of who added it, which is drawn the same way. */
.task-meta .chip.assignee { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
/* Same tone as the lit sun: it is the same mark, for another day. */
.task-meta .manana { color: var(--sun-text); font-weight: 600; }
.prio {
  font-weight: 700;
  font-size: var(--look-caption2, 11px);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.prio.high { color: var(--danger); }
.prio.medium { color: var(--warning); }
.prio.low { color: var(--text-dim); }

.task-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

/* "Important" star */
/* Star (important) and sun (My Day).
   Text glyphs, not emoji: that way they can be given colour and size. The
   active state is told apart by colour and background, not by a different icon. */
/* Drawn icons: they measure 1em, so the size is still set with
   `font-size`, but unlike the ★ and ☀︎ characters they take up exactly the
   same on any system. */
.ico {
  width: 1em;
  height: 1em;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
/* Marked, they are filled. The sun only inside: the rays remain stroke. */
.star.on .ico { fill: currentColor; }
.sun.on .ico circle { fill: currentColor; }

.star, .sun {
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: var(--look-title3, 19px);
  line-height: 1;
  padding: 5px 7px;
  border-radius: var(--look-r-sm, 8px);
  color: var(--text-faint);
  transition: color .15s, background .15s, transform .12s;
}
.star:hover, .sun:hover { background: var(--surface-2); color: var(--text-dim); }
.star:active, .sun:active { transform: scale(1.2); }
.star:disabled, .sun:disabled { cursor: default; opacity: .3; }

.star.on {
  color: var(--star);
  background: color-mix(in srgb, var(--star) 15%, transparent);
}
.sun.on {
  color: var(--sun);
  background: color-mix(in srgb, var(--sun) 15%, transparent);
}
.star.on:hover { color: var(--star); }
.sun.on:hover { color: var(--sun); }

.star.big, .sun.big { font-size: var(--look-title2, 23px); padding: 7px 9px; }

/* On small screens, a little bigger still. */
@media (max-width: 860px) {
  .star, .sun { font-size: var(--look-title2, 22px); padding: 6px 8px; }
  .star.big, .sun.big { font-size: var(--look-title1, 25px); }
}

/* Collapsible group (completed) */
.group-title.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--look-footnote, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  padding: 4px 2px;
}
.group-title.toggle:hover { color: var(--text-dim); }
.group-title .caret { font-size: var(--look-footnote, 13px); width: 13px; display: inline-block; text-align: center; }

.toggle-chip { cursor: pointer; font-family: inherit; }
.toggle-chip:hover { border-color: var(--accent); color: var(--accent); }
.toggle-chip.on { border-color: var(--border-strong); }

/* Confetti on completing */
.confetti-layer {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  width: 0;
  height: 0;
}
.confetti-layer i {
  position: absolute;
  width: 7px;
  height: 9px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fly .85s cubic-bezier(.15, .8, .35, 1) var(--delay, 0ms) forwards;
}
@keyframes confetti-fly {
  0% { transform: translate(0, 0) rotate(0deg) scale(.4); opacity: 1; }
  70% { opacity: 1; }
  100% {
    transform: translate(var(--dx), calc(var(--dy) + 26px)) rotate(var(--rot)) scale(1);
    opacity: 0;
  }
}
.empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-faint);
}
.empty .emoji { font-size: 40px; display: block; margin-bottom: 10px; }

/* Suggestions of the add field */
.add-wrap { position: relative; }

.suggestions {
  position: absolute;
  left: var(--look-gutter, 26px);
  right: var(--look-gutter, 26px);
  bottom: calc(100% - 4px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  max-height: min(46dvh, 340px);
  overflow-y: auto;
  z-index: 30;
  padding: 4px;
  animation: pop-in .14s ease;
}
.suggestions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 4px;
  font-size: var(--look-footnote, 11.5px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
}
.suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  padding: var(--look-item-y, 9px) 10px;
  border-radius: var(--look-r-sm, 9px);
  cursor: pointer;
  text-align: left;
  font-size: var(--look-body, 14.5px);
}
.suggestion.on { background: var(--accent-soft); }
.sug-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-cat { font-size: var(--look-caption, 12px); flex: 0 0 auto; }
.sug-uses {
  font-size: var(--look-caption, 11.5px);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
/* On a touch screen the bin is always in view, faint. Revealing it on `:hover`
   cost a second tap on the iPhone: the first one "hovers", the bin appears, and
   Safari takes that as a menu opening and keeps the click (nº61). */
.sug-forget { opacity: .4; font-size: var(--look-footnote, 13px); flex: 0 0 auto; padding: 0 2px; }
.suggestion.on .sug-forget { opacity: .6; }
@media (hover: hover) and (pointer: fine) {
  .suggestion:hover { background: var(--accent-soft); }
  .sug-forget { opacity: 0; }
  .suggestion:hover .sug-forget, .suggestion.on .sug-forget { opacity: .6; }
  .sug-forget:hover { opacity: 1; }
}

/* "Where does it go?" (#56): over the add field, in the flow and not floating
   like the suggestions, so it never covers what was just added. The categories
   go down a line when they do not fit: on a phone nothing scrolls sideways. */
.ask-category {
  margin: 0 var(--look-gutter, 26px) 8px;
  padding: 8px 10px 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  animation: pop-in .14s ease;
}
.ask-cat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* Two lines at most: a long title must not push the add bar off the screen. */
.ask-cat-q {
  flex: 1;
  min-width: 0;
  font-size: var(--look-headline, 14px);
  font-weight: 600;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.ask-cat-more {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--look-caption, 12px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ask-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  /* A list set up for the shopping has 30 sections: room for most of them,
     and still a good part of the screen for the list. The keyboard, below,
     leaves less. */
  max-height: min(36dvh, 280px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ask-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--text-faint)) 40%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cat-color, var(--text-faint)) 11%, var(--surface));
  color: color-mix(in srgb, var(--cat-color, var(--text-faint)) 50%, var(--text));
  font-size: var(--look-footnote, 13px);
  font-weight: 600;
  cursor: pointer;
}
:root[data-theme="dark"] .ask-cat-chip {
  background: color-mix(in srgb, var(--cat-color, var(--text-faint)) 18%, var(--surface));
  color: color-mix(in srgb, var(--cat-color, var(--text-faint)) 40%, #ffffff);
}
.ask-cat-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-cat-chip.new {
  border-style: dashed;
  border-color: var(--border-strong, var(--border));
  background: transparent;
  color: var(--text-dim);
}
@media (hover: hover) and (pointer: fine) {
  .ask-cat-chip:hover { filter: brightness(.96); }
  :root[data-theme="dark"] .ask-cat-chip:hover { filter: brightness(1.15); }
}
.ask-cat-new { display: flex; align-items: center; gap: 6px; }
.ask-cat-name { flex: 1; min-width: 0; }

/* A template's categories in the new-list dialog: the colours of the
   question's chips, each with its ✕ to take it off before creating. The
   Supermarket's has 30, so they scroll inside instead of pushing the rest. */
.tpl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  max-height: min(30dvh, 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tpl-chips[hidden] { display: none; }
.tpl-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 3px 4px 3px 10px;
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--text-faint)) 40%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cat-color, var(--text-faint)) 11%, var(--surface));
  color: color-mix(in srgb, var(--cat-color, var(--text-faint)) 50%, var(--text));
  font-size: var(--look-footnote, 13px);
  font-weight: 600;
}
:root[data-theme="dark"] .tpl-chip {
  background: color-mix(in srgb, var(--cat-color, var(--text-faint)) 18%, var(--surface));
  color: color-mix(in srgb, var(--cat-color, var(--text-faint)) 40%, #ffffff);
}
.tpl-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-chip-x {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: inherit;
  opacity: .65;
  cursor: pointer;
  font-size: var(--look-caption2, 11px);
  line-height: 1;
  padding: 5px 6px;
  border-radius: 50%;
}
.tpl-chip-x:hover { opacity: 1; color: var(--danger); background: var(--surface-2); }

.add-task {
  display: flex;
  align-items: center;
  gap: var(--look-row-gap, 10px);
  flex: 0 0 auto;            /* fixed at the bottom, always visible */
  margin: 0 var(--look-gutter, 26px) max(16px, var(--safe-b));
  padding: var(--look-bar-y, 10px) 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.add-plus { color: var(--accent); font-size: var(--look-body, 18px); font-weight: 700; }
.add-task-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 4px 0;
  min-width: 0;
}

/* ---------------------------- detail panel ----------------------------- */

/* The kit's detail pane holds it: a screen of its own on a phone, the column
   on the right of the list from 960 px (see the frame, above). */
.detail {
  height: 100%;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.detail-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;        /* nothing in here can move the panel */
  padding: 18px var(--look-gutter, 20px);
  overscroll-behavior: contain;
}
/* The task's head is the kit's (shell.head, over a detail): its list, and ×. */
.detail-list { flex: 1; min-width: 0; font-size: var(--look-subhead, 14px); color: var(--text-dim); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-close .kit-icon { width: 18px; height: 18px; }
.btn .kit-icon { width: 16px; height: 16px; }
.detail-foot {
  border-top: 1px solid var(--border);
  padding: var(--look-bar-y, 10px) var(--look-gutter, 16px) max(12px, var(--safe-b));
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  color: var(--text-faint);
  font-size: var(--look-footnote, 12px);
}
.detail-stamps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.4;
}
.detail-stamps span { overflow: hidden; text-overflow: ellipsis; }
.detail-title-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.detail-title {
  flex: 1;
  font-size: var(--look-title2, 17px);
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--look-r-sm, 8px);
  padding: 6px 8px;
  resize: none;
  overflow: hidden;
  outline: none;
  min-height: 38px;
}
.detail-title:focus { border-color: var(--accent); background: var(--surface-2); }

.sub-list { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 4px; }
/* Header of the steps already done. The top margin of `.group-title` is
   meant to separate blocks in the central list; here, inside the panel,
   it leaves an odd gap. */
.sub-hechas { margin: 2px 2px 4px; }

/* Thumbnail of a file in the trash: you have to be able to see what it is before
   deciding whether to delete it for good. */
/* With a category pinned, the button shows it: an invisible state means adding
   four things to Bakery by accident. */
#pin-cat-btn.fijada {
  background: var(--surface-2);
  box-shadow: 0 0 0 1.5px currentColor inset;
}

.papelera-mini {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: var(--look-r-sm, 6px);
  border: 1px solid var(--border);
  cursor: zoom-in;
  flex: 0 0 auto;
}

/* Number so that a task or a subtask can be quoted ("fix #7").
   Fixed-width digits aligned to the right so that, going down the list,
   they all fall in the same column and read in one sweep — but without reserving
   extra room: the text is what one comes to read. */
.num {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--look-footnote, 12px);
  color: var(--text-faint);
  white-space: nowrap;
}
.task-title .num { padding-top: 1px; }
.sub-row .num { padding-top: 4px; }
/* `align-items: flex-start` and not `center`: with the text on two or three lines,
   centring left the checkbox floating halfway up the paragraph. */
.sub-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 4px; border-radius: var(--look-r-sm, 8px); animation: pop-in .18s ease; }
/* Drawn again the same, a step stays still: only one new, or ticked into the done ones, comes in. */
.sub-row.stays { animation: none; }
.sub-row:hover { background: var(--surface-2); }
.sub-row .check { width: 17px; height: 17px; margin-top: 3px; flex: 0 0 auto; }
.sub-row .check::after { width: 8px; height: 5px; --tick-lift: 1.8px; }
/* The step's text is a field, but it does not look like one until it is touched:
   otherwise the subtask list would look like a form. */
.sub-row .sub-title {
  flex: 1;
  min-width: 0;
  font-size: var(--look-body, 14px);
  border: none;
  background: transparent;
  padding: 2px 4px;
  border-radius: var(--look-r-sm, 6px);
  /* It is a textarea that must not look like one: it grows with the text, with no
     resize handle and without the minimum height that the notes' ones carry. */
  min-height: 0;
  height: auto;
  resize: none;
  overflow: hidden;
  line-height: 1.35;
  font-family: inherit;
  word-break: break-word;
}
.sub-row .sub-title:focus {
  background: var(--surface);
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sub-row.done .sub-title { color: var(--text-faint); text-decoration: line-through; }
.sub-add {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
}
.sub-add input {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  outline: none;
  padding: 4px 0;
  font-size: var(--look-body, 14px);
}
.sub-add input:focus { border-color: var(--accent); }

/* --------------------------- photos and files ---------------------------- */

/* Grid that fills itself: on mobile two fit per row and on the computer as
   many as fit, with no hand-made breakpoints. */
.adjuntos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}
.adjunto { position: relative; }
.adjunto.foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;              /* cropped, not distorted */
  border-radius: var(--look-r-md, 10px);
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: zoom-in;
  display: block;
}
/* A PDF has no thumbnail to show, so it takes the whole row with the only
   thing that tells it apart: its name. */
.adjunto.doc { grid-column: 1 / -1; }
.adjunto.doc .doc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--look-r-md, 10px);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
}
.adjunto.doc .doc-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adjunto.doc .doc-peso { font-size: var(--look-footnote, 12px); color: var(--text-faint); flex: 0 0 auto; }
.adjunto-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: var(--look-caption, 12px);
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.adjunto-x:hover { background: rgba(0, 0, 0, .78); }
/* On touch there is no hover, so the cross is always visible. */
@media (hover: hover) and (pointer: fine) {
  .adjunto-x { opacity: 0; transition: opacity .15s; }
  .adjunto:hover .adjunto-x { opacity: 1; }
}

/* Viewer: the photo rules, and it must not go off the screen, not even in height. */
.modal-body.visor { display: flex; flex-direction: column; gap: 8px; align-items: center; }

/* The frame crops the enlarged photo. Without it, zooming would spill it out of the
   dialog and cover half the screen. */
.visor-marco {
  width: 100%;
  /* Without the file name below there is room to spare, and here room is the photo. */
  height: min(76vh, 820px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--look-r-sm, 8px);
  background: var(--surface-2);
  /* The gesture is ours: without this the browser keeps the pinch and the
     drag to scroll the page, and the photo's zoom never
     finds out that anything is going on. */
  touch-action: none;
  cursor: zoom-in;
}
.visor-marco.con-zoom { cursor: grab; }
.visor-marco.con-zoom:active { cursor: grabbing; }
.visor-foto {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* The origin point at the centre is what the zoom's calculations assume. */
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
/* Fixed height: the magnification appears and disappears when enlarging, and if the bar grew
   with it the photo would jump right while you are looking at it. */
.visor-barra { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.visor-pie { font-size: var(--look-footnote, 13px); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.visor-aumento {
  font-size: var(--look-caption, 12px);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
}
.visor-ayuda { color: var(--text-faint); text-align: center; }
/* With a mouse there is no pinching: it says what does work. The sentence comes
   from the catalog through the element's data-wheel-hint attribute (modals.js),
   so that no text lives in the stylesheet. */
@media (hover: hover) and (pointer: fine) {
  .visor-ayuda::after { content: ' ' attr(data-wheel-hint); }
}

.detail-section { margin-top: 18px; }
/* What the task is linked with in Cronum Work (the kit's Linked row): under its title. */
.detail-scroll > .kit-linked { margin: 10px 0 4px; }
.detail-section textarea,
.detail-section select,
.detail-section input { width: 100%; }
.detail-section textarea { min-height: 92px; resize: vertical; line-height: 1.5; }

/* Notes: view with links / text box, with the same look so that
   going from one to the other does not jump. */
.notes-field { position: relative; }
.notes-view {
  width: 100%;
  min-height: 92px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  cursor: text;
  transition: border-color .15s;
}
.notes-view:hover { border-color: var(--accent); }
.notes-view:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.notes-view.empty { color: var(--text-faint); }
.notes-view a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.notes-view a:hover { text-decoration-thickness: 2px; }
.detail-section > h4 {
  margin: 0 0 8px;
  font-size: var(--look-footnote, 11.5px);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
}
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: var(--look-subhead, 13px);
}
.seg button.on { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }
.quick-dates { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

/* The date field (nº58). Empty, the iPhone draws it as a blank box, and a blank
   one also shrinks: hence the minimum height. Until it has a date, a hint on top
   says what it is for and lets the taps through to the field. */
.date-field { position: relative; }
.date-field input { min-height: 44px; }
.date-field input::-webkit-date-and-time-value { text-align: left; }
.date-field.no-date input:not(:focus) { color: transparent; }
/* Half picked (the day without the time, which a computer's picker allows): what
   was picked stays in view, and the hint does not cover it (views.js, dateField). */
.date-field.no-date.partial input:not(:focus) { color: inherit; }
.date-field > .date-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 13px;
  font-size: var(--look-body, 15px);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--text-faint);
  pointer-events: none;
}
.date-field:not(.no-date) > .date-hint, .date-field:focus-within > .date-hint, .date-field.partial > .date-hint { display: none; }

/* ------------------------------- dialogs ------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, .5);
  /* Centred with flex, not with grid: with `display: grid` the browser ended up
     sizing the box by its content (the tabs add up to more than a phone's
     screen) and it spilled out on the right. In flex the child's `width: 100%`
     resolves against the container and there are no surprises. */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  /* Leaves free the zone of the phone's home indicator. */
  padding-bottom: max(16px, var(--safe-b));
  animation: fade-in .16s ease;
  backdrop-filter: blur(3px);
}
.modal {
  background: var(--surface);
  border-radius: var(--look-r-xl, 16px);
  box-shadow: var(--shadow-3);
  /* Width: 100% of its slot (which the grid limits to the screen) and a cap on
     desktop. It used to be `min(520px, 100%)`, but being a grid item the browser
     ended up sizing it by its content —the tabs add up to more than a phone— and
     the box spilled out on the right. With `width: 100%` and `min-width: 0` there is
     no possible ambiguity. */
  width: 100%;
  max-width: 520px;
  min-width: 0;
  flex: 0 1 auto;      /* it can shrink; never stretch beyond max-width */
  /* svh = "small" viewport, the one left with the browser's bars in view. With
     dvh the box went off the screen in iPhone's Safari when the bottom bar was
     expanded. */
  max-height: 86vh;
  max-height: min(86svh, 760px);
  display: flex;
  flex-direction: column;
  animation: modal-in .2s cubic-bezier(.2, .8, .3, 1);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: var(--look-title2, 17px); flex: 1; }
.modal-head, .modal-foot, .tabs { flex: 0 0 auto; }
.modal-body {
  padding: 18px;
  overflow-y: auto;
  overflow-x: hidden;     /* nothing in here can widen the box */
  flex: 1 1 auto;
  min-height: 0;          /* without this the content overflows and there is no scroll */
  min-width: 0;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
.modal-foot {
  padding: 12px 18px max(14px, var(--safe-b));
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* The tabs do not fit on a narrow phone: they scroll horizontally instead of
   stretching the box. */
/* The tabs are spread over as many lines as needed.
   They used to scroll sideways, and a tab hidden on the right can be neither
   seen nor guessed: nobody discovers that one has to drag there. Wrapped,
   they are all in view, and they still cannot widen the dialog, which was the
   original reason for that scroll. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.tabs button {
  border: none;
  background: transparent;
  padding: 11px 12px;
  cursor: pointer;
  color: var(--text-dim);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  font-size: var(--look-subhead, 14px);
  flex: 0 1 auto;
  white-space: nowrap;
  min-width: 0;
}
.tabs button.on { color: var(--accent); border-color: var(--accent); }

/* On a narrow screen, a bit tighter so that they fit on two lines. */
@media (max-width: 860px) {
  .tabs { padding: 0 8px; }
  .tabs button { padding: 9px 9px; font-size: var(--look-subhead, 13.5px); }
}

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .12s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 4px;
  max-height: 236px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.emoji-grid button {
  border: none;
  background: transparent;
  font-size: var(--look-title3, 19px);
  padding: 5px;
  border-radius: var(--look-r-sm, 7px);
  cursor: pointer;
}
.emoji-grid button:hover { background: var(--surface); }
.emoji-grid button.on { background: var(--accent); }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--look-row-y, 9px) 0;
  border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row small { display: block; color: var(--text-faint); font-size: var(--look-footnote, 12px); }
.switch {
  position: relative;
  width: 42px; height: 24px;
  border-radius: 999px;
  background: var(--border-strong);
  border: none;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .18s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(18px); }

/* `flex-wrap`: when what a row carries does not fit (a phone at 320 px), the
   controls drop to a line of their own instead of pushing the dialog sideways. */
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: var(--look-row-y, 9px) 0;
  border-bottom: 1px solid var(--border);
}
.share-row .grow { flex: 1; min-width: 0; }
.share-row .grow strong { display: block; font-size: var(--look-headline, 14px); }
.share-row .grow small { color: var(--text-faint); font-size: var(--look-footnote, 12px); }
/* A person in the share dialog. `.modal-body` breaks words anywhere so that
   nothing widens it, and next to the permission and the ✕ the name was left
   under 60 px at 320: "Martíne / z". A name never breaks: it keeps one line and
   is cut with "…" (all of it in its `title`). The 12rem it asks for is what sends
   the permission and the ✕ (`.share-actions`, together) to a line below, on the
   right, before the name is squeezed: on a phone up to 430 px they go below and
   the name has the whole width; in the desktop dialog they fit beside it, and
   there the name takes the free space and the auto margin is 0. */
.share-row .grow.person { flex: 1 1 12rem; }
.share-row .grow.person > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}
.share-row .share-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.hint { color: var(--text-faint); font-size: var(--look-footnote, 12.5px); margin: 6px 0 0; }

/* Reminders that would not reach you here (#80): under the list's switch and in
   a task's "Remind me". `off` is the switch being off; `hidden`, nothing to say. */
.remind-warning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: var(--look-r-sm, 8px);
  background: var(--kit-warn-soft);
  font-size: var(--look-footnote, 12.5px);
}
.remind-warning[hidden], .remind-warning.off { display: none; }
.remind-warning p { margin: 0; flex: 1 1 14em; min-width: 0; }
.menu-sheet {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--look-r-lg, 12px);
  box-shadow: var(--shadow-3);
  padding: 6px;
  z-index: 110;
  min-width: 208px;
  animation: pop-in .12s ease;
}
.menu-sheet button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  padding: var(--look-item-y, 9px) 11px;
  border-radius: var(--look-r-sm, 8px);
  cursor: pointer;
  text-align: left;
  font-size: var(--look-body, 14px);
}
.menu-sheet button:hover { background: var(--surface-2); }
.menu-sheet button.danger { color: var(--danger); }
.menu-sheet hr { border: none; border-top: 1px solid var(--border); margin: 5px 2px; }

/* ----------------------------- animations ------------------------------ */

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes check-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------- mobile -------------------------------- */

@media (max-width: 860px) {
  /* Comfortable touch targets: the minimum recommended on mobile. */
  .icon-btn { width: 42px; height: 42px; font-size: var(--look-title3, 19px); }
  .menu-btn .kit-icon { width: 24px; height: 24px; }

  /* The add bar sticks to the bottom edge and its own background covers the
     home indicator's zone: no dead air or strips of another colour.

     The gap below is `max`, not a sum. Adding, in the browser 12px were left
     (there is no safe area because Safari's bar takes it) and in the installed app
     12+34 = 46, almost four times more: hence the emptiness that was only
     seen with the app on the home screen. With `max` it is 34, what the
     system reserves for the indicator and not one more. */
  .add-task {
    margin: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
    padding: var(--look-bar-y, 12px) 14px max(12px, var(--safe-b));
    box-shadow: 0 -6px 18px rgba(40, 24, 16, .07);
  }
  .header-title .h-icon, .header-title .icon-btn { font-size: var(--look-title1, 21px); }
  .task-area { padding: 0 var(--look-gutter, 14px) 8px; }
  .suggestions { left: var(--look-gutter, 14px); right: var(--look-gutter, 14px); }
  .ask-category { margin: 0 var(--look-gutter, 14px) 8px; }

  /* On a touch screen there is no "hover": these controls are always visible
     (otherwise one has to tap once to reveal them and again to use them). */
  .list-group-head .icon-btn { opacity: 1; }

  .modal { width: 100%; }
}

/* On a phone Tasks' own dialogs (a list's editor, sharing, the trash…) rise
   from the bottom as a sheet, within reach of the thumb, like the kit's. */
@media (max-width: 640px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none;
    max-height: 92dvh;
    border-radius: var(--look-r-xl, 20px) var(--look-r-xl, 20px) 0 0;
    animation: kit-rise .22s ease-out;
  }
}

/* Below 960 px the task is a screen of its own: the head's ← closes it, and × would say it twice. */
@container kit-app (max-width: 959px) {
  .detail-close { display: none; }
}

/* ------------------- iOS: when the canvas comes out cropped -------------------
   With the status bar opaque, iOS only draws as far as the safe area reaches
   —measured on an iPhone with an island: 812 of a screen of 874, anchored
   at the top— and fills what is left with the document's background. It was checked
   by stretching the app to 874 with `lvh`: the content was placed there, but the
   pixels below 812 were never painted and the add button came out
   cut in half.

   The app now asks for the translucent status bar, which does hand over the whole
   screen, and then none of this ends up applying. But iOS freezes that
   option when the app is added to the home screen, so whoever installed it
   before keeps the short canvas until they reinstall it. For those:

   · The dead strip already leaves the home indicator free (62 > 34), so
     reserving room for it inside the app would be counting it twice and raising
     the add bar for no reason.
   · And it is given the bar's colour, so that it reads as its continuation
     to the edge: the document's background propagates to the whole canvas even if
     the element is smaller.

   main.js checks it at run time (is there screen left over, and is what is left
   exactly the clock's gap?) instead of taking it for granted: on Android it is drawn
   to the edge and there the gap below is really needed. */
/* The keyboard is up (the kit's keyboard.js fits the frame to the part of the
   screen left in view): the home indicator is under it, so nothing keeps room
   for it (--kit-safe-bottom, and with it --safe-b, are 0) and the add bar sits
   on the keyboard with a gap of its own. */
:root[data-kit-keyboard] .add-task { padding-bottom: 12px; }
/* Tasks' own dialogs, the same way as the kit's: the backdrop takes the part of
   the screen left in view, so a sheet sits on the keyboard with its buttons in reach. */
:root[data-kit-keyboard] .modal-backdrop { top: var(--kit-view-top); bottom: auto; height: var(--kit-view-h); }
:root[data-kit-keyboard] .modal { max-height: calc(var(--kit-view-h) - 32px); }
@media (max-width: 640px) {
  :root[data-kit-keyboard] .modal { max-height: calc(var(--kit-view-h) - 8px); }
}
/* With the keyboard up a small phone has little screen left: two rows and a
   half of categories (the rest scroll), so that the add bar stays in view. */
:root[data-kit-keyboard] .ask-cat-chips { max-height: 80px; }

:root[data-lienzo="recortado"] { --safe-b: 0px; }
:root[data-lienzo="recortado"] body { background: var(--surface); }

/* The account under the sidebar keeps the same room as the add bar: `max`, not
   the kit's sum (8 + 34 = 42 on an installed iPhone), and none when the canvas is
   cropped, where the dead strip below already leaves the home indicator free.
   With the sum, a band of the sidebar's colour stood between the account and
   the bottom of the screen on the iPhone. */
.kit-app.tasks-frame .kit-side__foot { padding-bottom: max(8px, var(--safe-b)); }

/* Invitation to a shared list, at the top of the sidebar. */
.invitacion {
  margin: 4px 0 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.invitacion-quien {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--look-footnote, 12px);
  color: var(--text-dim);
}
.invitacion-lista { font-size: var(--look-headline, 14.5px); overflow-wrap: anywhere; }
.invitacion-botones { display: flex; gap: 6px; }
.invitacion-botones .btn { flex: 1 1 0; }

/* Cronum Work's Clean look (suite-core kit.css, phase 2): its corners, a large title, plain
   section labels, the sidebar's groups as plain sections (the accent is the one colour), and
   room for the bigger text. */
:root[data-look="clean"] {
  --radius: var(--look-r-lg, 12px);
  --radius-sm: var(--look-r-sm, 8px);
}
:root[data-look="clean"] .header-title { font-weight: 700; letter-spacing: -.022em; }
:root[data-look="clean"] .header-title > span:not(.h-icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-look="clean"] .btn { font-size: var(--look-subhead, 15px); }
:root[data-look="clean"] .group-title,
:root[data-look="clean"] .detail-section > h4,
:root[data-look="clean"] .suggestions-head { font-weight: 600; letter-spacing: .02em; }
:root[data-look="clean"] .list-group-head {
  background: transparent;
  border-inline-start: none;
  padding-inline-start: 11px;
  color: var(--text);
  font-weight: 600;
  min-height: 40px;
}
:root[data-look="clean"] .chip.group-chip { border-color: var(--border); background: var(--surface); color: var(--text-dim); }
:root[data-look="clean"] .detail-title { min-height: 46px; }
:root[data-look="clean"] .sub-row .check { margin-top: 5px; }
/* Its rows are an iPhone's list: no cards, the circle in line with the title and a hairline under the text. */
:root[data-look="clean"] .task-list { gap: 0; }
:root[data-look="clean"] .task-list > .task-row.leaving { margin-block-start: 0; }
:root[data-look="clean"] .task-row { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
:root[data-look="clean"] .task-inner { padding-inline: 0; background: var(--bg); }
:root[data-look="clean"] .task-row::after {
  content: ''; position: absolute; z-index: 2; inset-block-end: 0; inset-inline: calc(21px + var(--look-row-gap, 12px)) 0;
  border-bottom: 1px solid var(--border); pointer-events: none;
}
/* A list's categories as an iPhone's sections: a heading in the category's colour over its rows, no box around them. */
:root[data-look="clean"] .section-group { border: 0; border-radius: 0; background: none; padding: 0; overflow: visible; }
:root[data-look="clean"] .section-head { background: none; border-bottom: 0; padding: 0 0 2px; margin-bottom: 0; gap: 8px; }
:root[data-look="clean"] .section-count { background: none; color: var(--text-faint); font-weight: 500; padding: 0; opacity: 1; }
:root[data-look="clean"] .section-group .task-list { padding: 0; }
/* A quiet sidebar, the same in every module: 16px entries, the open one in its colour without going bold. */
:root[data-look="clean"] .kit-nav__item { min-height: 40px; padding-block: 8px; font-size: var(--look-callout, 15px); }
:root[data-look="clean"] .kit-nav__item[aria-current="page"] { font-weight: 500; }