/* taskcody.css — CSS token bridge: maps Float design tokens to TC --tb-* vars.
   Scoped to .tc-panel so TC overrides never leak into Float chrome. */

/* ── Global hidden utility (TC components use classList.add/remove('hidden')) ── */
.hidden { display: none !important; }

/* ── Dark mode (default) ── */
.tc-panel {
  --tb-bg:              var(--ocean);
  --tb-bg-secondary:    var(--deep);
  --tb-text:            var(--foam);
  --tb-text-muted:      var(--mist);
  --tb-text-dim:        rgba(176, 190, 197, 0.5);
  --tb-border:          rgba(255, 255, 255, 0.08);
  --tb-border-strong:   rgba(255, 255, 255, 0.14);
  --tb-accent:          var(--tide);
  --tb-hover:           rgba(255, 255, 255, 0.06);
  --tb-font:            'Bricolage Grotesque', sans-serif;
  --tb-font-size:       13px;
  --tb-font-mono:       'DM Mono', monospace;
  --tb-error-text:      var(--coral);

  /* toast colours */
  --tb-success-bg:      rgba(38, 166, 154, 0.15);
  --tb-success-text:    var(--kelp);
  --tb-success-dot:     var(--kelp);
  --tb-error-dot:       var(--coral);
  --tb-warning-bg:      rgba(255, 213, 79, 0.12);
  --tb-warning-text:    var(--sand);
  --tb-warning-dot:     var(--sand);
  --tb-info-bg:         rgba(79, 195, 247, 0.1);
  --tb-info-text:       var(--tide);
  --tb-info-dot:        var(--tide);

  /* z-index scale — above Float's overlays (z ~100) */
  --tb-z-toast:         120;

  /* layout — fills remaining height in .app flex column */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  font-family: var(--tb-font);
  font-size: var(--tb-font-size);
  color: var(--tb-text);
  background: var(--tb-bg);
  border-top: 1px solid var(--tb-border);
}

/* ── Main row: projects + list pane + editor pane ───────────────── */
#tc-main-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Project pane (leftmost sidebar) ─────────────────── */
#tc-project-pane {
  display: flex;
  flex-direction: column;
  width: 148px;
  flex-shrink: 0;
  border-right: 1px solid var(--tb-border);
  background: var(--tb-bg-secondary);
  overflow: hidden;
}

.proj-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px 5px 12px;
  font-size: 9px;
  font-family: var(--tb-font);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tb-text-dim);
  border-bottom: 1px solid var(--tb-border);
  flex-shrink: 0;
}

#tc-project-add-btn {
  all: unset;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--tb-text-dim);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: color 0.12s, background 0.12s;
}

#tc-project-add-btn:hover {
  color: var(--tb-accent);
  background: var(--tb-hover);
}

#tc-project-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--tb-border-strong) transparent;
  padding: 4px 0;
}

.proj-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 5px 12px;
  cursor: pointer;
  border-radius: 0;
  position: relative;
  border-left: 2px solid transparent;
  transition: background 0.12s;
}

.proj-item:hover {
  background: var(--tb-hover);
}

.proj-item--active {
  border-left-color: var(--tb-accent);
  background: color-mix(in srgb, var(--tb-accent) 8%, transparent);
}

.proj-item--active .proj-name {
  color: var(--tb-accent);
  font-weight: 600;
}

.proj-name {
  flex: 1;
  font-size: 11px;
  font-family: var(--tb-font);
  color: var(--tb-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  user-select: none;
}

.proj-name-input {
  flex: 1;
  font-size: 11px;
  font-family: var(--tb-font);
  color: var(--tb-text);
  background: var(--tb-bg);
  border: 1px solid var(--tb-accent);
  border-radius: 3px;
  padding: 1px 5px;
  outline: none;
  min-width: 0;
  width: 100%;
}

.proj-del-btn {
  all: unset;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--tb-text-dim);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
  padding: 0 2px;
}

.proj-item:hover .proj-del-btn {
  opacity: 0.6;
}

.proj-del-btn:hover {
  color: var(--tb-error-text) !important;
  opacity: 1 !important;
}

