/* ═══════════════════════════════════════════════════════════════
dash2 — urIssue reimagined.
Design language: Microsoft To-Do — calm, list-first, one accent.
Light theme default; .dark on flips tokens.
═══════════════════════════════════════════════════════════════ */
:root {
--accent: #2564cf;
--accent-soft: #e8f0fe;
--accent-text: #2564cf;
--bg: #f4f4f6;
--bg-side: #ebebef;
--bg-panel: #ffffff;
--bg-hover: rgba(0,0,0,0.045);
--bg-active: rgba(37,100,207,0.10);
--text: #1f2328;
--text-2: #605e5c;
--text-3: #8a8886;
--line: rgba(0,0,0,0.08);
--shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 14px rgba(0,0,0,0.05);
--shadow-lg: 0 6px 28px rgba(0,0,0,0.16);
--danger: #d13438;
--warn: #b8860b;
--ok: #107c41;
--p0: #d13438; /* important / high */
--p1: #2564cf; /* normal */
--p2: #8a8886; /* low */
--r: 8px;
--font: 'Inter', -apple-system, "Segoe UI", sans-serif;
--w-side: 420px; /* left pane width (user-resizable, defaults to max) */
--w-detail: 620px; /* right pane width (user-resizable, defaults to max) */
}
html.dark {
--accent: #4f8bfa;
--accent-soft: rgba(79,139,250,0.14);
--accent-text: #7caaff;
--bg: #17181c;
--bg-side: #1e2025;
--bg-panel: #24262c;
--bg-hover: rgba(255,255,255,0.055);
--bg-active: rgba(79,139,250,0.16);
--text: #eceff4;
--text-2: #a8adb6;
--text-3: #6f747d;
--line: rgba(255,255,255,0.09);
--shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.3);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.55);
--p2: #9aa0a8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: var(--font);
font-size: 14px;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
[hidden] { display: none !important; }
.app { display: flex; height: 100dvh; }
/* ═══════════ Sidebar ═══════════ */
.sidebar {
flex: 0 0 var(--w-side); width: var(--w-side); min-width: 0;
background: var(--bg-side);
display: flex; flex-direction: column;
border-right: 1px solid var(--line);
}
/* Pane resize handles */
.resizer {
flex: 0 0 5px; width: 5px; margin: 0 -2px; z-index: 30;
cursor: col-resize; position: relative;
}
.resizer::after {
content: ""; position: absolute; inset: 0 1.5px;
background: transparent; border-radius: 2px; transition: background 0.12s;
}
.resizer:hover::after, .resizer.active::after { background: var(--accent); opacity: 0.55; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .sidebar, body.resizing .detail, body.resizing .main { pointer-events: none; }
.sb-head { padding: 14px 12px 8px; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; position: relative; cursor: pointer; border-radius: var(--r); }
.sb-user:hover .sb-user-name { color: var(--accent-text); }
.sb-caret { font-size: 10px; color: var(--text-3); }
/* Avatar / brand dropdown */
.user-menu {
position: absolute; top: calc(100% + 2px); left: 0; z-index: 90;
min-width: 210px;
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: 6px;
}
.um-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: 7px;
color: var(--text); font-size: 13.5px; font-weight: 500;
text-decoration: none; cursor: pointer;
}
.um-item:hover { background: var(--bg-hover); }
.um-item .um-ic { width: 18px; text-align: center; color: var(--accent-text); flex-shrink: 0; }
.um-item .um-label { flex: 1; }
.um-item .um-label b { color: var(--accent-text); }
.um-item .um-ext { color: var(--text-3); font-size: 12px; }
.um-sep { height: 1px; background: var(--line); margin: 5px 8px; }
.sb-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: var(--accent); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 14px; text-transform: uppercase;
flex-shrink: 0;
}
.sb-user-meta { flex: 1; min-width: 0; }
.sb-user-name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.sb-user-email { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
width: 30px; height: 30px; border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-2); flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.sb-search {
display: flex; align-items: center; gap: 8px;
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 7px 10px;
color: var(--text-3);
}
.sb-search:focus-within { border-color: var(--accent); }
.sb-search input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; }
.sb-search input::placeholder { color: var(--text-3); }
.sb-search-clear { color: var(--text-3); font-size: 16px; line-height: 1; display: none; }
.sb-search.has-q .sb-search-clear { display: block; }
.sb-nav { padding: 4px 8px; }
.sb-lists { flex: 1; overflow-y: auto; }
.sb-item {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 8px 10px;
border-radius: var(--r);
color: var(--text);
font-size: 13.5px;
text-align: left;
}
.sb-item:hover { background: var(--bg-hover); }
.sb-item.active { background: var(--bg-active); color: var(--accent-text); font-weight: 600; }
.sb-item .sb-ic { width: 18px; display: inline-flex; justify-content: center; flex-shrink: 0; color: var(--text-2); }
.sb-item.active .sb-ic { color: var(--accent-text); }
.sb-item .sb-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item .sb-count { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.sb-item.active .sb-count { color: var(--accent-text); }
.sb-sep { height: 1px; background: var(--line); margin: 8px 16px; }
.sb-lists-label {
padding: 4px 20px 4px; font-size: 11px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}
.sb-foot { padding: 8px; border-top: 1px solid var(--line); }
.sb-newlist {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 9px 10px; border-radius: var(--r);
color: var(--accent-text); font-weight: 600; font-size: 13.5px;
}
.sb-newlist:hover { background: var(--bg-hover); }
.sb-scrim { display: none; }
/* ═══════════ Main ═══════════ */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-head {
display: flex; align-items: center; gap: 12px;
padding: 20px 28px 10px;
}
.main-title-wrap { flex: 1; min-width: 0; }
.main-title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.main-title .accent { color: var(--accent-text); }
.main-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.main-actions { display: flex; gap: 6px; align-items: center; }
.chip-btn {
font-size: 12.5px; padding: 6px 12px; border-radius: 20px;
border: 1px solid var(--line); color: var(--text-2); background: var(--bg-panel);
}
.chip-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.chip-btn.active { border-color: var(--accent); color: var(--accent-text); }
.chip-btn b { font-weight: 600; }
.sort-wrap { position: relative; }
.sort-menu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; min-width: 190px; z-index: 60; }
.mobile-only { display: none; }
/* Quick add */
.quick-add { padding: 8px 28px 4px; }
.qa-inner {
display: flex; align-items: center; gap: 10px;
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 11px 14px;
box-shadow: var(--shadow);
}
.qa-inner:focus-within { border-color: var(--accent); }
.qa-plus { color: var(--accent-text); display: inline-flex; }
#quickAdd { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; min-width: 0; }
#quickAdd::placeholder { color: var(--text-3); }
.qa-go {
font-size: 12.5px; font-weight: 600; color: var(--accent-text);
padding: 4px 10px; border-radius: 6px; opacity: 0; pointer-events: none;
transition: opacity 0.15s;
}
.qa-inner:focus-within .qa-go, .qa-go.show { opacity: 1; pointer-events: auto; }
.qa-go:hover { background: var(--accent-soft); }
/* List area */
.list-scroll { flex: 1; overflow-y: auto; padding: 8px 28px 40px; }
.group-head {
display: flex; align-items: center; gap: 8px;
padding: 16px 4px 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2);
cursor: pointer; user-select: none;
}
.group-head:first-child { padding-top: 6px; }
.group-head .gh-count { color: var(--text-3); font-weight: 500; }
.group-head .gh-chev { transition: transform 0.15s; display: inline-flex; color: var(--text-3); }
.group-head.collapsed .gh-chev { transform: rotate(-90deg); }
.group-head.overdue { color: var(--danger); }
.rows { display: flex; flex-direction: column; gap: 8px; }
/* One card = task row + (optional) tracking module, visually inseparable */
.task-item {
background: var(--bg-panel);
border-radius: var(--r);
box-shadow: var(--shadow);
border: 1px solid transparent;
overflow: hidden;
}
.task-item:hover { border-color: var(--line); }
html.dark .task-item:hover { border-color: rgba(255,255,255,0.14); }
.task-item.selected { border-color: var(--accent); }
.row {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s;
}
.row.dragging { opacity: 0.45; }
.row.completing { animation: rowDone 0.35s ease; }
@keyframes rowDone { 30% { transform: translateX(4px); } }
/* Standalone rows (day popover) keep their own card look */
.day-pop .row { background: var(--bg-panel); border-radius: var(--r); }
.check {
width: 19px; height: 19px; border-radius: 50%;
border: 1.6px solid var(--text-3);
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
color: transparent; transition: all 0.12s; background: transparent;
}
.check:hover { border-color: var(--accent); color: var(--accent); }
.check.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.check svg { display: block; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 14px; line-height: 1.35; word-break: break-word; }
.row.done .row-title { color: var(--text-3); text-decoration: line-through; }
.row-meta {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 11.5px; color: var(--text-3); margin-top: 2px;
}
.row-meta .m { display: inline-flex; align-items: center; gap: 4px; }
.row-meta .m.overdue { color: var(--danger); font-weight: 600; }
.row-meta .m.today { color: var(--accent-text); font-weight: 600; }
.row-meta .dotsep::before { content: "•"; color: var(--text-3); opacity: 0.6; }
.row-meta .m.blocked { color: var(--warn); font-weight: 600; }
.star { color: var(--text-3); flex-shrink: 0; }
.star:hover { color: var(--p0); }
.star.on { color: var(--p0); }
/* ── Inline activity (tracking) under each task row ── */
.row-act-latest {
display: flex; align-items: center; gap: 6px;
font-size: 11.5px; color: var(--text-2); margin-top: 4px;
min-width: 0;
}
.row-act-latest .al-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row-act-latest .al-time { color: var(--text-3); flex-shrink: 0; }
.al-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.al-dot.t-blocker { background: var(--danger); }
.al-dot.t-progress { background: var(--ok); }
.al-dot.t-decision { background: var(--warn); }
.hist-btn {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 600; color: var(--text-3);
padding: 3px 8px; border-radius: 12px; border: 1px solid transparent;
flex-shrink: 0;
}
.hist-btn:hover { color: var(--accent-text); border-color: var(--line); }
.hist-btn.on { color: var(--accent-text); background: var(--accent-soft); }
.row-act-panel {
margin: 0;
background: rgba(0,0,0,0.025);
border-top: 1px solid var(--line);
border-left: 3px solid var(--accent);
padding: 6px 14px 8px 42px;
display: flex; flex-direction: column;
}
html.dark .row-act-panel { background: rgba(255,255,255,0.025); }
/* No height cap — each card grows to fit its full tracking history. */
.ra-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.ra-item .al-dot { margin-top: 0; }
.ra-text {
flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
font-size: 12.5px; color: var(--text); padding: 3px 4px; border-radius: 4px;
border: 1px solid transparent;
}
.ra-text:hover { border-color: var(--line); }
.ra-text:focus { border-color: var(--accent); background: var(--bg); }
.ra-type {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
border: 0; outline: 0; background: transparent; color: var(--text-3);
cursor: pointer; padding: 2px; border-radius: 4px; flex-shrink: 0;
-webkit-appearance: none; appearance: none; text-align: right;
}
.ra-type.t-note { color: var(--accent-text); }
.ra-type.t-blocker { color: var(--danger); }
.ra-type.t-progress { color: var(--ok); }
.ra-type.t-decision { color: var(--warn); }
html.dark .ra-type option { background: var(--bg-panel); }
.ra-time { font-size: 10.5px; color: var(--text-3); flex-shrink: 0; min-width: 76px; text-align: right; }
.ra-del { color: var(--text-3); font-size: 14px; opacity: 0; padding: 0 4px; flex-shrink: 0; }
.ra-item:hover .ra-del { opacity: 1; }
.ra-del:hover { color: var(--danger); }
.ra-composer { display: flex; align-items: center; gap: 8px; padding: 2px 0 4px; }
.ra-entries:not(:empty) { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
/* ── Memos (rich-text details on activity entries) ── */
.ra-memo-btn {
display: inline-flex; align-items: center; color: var(--text-3);
padding: 3px 5px; border-radius: 4px; flex-shrink: 0; opacity: 0.55;
}
.ra-item:hover .ra-memo-btn { opacity: 1; }
.ra-memo-btn.has { color: var(--accent-text); opacity: 1; }
.ra-memo-btn.on { background: var(--accent-soft); color: var(--accent-text); opacity: 1; }
.ra-memo-btn:hover { color: var(--accent-text); }
.d-act-memo { color: var(--text-3); font-size: 11px; font-weight: 600; }
.d-act-memo.has { color: var(--accent-text); }
.d-act-memo:hover { text-decoration: underline; }
.ra-memo {
margin: 2px 0 8px 15px;
border-left: 2px solid var(--line);
padding: 6px 10px;
font-size: 12.5px;
}
.memo-view { line-height: 1.55; color: var(--text); word-break: break-word; }
.memo-view p { margin: 0 0 6px; }
.memo-view ul, .memo-view ol { margin: 4px 0; padding-left: 20px; }
.memo-view a { color: var(--accent-text); }
.memo-view img { max-width: 100%; border-radius: 6px; }
.memo-empty { color: var(--text-3); font-style: italic; }
.memo-toolbar {
display: flex; gap: 2px; align-items: center;
padding: 4px; border: 1px solid var(--line); border-bottom: 0;
border-radius: 6px 6px 0 0; background: var(--bg-hover);
}
.memo-toolbar button {
min-width: 26px; height: 24px; border-radius: 4px; font-size: 12px;
color: var(--text-2); display: inline-flex; align-items: center; justify-content: center;
padding: 0 5px;
}
.memo-toolbar button:hover { background: var(--bg-active); color: var(--accent-text); }
.memo-toolbar .mt-sep { width: 1px; height: 14px; background: var(--line); margin: 0 4px; }
.memo-editor {
min-height: 64px; max-height: 300px; overflow-y: auto;
border: 1px solid var(--line); border-radius: 0 0 6px 6px;
padding: 8px 10px; outline: 0; line-height: 1.55;
background: var(--bg); color: var(--text);
}
.memo-editor:focus { border-color: var(--accent); }
.memo-editor ul, .memo-editor ol { margin: 4px 0; padding-left: 20px; }
.memo-editor a { color: var(--accent-text); }
.memo-actions { display: flex; gap: 12px; padding-top: 6px; }
.memo-save { color: var(--accent-text); font-weight: 700; font-size: 12px; }
.memo-save:hover { text-decoration: underline; }
.memo-cancel, .memo-editbtn { color: var(--text-3); font-size: 12px; font-weight: 600; }
.memo-cancel:hover, .memo-editbtn:hover { color: var(--accent-text); }
.ra-composer .al-dot { opacity: 0.4; }
.ra-composer input.ra-new {
flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
font-size: 12.5px; color: var(--text); padding: 3px 4px;
}
.ra-composer input.ra-new::placeholder { color: var(--text-3); }
.ra-post { color: var(--accent-text); font-weight: 600; font-size: 12px; flex-shrink: 0; }
.ra-post:hover { text-decoration: underline; }
.empty {
text-align: center; color: var(--text-3); padding: 60px 20px;
font-size: 13.5px; line-height: 1.7;
}
.empty .big { font-size: 34px; display: block; margin-bottom: 8px; }
/* ═══════════ Calendar ═══════════ */
.cal-wrap { flex: 1; display: flex; flex-direction: column; padding: 4px 28px 20px; min-height: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 12px; }
.cal-title { font-size: 16px; font-weight: 700; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-today-btn {
font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 6px;
border: 1px solid var(--line); color: var(--text-2); background: var(--bg-panel);
}
.cal-today-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding-bottom: 4px; }
.cal-dow span { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 8px; }
.cal-grid {
flex: 1; display: grid; grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 1fr; gap: 6px; min-height: 0;
}
.cal-cell {
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 6px;
display: flex; flex-direction: column; gap: 3px;
min-height: 0; overflow: hidden;
cursor: pointer;
}
.cal-cell.other { opacity: 0.45; }
.cal-cell.today { border-color: var(--accent); }
.cal-cell.dragover { border-color: var(--accent); background: var(--accent-soft); }
.cal-cell .cc-date {
font-size: 11.5px; font-weight: 600; color: var(--text-2);
display: flex; justify-content: flex-end;
}
.cal-cell.today .cc-date span {
background: var(--accent); color: #fff; border-radius: 50%;
width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
}
.cal-chip {
font-size: 11px; line-height: 1.3; padding: 3px 6px; border-radius: 5px;
background: var(--accent-soft); color: var(--accent-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
cursor: grab; border-left: 3px solid var(--accent);
flex-shrink: 0;
}
.cal-chip.due { background: rgba(209,52,56,0.1); color: var(--danger); border-left-color: var(--danger); }
html.dark .cal-chip.due { background: rgba(255,110,110,0.14); color: #ff8f8f; }
.cal-chip.done { opacity: 0.55; text-decoration: line-through; }
.cal-chip:active { cursor: grabbing; }
.cal-more { font-size: 10.5px; color: var(--text-3); padding-left: 4px; }
.cal-legend {
display: flex; gap: 18px; align-items: center; padding-top: 10px;
font-size: 11.5px; color: var(--text-3);
}
.cal-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }
.cal-dot.sched { background: var(--accent); }
.cal-dot.due { background: var(--danger); }
.cal-hint { margin-left: auto; }
/* Day drawer (click a calendar day) */
.day-pop {
position: fixed; z-index: 60;
width: 320px; max-height: 420px;
background: var(--bg-panel); border: 1px solid var(--line);
border-radius: 12px; box-shadow: var(--shadow-lg);
display: flex; flex-direction: column; overflow: hidden;
}
.day-pop-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px; border-bottom: 1px solid var(--line);
font-weight: 700; font-size: 13.5px;
}
.day-pop-close { color: var(--text-3); font-size: 18px; line-height: 1; }
.day-pop-body { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.day-pop-add { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.day-pop-add input {
flex: 1; border: 1px solid var(--line); border-radius: 6px;
padding: 7px 10px; background: transparent; outline: 0; min-width: 0;
}
.day-pop-add input:focus { border-color: var(--accent); }
.day-pop-add button { color: var(--accent-text); font-weight: 600; font-size: 13px; }
.day-pop .row { box-shadow: none; border: 1px solid var(--line); padding: 8px 10px; }
/* ═══════════ Detail pane ═══════════ */
.detail {
flex: 0 0 var(--w-detail); width: var(--w-detail); min-width: 0;
background: var(--bg-side);
border-left: 1px solid var(--line);
display: flex; flex-direction: column;
}
.d-placeholder {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; color: var(--text-3); text-align: center; padding: 30px; font-size: 13px; line-height: 1.6;
}
.d-placeholder .ph-ic { opacity: 0.5; }
/* Right-pane project → issues tree */
.tree { display: flex; flex-direction: column; gap: 2px; }
.tree-title {
font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--text-3); padding: 4px 6px 10px;
}
.tree-group { margin-bottom: 10px; }
.tree-proj {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 8px 10px; border-radius: var(--r);
font-weight: 700; font-size: 13.5px; color: var(--text); text-align: left;
}
.tree-proj:hover { background: var(--bg-hover); }
.tree-proj .tp-ic { color: var(--text-2); display: inline-flex; flex-shrink: 0; }
.tree-proj .tp-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-proj .tp-count { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.tree-issue {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 6px 10px 6px 26px; border-radius: 6px;
font-size: 13px; color: var(--text-2); text-align: left;
}
.tree-issue:hover { background: var(--bg-hover); color: var(--text); }
.tree-issue .ti-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tree-issue .ti-dot.p0 { background: var(--p0); }
.tree-issue .ti-dot.p1 { background: var(--p1); }
.tree-issue .ti-dot.p2 { background: var(--p2); }
.tree-issue .ti-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-issue .ti-flag { flex-shrink: 0; font-size: 11px; }
.tree-issue .ti-flag.od { color: var(--danger); font-weight: 800; }
.tree-empty { padding: 4px 10px 4px 26px; font-size: 12px; color: var(--text-3); font-style: italic; }
/* Back bar at top of task detail */
.d-back {
display: flex; align-items: center; gap: 6px;
color: var(--text-2); font-size: 12.5px; font-weight: 600;
padding: 6px 8px; border-radius: 6px; align-self: flex-start;
}
.d-back:hover { background: var(--bg-hover); color: var(--accent-text); }
.detail-inner { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.detail-scrim { display: none; }
.d-card {
background: var(--bg-panel); border-radius: var(--r);
box-shadow: var(--shadow); padding: 4px 0;
}
.d-card.pad { padding: 12px 14px; }
.d-titlebar { display: flex; align-items: flex-start; gap: 12px; padding: 14px; }
.d-titlebar .check { margin-top: 2px; }
.d-title {
flex: 1; font-size: 15.5px; font-weight: 600; line-height: 1.4;
border: 0; outline: 0; background: transparent; resize: none;
font-family: inherit; color: var(--text); padding: 0;
}
.d-title.done { color: var(--text-3); text-decoration: line-through; }
.d-titlebar .star { margin-top: 2px; }
.d-row {
display: flex; align-items: center; gap: 12px;
padding: 11px 14px; cursor: pointer; color: var(--text-2);
font-size: 13.5px; width: 100%; text-align: left;
border-radius: 6px;
}
.d-row:hover { background: var(--bg-hover); }
.d-row .d-ic { width: 18px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.d-row.set { color: var(--accent-text); font-weight: 600; }
.d-row.set.overdue { color: var(--danger); }
.d-row .d-clear { margin-left: auto; color: var(--text-3); font-size: 16px; padding: 0 4px; border-radius: 4px; }
.d-row .d-clear:hover { color: var(--danger); }
.d-row input[type="date"] {
border: 0; background: transparent; outline: 0; color: inherit;
font-family: inherit; font-size: 13px; margin-left: auto;
}
.d-sep { height: 1px; background: var(--line); margin: 0 14px; }
/* steps */
.d-steps { display: flex; flex-direction: column; }
.d-step { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.d-step:hover { background: var(--bg-hover); }
.d-step .check { width: 16px; height: 16px; }
.d-step input.st-title {
flex: 1; border: 0; outline: 0; background: transparent; font-size: 13.5px; min-width: 0;
}
.d-step.done input.st-title { color: var(--text-3); text-decoration: line-through; }
.d-step .st-del { color: var(--text-3); font-size: 15px; opacity: 0; padding: 2px 6px; border-radius: 4px; }
.d-step:hover .st-del { opacity: 1; }
.d-step .st-del:hover { color: var(--danger); }
.d-addstep { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.d-addstep .plus { color: var(--accent-text); display: inline-flex; }
.d-addstep input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 13.5px; min-width: 0; }
.d-progress { padding: 4px 14px 10px; font-size: 11.5px; color: var(--text-3); }
.d-progress .bar { height: 3px; background: var(--bg-hover); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.d-progress .bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.25s; }
/* priority segment */
.d-prio { display: flex; gap: 6px; padding: 10px 14px; align-items: center; }
.d-prio .lbl { font-size: 12.5px; color: var(--text-2); margin-right: auto; display: flex; align-items: center; gap: 10px; }
.prio-btn {
font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 14px;
border: 1px solid var(--line); color: var(--text-3);
}
.prio-btn.on.pp0 { background: rgba(209,52,56,0.12); border-color: var(--p0); color: var(--p0); }
.prio-btn.on.pp1 { background: var(--accent-soft); border-color: var(--p1); color: var(--accent-text); }
.prio-btn.on.pp2 { background: var(--bg-hover); border-color: var(--text-3); color: var(--text-2); }
/* list picker */
.d-row select {
margin-left: auto; border: 0; background: transparent; outline: 0;
color: var(--text); font-size: 13px; max-width: 55%;
}
html.dark .d-row select option { background: var(--bg-panel); }
/* notes */
.d-note {
width: 100%; border: 0; outline: 0; background: transparent; resize: vertical;
min-height: 70px; font-size: 13.5px; line-height: 1.55; color: var(--text);
font-family: inherit;
}
.d-note::placeholder { color: var(--text-3); }
.d-savehint { font-size: 11px; color: var(--text-3); text-align: right; height: 14px; }
/* attachments */
.d-files { display: flex; flex-direction: column; gap: 6px; }
.d-file {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
font-size: 12.5px; color: var(--text); text-decoration: none;
}
.d-file:hover { border-color: var(--accent); }
.d-file .f-ic { color: var(--accent-text); display: inline-flex; flex-shrink: 0; }
.d-file .f-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-file .f-size { color: var(--text-3); font-size: 11px; }
.d-upload {
display: flex; align-items: center; gap: 8px; color: var(--accent-text);
font-size: 13px; font-weight: 600; padding: 8px 0 2px; cursor: pointer;
}
.d-upload:hover { text-decoration: underline; }
/* activity */
.d-activity { display: flex; flex-direction: column; gap: 10px; }
.d-act-composer { display: flex; flex-direction: column; gap: 8px; }
.d-act-input {
width: 100%; border: 1px solid var(--line); border-radius: 6px;
padding: 8px 10px; background: transparent; outline: 0; resize: none;
font-size: 13px; font-family: inherit; color: var(--text); min-height: 36px;
}
.d-act-input:focus { border-color: var(--accent); }
.d-act-bar { display: flex; align-items: center; gap: 6px; }
.act-type {
font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 12px;
border: 1px solid var(--line); color: var(--text-3);
}
.act-type.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.act-type.on.t-blocker { background: rgba(209,52,56,0.12); border-color: var(--danger); color: var(--danger); }
.d-act-post { margin-left: auto; color: var(--accent-text); font-weight: 600; font-size: 13px; padding: 4px 10px; border-radius: 6px; }
.d-act-post:hover { background: var(--accent-soft); }
.d-act-item { display: flex; gap: 10px; }
.d-act-edit {
width: 100%; border: 1px solid transparent; border-radius: 4px; outline: 0;
background: transparent; resize: none; font-family: inherit;
font-size: 13px; line-height: 1.5; color: var(--text); padding: 2px 4px;
}
.d-act-edit:hover { border-color: var(--line); }
.d-act-edit:focus { border-color: var(--accent); background: var(--bg); }
.d-act-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 3px; }
.d-act-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.d-act-dot.t-blocker { background: var(--danger); }
.d-act-dot.t-progress { background: var(--ok); }
.d-act-dot.t-decision { background: var(--warn); }
.d-act-line { width: 1.5px; flex: 1; background: var(--line); margin-top: 4px; }
.d-act-body { flex: 1; min-width: 0; padding-bottom: 8px; }
.d-act-summary { font-size: 13px; line-height: 1.5; word-break: break-word; }
.d-act-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; display: flex; gap: 8px; align-items: center; }
.d-act-del { color: var(--text-3); font-size: 13px; opacity: 0; }
.d-act-item:hover .d-act-del { opacity: 1; }
.d-act-del:hover { color: var(--danger); }
.d-act-type-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.d-act-type-tag.t-blocker { color: var(--danger); }
.d-act-type-tag.t-progress { color: var(--ok); }
.d-act-type-tag.t-decision { color: var(--warn); }
.d-act-type-tag.t-note { color: var(--accent-text); }
.d-section-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-3); padding: 2px 2px 6px;
}
.d-foot {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 4px 4px; color: var(--text-3); font-size: 11.5px;
}
.d-foot .d-close-btn, .d-foot .d-del-btn {
color: var(--text-3); padding: 6px; border-radius: 6px; display: inline-flex;
}
.d-foot .d-close-btn:hover { background: var(--bg-hover); color: var(--text); }
.d-foot .d-del-btn:hover { background: rgba(209,52,56,0.1); color: var(--danger); }
.d-blocked-banner {
display: flex; align-items: center; gap: 10px;
background: rgba(209,52,56,0.09); border: 1px solid rgba(209,52,56,0.35);
color: var(--danger); border-radius: var(--r); padding: 10px 14px;
font-size: 13px; font-weight: 600;
}
.d-blocked-banner button {
margin-left: auto; font-size: 12px; font-weight: 700;
color: var(--danger); text-decoration: underline;
}
/* ═══════════ Toasts ═══════════ */
.toast-wrap {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; gap: 8px; z-index: 100; align-items: center;
}
.toast {
background: var(--text); color: var(--bg-panel);
padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 500;
box-shadow: var(--shadow-lg);
animation: toastIn 0.2s ease;
display: flex; gap: 14px; align-items: center;
}
.toast button { color: var(--accent-soft); font-weight: 700; font-size: 12.5px; }
html.dark .toast { background: #3a3d45; color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
/* ═══════════ Modal (new list / rename) ═══════════ */
.modal-scrim {
position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 80;
display: flex; align-items: center; justify-content: center;
}
.modal {
background: var(--bg-panel); border-radius: 12px; box-shadow: var(--shadow-lg);
width: 340px; max-width: calc(100vw - 40px); padding: 20px;
}
.modal h3 { font-size: 15px; margin-bottom: 14px; }
.modal input {
width: 100%; border: 1px solid var(--line); border-radius: 6px;
padding: 9px 12px; background: transparent; outline: 0; font-size: 14px;
}
.modal input:focus { border-color: var(--accent); }
.modal-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-btns .btn { padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.modal-btns .btn.primary { background: var(--accent); color: #fff; }
.modal-btns .btn.ghost { color: var(--text-2); }
.modal-btns .btn.ghost:hover { background: var(--bg-hover); }
.modal-btns .btn.danger { background: var(--danger); color: #fff; }
/* ═══════════ Responsive ═══════════ */
@media (max-width: 1100px) {
.detail { position: fixed; right: 0; top: 0; bottom: 0; z-index: 70; box-shadow: var(--shadow-lg); width: 380px; }
.detail-scrim.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 65; }
#rzRight { display: none; }
}
@media (max-width: 768px) {
.mobile-only { display: inline-flex; }
#rzLeft { display: none; }
.sidebar {
position: fixed; left: 0; top: 0; bottom: 0; z-index: 75; width: 264px;
transform: translateX(-100%); transition: transform 0.2s ease;
box-shadow: var(--shadow-lg);
}
.sidebar.open { transform: translateX(0); }
.sb-scrim.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 72; }
.main-head { padding: 14px 16px 8px; }
.quick-add { padding: 6px 16px 4px; }
.list-scroll { padding: 6px 16px 90px; }
.cal-wrap { padding: 4px 12px 14px; }
.detail { width: 100vw; min-width: 100vw; }
.cal-hint { display: none; }
.day-pop { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.35); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
/* ═══════════════════════════════════════════════════════════════
Update completion + per-update attachments
An activity entry is a checkable item: cl_issue_events.completed_at
(the same flag the legacy dashboard toggled), and every file hangs off
the update it was posted with rather than off the task at large.
═══════════════════════════════════════════════════════════════ */
/* ── Checkbox on an inline (center pane) update ── */
.ra-check { width: 15px; height: 15px; border-width: 1.5px; }
.ra-check svg { width: 9px; height: 9px; }
.ra-item.done .ra-text { color: var(--text-3); text-decoration: line-through; }
.ra-item.done .al-dot { opacity: 0.4; }
.ra-item.done .ra-type { opacity: 0.55; }
.ra-item.done .ra-time { color: var(--ok); }
html.dark .ra-item.done .ra-time { color: #4ec27e; }
.row-act-latest.done .al-text { color: var(--text-3); text-decoration: line-through; }
.row-act-latest.done .al-dot { opacity: 0.4; }
/* "N of M done" strip above the entries */
.ra-entries-head {
display: flex; align-items: center; justify-content: flex-end;
font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
color: var(--text-3); padding: 2px 2px 0;
}
/* Outstanding-updates chip on the task row */
.row-meta .m.open-upd { color: var(--warn); font-weight: 600; }
.row-meta .m.all-done { color: var(--ok); font-weight: 600; }
html.dark .row-meta .m.all-done { color: #4ec27e; }
/* ── Paperclip buttons (composer + per-entry) ── */
.ra-clip {
display: inline-flex; align-items: center; gap: 2px; color: var(--text-3);
padding: 3px 5px; border-radius: 4px; flex-shrink: 0; opacity: 0.55;
}
.ra-item:hover .ra-clip, .ra-composer:hover .ra-clip { opacity: 1; }
.ra-clip:hover { color: var(--accent-text); }
.ra-clip.has { color: var(--accent-text); opacity: 1; }
.ra-clip b { font-size: 10px; font-weight: 700; }
/* Files queued on a composer, before the update is posted */
.ra-queued {
font-size: 11px; color: var(--text-2); padding: 2px 0 4px 15px;
display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.ra-queued button { color: var(--accent-text); font-size: 11px; font-weight: 600; }
.ra-queued button:hover { text-decoration: underline; }
/* ── File chips shown under the update they belong to ── */
.ra-files {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0 0 6px 15px; padding: 0;
}
.d-act-body .ra-files { margin: 4px 0 2px; }
.ra-file {
display: inline-flex; align-items: center; max-width: 100%;
border: 1px solid var(--line); border-radius: 12px;
background: var(--bg-panel); overflow: hidden;
}
.ra-file:hover { border-color: var(--accent); }
.ra-file > a {
display: inline-flex; align-items: center; gap: 6px; min-width: 0;
padding: 3px 4px 3px 9px; text-decoration: none;
font-size: 11.5px; color: var(--text);
}
.ra-file .rf-ic { color: var(--accent-text); display: inline-flex; flex-shrink: 0; }
.ra-file .rf-ic svg { width: 11px; height: 11px; }
.ra-file .rf-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ra-file .rf-size { color: var(--text-3); font-size: 10px; flex-shrink: 0; }
.ra-file .rf-del {
color: var(--text-3); font-size: 13px; line-height: 1;
padding: 0 7px 0 5px; opacity: 0; flex-shrink: 0;
}
.ra-file:hover .rf-del { opacity: 1; }
.ra-file .rf-del:hover { color: var(--danger); }
/* ── Detail pane: checkbox lives on the timeline rail ── */
.d-act-check { width: 17px; height: 17px; border-width: 1.5px; }
.d-act-check svg { width: 10px; height: 10px; }
.d-act-rail { padding-top: 1px; gap: 4px; }
.d-act-headline { display: flex; align-items: flex-start; gap: 7px; }
.d-act-headline .d-act-dot { margin-top: 8px; }
.d-act-item.done .d-act-edit { color: var(--text-3); text-decoration: line-through; }
.d-act-item.done .d-act-dot { opacity: 0.4; }
.d-act-donetag { color: var(--ok); font-weight: 600; }
html.dark .d-act-donetag { color: #4ec27e; }
.d-act-clip {
display: inline-flex; align-items: center; gap: 3px;
color: var(--text-3); font-size: 11px; font-weight: 600;
}
.d-act-clip svg { width: 11px; height: 11px; }
.d-act-clip:hover { color: var(--accent-text); text-decoration: underline; }
.d-act-meta { flex-wrap: wrap; }
/* ── "All files" roll-up: each row names the update it came from ── */
.d-file .f-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.d-file .f-name { flex: none; }
.d-file .f-parent {
font-size: 10.5px; color: var(--text-3);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-file .f-size { flex-shrink: 0; align-self: center; }
.d-files-empty { font-size: 12px; color: var(--text-3); font-style: italic; padding: 2px 2px 4px; }
/* The entry row now carries a checkbox and a paperclip as well as the memo,
type, timestamp and delete controls. Rather than squeezing the text field
down to nothing in a narrow center pane, the tool cluster wraps to its own
line and the text keeps a usable width. */
.ra-item { flex-wrap: wrap; row-gap: 0; }
.ra-text { flex: 1 1 150px; }
.ra-tools {
display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0;
}
.ra-item > .ra-text:focus + .ra-tools { opacity: 1; }
@media (max-width: 1400px) {
.ra-time { min-width: 0; }
}
/* ═══════════════════════════════════════════════════════════════
urIssue — mobile / Android (TWA) fixes.
Append this block to the end of dashboard/assets/style.css.
Nothing above is modified; every rule is scoped to a narrow
viewport or a coarse pointer, so the desktop layout is untouched.
═══════════════════════════════════════════════════════════════ */
/* ── 1. Activity rows clipped mid-word on narrow screens ──
.ra-text is an …
…
(only when files are attached)
…
(only when a memo is shown)
so each possible order is matched explicitly. A general sibling
combinator (.ra-item.done ~ .ra-memo) must NOT be used here — every
entry lives in the same .ra-entries parent, so it would grey out the
memos of every later update too, completed or not.
── Detail pane ──
There the same blocks sit INSIDE .d-act-item, so a descendant
selector is correct. */
.ra-item.done + .ra-memo,
.ra-item.done + .ra-files,
.ra-item.done + .ra-files + .ra-memo,
.d-act-item.done .ra-memo,
.d-act-item.done .ra-files {
opacity: 0.45;
transition: opacity 0.12s ease;
}
/* The accent rule down the side of a memo is what makes it read as
"live". Fade it and make it dashed so a done memo reads as archived. */
.ra-item.done + .ra-memo,
.ra-item.done + .ra-files + .ra-memo,
.d-act-item.done .ra-memo {
border-left-style: dashed;
border-left-color: var(--text-3);
}
/* Muted, not lost: hovering (or focusing the editor inside) brings a
completed memo back to full contrast so it stays readable and editable. */
.ra-item.done + .ra-memo:hover,
.ra-item.done + .ra-files:hover,
.ra-item.done + .ra-files + .ra-memo:hover,
.d-act-item.done .ra-memo:hover,
.d-act-item.done .ra-files:hover,
.ra-item.done + .ra-memo:focus-within,
.ra-item.done + .ra-files + .ra-memo:focus-within,
.d-act-item.done .ra-memo:focus-within {
opacity: 1;
}
/* Never dim a memo that is actively being edited. */
.ra-memo:has(.memo-editor),
.d-act-item.done .ra-memo:has(.memo-editor) {
opacity: 1 !important;
border-left-style: solid;
border-left-color: var(--accent);
}
/* Touch devices have no hover, so keep completed memos a little more
legible there rather than relying on a hover that never comes. */
@media (hover: none), (pointer: coarse) {
.ra-item.done + .ra-memo,
.ra-item.done + .ra-files,
.ra-item.done + .ra-files + .ra-memo,
.d-act-item.done .ra-memo,
.d-act-item.done .ra-files {
opacity: 0.6;
}
}
/* ═══════════════════════════════════════════════════════════════
Calendar — unscheduled open issues.
An issue with no planned day and no due date has no cell to live
in, so it used to be invisible on the calendar entirely. Open ones
now fall back to their created date, drawn hollow and dashed so
they never read as real scheduled work. Drag one onto a day to
actually plan it.
═══════════════════════════════════════════════════════════════ */
.cal-chip.created {
background: transparent;
color: var(--text-3);
border-left: 3px dashed var(--text-3);
font-style: italic;
}
.cal-chip.created:hover { color: var(--text-2); border-left-color: var(--text-2); }
.cal-dot.created {
background: transparent;
border: 1.5px dashed var(--text-3);
}
/* ═══════════════════════════════════════════════════════════════
Calendar — tracking updates.
Log entries carry a real timestamp, so they show as time-stamped
chips tinted by entry type. Not draggable: occurred_at records
when something happened, it isn't a plan you can move.
═══════════════════════════════════════════════════════════════ */
.cal-acts-btn {
font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px;
border: 1px solid var(--line); background: transparent; color: var(--text-3);
cursor: pointer;
}
.cal-acts-btn:hover { color: var(--text-2); border-color: var(--text-3); }
.cal-acts-btn.on { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.cal-chip.act {
background: transparent; cursor: pointer;
border-left: 3px solid var(--accent);
color: var(--text-2);
}
.cal-chip.act .cc-t { color: var(--text-3); margin-right: 5px; font-variant-numeric: tabular-nums; }
.cal-chip.act.t-progress { border-left-color: var(--ok); }
.cal-chip.act.t-decision { border-left-color: var(--warn); }
.cal-chip.act.t-blocker { border-left-color: var(--danger); background: rgba(209,52,56,0.07); }
.cal-chip.act.done { opacity: 0.5; text-decoration: none; }
.cal-chip.act.done .cc-t { text-decoration: line-through; }
.cal-chip.act:hover { background: var(--bg-hover); color: var(--text); }
.cal-dot.act { background: transparent; border: 1.5px solid var(--accent); }
/* Day popover: the updates logged on that day, under the issues. */
.dp-acts { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.dp-acts-h {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--text-3); padding: 2px 8px 4px;
}
.dp-act {
display: flex; align-items: baseline; gap: 7px;
padding: 4px 8px; font-size: 12px; border-radius: 6px; cursor: pointer;
}
.dp-act:hover { background: var(--bg-hover); }
.dp-act.done { opacity: 0.5; }
.dp-act.done .dp-act-sum { text-decoration: line-through; }
.dp-act-time { color: var(--text-3); font-size: 10.5px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.dp-act-sum { color: var(--text); flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-act-issue { color: var(--text-3); font-size: 10.5px; flex-shrink: 0; max-width: 38%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A month cell can be as narrow as ~75px when both side panes are open, where
a timestamp truncates to "3:..." and tells you nothing. Drop it below a
usable width and let the summary have the room; the full time is still in
the chip's tooltip and in the day popover. Container query, not a media
query, because cell width depends on the resizable panes, not the window. */
.cal-cell { container-type: inline-size; }
@container (max-width: 115px) {
.cal-chip.act .cc-t { display: none; }
}