/*
 * Floating timer widget, pinned top-right on desktop, full-width bottom
 * edge on mobile, plus what it opens: the timer overlay and the title modal.
 *
 * Running state: expanded card or minimized edge tab.
 * Idle state: "Timer starten" opens the overlay, a separate toggle a dropdown
 * of recent tasks.  All buttons use the project's .btn system from site-nav.css.
 *
 * Uses the project's design tokens (--s*, --c-surface, --r2, --shadow-md,
 * --touch).  Loaded before site-nav.css in every chrome —
 * NavStylesheetTests enforces site-nav.css last.
 */

.timer-widget {
  position: fixed;
  top: var(--s4);
  right: var(--s4);
  z-index: 501;
  box-sizing: border-box;
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* The admin chrome does not load base.css's global border-box reset. The
   widget owns its sizing so its declared 300px width means 300px everywhere. */
.timer-widget,
.timer-widget *,
.timer-widget *::before,
.timer-widget *::after {
  box-sizing: border-box;
}

/* ── Running: expanded card ─────────────────────────────────────── */

.timer-widget__expanded {
  width: 300px;
  max-width: calc(100vw - var(--s4) * 2);
  background: var(--c-surface);
  border-radius: var(--r2);
  box-shadow: var(--shadow-md);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.timer-widget__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
}

.timer-widget__project {
  font-size: var(--text-md);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.timer-widget__title {
  font-size: var(--text-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-text-muted, inherit);
}

.timer-widget__row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.timer-widget__elapsed {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.timer-widget__meta {
  color: var(--c-text-muted, inherit);
  font-size: var(--text-xs, 0.75rem);
  margin-right: auto;
}

/* Keep this control identical across the frontend and Django admin. Both
   chromes provide a .btn implementation, so the widget has to own the
   final dimensions and paint of its chrome control. */
.timer-widget .timer-widget__minimize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-sm);
  padding: var(--s1) var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r1);
  background: transparent;
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.timer-widget .timer-widget__minimize:hover {
  background: var(--c-surface2);
}

/* ── Running: minimized edge tab ────────────────────────────────── */

.timer-widget__minimized {
  display: none;
  /* 18px, half again the 12px it was: a 12px sliver of --c-surface with no
     border read as a rendering artefact rather than a control. The border
     stops at the right, where the tab sits flush against the viewport edge
     (.timer-widget--minimized pins right: 0). box-sizing is border-box for
     everything in this widget, so the border is inside the 18px. */
  width: 18px;
  height: 56px;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-right: 0;
  border-radius: var(--r2) 0 0 var(--r2);
  box-shadow: var(--shadow-md);
  padding: 0;
}

.timer-widget__expand {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  /* The grip: a dotted texture, the convention for "this is a handle".
     --c-border rather than a literal rgba, because the tokens flip in dark
     mode (management/tokens.css) and a fixed grey would invert wrong. */
  background-color: var(--c-surface);
  background-image: radial-gradient(var(--c-border) 1px, transparent 1.5px);
  background-size: 6px 6px;
  background-position: center;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

/* background-color, not the `background` shorthand: that would reset
   background-image and take the grip away exactly on hover. */
.timer-widget__expand:hover,
.timer-widget__expand:focus-visible {
  background-color: var(--c-surface2);
}

.timer-widget__expand:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: -3px;
}

/* JS toggles this class — see timer-widget.js */
.timer-widget--minimized .timer-widget__expanded { display: none; }
.timer-widget--minimized {
  left: auto;
  right: 0;
}
.timer-widget--minimized .timer-widget__minimized { display: block; }

/* ── Idle: start button + dropdown ──────────────────────────────── */

.timer-widget__idle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  background: var(--c-surface);
  border-radius: var(--r2);
  box-shadow: var(--shadow-md);
  padding: var(--s2);
}