/* ── Delete project modal — bridge --tb-* vars (outside .tc-panel) ── */
#m-delete-project {
  --tb-accent:        var(--tide);
  --tb-bg:            var(--ocean);
  --tb-border:        rgba(255, 255, 255, 0.08);
  --tb-border-strong: rgba(255, 255, 255, 0.14);
}

html.light #m-delete-project {
  --tb-bg:            #f0f4f0;
  --tb-border:        rgba(0, 0, 0, 0.09);
  --tb-border-strong: rgba(0, 0, 0, 0.18);
}

@media (min-width: 600px) {
  #m-delete-project > .modal {
    max-width: 340px;
    width: 100%;
  }
}

/* ── Add project modal — bridge --tb-* vars (outside .tc-panel) ── */
#m-add-project {
  --tb-accent:        var(--tide);
  --tb-bg:            var(--ocean);
  --tb-border:        rgba(255, 255, 255, 0.08);
  --tb-border-strong: rgba(255, 255, 255, 0.14);
}

html.light #m-add-project {
  --tb-bg:            #f0f4f0;
  --tb-border:        rgba(0, 0, 0, 0.09);
  --tb-border-strong: rgba(0, 0, 0, 0.18);
}

@media (min-width: 600px) {
  #m-add-project > .modal {
    max-width: 300px;
    width: 100%;
  }
}

/* ── Mobile project button (hidden on desktop) ────────── */
#tc-project-mobile-btn {
  display: none;
}

/* ── Project picker modal ─────────────────────────────── */
#m-project-picker {
  --tb-accent:        var(--tide);
  --tb-bg:            var(--ocean);
  --tb-hover:         rgba(255, 255, 255, 0.06);
  --tb-text:          var(--foam);
  --tb-text-dim:      rgba(176, 190, 197, 0.5);
  --tb-border:        rgba(255, 255, 255, 0.08);
  --tb-font:          'Bricolage Grotesque', sans-serif;
}

html.light #m-project-picker {
  --tb-bg:    #f0f4f0;
  --tb-hover: rgba(0, 0, 0, 0.05);
  --tb-text:  #0d2137;
}

.proj-picker-item {
  all: unset;
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--tb-font);
  color: var(--tb-text);
  cursor: pointer;
  border-radius: 4px;
  box-sizing: border-box;
  transition: background 0.1s;
}

.proj-picker-item:hover {
  background: var(--tb-hover);
}

.proj-picker-item--active {
  color: var(--tb-accent);
  font-weight: 600;
}

/* ── List pane (left) ─────────────────────────────────── */
#tc-list-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* ── Editor pane (right) ──────────────────────────────── */
#tc-editor-pane {
  display: flex;
  flex-direction: column;
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid var(--tb-border);
  background: var(--tb-bg);
}

#tc-editor-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px 5px;
  border-bottom: 1px solid var(--tb-border);
  flex-shrink: 0;
  background: var(--tb-bg-secondary);
  min-height: 32px;
}

#tc-editor-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--tb-text);
  font-family: var(--tb-font);
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Editor back row (mobile only) ────────────────── */
#tc-editor-back-row {
  display: none;
}

#tc-editor-back {
  all: unset;
  cursor: pointer;
  font-size: 11px;
  font-family: var(--tb-font);
  color: var(--tb-text-muted);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

#tc-editor-back:hover {
  color: var(--tb-text);
}

/* ── Front matter panel ───────────────────────────────── */
#tc-editor-frontmatter {
  flex-shrink: 0;
  padding: 8px 14px 7px;
  border-bottom: 1px solid var(--tb-border);
  background: var(--tb-bg-secondary);
  font-family: var(--tb-font-mono);
  font-size: 11px;
  user-select: none;
}

.fm-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1.8;
}

.fm-key {
  color: var(--tb-text-dim);
  min-width: 64px;
  flex-shrink: 0;
  font-size: 10px;
}

.fm-val {
  color: var(--tb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* clickable row (due date) */
.fm-row--btn {
  cursor: pointer;
  border-radius: 3px;
  margin: 1px -4px;
  padding: 0 4px;
}

.fm-row--btn:hover {
  background: var(--tb-hover);
}

.fm-row--btn:hover .fm-val {
  color: var(--tb-accent);
}

.fm-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--tb-border);
}

.fm-add-entry {
  all: unset;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--tb-font);
  color: var(--tb-accent);
  border: 1px solid var(--tb-accent);
  border-radius: 3px;
  padding: 2px 8px;
  line-height: 1.6;
}

.fm-add-entry:hover {
  background: color-mix(in srgb, var(--tb-accent) 12%, transparent);
}

.fm-advance-btn {
  all: unset;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--tb-font);
  color: var(--tb-bg);
  background: var(--tb-accent);
  border-radius: 3px;
  padding: 2px 8px;
  line-height: 1.6;
  margin-left: 6px;
}

.fm-advance-btn:hover {
  opacity: 0.85;
}

.fm-archive-btn {
  all: unset;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--tb-font);
  color: var(--tb-text-dim);
  border: 1px solid var(--tb-border-strong);
  border-radius: 3px;
  padding: 2px 8px;
  line-height: 1.6;
  margin-left: auto;   /* push to far right */
  display: inline-block;
  transition: color 0.15s, border-color 0.15s;
}

.fm-archive-btn:hover {
  color: var(--tb-error-text);
  border-color: var(--tb-error-text);
}

/* ── Tags in frontmatter ──────────────────────────────── */
.fm-tags-val {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.fm-tag {
  font-family: var(--tb-font-mono);
  font-size: 9px;
  border: 1px solid;   /* color driven by inline tagStyle() */
  border-radius: 3px;
  padding: 1px 5px;
}

.fm-val-dim {
  color: var(--tb-text-dim);
  opacity: 0.5;
}

.fm-edit-btn {
  all: unset;
  cursor: pointer;
  font-size: 11px;
  color: var(--tb-text-dim);
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.fm-row:hover .fm-edit-btn {
  opacity: 1;
}

.fm-edit-btn:hover {
  color: var(--tb-accent);
}

/* ── Note date input (front matter) ──────────────────── */

.fm-date-input {
  background: none;
  border: none;
  outline: none;
  font-family: var(--tb-font-mono);
  font-size: 11px;
  color: var(--tb-text);
  cursor: pointer;
  padding: 0;
  width: auto;
  color-scheme: dark;
}

.fm-date-input:hover {
  color: var(--tb-accent);
}

/* ── Done banner ──────────────────────────────────────── */
#tc-editor-done-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 14px;
  background: color-mix(in srgb, var(--kelp) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--kelp) 25%, transparent);
}

.done-banner-text {
  font-size: 11px;
  font-family: var(--tb-font);
  font-weight: 600;
  color: var(--kelp);
}

.done-banner-undo {
  all: unset;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--tb-font);
  color: var(--tb-text-dim);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--tb-border);
  flex-shrink: 0;
}

.done-banner-undo:hover {
  color: var(--tb-text);
  border-color: var(--tb-border-strong);
}

/* ── Archive banner ───────────────────────────────────── */
#tc-editor-archive-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 14px;
  background: color-mix(in srgb, var(--tb-border-strong) 40%, transparent);
  border-bottom: 1px solid var(--tb-border-strong);
}

.archive-banner-text {
  font-size: 11px;
  font-family: var(--tb-font);
  font-weight: 600;
  color: var(--tb-text-muted);
}

.archive-banner-restore {
  all: unset;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--tb-font);
  font-weight: 600;
  color: var(--tb-text-muted);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--tb-border-strong);
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}

.archive-banner-restore:hover {
  color: var(--tb-accent);
  border-color: var(--tb-accent);
}

/* Dim the textarea when archived (read-only) */
#tc-editor-area[readonly] {
  opacity: 0.65;
  cursor: default;
}

/* ── Editor empty state ───────────────────────────────── */
#tc-editor-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tb-font);
  font-size: 12px;
  color: var(--tb-text-dim);
  font-style: italic;
  user-select: none;
}