.timer-widget__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--s1));
  right: 0;
  z-index: 300;
  width: max-content;
  min-width: 320px;
  max-width: min(480px, calc(100vw - var(--s4) * 2));
  /* Ten tasks (views.WIDGET_TIMESPAN_LIMIT) plus the "Neuer Timer" form is
     about 560px, so a desktop window does not scroll here. The cap is what
     is left of the viewport below the widget — it sits at top: var(--s4) —
     rather than a fixed 400px, which scrolled at any size. overflow stays as
     the safety valve for a short window and for high-priority todos, which
     come on top of the ten. */
  max-height: calc(100vh - var(--s4) * 2 - 4rem);
  overflow-y: auto;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r2);
  box-shadow: var(--shadow-md);
  padding: var(--s1) 0;
  flex-direction: column;
}

/* JS toggles this class */
.timer-widget__dropdown--open {
  display: flex;
}

/* The entries carry .btn; this rule only makes them full-width, left-aligned
   rows. .btn is inline-flex, whose text ignores the ellipsis pair, hence
   display: block. line-height overrides .btn's 1, which overflow: hidden would
   clip at the descenders. The selector needs two classes to beat .btn, because
   site-nav.css loads after this file. */
.timer-widget .timer-widget__dropdown-item {
  display: block;
  width: 100%;
  padding: var(--s2) var(--s3);
  font-family: inherit;
  font-size: var(--text-md);
  line-height: 1.45;
  text-align: left;
  text-decoration: none;
  /* nowrap keeps one task per row; without the ellipsis pair a long
     "Kunde · Projekt · Aufgabe" is simply cut off at the panel edge, which
     is what ten real entries look like. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.timer-widget__dropdown-new:hover {
  background: var(--c-surface2);
  text-decoration: none;
}

.timer-widget__dropdown-new {
  border-top: 1px solid var(--c-border);
  margin-top: var(--s1);
  padding-top: var(--s2);
  color: var(--c-primary);
}

/* post_action.html wraps the button in a <form>; reset the form so it
   does not break the dropdown flow. */
.timer-widget__dropdown > .post-action {
  display: block;
  margin: var(--s1) var(--s2);
}

/* ── Dropdown: the "Neuer Timer" form ───────────────────────────── */

.timer-widget__new {
  border-top: 1px solid var(--c-border);
  margin-top: var(--s1);
  padding-top: var(--s1);
}

.timer-widget__form {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s2) var(--s3) var(--s3);
}

.timer-widget__field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.timer-widget__field label {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* The project field is a SearchSelectWidget: `.ssw-wrap` holding a filter
   input and the <select>, laid out side by side elsewhere in the project.
   In a 320px panel they stack. */
.timer-widget__form .ssw-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

/* Both must obey the panel's width rather than the select's widest option,
   which is a full "Kunde · Projekt" line.

   !important on the width, which is not decoration: base.css pins
   `.ssw-search { width: 6ch !important }` so the filter box stays narrow
   beside its select on a wide form. Stacked in a 320px panel that leaves a
   53px box under a full-width select. Only an !important reaches past an
   !important — measured, not assumed. */
.timer-widget__form input[type="text"],
.timer-widget__form select {
  width: 100% !important;
  max-width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--s1) var(--s2);
  border: 1px solid var(--c-border);
  border-radius: var(--r1);
  background: var(--c-bg);
  color: var(--c-text);
}

.timer-widget__errors {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--c-danger);
  font-size: var(--text-sm);
}

.timer-widget__start {
  width: 100%;
}

/* ── Favoriten rows: the page and the overlay ───────────────────── */

.fav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r2);
}
.fav-item {
  margin: 0;
  padding: var(--s0) 0;
  list-style: none;
}
.fav-item + .fav-item {
  border-top: 1px solid var(--c-border);
}
.fav-item.is-running {
  box-shadow: inset 3px 0 0 var(--c-active-bg);
}
.fav-row {
  display: flex;
  align-items: center;
  min-width: 0;
}
/* flex: none, or a long project name shrinks the form below its fixed-width
   ▶/■ button, which then spills over the start of the name. */