/* ── Editor textarea ──────────────────────────────────── */
#tc-editor-area {
  flex: 1;
  width: 100%;
  padding: 12px 14px;
  border: none;
  outline: none;
  resize: none;
  font-size: 12px;
  font-family: var(--tb-font-mono);
  line-height: 1.7;
  color: var(--tb-text);
  background: var(--tb-bg);
  caret-color: var(--tb-accent);
  box-sizing: border-box;
}

#tc-editor-area::placeholder {
  color: var(--tb-text-dim);
  font-style: italic;
}

#tc-editor-area[readonly] {
  cursor: default;
  opacity: 0.5;
}

/* ── Resize handle ────────────────────────────────────── */
#tc-resize-handle {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  position: relative;
  transition: background 0.15s;
  z-index: 1;
}

#tc-resize-handle::after {
  content: '';
  position: absolute;
  inset: 0;
  left: 2px;
  width: 1px;
  background: var(--tb-border);
  transition: background 0.15s, width 0.15s, left 0.15s;
}

#tc-resize-handle:hover::after,
#tc-resize-handle.dragging::after {
  left: 1px;
  width: 3px;
  background: var(--tb-accent);
}

/* ── Inline calendar ───────────────────────────────────── */
.cal-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0 6px;
}

.cal-month {
  flex: 1;
  min-width: 190px;
}

.cal-month-hd {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--tb-font);
  color: var(--tb-text);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  grid-auto-rows: 32px;
  gap: 1px;
  justify-content: center;
}

.cal-wday {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-family: var(--tb-font);
  color: var(--tb-text-dim);
  letter-spacing: 0.04em;
  user-select: none;
}

.cal-day {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: var(--tb-font-mono);
  color: var(--tb-text-muted);
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  box-sizing: border-box;
  transition: background 0.1s, color 0.1s;
}

.cal-day.cal-outside {
  cursor: default;
  visibility: hidden;
}

.cal-day:not(.cal-outside):not(.cal-selected):not(.cal-today):hover {
  background: var(--tb-hover);
  color: var(--tb-text);
}

/* today — accent ring + accent text */
.cal-day.cal-today {
  box-shadow: 0 0 0 2px var(--tb-accent);
  color: var(--tb-accent);
  font-weight: 700;
}

/* selected — solid filled accent circle */
.cal-day.cal-selected {
  background: var(--tb-accent) !important;
  color: var(--tb-bg) !important;
  font-weight: 700;
  box-shadow: none;
}

/* today + selected — filled circle with offset ring to distinguish */
.cal-day.cal-today.cal-selected {
  background: var(--tb-accent) !important;
  color: var(--tb-bg) !important;
  box-shadow: 0 0 0 2px var(--tb-bg), 0 0 0 4px var(--tb-accent);
}

/* ── Due date modal — bridge --tb-* vars (modal is outside .tc-panel) ── */
#m-due-date {
  --tb-accent:    var(--tide);
  --tb-bg:        var(--ocean);
  --tb-hover:     rgba(255, 255, 255, 0.06);
  --tb-text-muted: var(--mist);
  --tb-text-dim:  rgba(176, 190, 197, 0.5);
}

html.light #m-due-date {
  --tb-bg:        #f0f4f0;
  --tb-hover:     rgba(0, 0, 0, 0.05);
  --tb-text-muted: #37474f;
  --tb-text-dim:  rgba(55, 71, 79, 0.5);
}

/* ── Due date modal — wider on desktop to fit two months ── */
@media (min-width: 600px) {
  #m-due-date > .modal {
    max-width: 520px;
    width: 100%;
  }
}

/* ── Recurrence modal — bridge --tb-* vars (modal is outside .tc-panel) ── */
#m-recurrence {
  --tb-accent:      var(--tide);
  --tb-bg:          var(--ocean);
  --tb-bg-secondary: var(--deep, var(--ocean));
  --tb-hover:       rgba(255, 255, 255, 0.06);
  --tb-text:        var(--foam);
  --tb-text-muted:  var(--mist);
  --tb-text-dim:    rgba(176, 190, 197, 0.5);
  --tb-border:      rgba(255, 255, 255, 0.08);
  --tb-font-mono:   'DM Mono', monospace;
}

html.light #m-recurrence {
  --tb-bg:          #f0f4f0;
  --tb-bg-secondary: #e4eae4;
  --tb-hover:       rgba(0, 0, 0, 0.05);
  --tb-text:        #0d2137;
  --tb-text-muted:  #37474f;
  --tb-text-dim:    rgba(55, 71, 79, 0.5);
  --tb-border:      rgba(0, 0, 0, 0.09);
}

/* ── Tags modal — bridge --tb-* vars (outside .tc-panel) ── */
#m-tags {
  --tb-accent:      var(--tide);
  --tb-bg:          var(--ocean);
  --tb-border:      rgba(255, 255, 255, 0.08);
  --tb-border-strong: rgba(255, 255, 255, 0.14);
  --tb-text-dim:    rgba(176, 190, 197, 0.5);
}

html.light #m-tags {
  --tb-bg:          #f0f4f0;
  --tb-border:      rgba(0, 0, 0, 0.09);
  --tb-border-strong: rgba(0, 0, 0, 0.18);
}

/* Tag section label */
.tag-section-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mist);
  margin-bottom: .4rem;
}

/* Available tags in modal — toggle chips */
#tag-available-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  padding: 2px 0;
}

.tag-chip-toggle {
  display: inline-flex;
  align-items: center;
  font-family: 'DM Mono', monospace;
  font-size: .78rem;
  color: var(--mist);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  transition: opacity 0.12s, background 0.12s;
  user-select: none;
}

.tag-chip-toggle:hover {
  background: rgba(255,255,255,.10);
}

.tag-chip-toggle.active {
  font-weight: 600;
  /* color/bg/border driven by inline tagStyle() */
}

.tag-chips-empty {
  font-size: .75rem;
  color: var(--mist);
  opacity: 0.5;
  font-style: italic;
}

/* Settings panel tag chips */
.settings-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: .25rem;
}

.settings-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Mono', monospace;
  font-size: .78rem;
  border: 1px solid;
  border-radius: 4px;
  padding: 2px 6px 2px 9px;
}

.settings-tag-remove {
  all: unset;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.12s;
}

.settings-tag-remove:hover {
  opacity: 1;
}

.settings-tags-empty {
  font-size: .75rem;
  color: var(--mist);
  opacity: 0.5;
  font-style: italic;
  margin: .25rem 0;
}

/* ── Recurrence picker ──────────────────────────────── */
#recur-picker {
  padding: 10px 0 4px;
}

.rp-seg-row {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.rp-seg-btn {
  all: unset;
  cursor: pointer;
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-family: var(--tb-font);
  color: var(--tb-text-muted);
  padding: 5px 0;
  border-radius: 3px;
  border: 1px solid var(--tb-border);
  transition: background 0.1s, color 0.1s;
}

.rp-seg-btn:hover {
  background: var(--tb-hover);
  color: var(--tb-text);
}

.rp-seg-btn.active {
  background: var(--tb-accent);
  color: var(--tb-bg);
  border-color: var(--tb-accent);
  font-weight: 600;
}

.rp-section {
  margin-bottom: 8px;
}

.rp-label {
  font-size: 10px;
  font-family: var(--tb-font);
  color: var(--tb-text-dim);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.rp-days {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
}

.rp-day {
  all: unset;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--tb-font);
  color: var(--tb-text-muted);
  padding: 3px 5px;
  border-radius: 3px;
  border: 1px solid var(--tb-border);
  text-align: center;
}

.rp-day:hover {
  border-color: var(--tb-accent);
  color: var(--tb-accent);
}

.rp-day.on {
  background: var(--tb-accent);
  color: var(--tb-bg);
  border-color: var(--tb-accent);
  font-weight: 600;
}

.rp-interval {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rp-unit {
  font-size: 11px;
  font-family: var(--tb-font);
  color: var(--tb-text-dim);
}

.rp-num {
  width: 44px;
  background: var(--tb-bg-secondary, var(--tb-bg));
  border: 1px solid var(--tb-border);
  border-radius: 3px;
  color: var(--tb-text);
  font-size: 12px;
  font-family: var(--tb-font-mono, monospace);
  text-align: center;
  padding: 3px 4px;
}

.rp-radio {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-family: var(--tb-font);
  color: var(--tb-text-muted);
  padding: 3px 0;
  cursor: pointer;
}

.rp-radio input { cursor: pointer; accent-color: var(--tb-accent); }

.rp-preview {
  font-size: 11px;
  font-family: var(--tb-font-mono, monospace);
  color: var(--tb-text-dim);
  padding: 8px 0 2px;
  border-top: 1px solid var(--tb-border);
  margin-top: 10px;
}

.rp-preview strong {
  color: var(--tb-accent);
  font-weight: 600;
}

/* ── Rename modal — constrain width on desktop only ─── */
@media (min-width: 600px) {
  #m-rename-task > .modal {
    max-width: 300px;
    width: 100%;
  }
}

/* ── Recurrence modal — slightly wider for the day row ─── */
@media (min-width: 600px) {
  #m-recurrence > .modal {
    max-width: 320px;
    width: 100%;
  }
}