.fav-row .post-action {
  display: flex;
  flex: none;
  min-width: 0;
  margin: 0;
}
.fav-row--title .post-action {
  flex: 1;
}
/* The #timer-overlay half of these selectors beats management-app.css's
   form-button rules, which reach a row on the overlay of a frontend page. */
.fav-row .fav-go,
#timer-overlay .fav-row .fav-go {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--r1);
  background: none;
  color: var(--c-text-muted);
  font-size: .75rem;
  cursor: pointer;
}
.fav-row .fav-go:hover,
#timer-overlay .fav-row .fav-go:hover {
  background: var(--c-primary);
  color: var(--c-bg);
}
.fav-row .fav-go.timer-btn--stop,
#timer-overlay .fav-row .fav-go.timer-btn--stop {
  background: var(--c-danger);
  color: var(--c-bg);
}
.fav-name {
  min-width: 0;
  padding: 0 var(--s2) 0 0;
  font-size: var(--text-md);
  color: var(--c-link);
  overflow-wrap: anywhere;
}
/* The whole title row starts the timer; the ▶ lines up with the project's. */
.fav-row .fav-last,
#timer-overlay .fav-row .fav-last {
  display: flex;
  flex: 1;
  align-items: center;
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0 var(--s2) 0 0;
  border: none;
  border-radius: var(--r1);
  background: none;
  color: var(--c-text);
  font-size: var(--text-md);
  font-weight: 400;
  cursor: pointer;
  overflow-wrap: anywhere;
  text-align: left;
}
.fav-row .fav-last::before {
  flex: none;
  width: 32px;
  color: var(--c-text-muted);
  font-size: .75rem;
  text-align: center;
  content: "▶";
}
.fav-row .fav-last:hover,
#timer-overlay .fav-row .fav-last:hover {
  background: var(--c-primary);
  color: var(--c-bg);
}
.fav-row .fav-last:hover::before {
  color: inherit;
}
.fav-row :focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: -3px;
}
@media (max-width: 1023px) {
  .fav-row .fav-go,
  #timer-overlay .fav-row .fav-go {
    width: 44px;
    min-height: 44px;
  }
  .fav-name {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .fav-row .fav-last,
  #timer-overlay .fav-row .fav-last {
    min-height: 44px;
  }
  .fav-row .fav-last::before {
    width: 44px;
  }
}

/* ── Title modal ────────────────────────────────────────────────── */

/* Self-contained: the admin chrome loads neither base.css nor todo-app.css. */
#todo-modal {
  box-sizing: border-box;
  width: 90vw;
  max-width: 540px;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r2);
  box-shadow: var(--shadow-md);
  font-family: var(--font);
  font-size: var(--text-sm);
}
#todo-modal::backdrop {
  background: rgba(0, 0, 0, .4);
}
#todo-modal *,
#todo-modal *::before,
#todo-modal *::after {
  box-sizing: border-box;
}
#todo-modal .dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  background: var(--c-surface2);
  border-bottom: 1px solid var(--c-border);
}
#todo-modal .dialog-header h2 {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--c-text);
  font-size: var(--text-lg);
}
#todo-modal .dialog-close {
  padding: 0 var(--s1);
  border: none;
  background: none;
  color: var(--c-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
#todo-modal .dialog-body {
  padding: var(--s4);
}
#todo-modal .form-group {
  margin-bottom: var(--s4);
}
#todo-modal .form-group label {
  display: block;
  margin-bottom: var(--s1);
  font-weight: 600;
}
#todo-modal input[type="text"],
#todo-modal textarea,
#todo-modal select {
  width: 100%;
  padding: var(--s2) var(--s3);
  background: var(--c-field);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r1);
  font: inherit;
}
#todo-modal .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
#todo-modal .recent-titles__group h3 {
  margin: var(--s3) 0 var(--s1);
  padding: 0;
  background: none;
  color: var(--c-text-muted);
  font-size: var(--text-sm);
}
#todo-modal .recent-titles__item {
  display: block;
  width: 100%;
  margin-bottom: var(--s1);
  padding: var(--s2) var(--s3);
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#todo-modal .recent-titles__item:hover {
  background: var(--c-surface);
}

/* ── Timer overlay ──────────────────────────────────────────────── */

/* Every rule is scoped and self-contained: this also renders in the admin chrome,
   whose stylesheets style bare h2, a, ul and li, and which loads neither base.css
   nor todo-app.css. */
#timer-overlay {
  --touch-sm: 32px;
  box-sizing: border-box;
  position: fixed;
  width: min(1280px, calc(100vw - 48px));
  max-width: none;
  height: calc(100dvh - 32px);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r2);
  box-shadow: var(--shadow-md);
  font-family: var(--font);
  font-size: var(--text-sm);
  line-height: 1.4;
}
#timer-overlay[open] {
  display: flex;
  flex-direction: column;
}
#timer-overlay:focus {
  outline: none;
}
#timer-overlay::backdrop {
  background: rgba(0, 0, 0, .6);
}
#timer-overlay *,
#timer-overlay *::before,
#timer-overlay *::after {
  box-sizing: border-box;
}
#timer-overlay h2,
#timer-overlay h3,
#timer-overlay h4,
#timer-overlay ul,
#timer-overlay li {
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  list-style: none;
  text-transform: none;
  letter-spacing: normal;
}
#timer-overlay a:link,
#timer-overlay a:visited {
  color: var(--c-link);
  text-decoration: none;
}
#timer-overlay a:hover {
  text-decoration: underline;
}
#timer-overlay .post-action {
  display: block;
  margin: 0;
}
#timer-overlay .post-action button {
  margin: 0;
}
#timer-overlay .is-hidden {
  display: none !important;
}
#timer-overlay .ov-close {
  position: absolute;
  top: var(--s2);
  right: var(--s3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-sm);
  height: var(--touch-sm);
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r1);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
#timer-overlay .ov-close:hover {
  background: var(--c-surface2);
}
#timer-overlay-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
#timer-overlay .ov-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s2) calc(var(--s3) * 2 + var(--touch-sm)) var(--s2) var(--s4);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
#timer-overlay .ov-head h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  white-space: nowrap;
}
#timer-overlay-search {
  flex: 0 1 300px;
  min-width: 0;
  min-height: var(--touch-sm);
  margin: 0;
  padding: 0 var(--s3);
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r1);
  font: inherit;
}
#timer-overlay-search:focus {
  outline: 3px solid var(--c-primary);
  outline-offset: -1px;
}
#timer-overlay .ov-running {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  min-width: 0;
}
#timer-overlay .ov-running__text {
  min-width: 0;
  text-align: right;
}
#timer-overlay .ov-running__text b {
  display: block;
  font-size: var(--text-md);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#timer-overlay .ov-running__title {
  display: block;
  overflow: hidden;
  font-size: var(--text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#timer-overlay .ov-running__meta {
  display: block;
  font-size: var(--text-xs, .75rem);
  color: var(--c-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#timer-overlay .ov-body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 430px;
  align-items: start;
  gap: var(--s4);
  min-height: 0;
  padding: var(--s3) var(--s4) var(--s4);
  overflow-y: auto;
  scrollbar-width: thin;
}
#timer-overlay .ov-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
#timer-overlay .ov-rail {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}
#timer-overlay .section-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 32px;
  padding-bottom: var(--s1);
  margin-bottom: var(--s2);
  border-bottom: 2px solid var(--c-border);
}
#timer-overlay .section-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--text-md);
  font-weight: 700;
}
#timer-overlay .ov-new-timer {
  margin-left: auto;
}
#timer-overlay .count {
  margin-left: var(--s2);
  font-size: var(--text-xs, .75rem);
  font-weight: 500;
  color: var(--c-text-muted);
}
#timer-overlay .recent-day__label {
  padding: var(--s1) 0 var(--s0);
  font-size: var(--text-xs, .75rem);
  font-weight: 600;
  color: var(--c-text-muted);
}
#timer-overlay .prio-box,
#timer-overlay .ov-list {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r2);
}
#timer-overlay .prio-box {
  margin-bottom: var(--s2);
}
#timer-overlay .prio-box--highest {
  border-left: 3px solid var(--c-danger);
}
#timer-overlay .prio-box--high {
  border-left: 3px solid var(--c-prio-high);
}
#timer-overlay .prio-box__head {
  display: flex;
  align-items: center;
  padding: var(--s1) var(--s3);
  background: var(--c-surface2);
  border-bottom: 1px solid var(--c-border);
  border-radius: 6px 6px 0 0;
  font-size: var(--text-sm);
  font-weight: 700;
}
#timer-overlay .prio-mark {
  margin-right: var(--s2);
  font-weight: 800;
}
#timer-overlay .prio-box--highest .prio-mark {
  color: var(--c-danger);
}
#timer-overlay .prio-box--high .prio-mark {
  color: color-mix(in srgb, var(--c-prio-high) 65%, var(--c-text));
}
#timer-overlay .ov-user {
  margin-bottom: var(--s2);
}
#timer-overlay .ov-user__head {
  padding: var(--s1) 0;
  font-size: var(--text-sm);
  font-weight: 700;
}
#timer-overlay .ov-empty {
  color: var(--c-text-muted);
}
#timer-overlay .pick-item {
  border-bottom: 1px solid var(--c-border);
}
#timer-overlay .pick-item:last-child {
  border-bottom: none;
}
#timer-overlay .pick {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: 30px;
  margin: 0;
  padding: var(--s0) var(--s2) var(--s0) var(--s3);
  background: none;
  color: var(--c-text);
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#timer-overlay .pick:hover {
  background: var(--c-surface2);
}
#timer-overlay .pick:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: -3px;
}
#timer-overlay .pick:hover .pick__go {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-bg);
}
#timer-overlay .pick__project {
  flex: 0 0 280px;
  min-width: 0;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--c-link);
}
#timer-overlay .pick__title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-md);
}
#timer-overlay .pick__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r1);
  font-size: .75rem;
}
#timer-overlay .timer-btn--stop .pick__go {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--c-bg);
}
#timer-overlay .pick--recent {
  min-height: 38px;
  padding-left: var(--s2);
}
#timer-overlay .pick__text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-md);
}
#timer-overlay .pick__text .pick__project {
  margin-right: var(--s2);
}
#timer-overlay .ts-key {
  flex: none;
  width: 14px;
  font: 400 var(--text-xs, .75rem)/1 var(--font-mono);
  color: var(--c-text-muted);
  text-align: center;
}
#timer-overlay .ts-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s2);
  font-size: var(--text-xs, .75rem);
  color: var(--c-text-muted);
}
#timer-overlay .ts-time {
  font-family: var(--font-mono);
}
#timer-overlay .pick-item.wait .pick__title {
  color: var(--c-wait-text);
}
#timer-overlay .pick-item.wait .pick__title::before {
  content: "zzz";
  margin-right: .5em;
  font-size: .75em;
  letter-spacing: -.05em;
}
#timer-overlay .pick-item.done .pick__title {
  color: var(--c-done-text);
  text-decoration: line-through;
}
#timer-overlay .pick-item.is-running .pick {
  background: color-mix(in srgb, var(--c-active-bg) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--c-active-bg);
}
#timer-overlay .owner-chip {
  flex: none;
  padding: 0 6px;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r1);
  font-size: var(--text-xs, .75rem);
  font-weight: 500;
}
#timer-overlay .running-tag {
  flex: none;
  padding: 0 var(--s1);
  background: var(--c-active-bg);
  color: var(--c-bg);
  border-radius: var(--r1);
  font-size: var(--text-xs, .75rem);
  font-weight: 600;
}
@media (max-width: 1023px) {
  #timer-overlay {
    --touch-sm: 44px;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border: none;
    border-radius: 0;
  }
  #timer-overlay .btn {
    min-height: var(--touch-sm);
  }
  #timer-overlay .ov-head {
    flex-wrap: wrap;
    gap: var(--s2);
    padding: var(--s1) var(--s2) var(--s2) var(--s3);
  }
  #timer-overlay .ov-head h2 {
    display: flex;
    align-items: center;
    min-height: var(--touch-sm);
    width: 100%;
    padding-right: var(--touch-sm);
  }
  #timer-overlay .ov-running {
    flex: 1 0 100%;
    justify-content: flex-start;
    order: 1;
  }
  #timer-overlay .ov-running__text {
    flex: 1;
    text-align: left;
  }
  #timer-overlay-search {
    flex: 1 0 100%;
    order: 2;
    font-size: var(--text-md);
  }
  #timer-overlay .ov-close {
    top: var(--s1);
    right: var(--s2);
  }
  #timer-overlay .ov-body {
    display: block;
    padding: var(--s2);
  }
  #timer-overlay .ov-rail {
    margin-bottom: var(--s3);
  }
  #timer-overlay .pick {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s2);
    min-height: 52px;
    padding: var(--s1) var(--s1) var(--s1) var(--s3);
  }
  #timer-overlay .pick__project {
    grid-column: 1;
    font-size: var(--text-md);
  }
  #timer-overlay .pick__title {
    grid-column: 1;
  }
  #timer-overlay .pick__go {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 44px;
    height: 44px;
  }
  #timer-overlay .owner-chip,
  #timer-overlay .running-tag {
    grid-column: 1;
    justify-self: start;
  }
  #timer-overlay .pick--recent {
    display: flex;
  }
  #timer-overlay .pick__text > span {
    display: block;
  }
  #timer-overlay .ts-key,
  #timer-overlay .ts-duration {
    display: none;
  }
}