/* ── Mobile layout ────────────────────────────────────── */
@media (max-width: 680px) {
  .tc-panel {
    flex-direction: column;
    position: relative;
  }

  /* Stack project pane above the list/editor */
  #tc-main-row {
    flex-direction: column;
  }

  /* Project pane: horizontal scrollable chip bar */
  #tc-project-pane {
    width: 100%;
    flex-direction: row;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--tb-border);
    flex-shrink: 0;
  }

  /* Keep header visible (holds + button) but compact */
  .proj-pane-header {
    flex-direction: column;
    justify-content: center;
    gap: 0;
    border-bottom: none;
    border-right: 1px solid var(--tb-border);
    padding: 0 7px;
    width: auto;
    flex-shrink: 0;
  }

  .proj-pane-header > span {
    display: none;
  }

  #tc-project-list {
    flex-direction: row;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 4px;
    align-items: stretch;
    scrollbar-width: none;
  }

  #tc-project-list::-webkit-scrollbar {
    display: none;
  }

  .proj-item {
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 6px 10px;
    align-items: center;
  }

  .proj-item--active {
    background: transparent;
    border-left-color: transparent;
    border-bottom-color: var(--tb-accent);
  }

  .proj-del-btn {
    display: none;
  }

  /* Replace horizontal chip bar with a modal-trigger button */
  #tc-project-list {
    display: none;
  }

  #tc-project-mobile-btn {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    all: unset;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--tb-font-mono);
    color: var(--tb-text);
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #tc-list-pane {
    flex: 1;
    width: 100%;
  }

  #tc-resize-handle {
    display: none;
  }

  #tc-editor-pane {
    display: none;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    flex: 1;
    border-left: none;
    border-top: 1px solid var(--tb-border);
  }

  #tc-editor-area {
    min-width: 0;
  }

  #tc-editor-pane.tc-pane--active {
    display: flex;
  }

  #tc-list-pane.tc-pane--hidden {
    display: none;
  }

  #tc-editor-back-row {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--tb-border);
    background: var(--tb-bg-secondary);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ── Light mode overrides ── */
html.light .tc-panel {
  --tb-bg:            #f0f4f0;
  --tb-bg-secondary:  #e4eae4;
  --tb-text:          #0d2137;
  --tb-text-muted:    #37474f;
  --tb-text-dim:      rgba(55, 71, 79, 0.5);
  --tb-border:        rgba(0, 0, 0, 0.09);
  --tb-border-strong: rgba(0, 0, 0, 0.16);
  --tb-hover:         rgba(0, 0, 0, 0.05);
  --tb-success-bg:    rgba(0, 105, 92, 0.1);
  --tb-error-bg:      rgba(216, 67, 21, 0.09);
  --tb-warning-bg:    rgba(184, 134, 11, 0.1);
  --tb-info-bg:       rgba(2, 119, 189, 0.09);
}