/* ── Mobile: bottom edge ────────────────────────────────────────── */

@media (max-width: 768px) {
  .timer-widget {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
  }

  /* The widget owns the bottom edge here, so everything else that lives
     there has to move up by its height: .toast-container (toast.css,
     bottom: var(--s4), z-index 500 against the widget's 501) and the
     scrollable content itself, whose last row would otherwise sit behind
     the bar with no way to reach it.

     Keep these reserves in sync with the card rows. The running card has
     three 40px button rows, one text line, three gaps and vertical padding.
     The minimized rule must follow the running rule, which also matches
     minimized widgets.

     :has() is already relied on in management-app.css. The [hidden] guard
     keeps the todo index — which renders the wrapper only as a swap
     target — from reserving space for a widget nobody can see. */
  body:has(#timer-widget:not([hidden]) .timer-widget__idle) {
    --timer-widget-h: 56px;
  }
  body:has(#timer-widget:not([hidden]) .timer-widget__expanded) {
    --timer-widget-h: calc(120px + var(--text-sm) * 1.45 + var(--s2) * 3 + var(--s3) * 2);
  }
  body:has(#timer-widget:not([hidden]).timer-widget--minimized) {
    --timer-widget-h: 0px;
  }

  #main-content,
  #content {
    padding-bottom: calc(var(--touch) + var(--s6) + var(--timer-widget-h, 0px));
  }

  .toast-container {
    bottom: calc(var(--s4) + var(--timer-widget-h, 0px));
  }

  .timer-widget__expanded {
    width: 100%;
    max-width: none;
    border-radius: 0;
  }

  .timer-widget__minimized {
    border-radius: var(--r2) 0 0 var(--r2);
  }

  .timer-widget.timer-widget--minimized {
    left: auto;
    right: 0;
    bottom: var(--s4);
  }

  .timer-widget .btn--sm {
    min-height: 40px;
    padding: var(--s2) var(--s3);
  }

  .timer-widget .timer-widget__expand {
    min-height: 0;
    padding: 0;
  }

  .timer-widget__idle {
    align-items: stretch;
    width: 100%;
  }

  .timer-widget__idle > .timer-widget__open {
    flex: 1;
  }

  .timer-widget__dropdown {
    right: 0;
    left: 0;
    bottom: calc(100% + var(--s1));
    top: auto;
    width: auto;
    max-width: 100%;
  }
}